Semantic Elements

Instead of using div element as a general purpose division in the HTML content, HTML 5 has added a number of semantic elements that improve on readability, usability and updateability of the HTML code.

These new semantic elements make it easier for screen readers to determine the meaning of the different parts of the web page. Developers that are assigned to update the HTML find it much easier to read and understand the code.

Elements

There is a large number of semantic elements. I’ll focus here on some of the elements added in HTML 5. I’d recommend reviewing the MDN HTML elements reference.

Most of the elements have the same type of styling that a div would have. But using a semantic element gives information about what’s in the element without needing to add classes or IDs.

Content sectioning

Most websites are laid out very similar to each other. There is a main part that contains the all the content. A header that contains the title. The nav area that contains the navigation links. There may be articles that is a self standing piece of content. Sections are pieces of content that may be standalone. The trick about sections is that it may have multiple articles in it or an article may have multiple sections. Aside is a piece of content that while related isn’t linked part of an article. Footers are at the bottom of the page.

A page can actually have multiple headers and footers. For example an article may have a title in a header area and the author’s name and a date in a footer.

<main>

The HTML main element represents the dominant content of the body of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.

<body>
    <main>
    </main>
</body>

Visit main on MDN

The HTML header element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.

<body>
    <main>
        <header>
            <h1>Title</h1>
        </header>
    </main>
</body>

Visit header on MDN

The HTML nav element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.

<body>
    <main>
        <header>
            <h1>Title</h1>
        </header>
        <nav>
            <a href="#">Home</a>
        <nav>
    </main>
</body>

Visit nav on MDN

<article>

An article is a self-contained composition in a document, page, application or site. It’s intended to be independent.

<body>
    <main>
        <header>
            <h1>Title</h1>
        </header>
        <nav>
            <a href="#">Home</a>
        <nav>
        <article>
            <p>Blog post</p>
        <article>
    </main>
</body>

Visit article on MDN

<section>

The HTML section element represents a standalone section — which doesn’t have a more specific semantic element to represent it — contained within an HTML document. Typically, but not always, sections have a heading.

<body>
    <main>
        <header>
            <h1>Title</h1>
        </header>
        <nav>
            <a href="#">Home</a>
        <nav>
        <article>
            <section>
                <p>Blog post intro</p>
            <section>
                <p>Blog post details
            </section>
        <article>
    </main>
</body>

Visit section on MDN

<aside>

The HTML aside element represents a portion of a document whose content is only indirectly related to the document’s main content. Asides are frequently presented as sidebars or call-out boxes.

<body>
    <main>
        <header>
            <h1>Title</h1>
        </header>
        <nav>
            <a href="#">Home</a>
        <nav>
        <article>
            <section>
                <p>Blog post intro</p>
            <section>
                <p>Blog post details
            </section>
        <article>
        <aside>
            <p>Side information</p>
        </aside>
    </main>
</body>

Visit aside on MDN

The HTML footer element represents a footer for its nearest sectioning content or sectioning root element. A footer typically contains information about the author of the section, copyright data or links to related documents.

<body>
    <main>
        <header>
            <h1>Title</h1>
        </header>
        <nav>
            <a href="#">Home</a>
        <nav>
        <article>
            <section>
                <p>Blog post intro</p>
            <section>
                <p>Blog post details
            </section>
        <article>
        <aside>
            <p>Side information</p>
        </aside>
        <footer>
            <p>Copy right info</p>
        </footer>
    </main>
</body>

Visit footer on MDN

Text content

These element help identify certain types of content with will improve accessibility and SEO.

<details>

The HTML Details Element (details) creates a disclosure widget in which information is visible only when the widget is toggled into an “open” state. A summary or label can be provided using the summary element.

<details>
    Something small enough to escape casual notice.
</details>

Here’s what it looks like. Please note, this is not supported in Edge or Internal Explorer. But is supported in the Edge preview and all other modern browsers. That shouldn’t stop you from using it. The details will just always be opened.


Something small enough to escape casual notice.

Visit details on MDN

<summary>

The HTML Disclosure Summary element (summary) element specifies a summary, caption, or legend for a details element’s disclosure box. Clicking the summary element toggles the state of the parent details element open and closed. summary can only be used as the first child of *details**.

<details>
    <summary>Here's more</summary>
    Something small enough to escape casual notice.
</details>

Here’s what it looks like. Please note, this is not supported in Edge or Internal Explorer. But is supported in the Edge preview and all other modern browsers. That shouldn’t stop you from using it. The details will just always be opened.


Here's more Something small enough to escape casual notice.

Visit summary on MDN

<figure>

The HTML figure (Figure With Optional Caption) element represents self-contained content, potentially with an optional caption, which is specified using the (figcaption) element. The figure, its caption, and its contents are referenced as a single unit.

<figure>
    <img src="https://loremflickr.com/320/240/dog"
         alt="Random image of dog">
</figure>

Here’s what it’d look like.


Random image of dog

Visit figure on MDN

<figcaption>

The HTML figure (Figure With Optional Caption) element represents self-contained content, potentially with an optional caption, which is specified using the (figcaption) element. The figure, its caption, and its contents are referenced as a single unit.

<figure>
    <img src="https://loremflickr.com/320/240/dog"
        alt="Random image of dog">
    <figcaption>An elephant at sunset</figcaption>
</figure>

Here’s what it’d look like. Styling can be used on the figcaption.


Random image of dog
Random image of dog

Visit figcaption on MDN

<mark>

The HTML Mark Text element (mark) represents text which is marked or highlighted for reference or notation purposes, due to the marked passage’s relevance or importance in the enclosing context.

<p>Several species of <mark>salamander</mark> inhabit the temperate rainforest of the Pacific Northwest.</p>

Here’s what it would look like. Styling can be used to make the mark fit whatever guidelines you’re using.


Several species of salamander inhabit the temperate rainforest of the Pacific Northwest.


Visit mark on MDN

<time>

The HTML time element represents a specific period in time. It may include the datetime attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders.

<p>The Cure will be celebrating their 40th anniversary on <time datetime="2018-07-07">July 7</time> in London's Hyde Park.</p>

Here’s what it would look like.


The Cure will be celebrating their 40th anniversary on in London's Hyde Park.


Visit time on MDN

<address>

The HTML address element indicates that the enclosed HTML provides contact information for a person or people, or for an organization.

<address>
  <a href="mailto:jim@rock.com">jim@rock.com</a><br/>
  <a href="tel:+311-555-2368">+311-555-2368</a><br/>
</address>

Here’s what it would look like. It doesn’t change the styling by itself but groups the elements that contain the address and contact information into one element.


jim@rock.com
+311-555-2368

<blockquote>

The HTML blockquote Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the cite element.

<blockquote cite="https://www.huxley.net/bnw/four.html">
    <p>Words can be like X-rays, if you use them properly – they'll go through anything. You read and you're pierced.</p>
</blockquote>

Words can be like X-rays, if you use them properly – they'll go through anything. You read and you're pierced.


<cite>

The HTML Citation element (cite) is used to describe a reference to a cited creative work, and must include the title of that work. The reference may be in an abbreviated form according to context-appropriate conventions related to citation metadata.

<blockquote cite="https://www.huxley.net/bnw/four.html">
    <p>Words can be like X-rays, if you use them properly – they'll go through anything. You read and you're pierced.</p>
</blockquote>
<cite>– Aldous Huxley, Brave New World</cite>

Words can be like X-rays, if you use them properly – they'll go through anything. You read and you're pierced.

– Aldous Huxley, Brave New World


<q>

The HTML q element indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the text in quotation marks. This element is intended for short quotations that don’t require paragraph breaks; for long quotations use the blockquote element.

<p>When Dave asks HAL to open the pod bay door, HAL answers: <q cite="https://www.imdb.com/title/tt0062622/quotes/qt0396921">I'm sorry, Dave. I'm afraid I can't do that.</q></p>

When Dave asks HAL to open the pod bay door, HAL answers: I'm sorry, Dave. I'm afraid I can't do that.


References

Here’s W3C’s section on Semantic element.