One page
HTML cheat sheet
What to keep at hand. If a line is not clear, go back to the matching lesson in the course.
Open the course: HTML EssentialsDocument
| What | How |
|---|---|
| Skeleton | <!DOCTYPE html><html lang="uk">… |
| Encoding | <meta charset="utf-8"> |
| Phone | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| Tab | <title>Page topic</title> |
| Description | <meta name="description" content="…"> |
Text
| What | How |
|---|---|
| Page topic | <h1>…</h1> — just one |
| Section | <h2>…</h2> |
| Paragraph | <p>…</p> |
| Important | <strong>…</strong> |
| List | <ul><li>…</li></ul> |
| Steps | <ol><li>…</li></ol> |
Links and media
| What | How |
|---|---|
| Link | <a href="/about">About the course</a> |
| New tab | target="_blank" rel="noopener noreferrer" |
| Image | <img src="…" alt="what's in it"> |
| Caption | <figure><img … alt=""><figcaption>…</figcaption></figure> |
| Video | <video controls><source src="…"></video> |
| Frame | <iframe src="…" title="what the video is about"></iframe> |
Skeleton and forms
| What | How |
|---|---|
| Landmarks | header nav main article section aside footer |
| One main | the page's main content |
| Field label | <label for="mail"> + id="mail" |
<input type="email" name="email" required> | |
| A button in a form | <button type="submit"> or type="button" |
Tables and a11y
| What | How |
|---|---|
| Title | <caption>…</caption> |
| Column header | <th scope="col"> |
| Row header | <th scope="row"> |
| Icon button | <button aria-label="Close"> |
| Checking | https://validator.w3.org/nu/ |