The term "semantic web" is now used in an almost inflationary manner. However, many people are not even aware of what this much-vaunted semantics is all about. It's actually quite simple: thanks to semantics, the required/desired information can actually be extracted from huge amounts of data.
A concrete example will demonstrate the importance of semantics. Digital photos are a great thing. As soon as they are taken, they can be presented to the whole world via the Internet. What applies in the private sphere has long since established itself in the professional context. Picture agencies, museums, libraries and photographers offer photos, paintings or even digital versions of valuable documents via professional image databases. There are search masks on the relevant websites that can be used to search the platform. The most popular example of an image search engine in Web 2.0 is certainly Flickr.
Anyone who has already used such image search engines knows their limitations: If you enter the term Kohler there, for example, you will be shown photos from a wide variety of areas. The Yahoo! image search presents photos of a coal tit, a tennis player named Kohl and the former chancellor Helmut Kohl.
At this point, one of the disadvantages of the classic WWW becomes clear: although the information provided can currently be understood by humans, it cannot be correctly interpreted by machines - in this example, search engines.
Machines can only read information if it is actually available. And this is precisely the crucial point at which semantics come into play.
Structuring documents
In earlier versions of HTML, there was simply no way to structure documents semantically. If you wanted to structure a web page, you really only had headings and text paragraphs available. Here is a typical example of the structure of a classic website:
<h1> Chapter </h1> <p> Paragraph </p> <h2> Subchapter </h2> <p> Paragraph in subchapter </h2> <h3>
HTML provides the elements h1 to h6, among others, for document structuring. However, a really deeply nested structure cannot be created with this. This is because an h7 or h8 element is not provided in HTML. This is exactly where HTML5 comes in and introduces some additional structuring elements.
- article
- aside
- dialog
- figure
- footer
- header
- nav
- section
These elements are presented in this tutorial. Before that, however, a word of advice: don't expect miracles from these elements from a visual point of view. CSS must be used to ensure that websites based on semantic elements look appealing. And, as you know, we'll come to that later.
You have already become familiar with some semantic elements, even if they do not necessarily have anything to do with semantics at first glance. Here is an example of such an element:
<progress min="0" max="100" value="40"></progress>
A loading bar is generated above it. (Incidentally, the progress element has already been presented in detail in this series).
This element makes it clear how little effort it takes to create content that can be assigned to a corresponding context. For software, it is immediately recognizable that it is a loading bar. However, this is not the case with solutions that rely on JavaScript to generate a loading bar.
Semantic element structures
In "normal" HTML documents, div elements are used to structure the content. Classes or IDs are assigned to these elements so that they can be formatted using CSS. This principle is also used in HTML5. In fact, a survey conducted by Google has shown that the same classes are always used in many documents.
An example:
<div class="nav"></div>
Many developers use nav, for example, to accommodate the navigation within this div element. In HTLM5, however, it looks like this:
<nav>content</nav>
The nav element makes it clear that it is not just a list of hyperlinks. In fact, this element describes a block of content that contains information about the navigation of the website in a very specific context.
Modern structuring
What does the structure of an HTML document typically look like? Basically, it is similar, regardless of what content the page ultimately contains. The following areas are usually included:
- Header
- Main menu
- content area
- Footer area
A website that uses div elements for structuring could look like this:
<body> <div id="header"> <div id="logo">Logo</div> <div id="search">Search</div> <div id="nav">Main menu</div> </div> </div> <div id="content"> <h1>This is the content</h1> <div class="section"> <h2>Subheading</h2> <h3>Section</h3> <!-- Here is the content --> </div> <div class="section"> <h2>Subheading</h2> <!-- Here is the content --> </div> </div> <div id="sidebar"> <div id="subnav">Submenu</div> </div> <div id="footer">Footer area</div> </body>
You may already be familiar with such div constructions. To make the structure logical for developers, they assign corresponding classes or IDs to the div areas, which have "speaking" names. For example, it is clear to developers that the div area with the ID footer contains the content that belongs to the footer area of the page. The problem with this is that the names may give an idea of the structure of the website, but the website is still far from being semantically structured. This is exactly where the new HTML elements come in. For the first time, they make it possible to really structure documents and websites.
Take a look at the following HTML5 document for a better understanding:
<body> <header> <div id="logo">Logo</div> <div id="search">Search</div> <nav>Main menu</nav> </header> <article> <h1>This is the content</h1> <section> <h2>Subheading</h2> <h3>Section</h3> <!-- This is the content --> </section> <section> <h2>Subheading</h2> <!-- Here is the content --> </section> </article> <aside> <nav>Submenu</nav> </aside> <footer>Footer area</footer> </body>
Of course, I will go into more detail about the elements used here in the following tutorials. Nevertheless, a look at this example already shows where the advantages of the elements used lie. You can now finally mark up the page areas with elements that are specifically intended for them. Everything that belongs to the header area of the page can be integrated into a header element.
In addition, section and article elements are now available, which can be used to structure the actual page content much better. As you can see, it is worth taking a detailed look at the possibilities that HTML5 has to offer with regard to the semantic structuring of documents.
