Structure and Semantics
In this lesson, we will delve into the very interesting concept of HTML5 semantics. Let's begin!
HTML5 changes this ancient plight we discussed earlier with the <div> tag significantly; it adds new semantic elements to the markup, which provide the missing meaning of the embedded content.
The Exercise below shows the skeleton of the same page of the article as drafted in Listing: Defining the <div> tag in a webpage, but it uses new semantic elements.
Listing: The skeleton of an article with HTML5
<!DOCTYPE html>
<html>
<head>
<title>New Style Article</title>
<style>
body {
width: 720px;
margin-left: 16px;
font-family: Verdana, Arial, sans-serif;
}
header {
background-color: deepskyblue;
padding: 2px 16px;
}
h1 {
color: white;
}
.byLine {
color: white;
font-style: italic;
}
.mainContent {
background-color: aliceblue;
padding: 4px 16px;
}
.abstract {
font-size: 0.9em;
font-style: italic;
color: navy;
}
h2 {
color: navy;
border-bottom: 4px dotted cornflowerblue;
}
footer {
background-color: cornflowerblue;
padding: 1px 16px;
}
footer>p {
color: white;
font-size: 0.8em;
}
</style>
</head>
<body>
<article>
<header>
<h1>Visual Studio Platform and Extensibility</h1>
<p class="byLine">by Istvan Novak</p>
</header>
<div class="mainContent">
<p>
<span class="abstract">
Now there is a rapidly growing community,
the Visual Studio Ecosystem behind Visual Studio.
With any idea, imaginings, issues, or questions,
you can turn to other community members and
leverage the knowledge they have. Welcome to
the world of VSX!
</span>
</p>
<section>
<h2>Motivation</h2>
<p>
As a .NET architect and developer I cannot imagine
my everyday work without Visual Studio. I was
always in a strange excitement when waiting for
a new CTP, Beta or RTM of Visual Studio because
I always expected some great new features with
every release. During the years I have bought a
few third-party add-ins and utilities for Visual
Studio to make my development tasks easier and
even created small add-ins to produce some useful
piece of code. I knew that Visual Studio was
extensible; I downloaded the SDKs and tried to
get familiar with those hundreds of extensibility
interfaces. However, due to lack of good
documentation I often got frustrated.
</p>
</section>
<section>
<h2>Visual Studio: Extensible Platform</h2>
<p>
Hearing the word "extensibility"
a developer always starts to think "
some API allowing extra functionality to be
added to a product". More or less,
I can agree with this definition in the case
of Visual Studio. In this part I tell you how
I understand Visual Studio extensibility, and
what are the ways we can add functionality. Because
I started learning this story with the release of
Visual Studio 2008, I put the focus on that version.
</p>
</section>
<section>
<h2>Summary</h2>
<p>
Pellentesque porttitor, libero eu mattis pulvinar,
urna dui scelerisque sapien, vitae varius sapien
urna at odio. Fusce vel neque non massa varius
mattis ut nec.
</p>
</section>
</div>
</article>
<footer>
<p>
Full article published in CODE Magazine
in April, 2008.</p>
</footer>
</body>
</html>The beauty of semantics in our code
Without knowing anything about these new elements, you can intuitively understand the structure of the document: it contains an article that is composed from a <header> tag and a number of <section> tags; it also has a <footer> tag.
Comparing the two code listings (the old-school style with HTML5), you can easily state that the second one (HTML5 style) is easier to read, and is easier to maintain.
The beauty of semantics in search engines and web page ranks
If you think about how a search engine works, you can imagine that this information helps a lot to separate the more important information in this page from the less important. For example, an occurrence of a certain word in the header may have a higher rank than the same word in a section, or in a footer.
Semantic elements may empower tools that analyze or change the page on-the-fly. For example, you can generate an automatic navigation bar for the page that displays the structure of sections. The great thing is, that you can even create a library that prepares this structure and automatically attaches it to a page. Third parties can load your library and generate the content structure for their own pages.
HTML5 defines nine semantic elements that behave exactly like the good old <div> tag but add some extra meaning to your pages.
These elements are summarized in the table below:
Semantic elements of page structure
📜NOTE: There are a few more semantic tags that are related to text elements. For example, the
<mark>and<wbr>tags. Those are inline elements and are not the semantic extensions of<div>by any means.
These elements behave exactly like <div>. They only enclose a markup block and provide a logical container that can be used to apply formatting (through styling), or to add behavior by means of a script language (JavaScript).