html.md
# HTML
Semantic, accessible markup. Tags are shown escaped so they display literally.
## Document skeleton
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page title</title>
</head>
<body> ... </body>
</html>
```
## Text & semantics
```html
<h1> ... <h6> headings (one h1 per page)
<p> paragraph
<strong> <em> importance / emphasis (they carry meaning)
<ul><li> <ol><li> unordered / ordered list
<blockquote> <cite> quotation + its source
<code> <pre> <kbd> code / preformatted / keystrokes
```
## Links & media
```html
<a href="/path" target="_blank" rel="noopener">text</a>
<img src="t.png" alt="describe it" width="200" loading="lazy">
<picture>
<source srcset="t.webp" type="image/webp">
<img src="t.png" alt="...">
</picture>
<video controls><source src="v.mp4"></video>
```
## Semantic layout
```html
<header> <nav> <main> <footer>
<section> a thematic group (usually with a heading)
<article> self-contained, reusable content
<aside> tangential content / sidebar
<figure> <figcaption> media with a caption
```
## Forms & inputs
```html
<form action="/save" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<input type="number" min="0" max="9" step="1">
<textarea rows="4"></textarea>
<select><option value="a">A</option></select>
<button type="submit">Save</button>
</form>
```
types: email, url, number, date, color, range, search, tel, file
## Metadata & SEO
```html
<meta name="description" content="...">
<meta property="og:title" content="..."> Open Graph (social cards)
<meta property="og:image" content="...">
<link rel="canonical" href="https://...">
```
## Accessibility
```html
alt="..." on images; <label> every form control
<button> for actions, <a> for navigation
aria-label="Close" names an icon-only control
role + aria-* only when no native element fits
keep a visible :focus outline and logical tab order
```