Глава 1. Начало работы с НТМL ......................................................................................................... 9
1.1. Hello World ......................................................................................................................................................... 9
Глава 2. Доктайпы (Doctypes) ........................................................................................................... 12
2.1. Добавление доктайпа ................................................................................................................................. 12
2.2. Доктайп НТМL5 ............................................................................................................................................. 12
Глава 3. 3аголовки .............................................................................................................................. 14
3.1. Использование заголовков ....................................................................................................................... 14
Глава 4. Абзацы ................................................................................................................................... 16
4.1. Абзацы в HTML .............................................................................................................................................. 16
Глава 5. Форматирование текста ..................................................................................................... 17
5.1. Выделение ....................................................................................................................................................... 17
5.2. ЖИрный, курсив и подчеркивание ....................................................................................................... 18
5.3. Аббревиатура ................................................................................................................................................. 19
5.4. Вставленный, удаленный или зачеркнутый текст ......................................................................... 19
5.5. Верхний и нижний индекс ....................................................................................................................... 19
Глава 6. Якоря и гиперссылки .......................................................................................................... 20
6.1. Ссылка на другой сайт ................................................................................................................................ 21
6.2. Ссылка на якорь ............................................................................................................................................ 21
6.3. Ссылка на страницу тоrо же сайта ........................................................................................................ 22
6.4. Ссылка, которая набирает номер ........................................................................................................... 23
6.5. Открытие ссылки в новой вкладке/окне ............................................................................................. 23
6.6. Ссылка, которая выполняет JavaScript ................................................................................................. 23
6.7. Ссылка, которая запускает почтовый клиент ................................................................................... 24
Глава 7. Списки .................................................................................................................................... 26
7.1. Упорядоченный список .............................................................................................................................. 26
7.2. Неупорядоченный список ......................................................................................................................... 28
7.3. Вложенные списки ...................................................................................................................................... 28
7.4. Список описаний (description list) .......................................................................................................... 29
Глава 8. Таблицы ................................................................................................................................. 31
8.1. Простая таблица ........................................................................................................................................... 31
8.2. Объединение столбцов или строк ......................................................................................................... 31
8.3. Группы столбцов ........................................................................................................................................... 33
8.4. Таблица с элементами thead, thody, tfoot и caption ......................................................................... 34
8.5. Область заголовка ........................................................................................................................................ 35
Глава 9. Комментарии ....................................................................................................................... 38
9.1. Создание комментариев ............................................................................................................................ 38
9.2. Комментирование пробелов между строчными элементами .................................................... 39
Глава 10. Классы и идентификаторы .............................................................................................. 40
10.1. Назначение элемента класса ................................................................................................................. 40
10.2. Назначение элемента идентификатора ............................................................................................ 41
10.3. Допустимые значения .............................................................................................................................. 42
10.4. Проблемы, связанные с дУблированием идентификаторов ..................................................... 45
Глава 11. Атрибуты данных (Data Attributes) ................................................................................ 46
11.1. Поддержка в старых браузерах ............................................................................................................. 46
11.2. Использование атрибутов данных (Data Attribute Use) .............................................................. .46
Глава 12. Связывание ресурсов ........................................................................................................ 47
12.1. JavaScript ........................................................................................................................................................ 47
12.2. Внешняя таблица стилей CSS ................................................................................................................ 48
12.3. Favicon ............................................................................................................................................................ 49
12.4. Альтернативные таблицы стилей ....................................................................................................... 49
12.5. Подсказки для ресурсов:
dns-prefetch, prefetch, prerender ...................................................................................................................... 50
12.6. Атрибут media в теге <link> .................................................................................................................... 51
12.7. Предыдущая и следующая страницы ................................................................................................. 51
12.8. Веб-фид (Web Feed) ..................................................................................................................................... 51
Глава 13. Включение JavaScript-кoдa в НТМL ................................................................................ 52
13.1. Обработка отключенного JavaScript .................................................................................................... 52
13.2. Ссылка на внешний файл JavaScript ................................................................................................... 53
13.3. Прямое включение JavaScript-кoдa ..................................................................................................... 53
13.4. Включение JavaScript-фaйлa
с асинхронным выполнением ........................................................................................................................ 53
Глава 14. Использование НТМL с CSS .............................................................................................. 54
14.1. Использование внешних таблиц стилей .......................................................................................... 54
14.2. Внутренние таблицы стилей ................................................................................................................. 54
14.3. Встроенные стили ...................................................................................................................................... 55
14.4. Несколько таблиц стилей ....................................................................................................................... 55
Глава 15. Изображения ...................................................................................................................... 57
15.1. Создание изображения ............................................................................................................................ 57
15.2. Выбор альтернативного текста ............................................................................................................. 58
15.3. Адаптивное изображение с использованием атрибута srcset .................................................. 59
15.4. Адаптивное изображение с использованием элемента <picture> .......................................... 60
Глава 16. Карты изображений (Image Maps) .................................................................................. 61
16.1. Введение в карты изображений ........................................................................................................... 62
Глава 17. Элементы управления вводом ........................................................................................ 63
17.1. Текстовое поле ............................................................................................................................................. 64
17.2. Флажки и переключатели ...................................................................................................................... 64
17.3. Валидация ввода ........................................................................................................................................ 67
17.4. Цвет .................................................................................................................................................................. 69
17.5. Пароль ............................................................................................................................................................. 70
17.6.Файл ................................................................................................................................................................. 70
17.7. кнопка ............................................................................................................................................................ 71
17.8. Отправка формы ......................................................................................................................................... 73
17.9. Сброс формы ................................................................................................................................................. 73
17.10. Скрытое поле (Нidden) ............................................................................................................................ 73
17.11. Телефон ........................................................................................................................................................ 73
17.12. Электронная почта .................................................................................................................................. 74
17.13. Число ............................................................................................................................................................. 74
17.14. диапазон ...................................................................................................................................................... 74
17.15. Поиск ............................................................................................................................................................. 75
17.16. Изображение .............................................................................................................................................. 75
17.17. Неделя ........................................................................................................................................................... 75
17.18. URL ................................................................................................................................................................. 75
17.19. Локальные дата и время ........................................................................................................................ 75
17.20. Месяц ............................................................................................................................................................ 76
17.21. Время .......................................................................................................................................................... 76
17.22. Глобальные дата и время ...................................................................................................................... 76
17.23. Дата .............................................................................................................................................................. 77
Глава 18. Формы .................................................................................................................................. 78
18.1. Отправка данных ....................................................................................................................................... 78
18.2. Атрибут target в теrе form ....................................................................................................................... 79
18.3. Загрузка файлов .......................................................................................................................................... 80
18.4. Группировка нескольких полей ввода .............................................................................................. 80
Глава 19. Элемент Div ......................................................................................................................... 82
19.1. Основное использование ........................................................................................................................ 82
19.2. Вложенность ................................................................................................................................................ 83
Глава 20. Секционные элементы ..................................................................................................... 84
20.1. Элемент <nav> .............................................................................................................................................. 84
20.2. Элемент <article> ......................................................................................................................................... 85
20.3. Элемент <main> ........................................................................................................................................... 87
20.4. Элемент <header> ........................................................................................................................................ 89
20.5. Элемент <footer> ......................................................................................................................................... 89
20.6. Элемент <section> ........................................................................................................................................ 90
Глава 21. Навигационные панели ................................................................................................... 91
21.1. Базовая навигационная панель ........................................................................................................... 91
21.2. Навигационная панель в НТМL5 ......................................................................................................... 91
Глава 22. Элемент <label> .................................................................................................................. 92
22.1. Об элементе <label> .................................................................................................................................... 92
22.2. Базовое использование ............................................................................................................................ 93
Глава 23. Элемент Output (Вывод) ................................................................................................... 94
23.1. Использование атрибутов For и Form в элементе Output .......................................................... 94
23.2. Элемент Output с атрибутами ................................................................................................................ 95
Глава 24. Пустые элементы (Void Elements) .................................................................................. 96
24.1. Пустые элементы ........................................................................................................................................ 96
Глава 25. Медиаэлементы ................................................................................................................. 98
25.1. Аудио ............................................................................................................................................................... 98
25.2. Видео ............................................................................................................................................................... 98
25.3. Использование элементов <video> и <audio> для отображения ау~.о/видео контента .... 99
25.4. Видео в качестве заголовка или фона .............................................................................................. 100
Глава 26. Элемент Progress .............................................................................................................. 101
26.1. Прогресс ....................................................................................................................................................... 101
26.2. Изменение цвета полосы прогресса ................................................................................................. 101
26.3. Запасной вариант с использованием HTML .................................................................................. 102
Глава 27. Элементы управления выпадающими меню ..................................................................................... 103
27.1. Элемент <select> ........................................................................................................................................ 103
27.2. Опции ............................................................................................................................................................ 104
27.3. Группы опций ............................................................................................................................................ 105
27 .4. Элемент <datalist> ..................................................................................................................................... 105
Глава 28. Элемент <embed> ......................................................................................................................... 107
28.1. Основное использование ...................................................................................................................... 107
28.2. Определение МIМЕ-типа ....................................................................................................................... 107
Глава 29. IFrames (Встроенные фреймы) ...................................................................................................... 108
29.1. Основы встроенного фрейма ............................................................................................................... 108
29.2. Песочница (Sandboxing) ......................................................................................................................... 108
29.3. Установка размера фрейма ................................................................................................................... 109
29.4. Использование атрибута srcdoc ......................................................................................................... 109
29.5. Использование якорей с IFrames ....................................................................................................... 110
Глава 30. Языки контента ......................................................................................................................... 111
30.1. Основной язык документа .................................................................................................................... 111
30.2. Язык элемента ........................................................................................................................................... 111
30.З. Элементы с несколькими языками ................................................................................................... 111
30.4. Региональные URL ................................................................................................................................... 112
30.5. Обработка атрибутов с разными языками ..................................................................................... 112
Глава 31. SVG ...................................................................................................................................... 113
31.1. Встроенный SVG ........................................................................................................................................ 113
31.2. Встраивание внешних SVG-файлов в НТМL .................................................................................. 114
31.3. Встраивание SVG с помощью CSS ....................................................................................................... 114
Глава 32. Canvas (Холст) .................................................................................................................. 116
32.1. Базовый пример ........................................................................................................................................ 116
32.2. Рисование двух прямоугольников на <canvas> ............................................................................ 117
Глава 33. Метаинформация ................................................................................................................. 119
33.1. Информация о странице ....................................................................................................................... 119
33.2. Кодировка символов ............................................................................................................................... 120
33.3. Роботы (robots) ........................................................................................................................................... 120
33.4. Социальные сети ...................................................................................................................................... 121
33.5. Управление мобильной версткой ..................................................................................................... 123
33.6. Автоматическое обновление ............................................................................................................... 124
33.7. Распознавание телефонных номеров .............................................................................................. 125
33.8. Автоматическое перенаправление ................................................................................................... 125
33.9. Веб-приложение ............................................................................................................................. 125
Глава 34. Разметка компьютерного кода .................................................................................................... 126
34.1. Блок с использованием <pre> и <code> ............................................................................................ 126
34.2. Встроенный код с использованием <code> .................................................................................... 126
Глава 35. Разметка цитат ..................................................................................................................... 127
35.1. Встроенные цитаты с использованием <q> ................................................................................... 127
35.2. Блочные цитаты с использованием <blockquote> ......................................................................... 127
Глава 36. Tabindex ............................................................................................................................. 130
36.1. Добавление элемента в порядок табуляции .................................................................................. 130
36.2. Удаление элемента из порядка табуляции .................................................................................... 130
36.3. Определение пользовательского порядка табуляции (не рекомендуется) ....................................... 130
Глава 37. Глобальные атрибуты ........................................................................................................... 132
37.1. Атрибут contenteditable ................................................................................................................ 132
Глава 38. Кеш НTМL5 ........................................................................................................................... 134
38.1. Базовый пример кеша НТМL5 .......................................................................................................... 134
Глава 39. Атрибуты событий НТМL ........................................................................................................... 135
39.1. События форм HTML ....................................................................................................................... 135
39.2. События клавиатуры ....................................................................................................................... 135
Глава 40. Символьные сущности (Character Entities) ................................................................................... 136
40.1. Символьные сущности в НТМL ........................................................................................................... 136
40.2. Распространенные специальные символы .......................................................................................... 136
Глава 41. ARIA ......................................................................................................................................... 138
41.1. role= .. presentation ...................................................................................................................................... 138
41.2. role= .. alert ..................................................................................................................................................... 138
41.3. role= .. alertdialog .......................................................................................................................................... 138
41.4. role= .. application .. ....................................................................................................................................... 139
41.5. role= .. article" ................................................................................................................................................ 139
41.6. role= .. banner ................................................................................................................................................. 140
41.7. role= .. button .................................................................................................................................................. 140
41.8. role= .. cell ........................................................................................................................................................ 140
41.9. role= .. checkbox ............................................................................................................................................ 140
41.10. role= .. columnheader" ............................................................................................................................... 141
41.11. role="combobox .. ...................................................................................................................................... 141
41.12. role="complementary" ................................................................................................................................. 141
41.13. role="contentinfo ......................................................................................................................................... 141
41.14. role= .. definition .......................................................................................................................................... 142
41.15. role="dialog ................................................................................................................................................. 142
41.16. role= .. directory ........................................................................................................................................... 142
41.17. role="document .. ....................................................................................................................................... 142
41.18. role="form ................................................................................................................................................... 143
41.19. role="grid .. .................................................................................................................................................. 144
41.20. role="gridcell .............................................................................................................................................. 144
41.21. role="group ................................................................................................................................................. 144
41.22. role="heading ............................................................................................................................................. 145
41.23. role= .. img ..................................................................................................................................................... 145
41.24. role="link ..................................................................................................................................................... 145
41.25. role="list ...................................................................................................................................................... 145
41.26. role="listbox ............................................................................................................................................... 145
41.27. role= .. listitem .............................................................................................................................................. 146
41.28. role= .. log ...................................................................................................................................................... 146
41.29. role= .. main .. ................................................................................................................................................ 146
41.30. role= .. marquee ........................................................................................................................................... 146
41.31. role= .. math" ................................................................................................................................................ 147
41.32. role= .. menu" ............................................................................................................................................... 147
41.33. role= .. menubar" ......................................................................................................................................... 147
41.34. role= .. menuitem ......................................................................................................................................... 147
41.35. role= .. menuitemcheckbox ....................................................................................................................... 148
41.36. role= .. menuitemradio ............................................................................................................................... 148
41.37. role= .. navigation ........................................................................................................................................ 148
41.38. role= .. note" .................................................................................................................................................. 148
41.39. role= .. option .. .............................................................................................................................................. 149
41.40. role= .. progressbar .. ................................................................................................................................... 149
41.41. role= .. radio" ................................................................................................................................................ 149
41.42. role= .. region .. .............................................................................................................................................. 149
41.43. role= .. radiogroup ....................................................................................................................................... 149
41.44. role= .. row ..................................................................................................................................................... 150
41.45. role= .. rowgroup ......................................................................................................................................... 150
41.46. role= .. rowheader" ..................................................................................................................................... 150
41.47. role= .. scrollbar ........................................................................................................................................... 151
41.48. role= .. search ................................................................................................................................................ 151
41.49. role= .. searchbox" ....................................................................................................................................... 151
41.50. role= .. separator" ........................................................................................................................................ 152
41.51. role= .. slider .. ............................................................................................................................................... 152
41.52. role= .. spinbutton .. ..................................................................................................................................... 152
41.53. role= .. status .. ............................................................................................................................................... 152
41.54. role= .. switch ................................................................................................................................................ 152
41.55. role= .. tab ...................................................................................................................................................... 153
41.56. role= .. table ................................................................................................................................................... 153
41.57. role= .. tablist .. .............................................................................................................................................. 153
41.58. role= .. tabpanel ........................................................................................................................................... 153
41.59. role= .. textbox .............................................................................................................................................. 154
41.60. role= .. timer .................................................................................................................................................. 154
41.61. role= .. toolbar .............................................................................................................................................. 154
41.62. role= .. tooltip ................................................................................................................................................ 154
41.63. role= .. tree ..................................................................................................................................................... 155
41.64. role= .. treegrid ............................................................................................................................................. 155
41.65. role= .. treeitem ............................................................................................................................................ 155
Благодарности ........................................................................................................................................................ 157
