Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Latest HTML5 tags explained

Thursday, August 11th, 2016 by Servage

HTML5_Logo_512HTML5 is a change towards a more semantic web which is a phrase used to describe a more machine-readable web. But HTML5 is not only that. It also includes new concrete features for web designers to take advantage of. One of these features is a batch of new HTML5 tags. Let’s go through some of the latest and most commonly used HTML5 tags so you can start using them in your own designs.

<main>

The <main> tag is used to identify the main content of a web page. For example, the “About Us” section of a corporate website, the <div> that has a description of the company could be inside a <main> tag. This tag is commonly used by various readers such as the Reader View feature in Firefox that aims to show only the most meaningful content to the user. Note that there should only be one <main> tag per page.

<aside>

This tag is used for content that is aside or “next to” the main content of a web page. In most cases this means sidebars.

<header> and <footer>

These tags are quite self-explanatory. They are used for the header and footer sections of websites. Instead of using something along the lines of <div class=”header”>, you should use <header> to be HTML5 compliant with your designs.

<nav>

The <nav> tag is a container for primary navigation links. This means not all collections of links should be inside <nav> tags. Instead, a navigation bar is a good place to use the <nav> tag.

<article>

This tag is used to contain an article of some type. Examples of what can be wrapped in <article> tags are blog posts, user comments, forum posts and news articles. The main rule for the <article> tag is that it forms an independent section on a website. It is not dependent on or directly related to any other content on the same page.

<figure>

Various figures, such as photos, diagrams and other images, can be wrapped in a <figure> tag. By definition these figures are additional content that supplement text on a web page. A good reason for using the <figure> tag is that it will be easy to write captions for figures using another tag called <figcaption>.

<figcaption>

If you use the <figure> tag and have an image inside it, you may also want to use the <figcaption> tag. It allows you to write a caption for an image and have both the image and caption inside a <figure> container. If you group images and captions together like this, you can easily move them together without having to worry about positioning the caption correctly.

These were a few brief descriptions for you to get introduced to some of the new elements in HTML5. It makes good sense to move towards a more semantic web by using them in your structure.

Latest HTML5 tags explained, 4.5 out of 5 based on 4 ratings
Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.