diff options
Diffstat (limited to 'Semantic HTML.md')
| -rw-r--r-- | Semantic HTML.md | 16 |
1 files changed, 13 insertions, 3 deletions
diff --git a/Semantic HTML.md b/Semantic HTML.md index cc4a892..04b9059 100644 --- a/Semantic HTML.md +++ b/Semantic HTML.md @@ -9,11 +9,21 @@ The browser builds an **AOM** (Accessibility Object Model); it uses semantic ele ### 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. +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. -`<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>` +### 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. -Don't use too many "landmark" roles; it creates noise for screenreaders and makes it difficult to understand the structure. +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. |