Download 3. New Semantic Elements 1

New Semantic
Elements
(Part 1)
Semantics Explained




The textbook definition of "semantics" is the study of the
relationship between words and their meanings.
In the context of HTML, a semantic element is one
whose name describes its actual purpose.
Take, for example, the <div> element that we used
extensively in XHTML. It's useful for defining a section
of a web page but it does not indicate anything about the
nature of the section itself.
HTML5 introduces new semantic elements that better
define and organize web documents.
Benefits of Semantic Elements



Pages become much easier to understand when it
comes time to edit them in the future. This is especially
true if someone other than the original programmer is
doing the editing.
Search engines can better understand our website's
content. The better Google, Yahoo, and Bing can
pinpoint what our pages are all about, the higher our
pages will likely appear in the search results.
Screen readers and assistive devices can more easily
interpret the organization of a page, therefore presenting
site content more effectively to disabled visitors.
The Header Section in XHTML
Remember how a typical XHTML web page defined the header section?
<div class="header">
<h1>My Super Cool Website</h1>
</div>
And here's the CSS styling to define the
height, width, and background color of
the header section, as well as the text
color and size of the <h1> heading:
.header {
height: 100px;
width: 800px;
background-color: #0033FF;
}
.header h1 {
text-size: 24px;
color: #CCCCCC;
}
The HTML5 <header> Element
HTML5 now gives us a new semantic element for the header section:
<header>
<h1>My Super Cool Website</h1>
</header>
In the CSS style sheet, adding styling to
the header section is done using the
element itself, rather than via a <div>
class. Notice there is no preceding dot:
header {
height: 100px;
width: 800px;
background-color: #0033FF;
}
header h1 {
text-size: 24px;
color: #CCCCCC;
}
The HTML5 page still looks identical to
the XHTML page.
The Footer Section in XHTML
In XHTML, defining the footer section was done in a similar fashion:
<div class="footer">
<p>&copy; 2013 SuperCool LLC</p>
</div>
Here is the corresponding CSS styling to
the footer section and text:
.footer {
height: 40px;
width: 800px;
background-color: #0033FF;
}
.footer p {
text-size: 16px;
color: #CCCCCC;
text-align: center;
}
The HTML5 <footer> Element
HTML5 now provides us with a dedicated <footer> element:
<footer>
<p>&copy; 2013 SuperCool LLC</p>
</footer>
The CSS styling remains the same, but
we are now styling the element directly,
rather than a class:
footer {
height: 40px;
width: 800px;
background-color: #0033FF;
}
footer p {
text-size: 16px;
color: #CCCCCC;
text-align: center;
}
Again, the two pages (XHTML and
HTML5) look the same when rendered
by a browser.
Navigation in XHTML
In XHTML, defining the navigation menu followed a similar path:
<div class="nav">
<div class="navlink">
<a href="index.html">Home</a>
</div>
<div class="navlink">
<a href="page2.html">Page 2</a>
...
</div>
The CSS styled the <nav> class:
.nav {
border: 1px solid black;
width: 798px;
height: 35px;
...
}
.navlink {
width: 199px;
...
}
The HTML5 <nav> Element
HTML5 now provides us with the semantic <nav> element:
<nav>
<div class="navlink">
<a href="index.html">Home</a>
</div>
<div class="navlink">
<a href="page2.html">Page 2</a>
...
</nav>
The CSS now styles the <nav> element:
nav {
border: 1px solid black;
width: 798px;
height: 35px;
...
}
.navlink {
width: 199px;
...
}
Revisiting the Header Element


The official W3C specification for the <header> element
says that it "represents a group of introductory or
navigational aids."
The specification further states that, "A header element
is intended to usually contain the section's heading (an
h1–h6 element) but this is not required. The header
element can also be used to wrap a section's table of
contents, a search form, or any relevant logos."
Since the header section often includes site navigation menus, let's go back to
our simple site and move the <nav> within the <header>.
Nesting <nav> Within <header>
Here we have moved the navigation menu to be inside the <header> section:
<header>
<h1>My Super Cool Website</h1>
<nav>
<div class="navlink">
<a href="index.html">Home</a>
</div>
<div class="navlink">
<a href="page2.html">Page 2</a>
...
</nav>
</header>
Many HTML5 web designers prefer to place the main site menu within the top
header section, as we just did.
Summary of Semantic Elements


The new semantic elements in HTML5 add meaning to
sections of a web document, assisting other
programmers, search engines, and screen readers for
the visually impaired.
Just like the <div> elements they replace, the new
semantic elements do not actually do anything that is
visible on the web page. That is accomplished
completely with CSS styling.
In the coming days, we will be learning about and using several more of the
new semantic elements in HTML5.