blob: 04b90591804a43827b4acf55a3f67ac9bc2af866 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
---
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]]
|
