It’s better to start web designing with HTML5 now that more and more usability and layout features will be supporting it. Recently YouTube started offering streaming videos in HTML5, eliminating the need to install Flash.
What is HTML5
It’s of course an extension of the current HTML/XHTML markup. It provides you more semantically rich and interactive elements, eliminates some tags and attributes, and introduces new tags and attributes to meet current web design and development needs. It proactively helps you create your layout instead of you having to use random web elements.
HTML5 layout example
A small HTML5 example. In conventional web designing you create a layout in the following manner:
And we often design these elements using the following syntax:
As you can see, it’s totally up to us how we define different divs and place them, and the browser has no way of knowing what sort of information lies where. HTML5 changes this. The same layout can be created using the following syntax:
Now, through these new HTML5 tags, the browser clearly knows what area contains what information: it clearly knows what sections are your header, footer, etc. As you can see, it eliminates the unnecessary usage of different divs for different page areas.
Similarly, when it comes to designing web forms there are some really great enhancements. These are a few form attributes and types introduced in HTML5:
- …and so on
The list is huge, but these actually hold meaning for HTML5. Suppose you want people to fill in the name field that should only hold alphabets and the previously entered names shouldn’t show in the drop-down option:
<input type=”text” name=”yourname” id=”yourname” placeholder=”Enter Name” autofocus autocomplete=”off” required pattern=”[A-Z][a-z]” />
Another interesting change is the way you can create drop-down lists. This will make it very easy to create an autocomplete text box. You can simply define the list in the following manner:
<input type=”text” name=”yourname” id=”yourname” placeholder=”Enter Name” list=”name_list” />
<option value=”Andrews” label=”Andrews”>
<option value=”Danny” label=”Danny”>
<option value=”Lakshmi” label=”Lakshmi”>
<option value=”Sarah” label=”Sarah”>
Does your browser support HTML5
Safari is the most HTML5-friendly browser so far, although other browsers, especially mobile browsers, are incorporating HTML5 features fast.