Semantic Tags in HTML 5
In December 2012, W3C has published the complete definition of HTML 5 specification. Already most of the browser vendors have implemented support for HTML 5 and you can expect future versions of browsers will have complete support of the specification. In the introduction of HTML 5, web developers faced some challenges to support their markup in non-HTML 5 browsers. This added some cost to web development. Now web developers can expect better browser support and all the browser vendors already announced their commitment to this standard.
In this article I am going to mention about the semantic tags introduced in HTML 5. The introduction of semantic tags is to make your markup meaningful. When an HTML document is presented to people, they are seeing how the document is presented in the browser. So for people, Markup is not that important. So definitely adding meaning for markup doesn’t meant for those who are looking for the presentation of the document.
But there are other couple of types of users is there who are interested in your markup. The first one, is the search engine crawlers. They need to identify what is the content of the indexed page and what is the related content etc. Another type of users is those who integrate the markup in their applications (can be a web application that consolidate content from various sites or standalone applications that aggregates data from various web). They will be interested in meaningful content in markup.
Prior to HTML 5, there was no single mechanism that allows this. Web developers used to give meaningful id/class attribute to the markup. This helped them grouping the content across their applications but the terminology used differs from developer to developer.
For e.g. I used the following markup for my titles across my applications
<div id=”Title”>My title content</div>
I saw lots of developers using the terms such as header, titles or their own names. This makes it impossible for the crawlers/indexers to identify the title of the page. So making some standard semantic tags will solve this. With HTML 5 W3C decided to give a common naming definitions for markup, those are named as sematic tags in HTML 5. I am going to list most of them as a tabular format for developers to have a quick look at them. (I have added the tags with a brief explanation by W3C and corresponding url and some helpful tips.)
| Tag | Brief explanation |
| article | The article element represents a section of content that forms an independent part of a document or site; for example, a magazine or newspaper article, or a blog entry. Refer http://www.w3.org/TR/html5/sections.html#the-article-element An article refers to the main content of a page. An article can have header, footer and even contains multiple article sub elements. E.g. a blog post, a news entry etc. |
| section | The section element represents a generic section of a document or application. Refer http://www.w3.org/TR/html5/sections.html#the-section-element Basically section element is meant for grouping content. For e.g. if you have multiple articles related to a subject in a page, it will give more meaning by including them in a section element. Though section element definition looks similar to article, it is recommended to use article element to syndicate the content. If you use section element, it will be easy to extract the document outline from the section elements. |
| nav | The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Refer: http://www.w3.org/TR/html5/sections.html#the-nav-element If you have navigation elements in your page, such as menus or quick links, it is recommended to place them inside the nav element. |
| aside | The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Refer: http://www.w3.org/TR/html5/sections.html#the-aside-element When you use aside inside an article, aside content to be related to the article and when used outside, the content to be related to the site. A typical use of aside is to place related content for an article such as sidebar content. |
| hgroup | The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines. Refer: http://www.w3.org/TR/html5/sections.html#the-hgroup-element hgroup element is used to group multiple head tags (h1 – h6). hgroup should only contain h1 – h6 as child elements. It is a good idea to group multiple headings such as main heading, sub heading etc. with a hgroup element |
| header | The header element represents a group of introductory or navigational aids. Refer: http://www.w3.org/TR/html5/sections.html#the-header-element The header element should be used to wrap the heading content such as table of contents, hgroup, heading tags etc. Unlike hgroup (that supports only h1-h6 as childs) header can contains other HTML elements as children elements |
| Footer | The footer element represents footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. Refer: http://www.w3.org/TR/html5/sections.html#the-footer-element |
| address | The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole. Refer: http://www.w3.org/TR/html5/sections.html#the-address-element Be noted that address element is not created for postal addresses. You can place the address information inside body to specify the contact information for the page, and place inside article to specify the contact information for the particular article. |
As a web developer you should ensure that your markup is following the HTML 5 recommendations. You can expect search engines to implement algorithms based on HTML 5 to index the content. Making the site in HTML 5 ensures your content can be indexed by search engines properly. In addition to this, you can consider every web page as a structured content that can be syndicated to various applications. Adding sematic tags to HTML means you have self-described document available on the web that can be acted as a database for other applications that utilize your content.