HTML5: The Missing Manual, 2nd Edition

Chapter 2. Structuring Pages with Semantic Elements

Over the two decades that the Web’s been around, websites have changed dramatically. But the greatest surprise isn’t how much the Web has changed, but how well ancient HTML elements have held up. In fact, web developers use the same set of elements to build today’s modern sites that they used to build their predecessors 10 years ago.

One element in particular—the humble <div> (or division)—is the cornerstone of nearly every modern web page. Using <div> elements, you can carve an HTML document into headers, side panels, navigation bars, and more. Add a healthy pinch of CSS formatting, and you can turn these sections into bordered boxes or shaded columns, and place each one exactly where it belongs.

This <div>-and-style technique is straightforward, powerful, and flexible, but it’s not transparent. When you look at someone else’s markup, you have to put some effort into figuring out what each <div> represents and how the whole page fits together. To make sense of it all, you need to jump back and forth among the markup, the style sheet, and the displayed page in the browser. And you’ll face this confusion every time you crack open anyone else’s halfway-sophisticated page, even though you’re probably using the same design techniques in your own websites.

This situation got people thinking. What if there was a way to replace <div> with something better? Something that worked like <div>, but conveyed a bit more meaning. Something that ...