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:
<header>
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.
<nav>
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.
<main>
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.
<article>
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.
<section>
The section element is used to define a section of logically
connected content. A webpage may contain several of these sections.
<aside>
The aside element is used to describe additional information
or, in some cases, a sidebar.
<footer>
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.
