PageResource.com - Web Development Tutorials

HTML5 List of Semantic Tags

With HTML4, if you are creating a blog or magazine with repeating content like articles, time stamps, figures and captions you have to specially designate existing tags, most commonly the <div> tag with specific “ids” or “class” names. HTML5 makes this process a lot easier by introducing several new semantic tags. Many of these tags like <header> and <footer> are frequently used layout elements.

Web designers can now use these new elements to create layouts without having to declare special ids and class names. We will see how to use several of these tags in an HTML5 layout tutorial.

Following is a list of these new semantic tags and their descriptions.

   
   
Tag Description
<article> For external content, like text from a news-article, blog, forum, or any other content from an external source
<aside> For content aside from the content it is placed in. The aside content should be related to the surrounding content
<details> For describing details about a document, or parts of a document
<summary> A caption, or summary, inside the details element
<figure> For grouping a section of stand-alone content, could be a video
<figcaption> The caption of the figure section
<footer> For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information
<header> For an introduction of a document or section, could include navigation
<hgroup> For a section of headings, using <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings
<mark> For text that should be highlighted
<meter> For a measurement, used only if the maximum and minimum values are known
<nav> For a section of navigation
<progress> The state of a work in progress
<section> For a section in a document. Such as chapters, headers, footers, or any other sections of the document
<time> For defining a time or a date, or both

Leave a Reply


Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy