HTML5 offers new elements for improving semantics of code as well as better document structure. These elements could now be used to replace traditional HTML code like <div id=”nav”> <div class=”header”> <div id=”footer”>
Here are few examples:
<section><article><aside><details><description><nav>
SECTION
W3C Specification:
The section element represents a generic document or application section.
This sounds a lot like the definition for a div but div has no semantic meaning.
SECTION VS. DIV
A div has no semantic meaning, but the section element does. It’s used for grouping together thematically related content.
Example usage of the section tag:
<div class="section">
## The Gallery
<!-- ... -->
</div>
This can be replaced with a section tag.
<section>
## The Gallery
<!-- ... -->
</section>
THE DOCUMENT OUTLINE
The document outline produces an outline summary of an HTML document based on how it is marked up.
The following elements have their self-contained outline:
- Article
- Aside
- Nav
- Section
Take the following example:
<h1>This is the title of the page.</h1>
<section>
## This is the title of a sub-section.
</section>
The output of the above, will look like follows:
1. This is the title of the page.
1.1 This is the title of a sub-section.
We can use h1 inside of the section tag, and the document outline is unchanged.
HEADER
W3C Specification: A group of introductory or navigational aids.
There can be many different headers on a page. They usually appear at the top of a document or section, but is defined by its content rather than its position.
Example usage of the header tag:
<div class="header">
<!-- ... -->
</div>
This can be done in HTML5 using the header tag:
<header>
<!-- ... -->
</header>
Example usage of the header tag within a section:
<section>
<header>
<h1>The heading of the section</h1>
This is content in the header.
</header>
This is some information within the section.
</section>
FOOTER
W3C Specification: Like the header, the footer element is not position-dependent. It should describe the content it is contained within.
Example usage of the footer tag:
<div class="footer">
<!-- ... -->
</div>
This can be done in HTML5 using the footer tag:
<footer>
<!-- ... -->
</footer>
Example usage of the footer tag within a section tag:
<section>
<header>
<h1>The heading of the section</h1>
This is content in the header.
</header>
This is some information within the section.
<footer>
By "Author Name"
</footer>
</section>
ASIDE
W3C Specification: Initially, the HTML5 spec defined the aside element as being “tangentially related to the content surrounding it.”
The aside now covers various contexts:
- When used within an article element, the aside contents should be related to that particular article it is contained within.
- When used outside an article element, the aside contents should be specifically related to the site.
An aside element is appropriate when it is used to represent content that is not the primary focus of an article or page, but it is still related to the article or page.
Example usage of the aside tag:
<div class="sidebar">">
<!-- ... -->
</div>
This can be done in HTML5 using the footer tag:
<aside>
<!-- ... -->
</aside>
Example usage of the aside tag within a section tag:
<section>
<header>
<h1>The heading of the section</h1>
This is content in the header.
</header>
This is some information within the section.
<aside>
Some secondary information.
</aside>
<footer>
By "Author Name"
</footer>
</section>
NAV
W3C Specification:
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
The nav element is intended for major navigation.
Example usage of the aside tag:
<div class="nav">">
<!-- ... -->
</div>
This can be done in HTML5 using the nav tag:
<nav>
<!-- ... -->
</nav>
ARTICLE
W3C Specification:
The article element represents a complete, or self contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.
The article element is another type of section. It is used for self-contained related content.
Some uses for the article tag:
- A blog post
- A news story
- A comment on a post
- A review
Example usage of the article tag:
<div class="article">">
<!-- ... -->
</div>
This can be done in HTML5 using the article tag:
<article>
<!-- ... -->
</article>
MAIN
W3C Specification:
The main element represents the main content of the body of a document or application.
Main should not be allowed in following places:
- Do not include more than one main element in a document.
- Do not include the main element inside of an article, aside, footer, header, or nav element
Example usage of the main tag:
<div class="main">">
<!-- ... -->
</div>
This can be done in HTML5 using the main tag:
<main>
<!-- ... -->
</main>
FIGURE
W3C Specification:
"The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.”
A common use of the figure tag is for an image within an article:
<figure>
<img src="image.jpg" alt="My Picture" />
</figure>
Example usage of the figcaption tag:
<figure>
<img src="image.jpg" alt="My Picture" />
<figcaption>This is a caption for the picture.</figcaption>
</figure>
TIME
W3C Specification:
The time element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset.
The article element is another type of section. It is used for self-contained related content.
Some uses for the article tag:
- A blog post
- A news story
- A comment on a post
- A review
Example usage of the time tag: (US time)
<time>2015-01-31</time>
We can format the time to “mm/dd/yyyy”:
<time>09/16/2013</time>
We use the DateTime attribute to get our desired format:
<time datetime="2015-01-31">01/31/2015</time>