Jamie Balfour

Welcome to my personal website.

Find out more about me, my personal projects, reviews, courses and much more here.

Part 4.2HTML5 semantic elements

Part 4.2HTML5 semantic elements

HTML5 also introduces several semantic elements. These elements can be styled using CSS but their purpose is simply to act as semantic elements.

These elements help define the meaning of the HTML contained within them to the developer, browser and any crawler (such as Google) and help to distinguish parts of the webpage.

In this tutorial so far, elements such as <div> and <span> have been discussed. These elements are not semantic as they do not describe what they do.

Other elements discussed in this tutorial that provide a definition from their tag names include <p> and <table>. These elements clearly have a specific purpose, with the <p> tag designed to contain a paragraph of text whereas the <table> tag is designed to contain a table of information.

HTML5 introduces more of these and they should be used where possible. This website uses many semantic elements from the HTML5 standard.

Why bother?

Semantic elements don't just make it easier for the users of the website or for the crawlers from search engines, they also give the site a better ranking.

They also make the content much easier to develop and understand, much in the same way that comments do in programming languages.

The elements

There are several semantic elements in HTML going from the top of the page to the bottom:

The header element is used to define a header section of a document. This section usually contains things like the logo or icon for the website and a search bar. It is also common to see the navigation bar for the website within this section.

The nav element is defines a block of navigation based links, for example on this website the main menu bar at the top is wrapped within a nav element since it is a collection of links for the website.

It is important to note that not all links on the webpage should be wrapped in this element but only those used for navigation around the website. For example, the site links zone of this website does not reside within a nav element.

Another common place to find this element is around breadcrumbs on a webpage.


The main element is used to define the main content of the webpage. For example, on this website there is a sidebar and a main content section. The main content of each webpage on this website is within a main element.


The article element is used to define self-contained content. For example, each review on this website is contained within an article element since the content within the reviews is self-contained and independent of the content around it.

Self-contained or independent content can be seen as content that can viewed separately from the webpage and still make sense.


The section element is used to define a section of logically connected content. A webpage may contain several of these sections.


The aside element is used to describe additional information or, in some cases, a sidebar.

The footer element is used to define a footer section of a webpage. Normally, and by HTML5 rules, this contains the copyright information of the website as well as some contact information and site links.

Feedback 👍
Comments are sent via email to me.