Self-written notes on HTML — from the page skeleton to semantic markup to a full accessibility deep-dive (ARIA, screen readers, keyboard navigation). Written in my own words while learning, with a review sheet closing out each section.
html-notes/
├── 01-html-basics/ ← boilerplate, attributes, entities, media, links, paths
├── 02-semantic-html/ ← why semantics matter, heading hierarchy, semantic tags
└── 03-accessibility/ ← ARIA, screen readers, WAI-ARIA, keyboard navigation
| Section | Topics |
|---|---|
| HTML Basics | 23 notes — browse |
| Semantic HTML | 14 notes — browse |
| Accessibility | 20 notes — browse |
HTML Basics (23 topics)
- HTML Basics — What Is HTML, the Page Skeleton & Element Anatomy
- Understanding HTML Attributes — Tags, Void Elements & src/alt
- HTML Attributes Deep Dive — href, src, alt & Boolean Attributes
- The
<link>Element — Stylesheets, Fonts & Favicons - The HTML Boilerplate — DOCTYPE,
<html>,<head>&<body> - UTF-8 Character Encoding — What It Is & Why Every HTML File Needs It
<div>vs<section>— Grouping Content & Why Semantics Matter- IDs vs Classes — Naming, Targeting & Styling HTML Elements
- HTML Entities — Named, Decimal & Hexadecimal Character References
- The
<script>Element — Embedding & Linking JavaScript in HTML - Meta Description & SEO — How HTML Helps You Get Found
- Open Graph Tags — Controlling How Links Look on Social Media
- Audio & Video Elements — Embedding Sound and Video in HTML
- Optimizing Media Assets — Size, Format & Compression
- Image Licenses — Copyright, Fair Use, Creative Commons & Public Domain
- SVGs — Scalable Vector Graphics for Icons, Logos & Crisp Visuals
- Replaced Elements — When HTML Content Comes From Outside CSS
- The
<iframe>Element — Embedding Videos, Maps & External Pages - The target Attribute — Where Links Open (_self, _blank, _parent, _top)
- File Paths — Absolute vs Relative Paths & URLs
- File Paths — Slashes, Single Dot & Double Dot Explained
- Link States — :link, :visited, :hover, :focus, :active & the LVHFA Order
- HTML Basics Review
Semantic HTML (14 topics)
- Why Semantic HTML Matters — Meaning, Accessibility, SEO & DX
- Heading Hierarchy — Why h1→h6 Order Matters for A11y & SEO
- Presentational vs Semantic HTML — Why
<font>,<center>&<big>Are Dead <i>vs<em>— Idiomatic Text vs Emphasis (and When to Use CSS Instead)<b>vs<strong>— Bring-Attention-To vs Strong Importance- Description Lists —
<dl>,<dt>&<dd>for Key–Value Content - Block & Inline Quotes —
<blockquote>,<q>&<cite> <abbr>— Abbreviations, Acronyms & Initialisms in HTML- The
<address>Element — Contact Info, tel: & mailto: Links - The
<time>Element — Machine-Readable Dates with datetime & ISO 8601 <sup>&<sub>— Superscript, Subscript, Math & Chemical Formulas<code>&<pre>— Representing Computer Code in HTML<u>,<s>&<ruby>— Annotations, Strikethrough & East Asian Pronunciation- Semantic HTML Review
Accessibility (20 topics)
- What Are Large Text or Braille Keyboards, and Who Uses Them?
- What Is Accessibility?
- What Are Screen Magnifiers Used For?
- What Are Alternative Pointing Devices Such as Trackballs, Joysticks, and Touchpads Used For?
- What Is Voice Recognition Software Used For?
- What Are Screen Readers, and Who Uses Them?
- What Is the Purpose of WAI-ARIA, and How Does It Work?
- What Are Best Practices for Tables and Accessibility?
- Why Is It Important for Inputs to Have an Associated Label?
- What Are Some Common Accessibility Auditing Tools to Use?
- How Does Proper Heading Level Structure Affect Accessibility?
- What Are ARIA Roles?
- What Is the aria-describedby Attribute, and How Does It Work?
- What Are the Accessibility Benefits for Good Link Text, and What Are Examples of Good Link Text?
- What Is the aria-hidden Attribute, and How Does It Work?
- What Are the Roles of the aria-label and aria-labelledby Attributes?
- When Is the alt Attribute Needed, and What Are Some Examples of Good Alt Text?
- What Are Good Ways to Make Audio and Video Content Accessible?
- What Are Some Ways to Make Web Applications Keyboard Accessible?
- HTML Accessibility Review
- HTML Basics and Semantic HTML each end with a review file — use it to self-test.
- Accessibility is written as a Q&A set (mirroring how it's taught in most a11y curricula) — read a few a day rather than all at once, it sticks better that way.
See REFERENCES.md for the sources consulted while writing these notes, especially the Accessibility section.
Released under the MIT License.