Semantics, Important in HTML5
Previous versions of HTML had two general types of HTML elements, block and inline. HTML5 introduces more types of elements as well as new tags that are more semantically rich.
This article assumes that you already understand some of the block level elements used in HTML/xHTML. These include: div, h1, h2, h3, h4, h5, h6, p, hr although there are more.
Past Formatting Practices
Formatting in the past was concerned with appearance with little concern about the context of the information. Tables were used for layout formatting in HTML which was not very satisfactory for visually disabled visitors. As the specification advanced, div tags became the method of choice for layout as the information could be grouped inside the div and then styled to taste using CSS.
HTML5 Introduces Structural Semantic Elements
Pre-HTML5 practice involved dividing your page info into separate div tags and identifying them with varying ids or classes. Commonly, there are header divs, footer divs, content divs, and so on. HTML5 introduces specific tags for these page elements so they have a richer semantical context. Div tags are still useful as all-around containers, when practical, use these semantically rich tags instead.
<section></section>- Section tags are used to group together related information and represent a section of your document.
<article></article>- Article tags are used to group together related information that could stand alone. The article is similar to the section, the article is self contained enough to be pulled from your page for syndication.
<header></header>- Header tags hold (typically) masthead headings and header information for the body, section, article, and other "sectioning" elements. If a section or article do not have a header section, the the first
h1tag becomes the header. These headers and heading tags form the outline of your document which becomes important in HTML5. <nav></nav>- Nav tags are used to contain the main navigation links on a page. Although a nav section could be inside of articles or sections, it is usually reserved for main navigation.
<aside></aside>- Aside tags surround information tangentially related to the section or article information in which it resides. Asides are good candidates for pull-quotes or advertising in an article or section. At the top level of a document, the aside is often used for a sidebar column.
<footer></footer>- Footer tags surround footer information for the document, sections, and/or articles in the page. The document footer typically contains copyright information and "housekeeping" links (about this site, contact, home, and so on). Within sections and articles, footers can also contain related links and pertinent metadata.
It only take a little more effort to use semantically relevant tags instead of reflexively reaching for a div tag, give it a try!