HTML and CSS Reference
In-Depth Information
Rethinking HTML structure
Before we learn even more markup, let's step back for a second…we've talked a
lot about structure, but are
<div>
s really good structure? After all, the browser
doesn't really know your
<div id="footer">
is a footer, it just knows it is a
<div>
, right? That seems rather unsatisfying, doesn't it?
Much of the new HTML5 markup is aimed at recognizing how people
structure their pages with
<div>
s and providing markup that is more
specific, and better suited for certain kinds of structure. You see, when the
browser (or search engines, or screen readers) see
id="navigation"
in your
page, they have no idea your
<div>
is for navigation. It might as well say
id="goobledygoop"
.
So, the standards bodies actually took a look at how
<div>
elements were
being used—for headers, navigation, footers, articles, and so on—and they
added new elements to represent those things. That means with HTML5 we
can rework our pages a bit and replace our
<div>
s with elements that more
specifically identify the kind of content contained in them.
Think about the way you've seen <div>s used. Also, check out a few web pages
and see how they are using <div>s. Let's say you wanted to take the most
common patterns and change the <div>s into real HTML elements. For instance,
you could change all the <div id="footer"> elements to just <footer> elements.
Make a list of all the new elements you'd add to HTML. Of course, you won't
want to add too many, just enough to cover the most common uses. Also note
any advantages (or disadvantages) of adding these new elements:
