HTML Introduction | Getting Started with HTML5 | HTML5 Semantic Elements

HTML5 Semantic Elements

A semantic element is an element that carries meaning in itself. In other words, it clearly communicates its purpose to both the browser and the developer.

Non-semantic elements such as div and span require you to inspect the internal code to understand what they contain. By contrast, semantic elements such as form, table, and img reveal their role from their names alone.

Semantic Elements Added in HTML5

Semantic element	Description
`<header>`	Represents a header for an HTML document or section.
`<nav>`	Represents a set of links for navigating between HTML documents or sections.
`<main>`	Defines the main content of an HTML document.
`<section>`	Represents a section of content in an HTML document.
`<article>`	Represents an independent article or piece of content in an HTML document.
`<aside>`	Represents content aside from the main page content.
`<figure>`	Represents independent content such as graphics or video in an HTML document.
`<figcaption>`	Represents a caption for a `figure` element.
`<footer>`	Represents a footer for an HTML document or section.
`<bdi>`	Represents text whose direction differs from the surrounding text.
`<mark>`	Defines highlighted text.
`<details>`	Represents additional details that the user can show or hide.
`<summary>`	Defines the visible heading for a `details` element.
`<dialog>`	Defines a dialog box or dialog window.
`<menuitem>`	Represents an item that a user can choose from a popup menu.
`<meter>`	Represents a scalar measurement within a known range.
`<progress>`	Represents the progress of a task.
`<ruby>`	Represents ruby annotation text, usually pronunciation guidance for characters.
`<rt>`	Represents the pronunciation text displayed above the base text.
`<rp>`	Represents fallback content shown only in browsers that do not support ruby annotations.
`<time>`	Represents a date or time.
`<wbr>`	Indicates where a long word may be broken when it reaches the edge of the line.

Main Semantic Elements Added in HTML5

Representative semantic elements newly added in HTML5 include the following.

header element
nav element
main element
section element
article element
figure and figcaption elements
footer element

header Element

The header element defines a header for an HTML page or section. A header generally appears before something else and is often a combination of text and images displayed at the top of a page. Multiple header elements can exist in a single page.

<header>
    <h1>This is the header for the whole document.</h1>
</header>
...
<section>
    <header>
        <h2>This is the header for a section.</h2>
        <p>This paragraph belongs to the header area.</p>
    </header>
</section>

nav Element

The nav element defines a set of links used to navigate between HTML documents. Although it represents a major group of links, not every link in a document must be placed inside a nav element.

<nav>
    <a href="/html/html5_element_semantic">Semantic elements</a> |
    <a href="/htmlhtml5_element_form/">Forms elements</a> |
    <a href="/html/html5_element_inputtype">Input elements</a>
</nav>
...
<p>This link is about <a href="/html/html5_element_inputattr">input attributes</a> and is not included in the nav element.</p>

section Element

The section element defines a section in an HTML document. A section has a heading and represents a group of content related to the overall document.

<section>
    <h2>This is a section area.</h2>
    <p>Lorem ipsum</p>
</section>

article Element

The article element defines an independent article in an HTML document. The content of an article element should make sense on its own and be readable separately from the rest of the website.

<article>
    <h2>This is an article area.</h2>
    <p>Lorem ipsum</p>
</article>

At first glance, the examples for section and article may not look very different. In practice, the distinction between the two is often not strict. In general, use section for content that belongs to the overall structure of the document, and use article for independent content that can stand on its own.

figure and figcaption Elements

In books and newspapers, a caption is often placed directly below an image to explain it. HTML5 provides the figure and figcaption elements for this purpose.

The figure element defines independent content such as graphics or video in an HTML document. The figcaption element defines a caption for that figure element.

<figure>
    <img src="/examples/images/img_flower.png" alt="flowers" width="350" height="263">
    <figcaption>[ Figure 1. The image above shows pretty flowers. ]</figcaption>
</figure>

The footer element defines a footer for an HTML document or section. A document footer usually contains the author, copyright information, contact details, and similar information. Multiple footer elements can exist in a single document.

Example

<footer>
    <p>This is the footer for the whole document.</p>
    <p>Copyright 2016. Author all rights reserved.</p>
    <p>Contact: 02-1234-5678</p>
</footer>

Why Use Semantic Elements?

When using HTML4, developers often used unique ID and class names to style layout areas. Examples include header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, and topnav.

Before semantic elements were added, layouts were commonly built with div elements.

<div id="header"><h2>Header area</h2></div>
<div id="nav"><h2>Nav area</h2></div>
<div id="section"><p>Section area</p></div>
<div id="footer"><h2>Footer area</h2></div>

This made it difficult for search engines to identify the correct content of a web page. With the newer HTML5 elements such as <header>, <footer>, <nav>, <section>, and <article>, this task becomes easier. According to the W3C, the Semantic Web enables data to be shared and reused across applications, enterprises, and communities.