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.
In this tutorial you will learn how to use new semantic HTML5 tags in a web page creation and how to make its content more informative for machines.
Let's first consider a basic HTML page template, written in non-semantic HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<html> <head> <title>Example</title> </head> <body> <div id="header"> Here goes logo, navigation, etc. </div> <div id="main-content"> A place for website's main content </div> <div id="footer"> Footer information, links, etc. </div> </body> </html>
Now consider the example of semantic HTML shown below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<html> <head> <title>Example</title> </head> <body> <header> Here goes logo, navigation, etc. </header> <main> A place for website's main content </main> <footer> Footer information, links, etc. </footer> </body> </html>
The main difference: we have replaced div tags with 3 new tags: header, main and footer.
footer tags are semantic because they are used to represent different sections on a 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
section. These tags simplify the structure of
main, making it look like:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
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 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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
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 an 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 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 tutorial.
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 2 3 4 5 6 7 8 9 10
<aside> <p>Viewed by 1503 people</p> <p>Author: John Smith</p> <figure> <img src="John Doe.png" alt="John Doe"/> <img src="Maggie Smith.png" alt="Maggie Smith"/> <img src="Tom Hardy.png" alt="Tom Hardy"/> <figcaption>People who liked the article</figcaption> </figure> </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 2 3 4 5 6 7 8 9 10 11
<header> <figure> <img src="logo.png" alt="logo"/> </figure> <nav> <a href="index.html">Home</a> <a href="services.html">Services</a> <a href="contact.html">Contact</a> <a href="about.html">About Us</a> </nav> </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 provide additional information about content of a web page and help 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 2 3 4
<aside> <p>Viewed by 1503 people</p> <p>Author: John Smith, Senior Software Developer at Google, Mountain View, California</p> </aside>
With microdata included, the HTML code of the
aside section will be:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<aside> <p>Viewed by 1503 people</p> <p itemscope itemtype="http://schema.org/Person"> Author: <span itemprop="name">John Smith</span>, <span itemprop="jobTitle">Senior Software Developer</span> at <span itemprop="worksFor" itemscope itemtype="https://schema.org/Corporation"> <span itemtype="name">Google</span>, </span> <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="addressLocality">Mountain View</span>, <span itemprop="addressRegion">California</span> </span> </p> </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:
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 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
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 2 3
<div itemscope itemtype="https://schema.org/WPAdBlock"> <a href="site.com" itemprop="url"><img src="banner.gif" alt="banner" itemprop="image" /></a> </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.
For more information about this topic, you can read these very useful articles:
This tutorial 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 tutorial 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.
Thank you very much for reading this tutorial. Feel free to leave comments and questions below!
Test your skills. Learn something new. Get help. Repeat.Start a FREE 10-day trial