blob: cc4a89261878412c60d7557a97eef827d72f2f5a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
---
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.
For example used by screenreaders.
`<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>`
Don't use too many "landmark" roles; 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]]
|
