HTML and CSS Reference
In-Depth Information
A complete example to explore can be found online, though you may find that a browser
does not do anything of interest and that you need an outline simulator to see the difference
between using
<hgroup>
tags or not.
O
NLINE
http://htmlref.com/ch2/hgroup.html
Given these semantics, it is clear that HTML5 sectioning elements are not just a
formalization of
<div>
tags with appropriate
class
values. For example, you might
consider
<div class="header">
<!-- header here -->
</div>
<div class="section">
<div class="header">
<h2>
Section Heading
</h2>
</div>
<p>
Content of section.
</p>
</div>
<div class="footer">
<!-- footer here -->
</div>
to be roughly the same as the previously introduced elements. To some degree this is true,
but clearly the names of the
class
values aren't defined by a standard nor is any outlining
algorithm defined.
Beyond sectioning, HTML5 introduces a number of other structural elements. For
example, the
article
element is used to define a discrete unit of content such as a blog
post, comment, article, and so on. For example, the following defines a few individual blog
posts in a document:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
HTML5 article example
</title>
</head>
<body>
<header>
<hgroup>
<h1>
Welcome to the Future World of HTML5 Blog
</h1>
<h2>
Don't be scared it isn't that hard!
</h2>
</hgroup>
</header>
<section id="articleList">
<h2>
Latest Posts
</h2>
<article id="article3">
<h2>
HTML5 Here Today!
</h2>
<p>
Article content here...
</p>
</article>
