HTML5 and CSS3, Second Edition

CHAPTER 2

New Structural Tags and Attributes

I’d like to talk to you about a serious problem affecting many web developers

today. Divitis is rampant—this chronic syndrome causes web developers to

wrap elements with extra <div> tags with IDs such as banner, sidebar, article, and

footer. It’s also highly contagious. Developers pass Divitis among each other

extremely quickly, and since <div>s are invisible to the naked eye, even mild

cases of Divitis may go unnoticed for years.

Here’s a common symptom of Divitis:

<divid="page">

<divid="navbar_wrapper">

<divid="navbar">

<ul>

<li><ahref="/">Home</a></li>

<li><ahref="/products">Products</a></li>

...

</ul>

</div>

</div>

</div>

Here we have an unordered list, which is already a block element, wrapped

with two <div> tags that are also block elements. Remember, block elements

fall on their own line, whereas inline elements do not force a line break, and

so this <div> tag doesn’t serve any purpose. The id attributes on these wrapper

elements tell us what they do, but you can remove at least one of these

wrappers to get the same result. Overuse of markup leads to bloat and pages

that are difficult to style and maintain.

There is hope, though. The HTML5 specification provides a cure in the form

of new semantic tags that describe their content. Because so many developers

have made sidebars, headers, footers, and sections in their designs, the

Download from Wow! eBook <www.wowebook.com> report erratum • discuss