The most commonly overused element in HTML is the “div” tag. Why? For starters, we don’t have many other options. Also, it’s kind of a catch-all tag. By definition, the “div” tag defines a division or section in an HTML document. As you probably know, there are many things that can be defined as divisions or sections within an HTML document.

This leads to problems, primarily when maintaining or updating your HTML. Sorting through all the “div” tags to find the correct area to edit can be tedious and time consuming. Also, it looks overwhelming, especially on the really large pages.

Good news! HTML5 fixes div overload. It introduces new semantic elements aimed at making cleaner and more understandable code. For example, when making a header, we’re used to seeing something like this:
Code:

<div id="header">
Header stuff, logos, links, etc…
</div>

With HTML5, that same code would look like this:
Code:

<header>
Header stuff, logos, links, etc…

</header>

Makes a lot of sense doesn’t it? But, that’s not all. There are many more tags being added to HTML5 to help clean up div overload, and to provide a cleaner, more structured layout. Now, you may be thinking, “Why does this matter? I still want to use divs.” The answer: The new structural elements may not be the most exciting things in the world, but they do matter. Here are a few reasons why:

First, the new elements are very well defined and will help you create a much more organized HTML document. This not only looks nicer, it’s easier to maintain.

Second, there’s less overall code. This makes your pages load faster and can positively affect search engine optimization. In case you’re unaware, Google factors page load time into their algorithms.

Third, and this is more of an assumption, but I believe search spiders will be taught to look for specific content in specific sections, or scan certain sections first. Again, this is just a guess, but it makes logical sense going forward that Google would employ HTML5 structural elements in their search algorithms.

Fourth, HTML structure provides the basis for most everything you do in HTML. While not exciting, it’s necessary for you to understand how the structural elements are changing, because they will be referenced frequently in the upcoming tutorials.

Okay, ready to learn the new structural elements? Before I explain the new elements, it might help to take a look at this illustration. It will help you understand each element’s purpose:

Now, let’s get into the definitions, which I have listed below. Be sure to reference the image above if you have any confusion.

header – This element houses all of the introductory elements on a page, such as navigation, menu bar, logos, etc…

section– Defines sections in a document, such as chapters, headers, footers, etc… For example, a Web site’s home page could be split into sections for an introduction, news items, contact information.

nav – Defines a section of a page that links to other sites or pages within the website. In other words, it houses navigation links on a page. The