There are over a billion websites on the Internet. Many of them are made a long time ago and have not been updated with HTML features. As such, search engines move past these websites, and viewers find these websites difficult to read.
One of the most important features of HTML5 is its semantics. Semantic HTML refers to syntax that makes the HTML more comprehensible by better defining the different sections and layout of web pages. It makes web pages more informative and adaptable, allowing browsers and search engines to better interpret content. For example, instead of using div id="header"
you can use a header
tag.
In this guide, you will learn how to use new semantic HTML5 tags in a web page creation and how to make content more informative for machines.
Let's first consider a basic HTML page template, written in non-semantic HTML:
1<html>
2 <head>
3 <title>Example</title>
4 </head>
5 <body>
6 <div id="header">
7 Here goes logo, navigation, etc.
8 </div>
9 <div id="main-content">
10 A place for website's main content
11 </div>
12 <div id="footer">
13 Footer information, links, etc.
14 </div>
15 </body>
16</html>
Now consider the example of semantic HTML shown below:
1<html>
2 <head>
3 <title>Example</title>
4 </head>
5 <body>
6 <header>
7 Here goes logo, navigation, etc.
8 </header>
9 <main>
10 A place for website's main content
11 </main>
12 <footer>
13 Footer information, links, etc.
14 </footer>
15 </body>
16</html>
The main difference: we have replaced div tags with 3 new tags: header, main, and footer. header
, main
, and footer
tags are semantic because they are used to represent different sections on an HTML page. These are more descriptive than div tags which make partitioning webpages into tangible sections difficult.
To add some content into the main
section, we can use new HTML5 tags, such as article
and section
. These tags simplify the structure of main
, making it look like:
1<main>
2 <article>
3 <h1>JavaScript Basics</h1>
4 <p>JavaScript is a rich and expressive language...</p>
5 <section>
6 <h2>Syntax Basics</h2>
7 <p>Understanding statements, variable naming, whitespace...</p>
8 </section>
9 <section>
10 <h2>Operators</h2>
11 <p>Operators allow you to manipulate values...</p>
12 </section>
13 <section>
14 <h2>Conditional Code</h2>
15 <p>Sometimes you only want to run a block of code under certain conditions...</p>
16 </section>
17 </article>
18</main>
The article
tag is used for wrapping an autonomous content on a page. A content is autonomous if it can be removed from the page and put on some another page. The article
tag can contain several section
tags inside it, like in our example. An article
is actually an autonomous section
.
The section
tag is similar to the div
tag, but it is more meaningful since it wraps logical groups of related content (e.g. a chapter of an article). The section
tag can be also used to wrap the article itself, but we have the article
tag for that purpose.
An additional content, unimportant for understanding an article, but related to the article, can be inserted into the aside
section. For instance, it could be information about how many people read the article, who is the author of the article, and so on. In that case, the HTML code of the article would take the following structure:
1<main>
2 <article>
3 <h1>JavaScript Basics</h1>
4 <p>JavaScript is a rich and expressive language...</p>
5 <section>
6 <h2>Syntax Basics</h2>
7 <p>Understanding statements, variable naming, whitespace...</p>
8 </section>
9 <section>
10 <h2>Operators</h2>
11 <p>Operators allow you to manipulate values...</p>
12 </section>
13 <section>
14 <h2>Conditional Code</h2>
15 <p>Sometimes you only want to run a block of code under certain conditions...</p>
16 </section>
17 <aside>
18 <p>Viewed by 1503 people</p>
19 <p>Author: John Smith</p>
20 </aside>
21 </article>
22</main>
As seen above, the aside
allows search engines to quickly pull information like author, views, and date. This tag can be also used to enclose additional content that is related to a whole page, not just to a particular article. For example, aside
can wrap a sidebar, ad, footnote, and so on.
Figure elements on a web page can be enclosed with the figure
and figcaption
tags.
The figure
tag is used to mark up photos, code blocks, diagrams, charts, illustrations, and other graphic content. Generally, this tag encloses content that can be moved away into an appendix. Only images related to the content of a page should be within the figure
tag (e.g. a logo image). Therefore, images like banner ads shouldn't be inside that tag. However, there is a way to add semantics to a banner ad which we will cover that in the Microdata section of this guide.
The figcaption
tag represents a caption or legend for a figure. It's optional and can be omitted. Only one figcaption
tag can be nested into the figure
tag. Even if a figure
contains multiple images, there can be only one figcaption
for all of them.
For instance, photos of people who liked the article could be enclosed with the figure
tag. Since that information is not crucial to webpage functionality, it can be nested into the aside
section of the article.
1<aside>
2 <p>Viewed by 1503 people</p>
3 <p>Author: John Smith</p>
4 <figure>
5 <img src="John Doe.png" alt="John Doe"/>
6 <img src="Maggie Smith.png" alt="Maggie Smith"/>
7 <img src="Tom Hardy.png" alt="Tom Hardy"/>
8 <figcaption>People who liked the article</figcaption>
9 </figure>
10</aside>
The logo in the header
section should be enclosed with the figure
tag, as well, so our header
section will finally have the following code:
1<header>
2 <figure>
3 <img src="logo.png" alt="logo"/>
4 </figure>
5 <nav>
6 <a href="index.html">Home</a>
7 <a href="services.html">Services</a>
8 <a href="contact.html">Contact</a>
9 <a href="about.html">About Us</a>
10 </nav>
11</header>
Notice how the partitioning in the page makes the code more comprehensible and possibly improves browser and search engine content parsing.
If you are unsure which semantic tag to use in a particular case, you can always follow this great flowchart made by authors of HTML5Doctor.
Microdata provides additional information about the content of a web page and helps search engines and screen readers operate on the site. Microdata can be added as attributes to any HTML tag. For instance, let's add some data about the author of the article in our example. The aside
section of the article will have the following code:
1<aside>
2 <p>Viewed by 1503 people</p>
3 <p>Author: John Smith, Senior Software Developer at Google, Mountain View, California</p>
4</aside>
With microdata included, the HTML code of the aside
section will be:
1<aside>
2 <p>Viewed by 1503 people</p>
3 <p itemscope itemtype="http://schema.org/Person">
4 Author:
5 <span itemprop="name">John Smith</span>,
6 <span itemprop="jobTitle">Senior Software Developer</span>
7 at
8 <span itemprop="worksFor" itemscope itemtype="https://schema.org/Corporation">
9 <span itemtype="name">Google</span>,
10 </span>
11 <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
12 <span itemprop="addressLocality">Mountain View</span>,
13 <span itemprop="addressRegion">California</span>
14 </span>
15 </p>
16</aside>
There is obviously much more data in the code above than in the previous code, but there is also much more information for machines. As you could notice, we used the following microdata attributes: itemscope
, itemtype
and itemprop
. So, what do all these attributes mean?
itemscope
indicates a new group of microdata. A group of microdata is called item
. Items contain pairs of properties and values. The type of an item is specified by itemtype
. This is actually a URL to a web page that contains information about the item. On that page, we can see all the properties the item could have.
We usually use only several properties to describe an item and we define these using the itemprop
attribute. A value of a property can be a new item
(like address
in our example).
We mentioned before in this tutorial that a banner can be described with microdata. So, the HTML code for that should look like this:
1<div itemscope itemtype="https://schema.org/WPAdBlock">
2 <a href="site.com" itemprop="url"><img src="banner.gif" alt="banner" itemprop="image" /></a>
3</div>
There is a very useful tool for generating microdata called the Microdata generator. It can save time and teach you how to use microdata properly for various items.
According to this table, the HTML5 semantic tags are supported well in the latest browsers versions. For some older versions of the Internet Explorer, Firefox and Safari we can use the HTML5 Shiv or Modernizr (which includes the HTML5 Shiv).
For more information about this topic, you can read these very useful articles:
This guide covered several advantages of using semantic HTML. We created a semantic HTML layout and used microdata to add more information to the content of the web page.
Hopefully, this guide gave you an understanding of how semantic HTML can improve a webpage and search engines interaction. And with more browsers taking on HTML5, semantic tags will inevitably become more common, so mastering them now could hold reward in the future.