You may be wondering how you can create a basic web page with HTML elements so that it makes sense semantically.
Specifically, this means that you can define the different logical parts of a web page with HTML tags. By the way, the semantic web isn’t just a fad, but helps search engines, for example, better allocate the sheer flood of data on the internet. Search engines such as Google even prefer semantic web pages and searches HTML pages for semantic content.
Let’s take as a simple example the term goal, whose meaning in hockey is different from that in business. The term gets its assignment and meaning only if you provide the relevant context. This is roughly how you can imagine the semantic web: you contextualize the content with code so that machines can also interpret and process it.
The first example is a classic HTML document that has no detailed structure:
...
<h1>My Blog</h1>
<p>A blog with yummy recipes ...</p>
<p>Navigation:
<a href="#">Blog</a> | <a href="#">Recipes</a> |
<a href="#">About me</a> | <a href="#">Legal Notes</a>
</p>
<h2>Old Posts</h2>
<ul>
<li><a href="#">Last Week</a></li>
<li><a href="#">Archive</a></li>
</ul>
<h2>Tasty homemade vanilla sauce</h2>
<p>Today I want to show you how ...</p>
<h3>Similar recipes</h3>
<ul>
<li><a href="#">Chocolate sauce made from cocoa</a></li>.
<li><a href="#">Custard Made Easy</a></li>
</ul>
<p>
<a href="#">Contact</a> | <a href="#">FAQs</a> |
<a href="#">About me</a> | <a href="#">Legal Notes</a>
</p>
...
There isn’t much to note about this example. The HTML code is valid and can be used like that. You can see some headings, unordered lists, navigation, and various paragraph texts. However, such code is rarely used because it’s nearly unstructured and is relatively poorly suited for styling or laying out via CSS.
The first example didn’t contain any element to tell you where the different sections of content were located. For this reason, we’ll now use the div element to divide the content into separate sections. Take a look at the same example again now, but this time it contains the div elements:
...
<div>
<h1>My Blog</h1>
<p>A blog with yummy recipes ...</p>
</div>
<div>
<p>Navigation:
<a href="#">Blog</a> |
<a href="#">Recipes</a> |
<a href="#">About me</a> |
<a href="#">Legal Notes</a>
</p>
</div>
<div>
<h2>Old Posts</h2>
<ul>
<li><a href="#">Last Week</a></li>
<li><a href="#">Archive</a></li>
</ul>
</div>
<div>
<h2>Tasty homemade vanilla sauce</h2>
<p>Today I want to show you ... </p>
<h3>Similar recipes</h3>
<ul>
<li><a href="#">Chocolate sauce made from cocoa</a></li>.
<li><a href="#">Custard Made Easy</a></li>
</ul>
</div>
<div>
<p>
<a href="#">Contact</a> |
<a href="#">FAQs</a> |
<a href="#">About me</a> |
<a href="#">Legal Notes</a>
</p>
</div>
This time, the content was separated by means of div elements. Nevertheless, we still don’t see any semantic elements.
All that can be achieved by using the div element is to group a piece of content together. Thus, it depends on the author of the web page to assign meaning to the individual div elements. Before semantic elements came into play, this was done via attributes in the opening <div> tag. So, let’s now take a look at the next step and the next example, in which the individual div elements get their meaning:
...
<div id="header">
<h1>My Blog</h1>
<p>A blog with yummy recipes ...</p>
</div>
<div id="navigation">
<p>Navigation:
<a href="#">Blog</a> |
<a href="#">Recipes</a> |
<a href="#">About me</a> |
<a href="#">Legal Notes</a>
</p>
</div>
<div id="sidebar">
<h2>Old Posts</h2>
<ul>
<li><a href="#">Last Week</a></li>
<li><a href="#">Archive</a></li>
</ul>
</div>
<div id="content">
<h2>Tasty homemade vanilla sauce</h2>
<p>Today I want to show you ...</p>
<h3>Similar recipes</h3>
<ul>
<li><a href="#">Chocolate sauce made from cocoa</a></li>.
<li><a href="#">Custard Made Easy</a></li>
</ul>
</div>
<div id="footer">
<p>
<a href="#">Contact</a> |
<a href="#">FAQs</a> |
<a href="#">About me</a> |
<a href="#">Legal Notes</a>
</p>
</div>
While nothing has changed in a purely visual sense, the div elements have gained meaning thanks to the id attribute. We now have a header, navigation, sidebar, content, and footer as it’s visually represented in the figure below. Using CSS, you can design and lay out these areas individually. This way, you can virtually already achieve a semantically correct structuring of the website, but not yet a semantically unified structuring.
So why should you use semantic structuring at all when you can work with div elements without any problem? There are several reasons for this: Despite the use of IDs in the div element, you have a semantically neutral element. It isn’t a standardized structuring, but instead everyone can define what they want. For the machines, there’s still no difference here. They can’t know what you really mean by id="header" or id= "content" and what’s behind it. You might as well write id="head" or id="synopsis" or whatever in all the languages of the world.
For example, imagine a smart screen reader reading the main content of the web page to a visually impaired person. How would the screen reader know what the main content is? One web developer may write id="content", another may write id="main", and you may write id="musings". In addition, some web developers don’t mark up the main content at all.
The situation is the same with search engines. For search engines to return a better result, it’s helpful if they know what belongs to the main content of the web page. Again, the search engine faces nonstandard class and ID names. Thus, it’s an advantage here if you tell the web crawler on the next visit: this is the main content of my site.
<div> Can Still Be Used in HTML: Using div elements and labeling the layout sections with the ID and class names are by no means incorrect—they represent valid HTML. In addition, the div element often helps you solve a problem. Nevertheless, for future projects, you should use the new semantically meaningful elements that were introduced especially for this purpose.
To write a semantically meaningful structure as HTML code for machines, there are suitable elements in HTML, listed in this table.
Returning to our example, this HTML code should do without div elements and instead rely on semantic HTML elements:
...
<header>
<h1>My Blog</h1>
<p>A blog with yummy recipes ...</p>
</header>
<nav>
<p>Navigation:
<a href="#">Blog</a> |
<a href="#">Recipes</a> |
<a href="#">About me</a> |
<a href="#">Legal Notes</a>
</p>
</nav>
<aside>
<h2>Old Posts</h2>
<ul>
<li><a href="#">Last Week</a></li>
<li><a href="#">Archive</a></li>
</ul>
</aside>
<article>
<h2>Tasty homemade vanilla sauce</h2>
<p>Today I want to show you ...</p>
<h3>Similar recipes</h3>
<ul>
<li><a href="#">Chocolate sauce made from cocoa</a></li>.
<li><a href="#">Custard Made Easy</a></li>
</ul>
</article>
<footer>
<p>
<a href="#">Contact</a> |
<a href="#">FAQs</a> |
<a href="#">About me</a> |
<a href="#">Legal Notes</a>
</p>
</footer>
When you look at the HTML document with the semantic elements, it’s probably already much easier to recognize at first glance what has which meaning here. This is just a simple example. Here you can immediately see the header, navigation, sidebar, main content, and footer (see the figure below). This way, the content could perhaps also be placed inside the main element in which the individual articles are then summarized using the article element.
The point here isn’t at all where you can use exactly which HTML element in detail, but rather that this semantic structuring makes sense, even if you’ve never heard of new elements such as nav, article, header, footer, and so on. The logic here is almost self-evident. It’s much easier to see where the navigation, header, or footer is written in this document.
If you’ve carefully followed this post, you’ve seen that the semantic HTML elements are very useful. Thus, probably one of their advantages is that they make life easier for you as the developer of the website.
For “normal” visitors, these semantic HTML elements don’t have much value at first. On the contrary, those visitors won’t even be able to distinguish in the web browser whether you’ve used div elements or the semantic HTML elements. However, if, for example, a new smart web browser provides special features that let you get to navigation by clicking a button, the new semantics take on meaning for normal visitors as well.
The situation is different, however, for visually impaired visitors who use a screen reader. A good screen reader could “recognize” the content of the web page based on the new semantic structure and thus jump directly to the content or navigation.
Of course, you shouldn’t disregard the search engines at all. For example, you could let the search engine know in a consistent and standardized way where which content is located, so that it assigns a higher ranking to the relevant content of a web page.
Editor’s note: This post has been adapted from a section of the book HTML and CSS: The Comprehensive Guide by Jürgen Wolf.