Useful HTML5 Features: Semantic Tags

In this part of the useful HTML5 features series we are going to present you the new semantic tags that were introduced with HTML5 (most of them). We have provided a simple demo of a page that uses the HTML5 semantic tags.

The first one is the <header> tag. Its name seems simple enough but it is important to know that it can be used not only for the main header of the page. The <header> tag can also be used to indicate headers of different parts of your page such as the header of an independent article located in your website.

You usually insert into a header one or more headings (<h1> to <h6>) , some sort of a logo or information about the author of the post/article/document that will be discussed below it.

We include another new element which is the <nav> – it is best used for the primary navigation(s) of the page. It would not be a good idea to enclose every distant anchor on your webpage with the <nav> tag.

Next, we have the <aside> tag which indicates sidebars or content that is related to the DOM location where it is being placed but it is not essential to it. For example, if your readers are reading an article on a page, you can use it to show the user additional information about the article such as references, highlights from it, interesting facts and even to show the user related articles.

You can also see the use of <figure> . You should use it for code snippets, images, diagrams, charts and other visual content that is related to the place where it is placed but in the same time the enclosing content should still make sense without that figure. Inside the <figure> tag you can nest other tags such as <img> and you can add a caption which explains the figure through the <figcaption> element.

The <section tags indicates a generic section in the document. and it should not be used merely for styling purposes as it affects the document’s outline. The specification pinpoints that the theme of the section should be specified by inserting one or more headings in the section. An important difference between <section> and<article> is that the <article> tag should be a self-contained composition so that when you copy the article to a different place – it would still make sense and will not require the rest of the website’s contents. Like the tag’s name suggests, you could use <article> for blog posts, newspaper articles, comments, widgets and many more.

The <footer> could be used not only at the page’s end but it can be used throughout different sections and articles. It typically contains information such as information about the author, copyright notices, contact information, a map of the site, related information, a way to go back to the top among other possibilities.

The last tag we are going to discuss is <time> – you can add an attribute called datetime to it. This attribute supports a date and a time in the following format: YYYY-MM-DDThh:mm:ss. The element and attribute are machine-readable and can pinpoint times when an article was created, updated or when an event is going to occur. Here is an example of how you might use it: <time datetime="2015-07-14"> 14/7/2015 </time>