Semantic and Other General Purpose Elements

A web page usually has the following components:

A header
A navigation menu
A main section that holds the main content for the page
Sidebars
A footer

HTML provides elements that are intended to hold these and other sections of a web page. They are called semantic elements because their names imply their functionality.

Some of the semantic elements in HTML 5 are:

body (sectioning – 1x – root)
header
nav (sectioning – root)
main (1x)
- section (sectioning)
- article (sectioning)
aside (sectioning – root)
footer

section: h1-h6 elements are included in page outline
1x: only one element of this type can exist in a page
root: creates a new new document outline

Besides the fact that semantic elements help organize the contents of an HTML file, they are especially useful to visually impaired individuals that use screenreaders. Through these screenreaders, users can instruct the reader to read specific parts of the web page like the navigation menu or the main content.

Screen readers and other assistive technology can provide their users with outlines of a webpage. The body, nav, main, section, article, and aside elements define sections within a page that can be parsed to produce an outline. See Using HTML sections and outlines for a complete discussion.

Non-semantic Elements

HTML also includes non-semantic elements that can be used to define portions of code that need to have the content within them stylized but that don’t have an appropriately named semantic element. These are called div and span. The div element is a block-level element and span is an inline element.

Example

<section>
    <h2>Notes</h2>
    <article>
        <h3>Getting Started</h3>
        In this course you’ll learn how to create a dynamic website
        on the Internet using HTML, CSS and JavaScript.
        <a href="http://www.n0code.net/wp/csci240/getting-started/">Read more</a>
    </article>
</section>

The above code produces the following HTML.

Notes

Getting Started

In this course you’ll learn how to create a dynamic website
on the Internet using HTML, CSS and JavaScript.
Read more