Most of us would have heard that HTML 5 is in the works. It can be expected that almost all new browsers (some of the browsers already do) will now start supporting HTML5. What does it mean for developers and architects? This post will take a look at HTML 5 and some of the new elements in HTML 5. Detailed insights into the working of individual elements is out of scope for this particular post but I have provided links to references wherever necessary
1. Standards: One of the biggest changes in HTML 5 is that it is no longer based upon SGML. Though this does not impact developers or the architect community directly, it is good to know this because the HTML document no longer needs a DTD to render. So the !DOCTYPE element is now redundant. However, this element now performs a different function. It actually tells the browser if the document has to comply to standards or not. You can do this by setting the DOCTYPE to either of the three allowed modes; quirks mode, limited quirks mode and no quirks mode.
2. New Elements: HTML 5 has introduced a lot of new HTML elements. The new elements fall into one (sometimes multiple) of the below categories
- Sectioning – Sectioning can internally be divided into root and content. Root is a type of element that can have children under it. One of the new sectioning root element in HTML 5 is <figure>. <detail> is another sectioning root element that is new on the block. The <detail> element lets you hide details unless the user wants to view them explicitly. For example, you are showing only the name of the user and you want to show the details only if the user clicks on a button or a link. The sectioning content category contains new elements like <nav>, <article> and <section>. While <nav> identifies sections intended for navigation (similar to a sitemap), <section> and <article> isolate elements in a HTML Page. <article>, for example, is intended for something like a blog entry which can be distributed independently.
- Heading – The heading category introduces <header> and <hgroup> tags. While there were already 6 header tags <h1> to <h6>, you can now wrap them inside the newly introduced <header> and <hgroup> tags. While the <header> tag identifies something as a header section, the <hgroup> tag can be used to categorise the 6 header tags as subsections.
- Embedded Content – In HTML 4, we used the object tag to display video or play audio. In HTML 5, we have separate tags to embed audio or video in the page. <video> and <audio> tags do exactly this. Apart from these tags, there is also the <embed> tag that helps you embed any other plug in. One of the more important embedded elements is also the <canvas> that helps you display graphics or dynamic images.
- Phrasing Content – These are the HTML elements that can include normal text mark up. <span> is an example of phrasing content. <mark> is a new phrasing element in HTML 5. This is like the highlight text is MS Word. Using mark you can highlight text in a document for example, search results. <progress> element helps you show progress bar. There are other Phrasing elements like <time> which help you show timestamps on your page. There is also the <datalist> element which now helps you create re-usable list options in your page.
- Menus and Commands – Though both the <menu> element and <command> element are phrasing content, I have called them out separately because of the significant differences from the previous version. <menu> element, which was deprecated in HTML 4 has been reintroduced in HTML 5. The menu element can now be enhanced using the <command> element. The <command> element allows the user to execute commands specified as a part of the element.
3. New Attributes: HTML 5 has also introduced a whole set of new attributes to existing elements. One of the most significant additions is to our favorite <input> tag. The type attribute of the <input> tag now has some new additions. Some of these are search, month, date etc. See here for the complete list of new values.
- The <area> element now has a host of new attributes. I am listing some of them below
- ping – this attribute contains a list of space separated URLs that are pinged when the URL is clicked. This is useful for content targeting and can be turned on or off by the user.
- media – This attribute is similar to the media attribute in the link element. This is again used to specify the type of media a link targets
- hreflang and rel – Again, these do the same function as in a link element.
- target – this attribute which was deprecated has been re-introduced.
- There is now an autofocus attribute to elements like <input> and <select>. This will declaratively set the focus on the control when the page loads. This is something the user can turn off if he does not want to use.
- There is a required attribute to the <input> element which validates mandatory fields.
- A new form attribute for text element inputs help the developer specify which form the specific element belongs to. This way, it is not necessary that all the elements lie within a form. They can be placed outside the form but still be a part of it in the HTML DOM.
- You can now disable validation of a form by using the novalidate attribute in the form element.
- The individual input elements now have attributes like formaction, formtarget which overrides the value set in the form tag. This way, a single page can submit to multiple targets declaratively
- You can now write scoped style sheets by using the scoped attribute of the style element. for example, if you want the style to be applied only to a specific scope like one flow section, you can mention that by setting the scoped attribute to true.
- Developers also have more control over when a particular script is being executed by using the async and the defer attributes in the script element.
- The iframe element has a set of new attributes that controls how the content within the iframe behave. Using the sandbox attribute, for example, you can now restrict users from clicking links or executing active content within an iframe. There is now also a srcdoc attribute using which you can specify the source of an iframe to be a document with a valid DOCTYPE
- Some HTML attributes have now been upgraded to global attributes which means they will now be available across all the elements. Examples of such attributes are class, id, lang, dir etc. There are also new global attributes and event handlers in the list.
- The draggable attribute is more powerful and can be used in conjunction with the new drag & drop APIs in HTML 5
4. Absent Elements: Some of the defunct elements are frame, frameset, acronym, applet, font
I will conclude this particular post here. Please be advised that HTML 5 is still being developed and some of the above may change. You can always find the latest reference to HTML 5 specifications here. One of the things that has not been covered as part of this post are the HTML APIs and the changes in these APIs. Hopefully I will come out with another post that concentrates on the HTML 5 APIs. Till then ciao and happy coding!!!
