Structure

Semantic sections are intended to help organize a page better, with HTML elements named according to their purpose in the page. This helps screen reader users and search engines navigate the page more effectively, as well as know what content is relevant or secondary to the page’s purpose. The concept behind semantic HTML is that the HTML markup should convey the meaning of the content, not the appearance. All styling and appearance markup should be in CSS in an external stylesheet.

Generally speaking, semantic HTML elements are used to replace prior practice of nesting divs within divs within divs and using ids to identify elements uniquely. While this worked, newer semantic elements provide better accessibility and maintainability, making the code more human-readable by making it easier to identify which section of code is for which section of the page.

For a detailed overview of how semantic HTML can be implemented, check out this article from Interneting is Hard.

Diagram of semantic HTML page sections
Section Usage Examples
header Represents introductory content to the page or a section. Logo, title, navigation, search form; author names
nav A list of links, either within the current page or to other pages. Main navigation, table of contents, index, page menu
main The dominant and most important content within a page’s body. Primary article
section A standalone section of a document that doesn’t have a more specific semantic element to better identify it. These should always have headings to identify them, and can be nested within each other. Sub-articles, articles, page blocks, most places a div would be used
article A self-contained composition in a document, page, application, or site. This content should be able to be pulled out of the page without losing any contextual information, i.e. to be included in an article feed on another site. Articles can be nested within one another; inner articles are implied to be related to the containing article, i.e. a weather forecast where each day is a sub-article, or a blog post with comments. Every article should have a heading as a child element to identify it. Forum posts, magazine and newspaper articles, blog entries, product carts, user comments, widgets
details Creates a disclosure widget where the content is only visible when the widget is toggled to open. A summary or label is required, using the summary element. Add the boolean attribute open to set the default state to open. System requirements, technical specs, additional information
summary Specifies a summary, caption, or legend for a details element. Clicking the summary element will toggle the details details open and closed. System requirements, technical specs, additional information
figure Self-contained content, usually with a caption specified by figcaption. The figure, caption, and figure contents are usually treated as a single unit. Inset pictures, graphs, charts
figcaption Speficies the caption for figure elements. This can be significantly longer and more detailed than alt text, is able to be styled via CSS and accessed by users without screen readers, and is preferable with long descriptive alt texts. Inset pictures, graphs, charts
blockquote Indicates a quotation within a figure element. Quotes are attributed to their author using figcaption, and can be cited using the cite attribute within the blockquote opening tag or as a separate cite element if you want it to show in the text. Pull quotes
meter Represents either a scalar value within a known range, or a fractional value Progress bar-style representations of data within a known range
address Contains contact information for a person, people, or organization Street address, telephone, email
time Contains date, time, or a combination of the two. Time is specified in 24 hours within the datetime attribute but can be written in any format inside the tag, date can optionally include timezone and time, and it can also specify a time duration. Read Mozilla’s official documentation for more detailed information. Article publication dates, post timestamps
aside A section of the page only indirectly related to the page’s main content Sidebars, callout boxes, pull quotes
footer Represents the footer for a section or for the page, depending on its containing parent. A page can have more than one footer as long as they are nested correctly with the content they relate to. Copyright data, bottom navigation, related links
abbr Denotes an abbreviation or acronym; use the optinal title="..." attribute to spell out the acronym or abbreviation in its entirety. If the title attribute is included, it must contain this full description and nothing else. Abbreviations and acronyms
dfn Indicates the term being defined within the context of a definition phrase or sentence. The p, dt/dd, or section which is the nearest ancestor is considered to be the definition of the term. Definitions
dldt, and dd Indicates a description list (dl) containing description terms (dt) and description details (dd). Glossaries, metadata
sub and sup Transforms text into a subscript or superscript without using custom CSS. Exponents, footnotes, chemical equations
template This specifies that a page is allowed to process and validate the code it contains, but not render them to the user. template is most commonly used to store code that will be used during runtime with JavaScript. Product tables populated with JavaScript

Semantic colors

Using semantically named colors can help keep user interfaces consistent and easier to navigate. For example, buttons:

Adobe has a very good write-up on semantic colors, and how it can be used with light mode and dark mode interfaces.