10 HTML5 tags you should know

HTML5 is equipped with new tags and attributes which gives you more power and efficiency for web development which is easily understood by search engines specially. It gives you some out of the box functionality which was not provided in earlier versions and you had to write complex JavaScript or some browser plugins were required. Here is a list of 10 HTML5 tags you should know.

1. <video> and <audio>

In earlier versions of HTML, browser plugins were required to play multimedia items. But now HTML5 supports new video and audio controls. The browser can display these controls and content can be manipulated using JavaScript. Also you can specify multiple sources for the content enabling the browser to play multimedia item regardless of the codec.

2. <input> type attributes

The <input> element is introduced with new values for the ‘type’ attribute and browser can render the respective type of control onto the page. Let’s say if you set the type to ‘datetime’, browser can show the calendar control to select the date and time. Earlier JavaScript was required to display and deal with such kind of control. Lots of type attributes are provided which will remove the JavaScript work.

3. <canvas>

The <canvas> tag gives your page a bitmapped surface to work on; it is similar to GDI+ or .NET Image object. Although layers should be replicated using multiple canvas objects on top of each other. But it’s a good way to build graphs and charts which was a weak point in the earlier versions of HTML.

4. <header> and <footer>

These tags are new semantic tags. These two tags render a div to display the important things related to your page. But they give you a long term benefits in terms of you search engine optimization efforts. So the search engines will be able to differentiate between normal contents and important things which are not actual contents.

5. <article> and <section>

These two tags are also semantic tags which will enhance your site’s search engine visibility. You can compose articles with multiple sections as well as a section can have multiple articles. Article is a block of contents. If we consider a blog, the main page will have a listing section for all the posts and each post will be an article with a section for the actual post and other section for comments.

6. <output>

It’s a unique tag for which content can be generated dynamically using JavaScript. This tag has a ‘value’ attribute which can be manipulated using DOM with JavaScript to change the value attribute in order to display the output on screen.

7. <details>

In most of the scenarios we need to display the expand/collapse content for which we needed the AJAX controls to do so but it required the installation of AJAX framework. Also we were able to achieve this functionality using JavaScript or server side coding. But <details> tag makes it much easier to achieve this functionality. It makes a block which expands and collapses the contents on click of the header.

8. <figure> and <figcaption>

<figure> is the container for image content and <figcaption> (the inner tag for <figure> tag) provides a caption for the contents of the <figure> tag. You may have multiple images within <figure> tag showing sales for the last four years and a <figcaption> tag showing text ‘Sales growth, 2009 – 2012’

9. <progress>and <meter>

These two tags are very much similar in terms of semantic meanings and they may look alike on the browser in many cases. We can use the <progress> tag to measure the completeness of a task. We can set the indeterminate mode for this tag in order to measure something unknown e.g. searching a DB. The <meter> tag is for measurement of values such as quantity, thermometer etc.

10. <datalist>

It looks like a drop down list where system provides a list of suggestions but users are free to input their values as well. This tag can be used in many ways e.g. based on user’s search history, display a search box with pre-populated items. In order to achieve this functionality currently without this tag requires a lot of JavaScript. But this HTML5 tag gives you a built in functionality to do so.