Comment: Due to the lack of structure, even good HTML pages are difficult to deal with. The level of the title must be analyzed to see how each part is divided. The sidebar, footer, header, navigation bar, main content area and articles are represented by common div elements. HTML 5 has added new elements to identify these common structures: · sectio
Due to the lack of structure, even good HTML pages are difficult to deal with. The level of the title must be analyzed to see how each part is divided. The sidebar, footer, header, navigation bar, main content area and articles are represented by common div elements. HTML 5 adds new elements to identify these common structures:
· section: This can be a chapter or section in the book, and it can actually be anything with its own title in HTML 4
· header: The header displayed on the page; it is different from the head element
footer: footer; can display signatures in emails
nav: a set of links to other pages
Article: an article in blog, magazine, article compilation, etc.
Let's consider a typical blog homepage, which has a header at the top and a footer at the bottom, as well as several articles, a navigation area and a sidebar, see Code 1 Typical blog page
<html>
<head>
<title>Mokka mit Schlag </title>
</head>
<body>
<div id=page>
<div id=header>
<h1><a href=>Mokka mit Schlag</a></h1>
</div>
<div id=container>
<div id=center class=column>
<div class=post id=post-1000572>
<h2><a href=
/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/>
Spring Comes (and Goes) in Sussex County</a></h2>
<div class=entry>
<p>Yesterday I joined the Brooklyn Bird Club for our
annual trip to Western New Jersey, specifically Hyper
Humus, a relatively recently discovered hot spot. It
started out as a nice winter morning when we arrived
at the site at 7:30 AM, progressed to Spring around
10:00 AM, and reached early summer by 10:15. </p>
</div>
</div>
<div class=post id=post-1000571>
<h2><a href=
/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/>
But does it count for your life list?</a></h2>
<div class=entry>
<p>Seems you can now go <a
href=
2007/04/cone_sf>bird watching via the Internet</a>. I
haven't been able to test it out yet (20 user
limit apparently) but this is certainly cool.
Personally, I can't imagine it replacing
Actually being out in the field by any small amount.
On the other hand, I've always found it quite
sad to meet senior birders who are no longer able to
hold binoculars steady or get to the park. I can
imagine this might be of some interest to them. At
least one elderly bird did a big year on TV, after
he could no longer get out so much. This certainly
tops that.</p>
</div>
</div>
</div>
<div class=navigation>
<div class=alignleft>
<a href=/blog/page/2/>« _fcksavedurl=/blog/page/2/>« Previous Entries</a>
</div>
<div class=alignright></div>
</div>
</div>
<div id=right class=column>
<ul id=sidebar>
<li><h2>Info</h2>
<ul>
<li><a href=/blog/comment-policy/>Comment Policy</a></li>
<li><a href=/blog/todo-list/>Todo List</a></li>
</ul></li>
<li><h2>Archives</h2>
<ul>
<li><a href='/blog/2007/04/'>April 2007</a></li>
<li><a href='/blog/2007/03/'>March 2007</a></li>
<li><a href='/blog/2007/02/'>February 2007</a></li>
<li><a href='/blog/2007/01/'>January 2007</a></li>
</ul>
</li>
</ul>
</div>
<div id=footer>
<p>Copyright 2007 Elliotte Rusty Harold</p>
</div>
</div>
</body>
</html>
Even with the correct indentation, these nested divs still feel very confusing. In HTML 5, these elements can be replaced with semantic elements, see Code 2 Typical blog pages written in HTML5
<html>
<head>
<title>Mokka mit Schlag </title>
</head>
<body>
<header>
<h1><a href=>Mokka mit Schlag</a></h1>
</header>
<section>
<article>
<h2><a href=
/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/>
Spring Comes (and Goes) in Sussex County</a></h2>
<p>Yesterday I joined the Brooklyn Bird Club for our
annual trip to Western New Jersey, specifically Hyper
Humus, a relatively recently discovered hot spot. It
started out as a nice winter morning when we arrived at
the site at 7:30 AM, progressed to Spring around 10:00
AM, and reached early summer by 10:15. </p>
</article>
<article>
<h2><a href=
/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/>
But does it count for your life list?</a></h2>
<p>Seems you can now go <a
href=
2007/04/cone_sf>bird watching via the Internet</a>. I
haven't been able to test it out yet (20 user
limit apparently) but this is certainly cool.
Personally, I can't imagine it replacing
Actually being out in the field by any small amount.
On the other hand, I've always found it quite
sad to meet senior birders who are no longer able to
hold binoculars steady or get to the park. I can
imagine this might be of some interest to them. At
least one elderly bird did a big year on TV, after
he could no longer get out so much. This certainly
tops that.</p>
</article>
<nav>
<a href=/blog/page/2/>« _fcksavedurl=/blog/page/2/>« Previous Entries</a>
</nav>
</section>
<nav>
<ul>
<li><h2>Info</h2>
<ul>
<li><a href=/blog/comment-policy/>Comment Policy</a></li>
<li><a href=/blog/todo-list/>Todo List</a></li>
</ul></li>
<li><h2>Archives</h2>
<ul>
<li><a href='/blog/2007/04/'>April 2007</a></li>
<li><a href='/blog/2007/03/'>March 2007</a></li>
<li><a href='/blog/2007/02/'>February 2007</a></li>
<li><a href='/blog/2007/01/'>January 2007</a></li>
</ul>
</li>
</ul>
</nav>
<footer>
<p>Copyright 2007 Elliotte Rusty Harold</p>
</footer>
</body>
</html>
Now no div is needed. You no longer need to set the class attribute yourself, and you can infer the meaning of each part from the standard element name. This is especially important for audio browsers, mobile browsers and other non-standard browsers.
(to be continued)