The internet has changed a lot since HTML 4.01 became a standard in 1999. Today, some elements in HTML 4.01 are obsolete, never used, or not used the way they were intended to. These elements were removed or re-written in HTML5.
HTML5 has several new layers, including a new set of semantic tags. Some of the tags below arose out of common web development usage for class names used for boxes.
Be sure you use these new elements instead of divs when building out a full page layout.
The header element is for introductory content or a set of navigational links. You can use this element (instead of a div) around your logo, tagline, main navigation, and anything else at the top of your page layout.
<header>
The title and slogan usually go here.
</header>
The nav element represents a section of a document that links to other documents or to parts within the document itself. It’s a section of navigational links.
It’s intended for major navigational information like a sitewide navigation bar or a subsection menu.
The nav tag should typically be placed inside the header element.
<header>
<p>The title and slogan usually goes here.</p>
<nav>Nav links go here</nav>
</header>
The section element represents a section of a document. It’s used to enclose a thematic grouping of content.
It’s similar to a div though it carries more semantic meaning since the content inside the section tags should be related. The section element is typically used for the main content of the page.
<section>
Main content goes here.
</section>
The aside element represents content that is “tangentially” related to the main text of a document. It aligns with what we think of as a sidebar.
<aside>
Sidebar content goes here.
</aside>
The footer element is used for what is at the bottom of your page layout.
Typical content you might include in a footer would be: Navigation, legal information, privacy policy link, copyright information, address, social media links, and/or store hours.
<footer>
Footer content goes here.
</footer>