You’re reading our Class Notes collection. It features summaries of important topics along with quality links to learn more.

This document is considered stable. Updates are made but what is here is considered enough as it stands to do the title justice.

Semantic HTML

This is an important topic. Getting the semantics of your HTML correct has many benefits. It means your HTML will leverage the way that the browser is designed to work and that when software attempts to understand your HTML it has a much better chance of doing so.

We have a Learning Project for Semantic HTML:
pecknigel/semantic-html-learning-project · GitHub

Using HTML semantically means that if your HTML is viewed without CSS, it has a better chance of being usable. And it can be less CSS for you to write, since the element you use already has default styling for the intent that you have for it.

In other cases, it just makes sense. If you use an unordered list for what you want to be a paragraph, you’ll have to do more work to make it look how you want. Maybe even manipulating the DOM with JS.

It’s all semantics. The semantics of a <dialog> are that it identifies what the browser should handle as a modal or non-modal dialog box.

Read more at MDN:
<dialog>: The Dialog Element

But when we talk about semantics specifically in HTML, rather than in a more general sense, we usually mean elements that are provided for little other than their semantics. Always along with grouping whatever is inside them - since it’s always a tree.

Not forgetting that with CSS and JS, any element can be basically anything to the user. But the HTML should also make sense when it stands alone. Because why not. It’s how the technology works. Why fight it? That seems to be reason enough although there are many other good ones.

So there are elements like <nav>, <section> and <aside>.

Read all about them below. Maybe starting with headings. Did you know that:

Sections in HTML5 can be nested. Beside the main section, defined by the element, section limits are defined either explicitly or implicitly. Explicitly-defined sections are the content within <body>, <section>, <article>, <aside>, and <nav> tags.

Each section can have its own heading hierarchy. Therefore, even a nested section can have an <h1>.

Reference:
html - HTML5: Should I use h2’s or h3’s for content inside of an aside element? - Stack Overflow

When Stack Overflow shines, it really sparkles :) Much appreciation to “Luke” for that awesome reference dug out from the long MDN page.

Where to Study This

MDN Glossary: Semantics
Semantics - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

The HTML Section Heading Elements
The HTML Section Heading elements - HTML: HyperText Markup Language | MDN

MDN Curriculum: Semantic HTML
2. Semantic HTML | MDN Curriculum

web.dev: Semantic HTML
Semantic HTML | web.dev

freeCodeCamp: Semantic HTML Guide
Semantic HTML Guide – 10 Alternatives to Using divs

freeCodeCamp: Semantic HTML5 Elements Explained
Semantic HTML5 Elements Explained

Semantic HTML: What It Is and How to Use It Correctly
Semantic HTML: What It Is and How to Use It Correctly

MDN: HTML Elements Reference
HTML elements reference - HTML: HyperText Markup Language | MDN

« Back to Class Notes

This Page

Library Menu