На одну сторінку
Шпаргалка · HTML Essentials
Те, що варто тримати під рукою. Якщо рядок незрозумілий — повернись у відповідний урок, не гугли десять статей поспіль.
Документ
| Що | Як |
|---|
| Каркас | <!DOCTYPE html><html lang="uk">… |
| Кодування | <meta charset="utf-8"> |
| Телефон | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| Вкладка | <title>Тема сторінки</title> |
| Опис | <meta name="description" content="…"> |
Текст
| Що | Як |
|---|
| Тема сторінки | <h1>…</h1> — один |
| Розділ | <h2>…</h2> |
| Абзац | <p>…</p> |
| Важливо | <strong>…</strong> |
| Список | <ul><li>…</li></ul> |
| Кроки | <ol><li>…</li></ol> |
Посилання й медіа
| Що | Як |
|---|
| Посилання | <a href="/about">Про курс</a> |
| Нова вкладка | target="_blank" rel="noopener noreferrer" |
| Картинка | <img src="…" alt="що на ній"> |
| Підпис | <figure><img … alt=""><figcaption>…</figcaption></figure> |
| Відео | <video controls><source src="…"></video> |
| Фрейм | <iframe src="…" title="про що ролик"></iframe> |
Каркас і форми
| Що | Як |
|---|
| Орієнтири | header nav main article section aside footer |
| Один main | основний вміст сторінки |
| Підпис поля | <label for="mail"> + id="mail" |
| Пошта | <input type="email" name="email" required> |
| Кнопка у формі | <button type="submit"> або type="button" |
Таблиця і a11y
| Що | Як |
|---|
| Назва | <caption>…</caption> |
| Шапка стовпця | <th scope="col"> |
| Шапка рядка | <th scope="row"> |
| Іконка-кнопка | <button aria-label="Закрити"> |
| Перевірка | https://validator.w3.org/nu/ |