Semantics

In programing, Semantics refers to the meaning of a piece of code — for example "what effect does running that line of JavaScript have?", or "what purpose or role does that HTML element have" (rather than "what does it look like?".)

For example, the <h1> element is a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page."

<h1>This is a top level heading</h1>

By default, it will be given a large font size to make it look like a heading (although you could style it to look like anything you wanted), but more importantly its semantic value will be used in multiple ways, for example search engines will consider its contents as important keywords to influence the page's search rankings (see SEO), and screen readers can use it as a signpost to help visually impaired users navigate a page.

On the other hand, you could make any element look like a top level heading. Consider the following:

<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>

This will render to look like a top level heading, but it has no semantic value, so it will not get any extra benefits as described above. It is therefore a good idea to use the right HTML element for the right job.

Semantic elements

These are some of the semantic elements (source).

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

Learn more

• HTML element reference on MDN
• Using HTML sections and outlines on MDN
• HTML5 Semantic Elements on w3schools
• The meaning of semantics in computer science on Wikipedia