From 78211f96953bc1a63570f2430cee4ad92c841ce4 Mon Sep 17 00:00:00 2001
From: Jasper Ras <jras@hostnet.nl>
Date: Tue, 6 May 2025 23:09:23 +0200
Subject: vault backup: 2025-05-06 23:09:23

---
 Semantic HTML.md | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 Semantic HTML.md

(limited to 'Semantic HTML.md')

diff --git a/Semantic HTML.md b/Semantic HTML.md
new file mode 100644
index 0000000..cc4a892
--- /dev/null
+++ b/Semantic HTML.md	
@@ -0,0 +1,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]]
\ No newline at end of file
-- 
cgit v1.2.3