From d4bd3ad4a869c87fcfa4f83b42555a6c8e1bc746 Mon Sep 17 00:00:00 2001
From: Jasper Ras <jras@hostnet.nl>
Date: Sat, 17 May 2025 09:03:45 +0200
Subject: vault backup: 2025-05-17 09:03:45

---
 Semantic HTML.md | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

(limited to 'Semantic HTML.md')

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.
 
-- 
cgit v1.2.3