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
article – The primary use for the article tag in HTML5 is to define external content. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
footer – The footer element marks the footer for an entire web page, or for a section of a page. It is entirely possible that you will use multiples footer tags on one page. The footer tag usually contains information like author name, publish date, contact info, etc…
aside – The aside element represents parts of a page (or article) that is not the primary focus of the page (or article), yet still related. For example, an aside could be used to pull a quote out of an article and display it in large, bold type so as to attract readers.
hgroup – This element is used to group other header elements (h1-h6), and only header elements. It must contain at least two header elements. For example, you would use an hgroup tag to group a title and subtitle together.
address – Used for representing an address
Example
To help you further understand these new structural elements, I’ve taken a screenshot of our blog and marked each element as if it were made in HTML5.
Most of the elements would have been div tags in the past, but are now cleaner and easier to understand.
Conclusion
HTML5 gives us a cleaner and more logical method to outline our pages. Instead of just using the div tag for layout, we now have access to plenty of other elements that not only make sense, will leave us with cleaner and more maintainable code.