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 ...