Common HTML mistakes to be Avoided Always

Even after years of HTML experience there are moments when we see unnecessary complications especially while writing web applications. This extra complexity results from habit of opting for complex markup and JavaScript to bring the effect of same standard

Field Labels

In order to create a label associated with a form field the general approach in most cases is by using an id attribute:

<label for=”first_name”>First name:</label>
<input name=”first_name” id=”first_name”>

Though IDs are supposed to be avoided whenever possible. I would recommend you  to implement a better approach as following:

<label>
First name:
<input name=”first_name”>
</label>

Above code  associates the field with the label and if you want to separate the label text from the field simply wrap the text into another element.

Form Submission (Using Enter Key)
The form you require to submit when a user hits the enter key can be done as below:

if(e && e.keyCode == 13) {
form.submit();
}

Building a correct form won’t require JavaScript to achieve this task. Now developers normally don’t prefer using <form> tag.

Form validation
It is obvious not to rely on  client-side form validation as far as Security and degradation is concerned. I personally came across many such code where developers removed submit button from form and further replaced it with normal regular button that is related to its click event for form validation and submission. It makes form quite useless from user point of view by disabling JavaScript as the submit button is missing. As far as validation regarding JavaScript is concerned it is required to ensure submit button is related to event of the form.

In case of validation failure use preventDefault method on event object and form won’t be submitted . Let us see an example

var validateForm = function(e) {
if(field.value.length < 1) {

e.preventDefault();
alert(“Validation error message”);
 }
};
myForm.addEventListener(“submit”, validateForm, false);

It is recommended to use native HTML form validation for implementation of  client-side validation without any  JavaScript.

Option groups
The <optgroup> element is one that you don’t see used all that often. This element allows you to group the options in a <select> element. This is great for creating a hierarchical drop-down list. Often times, this solution would be perfectly acceptable, but instead we rush to implement multiple drop-down lists in a dependency chain — e.g. when you select from the first list, an Ajax request fetches the options for the next list from the server.

Since the <optgroup> element  not self clickable though act as a grouping label. The <option> elements present inside will indicate the hierarchy. Below code  showcase  use of <optgroup> element:

<select>
<optgroup label=”Fruit”>

<option>Apple</option>
<option>Banana</option>
<option>Orange</option>
</optgroup>
<optgroup label=”Vegetables”>
<option>Broccoli</option>
<option>Carrot</option>
<option>Parsnip</option>
</optgroup>
</select>

This can also be used  on multiple selection drop-down lists.

Scrolling an element
In order to enable user to navigate to different part of web page on clicking the link you can use jQuery to scroll to a particular element by using implementing the below code:

$(“#button”).click(function() {
 $(‘html, body’).animate({
scrollTop: $(“#elementtoScrollToID”).offset().top
 }, 2000);
});

Now in order to apply jQuery to this link for user with enabled JavaScript consider the following code.

<!– Link –!>
<a href=”#content”>Scroll to content</a>
<!– Named anchor –!>
<a name=”content”>…</a>

Table sizing

I have came across multiple such table markup which are intended towards the flexibly sizing model for columns but least effective. I would recommend to make sure your table width is 100% by consuming all the horizontal space available inside the parent.

Not providing column width will allow browser to size your table on behalf of the content. Even if you let one column with variable so that the its width will be flexible based upon parent element size. Specific percentage value for all columns adding upto 100% can be done if you desire to specify percentage width or simply leave at least two or more columns without any width to have a flexible width based on remaining space available horizontally.

<colgroup> and <col> elements can be used to define the structure of column in table. Implement CSS on <col> for defining the column width than on  <th> and <td> elements present in  your table. A majority of HTML table will follow this pattern seamlessly.

Looking forward to respond to your queries and comments as far Common Mistakes in HTML coding is concerned. It seems that correct approach to common HTML problem is quite easy and will ensure lessen the unnecessary complication

About Singsys Pte. Ltd. Singsys is a solution provider that offer user friendly solution on cutting edge technologies to engage customers and boost your brand online results from a set of certified developers, designers who prefer optimized utilization of the available resources to align client’s idea with their skillset to reflect it into a Mobile application, Web application or an E-commerce solution

You may be interested in following:

1. HTML5 Basic Canvas Methods For Every Designer