semantic-html-and-seo

Name: semantic-html-and-seo
Author: dembrandt

289installs5forks

How to install semantic-html-and-seo?

dembrandt/dembrandt-skills/semantic-html-and-seo

$npx -y skills add dembrandt/dembrandt-skills --skill semantic-html-and-seo

Installs into the current project.

Summary

Semantic HTML5, SEO fundamentals, alt texts, progressive enhancement, SPA considerations, device capability detection, and user context awareness. Good HTML is the foundation of accessibility, SEO, and resilient UI. Use when building any web UI, reviewing markup quality, or optim

Files · 1

View on GitHub

SKILL.md

1	# Semantic HTML and SEO
2
3	Good HTML is not just markup — it is the contract between your content, search engines, assistive technologies, and the browser. Semantic HTML, correct metadata, and progressive enhancement make UI resilient, findable, and accessible by default.
4
5	---
6
7	## Semantic HTML5
8
9	Use the element that describes the content's meaning, not just its appearance.
10
11	### Document structure
12	```html
13	<header> <!-- site header, logo, primary nav -->
14	<nav> <!-- navigation links -->
15	<main> <!-- primary page content, one per page -->
16	<article> <!-- self-contained content: blog post, product card, news item -->
17	<section> <!-- thematic grouping with a heading -->
18	<aside> <!-- tangentially related content: sidebar, callout -->
19	<footer> <!-- site footer, secondary links, copyright -->
20	```
21
22	### Headings
23	One `<h1>` per page — the primary topic. Headings form an outline: do not skip levels (`h1` → `h3` without `h2`).
24
25	```html
26	<h1>Product name</h1>
27	<h2>Features</h2>
28	<h3>Feature detail</h3>
29	<h2>Pricing</h2>
30	```
31
32	### Interactive elements
33	```html
34	<button> <!-- clickable action, submits or triggers JS -->
35	<a href> <!-- navigation to a URL -->
36	<input> <!-- user data entry -->
37	<select> <!-- option selection -->
38	<details> / <summary> <!-- native disclosure/accordion -->
39	```
40
41	Never use `<div>` or `<span>` as interactive elements without full ARIA annotation — and even then, prefer the native element.
42
43	---
44
45	## Images and Alt Text
46
47	Every `<img>` needs an `alt` attribute. What goes in it depends on context.
48
49	\| Image type \| Alt text \|
50	\|---\|---\|
51	\| Informative (product photo, chart) \| Describe content: `alt="Red leather sofa, three-seater"` \|
52	\| Functional (icon button, logo link) \| Describe function: `alt="Go to homepage"` \|
53	\| Decorative \| Empty: `alt=""` — screen readers skip it \|
54	\| Complex (chart, diagram) \| Short alt + longer description nearby or in `<figcaption>` \|
55
56	```html
57	<!-- Informative -->
58	<img src="sofa.jpg" alt="Red leather sofa, three-seater">
59
60	<!-- Decorative -->
61	<img src="divider.svg" alt="">
62
63	<!-- With caption -->
64	<figure>
65	<img src="chart.png" alt="Bar chart showing revenue growth Q1–Q4 2025">
66	<figcaption>Revenue grew 42% year-on-year in Q4 2025.</figcaption>
67	</figure>
68	```
69
70	---
71
72	## SEO Fundamentals
73
74	### Title and description
75	```html
76	<title>Product Name — Short descriptor \| Brand</title>
77	<meta name="description" content="One or two sentences. What this page is, who it is for, what they will find.">
78	```
79
80	- Title: 50–60 characters. Most important keyword first.
81	- Description: 120–160 characters. Shown in search results — write for the human, not the algorithm.
82
83	### Canonical URL
84	```html
85	<link rel="canonical" href="https://example.com/the-definitive-url">
86	```
87
88	Prevents duplicate content penalties when the same page is accessible via multiple URLs.
89
90	### Open Graph (social sharing)
91	```html
92	<meta property="og:title" content="Page title">
93	<meta property="og:description" content="Page description">
94	<meta property="og:image" content="https://example.com/og-image.jpg">
95	<meta property="og:url" content="https://example.com/page">
96	<meta property="og:type" content="website">
97
98	<!-- Twitter/X -->
99	<meta name="twitter:card" content="summary_large_image">
100	<meta name="twitter:title" content="Page title">
101	<meta name="twitter:image" content="https://example.co

People who liked this also viewed

6 picks

Type

semantic-html-and-seo

289installs5forks

View on GitHub

How to install semantic-html-and-seo?

dembrandt/dembrandt-skills/semantic-html-and-seo

$npx -y skills add dembrandt/dembrandt-skills --skill semantic-html-and-seo

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Semantic HTML and SEO
2
3	Good HTML is not just markup — it is the contract between your content, search engines, assistive technologies, and the browser. Semantic HTML, correct metadata, and progressive enhancement make UI resilient, findable, and accessible by default.
4
5	---
6
7	## Semantic HTML5
8
9	Use the element that describes the content's meaning, not just its appearance.
10
11	### Document structure
12	```html
13	<header> <!-- site header, logo, primary nav -->
14	<nav> <!-- navigation links -->
15	<main> <!-- primary page content, one per page -->
16	<article> <!-- self-contained content: blog post, product card, news item -->
17	<section> <!-- thematic grouping with a heading -->
18	<aside> <!-- tangentially related content: sidebar, callout -->
19	<footer> <!-- site footer, secondary links, copyright -->
20	```
21
22	### Headings
23	One `<h1>` per page — the primary topic. Headings form an outline: do not skip levels (`h1` → `h3` without `h2`).
24
25	```html
26	<h1>Product name</h1>
27	<h2>Features</h2>
28	<h3>Feature detail</h3>
29	<h2>Pricing</h2>
30	```
31
32	### Interactive elements
33	```html
34	<button> <!-- clickable action, submits or triggers JS -->
35	<a href> <!-- navigation to a URL -->
36	<input> <!-- user data entry -->
37	<select> <!-- option selection -->
38	<details> / <summary> <!-- native disclosure/accordion -->
39	```
40
41	Never use `<div>` or `<span>` as interactive elements without full ARIA annotation — and even then, prefer the native element.
42
43	---
44
45	## Images and Alt Text
46
47	Every `<img>` needs an `alt` attribute. What goes in it depends on context.
48
49	\| Image type \| Alt text \|
50	\|---\|---\|
51	\| Informative (product photo, chart) \| Describe content: `alt="Red leather sofa, three-seater"` \|
52	\| Functional (icon button, logo link) \| Describe function: `alt="Go to homepage"` \|
53	\| Decorative \| Empty: `alt=""` — screen readers skip it \|
54	\| Complex (chart, diagram) \| Short alt + longer description nearby or in `<figcaption>` \|
55
56	```html
57	<!-- Informative -->
58	<img src="sofa.jpg" alt="Red leather sofa, three-seater">
59
60	<!-- Decorative -->
61	<img src="divider.svg" alt="">
62
63	<!-- With caption -->
64	<figure>
65	<img src="chart.png" alt="Bar chart showing revenue growth Q1–Q4 2025">
66	<figcaption>Revenue grew 42% year-on-year in Q4 2025.</figcaption>
67	</figure>
68	```
69
70	---
71
72	## SEO Fundamentals
73
74	### Title and description
75	```html
76	<title>Product Name — Short descriptor \| Brand</title>
77	<meta name="description" content="One or two sentences. What this page is, who it is for, what they will find.">
78	```
79
80	- Title: 50–60 characters. Most important keyword first.
81	- Description: 120–160 characters. Shown in search results — write for the human, not the algorithm.
82
83	### Canonical URL
84	```html
85	<link rel="canonical" href="https://example.com/the-definitive-url">
86	```
87
88	Prevents duplicate content penalties when the same page is accessible via multiple URLs.
89
90	### Open Graph (social sharing)
91	```html
92	<meta property="og:title" content="Page title">
93	<meta property="og:description" content="Page description">
94	<meta property="og:image" content="https://example.com/og-image.jpg">
95	<meta property="og:url" content="https://example.com/page">
96	<meta property="og:type" content="website">
97
98	<!-- Twitter/X -->
99	<meta name="twitter:card" content="summary_large_image">
100	<meta name="twitter:title" content="Page title">
101	<meta name="twitter:image" content="https://example.co

People who liked this also viewed

6 picks

Type