HTML5: The Missing Manual

Chapter 2. A New Way to Structure Pages

Over the nearly 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. That means when you look at someone else’s markup, it takes some effort to figure 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 actual 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 were a way to replace <div> with something better? Something that worked like <div>, but conveyed a bit more meaning. Something that might help ...