---
tags:
  - html
  - web
---
Writing semantic HTML means using elements that convey the meaning of their content. So instead of using `<div>`, and `<span>` for example use `<header>` and `<h1>` etc, or `<nav>` for navigations.

The browser builds an **AOM** (Accessibility Object Model); it uses semantic elements to build a map with meaning of the elements. Used for accessibility purposes.

### Roles
Defined by [ARIA](https://w3c.github.io/aria/#dfn-role). All elements can have a `role` attribute, sementic elements have it implicitly.
Roles give meaning to elements, so it's useful to use directly if we can't find any existing semantic element and just a div instead.

### Document Structure
`<header>` and `<nav>` are semantic landmarks. 
Landmarks are the main sections of a webpage.
A `<header>` not in the top-level is no landmark; it is the header of a section. Same goes for the `<nav>`, it is only a landmark if it is inside the top-level `<header>`. Also `<footer>` is a landmark if it is a top-level element.

Footers often contain contact information or copyright etc.

Main: 1 per page; main contnet
Aside: tangentially related content; complementary
Article: represents a completely standalone piece of content, reusable.
Section: Used if no more specific element exists; should have a heading most of the time.

Don't use too many landmarks; it creates noise for screenreaders and makes it difficult to understand the structure.

Headings: `<h1>` go until h6. Site header if nested in top-level header element. Page header if nested in main element. Subsection header if nested in section or article.

An example of using semantic HTML at [[Holy Grail Layout]]