/
Теги: языки программирования программирование html веб-разработка
Год: 2025
Текст
ДЛЯ ПРОФЕССИОНАЛОВ
НТМЬ5
ДЛЯ ПРОФЕССИОНАЛОВ
НТМЬ5
в примерах сообщества 8(аск ОуегЯоуу
Издательство АС Г
г. Москва
УДК 004.43
ьБК 32.973.2
Э34
Последнюю версию книги «НТМ1.5 Ыо(ев [ос Рго/еаюпак»
на английском языке
можно скачать по адресу: Нпр5://§оа1к/скег сот/НТМ1-5Воок
Вы можете делиться этим РОР-документом со всеми,
кому он может быть полезен, бесплатно.
Книга создана на основе документации 5Саск Оиег/1о\л/
(1эирз://агсЫуе ог§/де1аН5/доситеп(а1юп-дитр.7г), содержание которой
написано талантливыми участниками сообщества 51аск Ожсуо'//.
Текстовые материалы распространяются на условиях лицензии
СгеаПуе Соттопз ВТ-5А.
Список авторов, внесших вклад в создание различных глав книги,
приведен в конце в разделе «благодарности».
Изображения могут являться объектами авторского права
соответствующих владельцев, если не указано иное.
НТМЬЬ для профессионалов. Руководство по разработке в при-
Э34 мерах от сообщества ЗСаск ОмегЛот. — Москва . Издательство АСТ,
2025.— 160 с.: ил. — (Поограммированис. Оффер на миллион).
15ВЫ 978 5 17 178629 8. '
Перед рами компактное, но вместе с тем весьма насыщенное руководство
по НТМЬ — основополагающему языку размотки, лежащему в основе
каждой веб-страницы. Здесь собрана только самая важная и актуальная
информация для быстрого и эффективного освоения НТМ1., от простейших
структур до расширенных возможностей современной веб-размотки.
Вы узнаете, как создавать и структурировать контент с помощью
заголовков, абзацев, списков, таблиц и мультимедийных элементов. Кроме
того, рассматриваются принципы правильного использования ссылок,
форм и управляющих элементов, организации навигации и семантической
верстки. Особое внимание уделено атрибутам, работе с классами, иденти-
фикаторами. кастомными данными, а также взаимодействию НТМ1. с С85
и 1ама8спр1.
Книга охватывает современные возможности НТМ65: адаптивные
изображения, встроенные аудио- и видеоплееры, элемент <сапма5>
и БУО-графику, работу с АК1А-атрибутами для доступности, использование
метаинформации и глобальных атрибутов. Приведены практические советы
по оптимальной разметке, поддержке кросс-браузерности и улучшению ь1Х.
Это издание станет надежной опорой как для начинающих программ истов,
делающих первые шаги в веб-разработке, так и для опытных специалистов,
желающих систематизировать и расширить свои знания. Лаконичные
объяснения, четкая структура и множество практических примеров делают
эту книгу незаменимым инструментом в освоении и реальн ом при менении
НТМЬ
УДК 004.43
ББК 32.973 .2
15ВМ 978-5-17-178629-8
Перевод на русский язык. ООО «Интеджер».
Издание на русском языке: ООО «Издательство АСТ».
Содержание
Глава 1. Начало работы с НТМГ..............................................9
1.1. Не11о УУогШ................................................... 9
Глава 2. Доктайпы (Понурее)...............................................12
2.1. Добавление доктайпа...............................................12
2.2. Дсктайп НТМЬ5.....................................................12
Глава 3. Заголовки.................................................... 14
3.1. Использование заголовков..........................................14
Глава 4. Абзапы.......................................................... 16
4.1. Абзацы в НТМ1.....................................................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
€.3. Ссылка на страницу того же сайта 22
6.4. Ссылка, которая набирает номер......................................23
6 .5. Открытие ссылки в новой вкладке/окне............................23
6.6. Ссылка, которая выполняет ]ауа8спр!...............................23
6.7. Ссылка, которая запускает почтовый клиент ................ 24
Глава 7. Списки...........................................................26
7.1. Упорядоченный список..............................................26
7.2. Неупорядоченный список.—------------------------------- 28
7.3, Вложенные списки................................................ 28
7.4. Список описаний ШезспрЬоп Из!)....................................29
Глава 8. Таблицы..........................................................31
8.1. Простая таблица...................................................31
8.2, Объединение столбцов или строк....................................31
8 3. Группы столбцов..................................................33
8.4, Таблица с элементами 1.Ь.еас1, (Ьэс1у, ПооГи сарпол,....____________ , 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. Проблемы, связанные с дублированием идентификаторов...................43
Глава 11. Атрибуты данных (Вака АПпЬпкез)................................... 46
11.1. Поддержка в старых браузерах..........................................46
11.2. Использование атрибутов данных (Вака АйпЬике Пае).....................46
Глава 12. Связывание ресурсов..................................................47
12.1. |<н7а8слр(....................................................... 47
12.2. Внешняя таблица стилей С88............................................48
12.3. Ггсчсоп...............................................................49
12.4. Альтернативные таблицы стилей............................... 49
12.5. Подсказки для ресурсов-
бпз-ргеТеГсй, ргеГе1с1т, ргегепйег...........................................56
12.6. Атрибут тпеейа в теге <Нпк>............................................51
12.7. Предыдущая и следующая страницы.......................................51
12.8. Зеб-фид (ВДеЬ Геей)....................................................51
Глава 13. Включение |ауа8спр1-кода в ИТМ1......................................32
13.1 Обработка отключенного ]ауа8спрк........................................52
13.2 . Ссылка на внешний файл ]ауа8спрк....................................53
13.3 Прямое включение |ауа8сг:рк-кода......................................53
13.4 . Включение ]ауа8спр(-файла
с асинхронным выполнением...................................................53
Глава 14. Использование НТМЬ с С88.............................................54
141. Использование внешних таблиц стилей....................................54
14.2. Внутренние таблицы стилей.............................................54
14.3. Встроенные стили......................................................55
14.4. Несколько таблиц стилей............................................ 55
Глава 15. Изображения................................................... 57
15.1. Создание изображения..................................................57
15.2. Выбор альтернативного текста..........................................58
15 3 Адаптивнее изображение с использованием атрибута згезек................59
15.4. Адаптивное изображение с использованием элемента <р!скиге>...... ...60
Глава 16. Карты изсбражений (1та§е Марк)...................................... 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. Скрытое поле (ШсМеп)...................................................73
17.11. Телефон .................................................. 73
17.12. Электронная почта......................................................74
17.13. Число..................................................................74
17.14. Диапазон...............................................................74
17.15. Поиск..................................................................75
17.16. Изображение............................................................75
17.17. Неделя.................................................................75
17.18. ОКБ.................................................................. 75
17.19. Локальные дата и время.................................................75
17.20. Месяц..................................................................76
17 21. Время ................................... . 76
17.22. Глобальные дата и время................................................76
17.23. Дата...................................................................77
Глава 18. Формы.............................................................. 78
18.1 Отправка данных........................................................ 78
18.2 . Атрибут 1агде( в теге Топп.................................... .....79
18.3 . Загрузка файлов.......................................................80
18 4 Группировка нескольких полей ввода.....................................80
Глава 19. Элемент О1У............................................................82
19.1. Основное использование..................................................82
19.2. Вложенность....................................................... 83
Глава 20. Секционные элементы.................................................. 84
20.1. Элемент <пау>...........................................................84
20.2. Элемент <агНс!е>........................................................85
20.3. Элемент <тат>...........................................................87
20 4. Элемент <йеа(1ег>.......................................................89
20.5. Элемент <Гоо1ег>........................................................89
20.6. Элемент <зесПоп>........................................................90
Глава 21. Навигационные панели...................................................91
21.1. Базовая навигационная панель____________________________________________91
21.2. Навигационная панель в НТМГ.5...........................................91
Глава 22. Элемент <1аЬе1>........................................................92
22.1. Об элементе <1аЬе1>.....................................................92
22.2. Базовое использование...................................................93
Глава 23. Элемент ОиГриГ (Вывод).................................................94
23.1. Использование атрибутов Гог и Гогт в элементе ОиГриГ....................94
23.2. Элемент ОиГриГ с атрибутами.............................................95
Глава 24. Пустые элементы (УогсГ ВешепК).........................................96
24.1 Пустые элементы..........................................................96
Глава 25. Медиаэлементы........................................................ 98
25.1. Аудио...................................................................98
25.2 Видео...................................................................98
25.3. Использование элементов <\'к!ео> и <аис11о > для отображения аудио/видео контента....99
25.4. Видео в качестве заголовка или фона....................................100
Глава 26. Элемент Рго§ге&8................................................. 101
26.1. Прогресс......................................... .101
26.2. Изменение цвета полосы прогресса.....................................101
26.3. Запасной вариант с использованием НТМЬ...............................102
Глава 27. Элементы управления выпадающими меню................................103
27 1. Элемент <зе1ес1>.„...................................................103
27.2. Опции................................................................104
27.3. Группы опций.........................................................105
27.4 Элемент <йа1а1гз1>...................................................105
Глава 28. Элемент <етЬе<1>................................................ 107
28.1. Основное использование...............................................107
28.2. Определение М1МЕ-типа................................................107
Глава 29.1Ггатев (Встроенные фреймы)..........................................108
29.1. Основы встроенного фрейма.................................... 108
29.2. Песочница (ЗапйЬохшз).............................................. 108
29.3. Установка размера фрейма............................................ 109
29.4. Использование атрибута згсйос........................................109
29.5. Использование якорей с 1Ггагг.ез.....................................110
Глава 30. Языки контента......................................................111
30.1. Основной язык документа............................................. 111
30.2. Язык элемента........................................................111
30 3. Элементы с несколькими языками......................................111
30.4. Региональные ПКЬ.....................................................112
30.5. Обработка атрибутов с разными языками................................112
Глава 31. 8УС.................................................................113
31.1. Встроенный 8УС . ... ................................................113
31.2. Встраивание внешних 5УС-файлев в НТМЕ................................114
31.3. Встраивание 8УС с помощью С88........................................114
Глава 32. Сапуав (Холст)......................................................116
32.1. Базовый пример.......................................................116
32.2. Рисование двух прямоугольников на <саг№з>............................117
Глава 33. Метаянформация......................................................119
33.1 Информация о странице.................................................119
33.2. Кодировка символов...................................................120
33.3. Роботы (гоЬоГз)......................................................120
33.4. Социальные сети......................................................121
33.5. Управление мобильной версткой........................................123
33.6. Автоматическое обновление............ ... ..... ............... 124
33.7. Распознавание телефонных номеров................................. 125
33.8. Автоматическое перенаправление.......................................125
33.9. Веб-приложение.......................................................125
Глава 34. Разметка компьютерного кода.........................................126
34.1. Блок с использованием <рге> и <сойе>.............................. .126
34.2. Встроенный код с использованием <сог!е>............................. 126
Глава 35. Разметка цитат ......................................................... 127
35.1. Встроенные цитаты с использованием <ц>......................................127
35.2. Блочные цитаты с использованием <Ыоскдио(е>.................................127
Глава 36. ТаЫпбех................................................................... 130
36.1. Добавление элемента в порядок табуляции.....................................130
36.2. Удаление элемента из порядка табуляции......................................130
36.3. Определение пользовательского порядка табуляции (не рекомендуется) .........130
Глава 37. Глобальные атрибуты ...................................................... 132
37.1. Атрибут соШеШеййаЫе.........................................................132
Глава 38. Кеш НТМЬ5................................................................. 134
38.1. Базовый пример кеша НТМ15...................................................134
Глава 39 Атрибуты событий НГМЬ..................................................... 135
39.1. События форм НТМЬ...........................................................135
39.2. События клавиатуры..........................................................135
Глава 40. Символьные сущности (Сйагас1ег Епийез).................................. 136
40.1. Символьные сущности в НТМЬ.................................................136
40.2. Распространенные специальные символы.......................................136
Глава 41. АК1А........................................................ 138
41.1. гэ1е="ргезеЩайоп"...........................................................138
412. го1е="а1еп"..................................................................138
41.3. го1е-"а1егП11а1о§".........................................................138
41.4. го1е="арр11сабоп"..........................................................139
41.5. го1е-"агйс1е’..............................................................139
41.6. го!е= "Ьаппег".............................................................140
41.7 го1е="ЬпНоп"................................................................140
41.8. го1е="се11"................................................................140
41.9. пЯе-’сйескЪох'.............................................................140
41.10. го!е-сокиппкеабет"........................................................141
41.11. го1е="сотЬоЬох"...........................................................141
41.12. го1е="сотр1етепгату"......................................................141
41.13. го1е=' соп1епйпГо"........................................................141
41.14. го1е="<1ейтйоп"...........................................................142
41.15. го1е="с11а1о§"............................................................142
41.16 го1е="с1пес1огу"...........................................................142
41.17. го1е="(1псшпел1"..........................................................142
41.18. го1е="Гогт"...............................................................143
41.19. го1е="§г1й"...............................................................144
41.20. го1е="§пс1сеИ"............................................................144
41.21 го1е="§гопр"...............................................................144
41.22. пЯе-Ъеаскпд"..............................................................145
41.23. го1е-'1т§ ' ..............................................................145
41.24. го!е“"1тк"............................................................... 145
41 25 го1е='11Й"................................................................. 145
41 26 го1е-"113(Ьох"..............................................................145
41.27. го1е="1181йет"....................................................................146
41.28. го1е="1о§"........................................................................146
41.29. го1е="тат"........................................................................146
41.30. го!е-'тащиее''................................................................... 146
41.31. го1е="та111"......................................................................147
41.32. го1е*"тепц".......................................................................147
41.33. го1е^"тепиЬаг"....................................................................147
41.34. го!е-'тегшйет"....................................................................147
4135.1о1е="тепш1етс11ескЪох"..............................................................148
41.36. го1е="тепш(гтгас11с.".............................................................148
41.3 7.1 о1е-"па\'1§а1юп'................................................................148
41.38. го1е-"по1е"...................................................................... 148
41.39. го1е="орЬоп"......................................................................149
41.40. го1е="рго8ге58Ьаг”................................................................149
41.41. го1е="гас1]о''....................................................................149
41.42. го1е="ге§юп"......................................................................149
41.43. го1е=”гас11о§гоир"................................................................149
41.44. го1е="го1лГ.......................................................................150
41.45. го!е-'гсда§гоир"..................................................................150
41.46. го1е="го'лФеас1ег"................................................................150
41.47. го1е="8сго11Ьаг"..................................................................151
41.48. го1е="8еаг<±".....................................................................151
41.49. го1е="5еагсЬЬох"........................................................ ..151
41.50. го1е="8ерага1ог"..................................................................152
41.51. го1е="81Шег"......................................................................152
41.52. го1е="8ртЬиКоп''..................................................................152
41.53. го1е="8(а1и8".....................................................................152
41.54. го1е-"81У11с?1" ..................................................................152
41.55. го1е-"1аЬ"........................................................................153
41.56. го1е-"(аЫе '......................................................................153
41.57. го1е="1аЫ15Г’.....................................................................153
41.58. го!е="1аЬрапе1"...................................................................153
41.59. го1е="1ех?Ьох"....................................................................154
41.60. го1е="Нтег".......................................................................154
41.61. го!е="1:оо1Ьаг"............................................................ 154
41.62. го1е^"1оо1пр".....................................................................154
41.63. го1е="(гее".......................................................................155
41 64. го1е="1гее§г;сГ....................................................................155
41.65. го1е="1гее11ет"...................................................................155
Благодарности ............................................................................... 157
Глава 1.
Начало работы с НТМ1_
Версия Дата выпуска
1.0 61-01-1994
2.0 24-11-1995
3.2 14-01-1997
4.0 24-04-1998
4.01 24-12-1999
5 29-10-2014
5.1 01-11-2016
5.2 14-12-2017
5.3 24-01-2018
1.1. Не11о УУог1с1
Введение
НТМЕ (Нурегсех! Магкир Еап§иа§е, язык гипертекстовой разметки) ис-
пользует систему разметки, состоящую из элементов, которые представля-
ют определенное содержимое. Разметка означает следующее: с помощью
НТМЕ вы объявляете, что именно будет показано зрителю, а не как это будет
показано. Визуальное представление определяется с помощью каскадных
таблиц стилей (С88) и реализуется браузерами. Некоторые элементы, такие
как <1:оп1>, которые все еще существуют, полностью устарели и не должны
использоваться авторами[11.
НТМЕ иногда называют языком программирования, по он не содержит
логики, поэтому является языком разметки. НТМЕ-теги обеспечивают се-
мантическое значение и машинную читаемость содержимого па стра-
нице.
Элемент обычно состоит из открывающего тега (<е1етепТ_пате>), закры-
вающего тега (</е1етепб_пате>), которые содержат имя элемента, окружен-
ное угловыми скобками, и содержимого между ними
<е1етегй_пате>. . .сопЕепЕ. . .</е1етепЕ_пап1е>
Существуют некоторые НТМЬ-элементы, которые не имеют закрываю-
щего тега или содержимого. Оки называются пустыми элементами (уоШ
е1етеп(8). К ним относятся <1тд>, <те!а>, <Ипк> и < 1при1:>.
Имена элементов можно рассматривать как описательные ключевые сло-
ва для содержимого, которое они содержат, например, У1с1ео (видео), аисПо
(аудио), СаЫе (таблица), СооГе г (футер).
ЕТМЬ-страница может состоять из сотен элементов, которые затем чита-
ются веб-браузером, интерпретируются и преобразуются в читаемое или оз-
вученное содержимое на экране.
Для этого документа важно отметить разницу между элементами и тегами:
• Элементы: уьбео, аисИо, ГаЫе, ТооТег
• Теги: <у1бео>, <аис!1о>, <1ао1е>, <ТооСег>, </Н1:т1>, </Ьобу>
Понимание элементов
Давайте разберем, что представляет собой тег.
Тег <р> представляет собой обычный абзац (рага^гарй).
Элементы чаще всего имеют открывающий и закрывающий теги. Откры-
вающий тег содержит имя элемента в угловых скобках (<р>). Закрывающий
тег идентичен открывающему, но с добавлением косой черты (/) между от-
крывающей угловой скобкой и именем элемента (</р>).
Содержимое может быть помещено между этими двумя тегами:
<р>ТЫз 13 а 81тр1е оагаргаэб.</р>.
Создание простой страницы
Следующий пример НТМЪ создает простую веб-страницу «Не11о 'Лог1б».
НТМЬ-файлы можно создавать с помощью любого текстового редактора.
Файлы должны быть сохранены с расширением . К1П11 или . Ыш[2}, чтобы
они распознавались как ЕТМЬ-файлы.
После создания этот файл можно открыть в любом веб-браузере
< !ЭОСТУРЕ Итт1>
<ЬЦт1 1апд=‘'еп"> <!-- Язык документа - английский -->
<Неас1>
<теГа сбагзеТ.= "0ТЕ-8"> <!-- Кодировка символов - ОТЕ-8 -->
<111:1е>Не11о!</111:1е> <!-- Заголовок страницы -->
< /Ьеас1>
< Ьсбу>
<Н’1?Не11о 1А/ог 1с1! </ 1л1 > <!-- Заголовок первого уровня -->
<р>ТН1з 1з а 31шр1е рагадгарб.</р> <!-- Простой абзац
< /Ьобу>
< /игш1>
Разбор простой страницы
Ниже поясняются теги, использованные в примере.
Тег Значение
<Ю0СТУРЕ> Определяет версию НТТЛЬ, используемую в документе. В данном случае это НТМЬ5. Открывает страницу. Никакая разметка не должна идти после за-
<1т1т1> крывающего тега (< /ЬТт1>). Атрибут 1апд объявляет основной язык страницы с использованием кодов 180 (например, еп для англий- ского) Открывает раздел Ьоаб, который не отображается в основном окне
<Ьеас1> браузера, но содержит информацию о НТМТ-документе, называе- мую метаданными. Он также может содержать импорт внешних та- блиц стилей и скриптов. Закрывающий тег — </Кеас!>. Предоставляет браузеру метаданные о документе. Атри- бут сбагзеС объявляет кодировку символов Современные НТМЪ-до-
<теТа> кументы всегда должны использовать ШТ-8, даже если это не яв- ляется обязательным требованием. В НТМУ тег <теГа> не требует закрывающею тега. Заголовок страницы. Текст, написанный между этим открывающим
<Т1Т1е> и закрывающим тегом (</т 11:1е>), будет отображаться на вкладке страницы или в заголовке браузера. Открывает часть документа, отображаемую пользователям, то есть
<Ьобу> все видимое или озвученное содержимое страницы. Никакое содер- жимое не должно добавляться после закрывающего тега </Ьобу>
<Н1> Заголовок первого уровня для страницы
<р> Представляет собой обычный абзац текста
1 . НТМЬ5,11.2 Несоответствующие функции
(1Шр8://]1Гт1.5рес.те]гаш§.ог§/ти1пра§е/'оЬ5о1еЩ.11Гп11#поп-
сопГогтт^-ГсаШгез).
2 Нт унаследован от ограничения НО8 на трехсим-
вольные расширения файлов. (НПр8://еп.жк1ресНа.ог§
/улк1/ПО8).
Глава 2.
Доктайпы (ОосТурез)
Доктайпы (РосГурез) — сокращение от ЛоситеШ гуре (тип документа) —
помогают браузерам понять версию НТМЦ на которой написан документ,
для лучшей интерпретации. Объявления доктайпов не являются НТМЬ-тега-
ми и должны располагаться в самом верху документа. В этой теме объясня-
ются структура и объявление различных доктайпсв в НТМЕ.
2.1. Добавление докчайпа
Объявление <! ООСТУРЕ> всегда должно быть включено в начало НТМТ.-до-
кумента, перед тегом <Ист 1 >.
Версия>5
См. раздел «Доктайп НТМЙ5» ниже, чтобы подробнее узнать о доктайпе
НТМЕ5.
2.2. Доктайп НТМ1-5
НТМ1.5 не основан на 8СМЪ (ЗТапйагб СепегаИхес! Магкир Еап§ва§е,
стандартный обобщенный язык разметки) и поэтому не требует ссылки
на ВТО (РосшпепГ Туре РейпШоп, определение типа документа).
Объявление доктайпа НТМЕ5:
<!ООСТУРЕ ИТт1>
Регистронезависимос/пъ
Согласно спецификации А/У3.ог§ НТМЬ5 РОСТУРЕ Доктайп должен состоять
из следующих компонентов в указанном порядке:
II Строка, которая является регистронезависимым совпадением
строки «<!РОСТУРЕ».
Следовательно, следующие доктайпы также являются
допустимыми-
<! СосСуре Н1:т1>
<! сЮССуРе Г11:т1>
<!РосТУре Ыт1>
Спецификации ХУЗ.ог^ НТМЬЗ И О СТУРЕ (кПрз://Шт1.зрес.
шЬат'д.огй/тиШраБе/'зупГах.Мт^Ше-йосГуре).
В этой статье на ЗГаск ОуегЯош подробно обсуждается
тема Ыррегсазе от Тоууегсазе босГуре? (Ъир8://8(аскоуегПосу.
сот/дие8Йоп8/7020961/иррегса8е-ог-1ошегса8е-<1ос1уре)
Глава 3.
Заголовки
ЕТМЬ предоставляет нс только обычные теги для абзацев, но и шесть
отдельных тегов заголовков для обозначения заголовков различных
размеров и толщины. Они нумеруются от заголовка 1 до заголовка 6, где
заголовок 1 имеет самый крупный и жирный текст, а заголовок 6 — самый
мелкий и тонкий, вплоть до уровня абзаца. В данной главе подробно
описывается правильное использование этих тегов.
3.1. Использование заголовков
Заголовки могут использоваться для описания темы, которую они пред-
варяют, и определяются с помощью тегов <Н1>-<Ь6>. Заголовки поддержива-
ют все глобальные атрибуты.
• <Ь1 > определяет самый важный заголовок.
• <Е6> определяет наименее важный заголовок.
Пример определения заголовков:
<111 «НеасНпд 1</Н1> <!-- Заголовок 1 -->
<И2>Неас'1пд 2</Ь2> <!-- Заголовок 2 -->
<НЗ>Неас1пд 3</Ь3> <!-- Заголовок 3 -->
<И4>Неас,1пд 4</Н4> <!-- Заголовок 4 -->
<1"|5>11еас!1пд 5</б5> <!-- Заголовок 5 -->
<1г6>НеасПпд б</Ьб> <!-- Заголовок б -->
Правильная структура важна
Поисковые системы и другие пользовательские агенты обычно индек-
сируют содержимое страницы на основе элементов заголовков, например,
для создания оглавления, поэтому использование правильной структуры
для заголовков имеет большое значение.
Как правило, статья должна содержать один элемент <Ы> дтя основно-
го заголовка, за которым следуют подзаголовки <Н2> — при необходимо-
сти можно углубляться на уровень ниже. Если элементы <Ы > используются
на более высоком уровне, они не должны описывать содержимое более низ-
кого уровня.
Пример документа (дополнительные отступы для иллюстрации
иерархии):
<Н1>Ма1п Г1-Це</Ь1> <!-- Основной заголовок -->
<р>1п1:гос1ис1:1 оп</р> <!-- Введение -->
<Н2>Реазог.5</Н2> <!-- Причины -->
<НЗ>Чеазоп 1</ЬЗ> <!-- Причина 1 -->
<р>Раг адгарН</р> <!-- Абзац -->
<1?3>Чеа5оп 2</ИЗ> <!-- Причина 2 -->
<р>РагадгарН</р> <!-- Абзац -->
^Н2>1п сопс1и51оп</Н2> <!-- В заключение -->
<р>РагадгарН</р> <!-- Абзац -->
Глава 4.
Абзацы
Элемент НТМБ Описание
<р> Определяет абзац
<Ьг> Вставляет одинарный разрыв строки
<рге> Определяет предварительно отформатированный текст
Абзацы являются самым базовым элементом НТМБ. В данной главе объяс-
няется н демонстрируется использование элемента абзаца в НТМБ
4.1. Абзацы в НТМ1
Элемент НТМБ <р> определяет абзац:
<р>Т1118 13 а ра г ад г арб. </р> <!-- Это абзац. -->
<р>Т111з 18 апоБбег рагадгарб.</р> <!-- Это еще один абзац. -->
Вы не можете быть уверены в том, как НТМБ будет отображаться.
Большие или маленькие экраны, а также измененные размеры окон да-
дут разные результаты.
В НТМБ вы не можете изменить вывод, добавляя дополнительные пробе-
лы или строки в ваш код.
Браузер удалит все лишние пробелы и строки при отображении страни-
цы:
<р>ТП1з 18 апоБбег рагадгарб, ехБга зрасез «111 Ье
гетоуео Ьу Ьго«8е-8</р>
<!-- Эго еще один абзац, лишние пробелы будут удалены браузерами.
Глава 5.
Форматирование текста
Хотя большинство тегов НТМЕ используются для создания элементов,
НТМЕ также предоставляет теги для форматирования текста, которые при-
меняют определенные стили к частям текста. В этой главе приведены при-
меры форматирования текста в НТМЕ, такие как выделение, жирный шрифт,
подчеркивание, нижний индекс и зачеркнутый текст.
5.1. Выделение
Элемент <тагк> является новым в НТМЕ5 и использует-
ся для выделения текста в документе <'В связи сею важно-
стью в другом контексте». Ссылка на источник (Впр8://т\ж.
шЗ,ог§/ТК/2014/КЕС-11гт] 5-20141огзЛехЫеуеЕзетапНсз.
1пт1#1йе-тагк-е1етепГ).
Наиболее распространенный пример — это результаты поиска, где поль-
зователь ввел поисковый запрос, и результаты отображаются с выделением
искомого запроса:
<р>Неге 13 зоте согйеп!: Егот ап аг1:1с1е ТбаС сопТ.аЕпя СИе
<тагк>зеагсНеб диегу</тагк>
Нга! ме аге 1оок1пд Тог. НтдЕИдбСюд Нэе ЕехС иШ таке 11 еазьег
Гог Нге изег Со Т1пс1 «Нас Нгеу аге 1оок1пд Гог.</р>
<!-- Вот содержимое статьи, содержащее <тагк>искомый запрос</пагк>,
который мы ищем. Выделение текста упрощает пользователю поиск
нужной информации. -->
Вывод:
Неге 13 ',оп) е сопгеш йот ап атс1е гкаг сопгатз гЬе «еагсйес! диегу гкаг тсе
аге 1ооктг Гог Екгккзкгтг ке гехг пт11 таке п еазхег йл гке изег го Ешс1
мкаг (кеу аге 1оокш2 Гог.
Стандартное форматирование — э го черный текст на желтом фоне, но это
можно изменить с помощью С88.
5.2. Жирный, курсив и подчеркивание
Жирный текст
Чтобы выделить текст жирным, используйте теги <ер гопд> или <Ь>:
<зГго1тд>Во1а Техн Неге</з1:гопд>
<!-- Жирным текст здесь -->
или
<Ь>Во1с1 7ехГ Неге</Ь>
В чем разница? В семантике. Тет <з!гопд> используется для обозначе-
ния текста, который является фундаментально или семантически важным
для окружающего текста, в то время как <Ь> не указывает на такую важ-
ность и просто представляет текст, который должен быть выделен жирным.
Если вы используете <Ь>, программа для преобразования текста в речь
не будет произносить слово(а) иначе, чем остальные слова вокруг него — вы
просто привлекаете внимание к пим, не добавляя дополнительной важно-
сти. Однако при использовании <81: гопд> та же программа озвучит эго слово
(слова) с другим тоном, чтобы передать, что текст важен.
Курсив
Чтобы выделить текст курсивом, используйте теги <ет> или <1>:
<ет>1ба11с12ес1 Техн Неге</ет>
<!-- Курсивный текст здесь -->
или
<1>П:а11С12ес1 ТехЕ Не-е</1>
В чем разница? В семантике. Тег <еш> используется для обозначе-
ния текста, который должен иметь дополнительное ударение, в то время
как <х> просто представляет текст, который должен быть выделен курсивом.
Например, если вы хотите подчеркнуть действие в предложении, можно
выделить его курсивом с помощью <еш>:
«Йои1с1 уси )и.зб ы/ЬттН Нбе есНГ а1геабу?'
<!-- Не могли бы вы просто отправить правку уже? -->
Но если зы указываете название книги или газеты, которое обычно выде-
ляется курсивом стилистически, следует использовать <1>:
"I «аз Еогсеб Но геас! Аотео апс! ДиИеб 1п ЫдН зсЬсо1.''
<!-- Меня заставили читать "Ромео и Джульетту" в школе. -->
Подчеркнутый текст
Хотя элемент <и> был устаревшим в НТМЕ4, он был возвращен в НТМЕ5
с измененной семантикой — для представления неартикулированных,
не текстовых аннотаций. Например, его можно использовать для обозначе-
ния опечаток на странице или для китайских имен собственных:
<р>ТН15 рагадгарб согйантв зоте <и>т1ереПес1</и> Цех!:.</р>
<!-- В этом абзаце есть опечатки. -->
5.3. Аббревиатура
Чтобы обозначить выражение как аббревиатуру, используйте тег <аЬЬг>:
<р>1 Ике 10 м/гИе <аЬЬг г111е="Нуреггех1 Магкир Ьапдиаде">НТМ1_</
аЫэг>!</р>
<!-- Мне нравится писать <аЫэг Иг1е="НурегТехТ Магкир
Ьапдиаде" >НТМ 1_</аЫэг> ! -->
Если присутствует атрибут Ш1е, он используется для отображения пол-
ного описания аббревиатуры.
5.4. Вставленный, удаленный или зачеркнутый текст
Чтобы обозначить текст как вставленный, используйте тег <1П5>;
<1пз>Меи Тех1</1пз>
< !-- Новый текст -->
Чтобы обозначить текст как удаленный, используйте тег <с1е 1>
<бе!>Ве1е1:еб ТехЕ</бе1>
< !-- Удаленный текст -->
Чтобы зачеркнуть текст, используйте тег <з>:
< з>31:гиск-1:НгоидН Тех!: Неге</з>
< !-- Зачеркнутый текст здесь -->
5.5. Верхний и нижний индекс
Чтобы сместить текст вверх или вниз, используйте теги <зир> и <зиЬ>.
Для создания верхнего индекса'
<8ир>8ирегзсгтр1 Неге</зир>
< !-- Верхний индекс здесь
Для создания нижнего индекса:
< 5иЬ>8иЬ8сг1р1: Неге</зиЬ>
< !-- Нижний индекс здесь -->
Глава 6.
Якоря и гиперссылки
Параметр Описание
ИгеГ Указывает адрес назначения. Это может быть абсолютный или отно-
сительный ПКЬ, либо имя якоря. Абсолютный ШЬ — это полный адрес
веб-сайта, например 1Шр://еуатр1е.сот/. Относительный 1Л<1 указыва-
ет на другой каталог и/или документ внутри того же сайта, например,
/аЬоиГ-пз/ указывает на каталог «аЬоШ-из» внутри корневого катало-
га (/). При указании на другой каталог без явного указания документа
веб-серверы обычно возвращают документ тйех.Ыт! внутри этого ка-
талога.
Н геПапд Указывает язык ресурса, на который ссылается атрибут Ь геТ (который
должен присутствовать вместе с этим атрибутом). Используйте значе-
ния языков из ВСЕ 47 для НТМ1.5 и КГС 1766 для НТМ1.4.
ге1 Указывает отношение между текущим документом и связанным доку-
ментом. Для НТМЬ5 значения должны быть определены в специфика-
ции или зарегистрированы в вики УпсгоСогтаСз.
Iа где! Указывает, где открыть ссылку, например, в новой зкладке или окне
Возможные значения: _Ыапк, _зе1Т, _рагегП, _Сор и Тга1Г'епате (уста-
ревший). Принудительное использование такого поведения не реко-
мендуется, так как это нарушает контроль пользователя над сайтом.
Указывает дополнительную информацию о ссылке. Эта информация
чаще всего отображается в виде всплывающей подсказки при наведе-
нии курсора на ссылку Этот атрибут не ограничивается ссылками, его
можно использовать практически во всех НТМЕ-тегах.
боип 1оаб Указывает, что цель будет загружена при нажатии на гиперссылку Зна-
чение атрибута будет именем загружаемого файла. Нет ограничений
на допустимые значения, и браузер автоматически определит правиль-
ное расширение файла и добавит его к имени файла (например, шщ,
рс(Г и т. д.). Если значение опущено, используется оригинальное имя
файла.
Якорные теги (<а>) обычно применяются для ссылок на отдельные
веб-страницы, но они также могут использоваться для ссылок на разные ме-
ста в одном документе, часто в оглавлениях, или даже для запуска внешних
приложений. Б этой главе объясняются реализация и применение НТМБ-
якорей в различных ролях.
6.1. Ссылка на другой сайт
Это базовое использование элемента <а> (якорный элемент)
<а Нг еГ= "ГгЩр://ехатрРе. сот/1 >1_1пк 1о ехатр1е.сот</а> <!-- Ссылка
на ехатр1е.сот
Он создает гиперссылку на Ш1 (гЫр; //ехашрХе. сот./, указанный в атри-
буте НгеТ (гипертекстовая ссылка), с текстом ссылки «1_1пк То ехатрРе. сот».
Это будет выглядеть следующим образом:
Бшк 1о ехатр!е.сот
Чтобы обозначить, что эта ссылка ведет на внешний сайт, можно исполь-
зовать тин ссылки ехРегпаР:
<а НгеГ="НТГр'//ехэтр!е.сот/" ге1="ех!:егпа1">ехатр1е з11:е</а> <!--
Пример сайта -->
Вы можете ссылаться на сайт, использующий протокол, отличный
от НТТР. Например, для ссылки на БТР-сайт можно сделать следующее:
<а НгеГ="Г1:р://ехатр1е.сот/">Т111з ссиРб Ье а 1гпк Со а РТР з1Хе</
а> <!-- Это может быть ссылка на РТР-сайт -->
В данном случае разница заключается в том, что этот якорный тег запра-
шивает у браузера пользователя подключение к ехапр1е. сот с использова-
нием протокола передачи файлов (РТР) вместо протокола передачи гипер-
текста (НТТР).
6.2. Ссылка на якорь
Якоря могут использоваться для перехода к определенным тегам
на НТМБ-странице. Тег <а> может указывать на любой элемент, у которого
есть атрибут ±с1. Чтобы узнать больше об идентификаторах, изучите доку-
ментацию о классах и идентификаторах. Якоря чаще всего используются
для перехода к подразделу страницы и используются вместе с тегами заго-
ловков
Предположим, вы создали страницу (раде 1. Ылн!) на множество тем:
<Н2>Р1гз1: 1:ор1с</1л2> <!-- Первая тема -->
< р>СопРепР абоиР Ню ПгзР 1ор1С</р> <!-- Содержание первой темы -->
<И2^8есогс1 1:ор1с</Н2> <!-- Зтооая тема -->
<р>СогЕегЕ аЬои!: ТзЬе зесопб 1:ор1С</р> <!-- Содержание второй темы -->
После создания нескольких разделов вы можете создать оглавление
в верхней части страницы с быстрыми ссылками (или закладками) на кон-
кретные разделы.
Если вы присвоили атрибут 1с1 вашим темам, вы можете ссылаться на них:
<Н2 16- "Тор1с1 ">Е1гзТ 1:ор1с</1т2> <!-- Первая тема
<р>Соп1еп1 айоиЕ ЕПе тЕгзЕ 1:ор1с</р> <!-- Содержание первой темы -->
<Р2 16-"Тор1с2">8есопб 1ор1с</К2> <!-- Вторая тема -->
<о>СогЕепЕ аЬои! Пте зесопб 1:ор1с</р> <!-- Содержание второй темы -->
Теперь вы можете использовать якоря в вашем оглавлении:
< Н1>ТаЬ1е о( СсгЦегт18</М> <!-- Оглавление -->
< а 1згеТ= '#Тор1с1'>СИск То д итэр То Спе ЕЕгзТ Тор1С</а> <!-- Нажгите,
чтобы перейти к первой теме -->
< а КгеЕ=>#Тор1с2>>СЕЕск То _] итр То ТКе 8есопб Тор1с</а> <!--
Нажмите, чтобы перейти ко второй теме -->
Эти якоря также привязаны к веб-странице, на которой они находятся
(раде 1 . НТп1). Таким образом, вы можете ссылаться на другую страницу сай-
та, указывая страницу и имя якоря:
КететЬег, уои сап аЕ^ауз <а Ьге(="раде1.ЬТт1#Тор1с1">1оок Ьаск Еп
ТНе Е1гзТ ТорЕс</а> Тог зиррогНпд шТогтэТЕоп.
< !-- Помните, вы всегда можете <а КгеГ="радс1.ЬТш1#Тор1с1'^вернуть-
ся к первой теме</а> для получения дополнительной информации.
6,3. Ссылка на страницу того же сайта
Вы можете использовать относительный путь для ссылок на страницы
того же сайта:
<а Нге1:="/ехатрЕе">Тех1 Неге</а> <!-- Текст здесь
Приведенный выше пример перейдет к файлу ехатр!е в корневом ката-
тоге (/) сервера.
Если эта ссылка находится на (ПЕр://ехатрЕе. сот, следующие две ссыл-
ки приведут пользователя в одно и то же место-
<а ИгеЕ="/раде">Тех! Неге</а> <!-- Текст здесь -->
<а НгеТ= 'ВЩр://ехатр1е.сот/раде ’>Тех1: Неге</а> <!-- Текст здесь -->
Обе ссылки перейдут к файлу ра§е в корневом каталоге ехашрЕе. сот
6.4. Ссылка, которая набирает номер
Если значение атрибута НгеГ начинается с Те1:, ваше устройство набе-
рет номер при нажатии на ссылку Зто работает на мобильных устройствах
или на компьютерах / планшетах с программным обеспечением, таким
как Зкуре или ГасеТште, которое может совершать звонки:
<а НгеГ= Ге1:11234567890 1 >Са11 из</а> <!-- Позвоните нам -->
Большинство устройств и протрамм запросят у пользователя подтверж-
дение номера, который они собираются набрать.
6.5. Открытие ссылки в новой вкладке / окне
<а НгеГ="ехэтр1е.со1п' СагдеС-"_Ыапк">ТехС Неге</а> <!-- Текст
здесь -->
Атрибут Та гдег указывает, где открыть ссылку. Установив его значение
в _Ы апк, вы указываете браузеру открыть ее в новой вкладке или окне (в за-
висимости от предпочтений пользователя).
ПРЕДУПРЕЖДЕНИЕ ОБ УЯЗВИМОСТИ БЕЗОПАСНОСТИ!
Использование Та гдеС=" _Ь1апк" дает открываемому сайту частичный
доступ к об ьекту «тисЬи. эрепег через }ауа8спрС, что позволяет этой
странице затем изменять ш1пдо«. срепе г. 1осаС1оп вашей страницы
и потенциально перенаправлять пользователей на сайты с вредоносным
ПО или фишингом
При использовании этого для страниц, которые вы не контролируете,
добавьте ге1="поорепег'' к вашей ссылке, чтобы предотвратить
отправку объекта «1йс1си . орепег с запросом.
В настоящее время ПгеГох не поддерживает посрепе г, поэтому
для максимального эффекта вам нужно использовать ге!=" поорепег
погеЕеггег'.
6.6. Ссылка, которая выполняет иауа8спр(
Просто используйте протокол дауазспрС:, чтобы выполнить текст
как ]ача8спрЕ вместо открытия его как обычной ссылки.
<а НгеТ-"^ауазсгтрС :туРипсС1оп(); ">йип Сос1е</а> <!-- Выполнить код
Вы также можете достичь тою же результата, используя атрибут опсИск:
<а ЬгеТ='#" опс11ск="туЕиг1с1:1ог|(); геЕигп Га1зе;">Кип Сос1е</а> <!--
Выполнить код -->
Здесь гею гп Та1зе; необходим для предотвращения прокрутки страни-
цы вверх при нажатии на ссылку #. Убедитесь, что весь код, который вы хо-
тите выполнить, находится перед ним, так как возврат остановит1 выполне-
ние дальнейшего кода.
Также стоит отметить, что вы можете добавить восклицательный знак
после хештега, чтобы предотвратить прокрутку страницы вверх. Это работа-
ет, потому что любой недопустимый слаг (з!о§) заставит ссылку не прокру-
чивать страницу, так как она не сможет найти элемент, на который ссылает-
ся (элемент с 1с1="!"). Вы также можете использовать любой недопустимый
слаг (например #зсго11зМол1эеге) для достижения того же эффекта. В этом
случае геЕигп Та1зе; не требуется:
<а НгеТ="#!" опс11ск="туЕипсИоп(); ">Вип Сос1е</а> <!-- Выполнить
код -->
Стоит ли использовать это?
Ответ почти всегда — нет Выполнение |ауа8спрГ встроенным
способом, как в этом примере, является плохой практикой. Рассмотрите
использование чистых }ауа8спрСрешений, которые ищут элемент
на странице и привязывают к нему функцию
Также подумайте, является ли этот элемент действительно кнопкой,
а не ссылкой. Если это так, используйте <ЬиЕ<:оп>.
6,7. Ссылка, которая запускает почтовый клиент
Базовое использование
Если значение атрибута Н г еЕ начинается с таПСо:, при нажатии на ссыл-
ку попытается открыться почтовый клиент:
<а Нге'Г="та111:о:ехатр1е@ехатр1е.сот">8спс1 ета!1</а> <!-- Отправить
письмо -->
Это установит адрес ехатр1е@еха|рр1е. сот в качестве получателя новою
письма.
Сс и Вес
Вы также можете добавить адреса для получателей в копии (с с) или скры-
той копии (Вес), используя следующий синтаксис:
<а НгеТ="|та111:о :ехап"р1е(®ехап1р1е .сош?сс-]оНп@'ехатр1е . со1Т|8Ьсо=]апе@
ехатр1е.сот'^Зепб ета!1</а>
<!-- Отправить письмо -->
Тема и текст письма
Вы можете заполнить тему и текст нового письма:
<а ЬгсТ = "таП1:о :ехатр1е@схатр1е .согп'7зиЬ]сс'(:=Ехап1р1е+8иЬ]ес'(:&Ьос1у=
Ме55аде+1ех1:">8епс1 ета11<7а>
<!-- Отправить письмо -->
Эти значения должны быть закодированы в IIК.1..
Нажатие на ссылку с паШо: запустит почтовый клиент по умолчанию,
указанный вашей операционной системой, или предложит выбрать клиент.
Не все параметры, указанные после адреса получателя, поддерживаются
вс всех почтовых клиентах.
Глава 7.
Списки
НТМЕ предлагает три способа создания списков: упорядоченные списки,
неупорядоченные списки и списки описаний. Упорядоченные списки ис-
пользуют порядковые номера для указания порядка элементов, неупорядо-
ченные используют определенные символы, такие как маркеры, для пере-
числения элементов без указания порядка, а списки описаний используют
отступы для перечисления элементов вместе с их дочерними элемента-
ми. В этой главе объясняются реализация и комбинирование этих списков
в НТМЕ-разметке.
7.1. Упорядоченный список
Упорядоченный список можно создать с помощью тега <о1>, а каждый
элемент списка — с помощью тега <11>, как показано в примере ниже:
<о1>
<11>11ет</11>
<11>АлоН1ег 1тет</11>
<11>Уе1: АпсИгег Иет</11>
</о!>
Это создаст нумерованный список (по умолчанию):
1. Вет
2 АпсЙгег Нет
3. Уе1 АпоЙгег Нет
Ручное изменение номеров
Есть несколько способов изменить номера, отображаемые в элементах
упорядоченного списка. Первый способ — задать начальный номер с помо-
щью атрибута зЕагЧ. Список начнется с указанного числа и будет продол-
жать увеличиваться на единицу, как обычно-
<о1 зтаг1:="3">
<И>11:ет</11>
<11>8оте ОПэег Иет</Ц>
<И>УеС АпоТЩег 11:ет</11>
</о1>
Это создаст нумерованный список (но умолчанию):
4. Йет
5. Зоиле Огйег Нет
6 УеГ Апогйег Нет
Вы также можете явно задать определенный номер для конкретного эле-
мента списка. Последующие элементы списка будут продолжать увеличи-
ваться на единицу, начиная с этого значения и игнорируя текущее значение
родительского списка:
<11 уа1ие="7"></11>
Стоит отметить, что использование атрибута уа1ие непосредственно
на элементе списка позволяет переопределить существующую нумерацию
упорядоченного списка, начав ее с меньшего значения. Например, если ро-
дительский список уже достиг значения 7, а встретился элемент со значени-
ем 4, то этот элемент будет отображаться как 4, и нумерация продолжится
с этого значения.
<о1 з1агр="5 ’>
<11>11:ет</И>
<11>8оте ООлег 11ет</И>
<11 уа1ие="4">А Резе! 1гет</11>
<Ц> АпоСбе г 11ет</11>
<11>Уе! Аг.оПлег 11:ет</11>
</о1>
Пример выше создаст список с нумерацией 5, С, 4, 5, С — начиная снова
с числа, меньшего, чем предыдущее, и дублируя номер 6 в списке.
Примечание: атрибуты зРаг! и уа1ие принимают только числа —
даже если упорядоченный список настроен на отображение римских цифр
или букв.
Версия>5
Вы можете изменить порядок нумерации на обратный, добавив
атрибут геуегзеб в элемент <о1>:
<о1 геуегзеб?
<11>1Рет</11>
<11>8оте ОПлег Шепк/И>
<11 уа1ие="4">А Кезе! 11ет</И>
<11>АпоМпе г 1Ре|П</11>
<11>Уе1 Аг.оРбег 1Рет</11>
</о1>
Обратная нумерация полезна, если вы постоянно добавляете элементы
в список, например, новые эпизоды подкастов или презентации, и хотите,
чтобы самые свежие элементы отображались первыми.
Изменение типа нумерации
Вы можете легко изменить тип нумерации, отображаемый в маркерах
элементов списка, с помощью атрибута Ту ре:
<01 гуре="1|а|А|1|Г >
Тип Описание Примеры
1 Значение по умолчанию — десятичные числа 1, 2, 3,4
а Алфавитный порядок (строчные буквы) а, Ь, с, (1
А Алфавитный порядок (заглавные буквы) А, В С, О
1 Римские цифры (строчные) 1, П, Ш, IV
1 Римские цифры (заглавные) I, II, III, IV
Используйте <о1> для отображения списка элементов, где порядок эле-
ментов важен и должен быть подчеркнут . Если изменение порядка элемен-
тов не делает список некорректным, следует использовать <и1>.
7.2. Неупорядоченный список
Неупорядоченный список можно создать с помошью тега <и 1>, а каждый
элемент списка — с помошью тега <11>, как показано в примере ниже:
<и1>
< Н>11:ет</11>
<11>АпоТ1те1' 1*ып</11>
<11>УеЕ АпсИтег 11ет</11>
</и!>
Это создаст маркированный список (по умолчанию):
• Нет
• Апойтегйет
• Те! АпоШег Лет
Используйте <и1> для отображения списка элементов, где порядок эле-
ментов неважен. Если изменение порядка элементов делает список некор-
ректным, следует использовать <о1>.
7.3. Вложенные списки
Вы можете вкладывать списки для представления подэлементов элемен-
та списка:
<и!>
<И>11:ет 1</И>
<И>1Теп1 2
<и1>
<И>зиЬ-П:ет 2.1</И>
<1±>зиЬ-11:ет 2.2</И>
</и1>
</11>
<11>11:ет 3</11>
</и1>
• кет 1
• кет 2
о зпЬ-кет2.1
о зик-кет 2.2
• кет 3
Вложенный список должен быть дочерним элементом элемента <И>.
Вы также можете вкладывать списки разных типов-
^о1>
<И>Не11о, 1тз1:!</11>
<11>
<и1>
<И>Не11о, пезбеб 11з{!</11>
</и!>
</Ц>
</о1>
7.4. Список описаний (скзспрйоп Нз1)
Список описаний (йезспрйоп Из!) (или список определений (бейпкюп Из!),
как он назывался до НТМЬЗ) можно создать с помощью элемента <б1>. Он со-
стоит из групп «имя-значение», где имя задается в элементе <б!>, а значе-
ние — в элементе <бб>:
<б1>
<бт>пат1е 1</б1:>
<бб>уа!ие Тог 1</бб>
<ид:>пате 2</бг>
<бб>уа1ие Тог 2</бб>
</б!>
Группа «имя-значение» может содержать несколько имен и/или несколь-
ко значений (которые представляют альтернативы):
<С11>
<Л:>пап1е 1</с11:>
<с1:>пате 2</с11:>
<ас1>уа1ье Гог 1 апс! 2</с1с!>
<с1:>пате 3</с11:>
<с1с1>уа1ие Гог 3</с1с1>
<с!с1>уа1ие Гог 3</с1а>
</01>
Глава 8.
Таблицы
Элемент НТМЬ <баЫе> позволяет авторам веб-страниц отображать та-
бличные данные (такие как текст, изображения, ссылки, другие таблицы
и т. д.) в виде двумерной таблицы с строками и столбцами ячеек.
8.1. Простая таблица
<баЫе>
<бг>
<бН>Неаб1пд 1/Со1ишп 1</бН> <! — Заголовок 1/Столбец 1 -->
<бН>Неаб±пд 2/Сс1итп 2</бб> <!-- Заголовок 2/Столбец 2 -->
</бг>
<бг>
<бб>Вои 1 Раба Со1итп 1</бб> <!-- Данные строки 1, столбец 1 -->
<бд>Кон 1 Раба Со1итп 2</бб> <!-- Данные строки 1, столбец 2
</бг>
<бГ>
<бб>Но« 2 Раба Со1итп 1</бс1> <!-- Данные строки 2, столбец 1 -->
<бб>Вон 2 Раба Со1итп 2</бб> <!-- Данные строки 2, столбец 2
</бг>
<Йайе>
Эта таблица состоит из трех строк (<б г >): одна строка с заголовками (<бб>)
и две строки с данными (<бб>). Элементы <6Н> используются для заголовков
таблицы, а элементы <бб> — для данных. Внутрь <бб>и<бб> можно поме-
стить любой контент.
Неабтпд 1/Со1итп 1 НеасИпд 2/Со1итп 2
Вой 1 Раба Сс1итп 1 Веи 1 Раба Со1итп 2
Вон 2 Раба Со1итп 1 Вон 2 Раба Со1итп 2
8.2. Объединение столбцов или строк
Ячейки таблицы могут объединять несколько столбцов или строк с помо-
щью атрибутов сс1зрап и гонзрап. Эти атрибуты могут применяться к эле-
ментам <бб> и <бб>:
<ТаЫе>
<1г>
<1:с1> гои 1 со1 1</1:с1> <! -- строка 1, столбец 1
<Хс!>гои 1 со1 2<-/1:с1> <! -- строка 1, столбец 2 -->
<Ю> гои 1 со1 3</Цс1> <! -- строка 1, столбец 3 -->
</1г>
<1г>
<Тс1 со1.зрап=' 3">ТН1з зесопб гои зрапз а!1 ТИгее со1итпз</1:с1>
<!-- Эта строка объединяет все три столбца -->
</Гг>
<1г>
<1а гоизрап="2">ТИ1з се11 зоагю Гпо гоиз</Гс)>
<!-- Эта ячейка объединяет две строки -->
<Тб>гои 3 со1 2</1с1> <!-- строка 3, столбец 2
<1с1>гои 3 со1 3</Тс1> <!-- строка 3, столбец 3 -->
< /Г г>
< 1г>
<Гб>гои 4 со1 2</Тс1> <!-- строка 4, столбец 2 -->
<1:б>гои 4 со1 3</Тс1> <!-- строка 4, столбец 3 -->
< /Тг>
</1:аб1е>
Результат:
ГОТЧ* 1 со1 1 готт* 1 со1 2 готт* 1 со1 3
'Лич -зесопб готт* зрапз а11 ХЬгее со1итп5
готт 3 со1 2 готт* 3 со1 3
ТЪ1ь се11 зрапа Гтуо готт’5
готу 4 со12 готу 4 со13
Обратите внимание, что не следует проектировать таблицы, в которых
строки и столбцы перекрываются, так как это недопустимо в НТМЬ, и резуль-
тат может отображаться по-разному в различных браузерах.
гоизрап — неотрицательное целое число, указывающее количество
строк, которые объединяет ячейка. Значение по умолчанию — 1 Значе-
ние 0 означает, что ячейка будет расширяться от текущей строки до послед-
ней строки таблицы (<гЬеас1>, <РЬобу> или <тГооД>).
сс1зрап — неотрицательное целое число, указывающее количество
столбцов, которые объединяет текущая ячейка Значение по умолча-
нию — 1. Значение 0 означает, что ячейка будет расширяться от текущею
столбца до псслсднсгс столбца группы столбцов <со1д гоир>, в которой опре-
делена ячейка.
8.3. Группы столбцов
Иногда может потребоваться применить стили к столбцу или группе
столбцов. Либо, для семантических целей, может потребоваться сгруппиро-
вать столбцы вместе. Для этсго используются элементы <со!д гоир> и <со1>.
Необязательный тег <со1дгоир> позволяет группировать столбцы. Эле-
менты <со1дгоио> должны быть дочерними элементами <ДаЬ1е> и должны
располагаться после любых элементов <сар11оп> и перед любым содержи-
мым таблицы (например, <бг>, <Ц|деас1>, <ГЬсбу> ит. д.);
<ГаЫс>
<со1дгоир зрап="2"></со1дгоир>
<со1дгоир зрап="2'></со1дгоир>
</ГаЫе>
Необязательный тег <со1> позволяет ссылаться на отдельные столбцы
или диапазон столбцов без применения логической группировки. Элемен-
ты <со1> необязательны, но если они присутствуют, они должны находить-
ся внутри элемента <со1дгоир>:
<таЫе>
<со1дгоир>
<со1 1с1="Му5рес1а1Со1итг>" />
<со1 />
^/со1дгоар>
<со1дгоор>
<со1 с1азз="Соо1Со1игпп 1 />
<со1 с1азз="№эССо1итп зрап="2' />
</со1дгоар>
</1:аЫе>
К элементам <со1дгоир> и <со1> можно применять следующие 085-
стили:
• Ьогбег
• Ьаскдгоипб
• угзгЬгИТу
• с11зр1ау (например, сНзр1ау. попе)
о б±зр1ау: попе; фактически удалит столбцы из отображения,
и таблица будет отображаться так, как если бы этих ячеек
не существовало
Для получения дополнительной информации см. ПТМЙ5
ТаЬп1аг сЗаТа (йПрз/МтЕзрес.лйаЩ'д.ощ/тиШрадебаЫез
1ЙШ1).
8.4. Таблица с элементами 1Ьеас1, ЗЬойу, ЗТооГ и сарНоп
НТМЬ также предоставляет таблицы с элементами <гЬеас!>, <СЬобу>,
<1:Тоо1:> и <сарТ1оп>. Эти дополнительные элементы полезны для добав-
ления семантической ценности таблицам и для применения отдельных
С88-стилей.
При печати таблицы, которая не помещается на одну страницу, большин-
ство браузеров повторяют содержимое <Пэеас1> на каждой странице.
Существует определенный порядок, который должен соблюдаться, и сле-
дует учитывать, что не каждый элемент располагается так, как молено было
бы ожидать. Следующий пример демонстрирует как должны располагаться
эти четыре элемента:
<1аЫе>
<сарС1оп>ТаЫе Т1Ц1е</сарС1оп> <!-- Заголовок таблицы является
первым дочерним элементом таблицы -->
<С!теаб> <!--======================| Сбеаб следует после сарГЗоп
|->
<сг>
<1±>Неааег сопСеп!: 1</±Ь>
<Г.Н>Неабег сопСепС 2</1±>
</1г>
</т.1теаб>
<1:Ьобу> <!--====================-- сЬобу следует после СНеаб
|->
<1г>
<Сб>Вобу сопСепС. 1</Гб>
<Г.б>Вобу сопСепС 2</Сб>
</1г>
</йЬссЗу >
<1:Тоо1:><!1 Т'РооТ может быть размещен до или после СЬобу,
но не внутри группы Сдобу. |-->
<!--| Независимо от расположения СТооС в разметке
он отображается внизу. |-->
<Сг>
<Сб>Еоо-(:ег сопСепС 1</1:б>
<Сб>ЕооСег сопСепС 2</Сб>
</Тг>
<-/1:Тоо1:>
</1аЫе>
Результаты следующего примера демонстрируются дважды — первая
таблица не имеет никаких стилей, вторая таблица имеет несколько
примененных С88-свсйств: Ьаскдгоипб-со1ог, со1ог и Ьогдег* Стили пре-
доставлены в качестве визуального руководства и не являются важным
аспектом рассматриваемой темы.
ТаЫе Тп1е
Неас1ег соЮепГ 1 НеаДег соп!еп! 2
Бобу сопгеш 1 Бобу соШепГ 2
Роогег сопгепг 1 Рооте! сопГеп! 2
ТаЫе Тп1е
Нелс1ег сопгеи( 1 Нелйег соптеп! 2
Роокг сопгепг 1 Р оогег сопгепг 2
Элемент Стили
<сарС1оп> Желтый текст на черном фоне.
<Т:Ьеаи> Жирный текст на фиолетовом фоне.
<тЬос1у> Текст на синем фоне.
<1ТооТ> Текст на зеленом фоне.
<1Н> Оранжевые границы.
<1(1> Красные границы.
8.5. Область заголовка
Элементы часто используются для указания заголовков строк
и столбцов таблицы, например:
<ТаЬ1е>
<тбеаб>
<Тг>
<1с1></1с1>
<С||>Со1итп Неабтпд 1</1Ь> <!-- Заголовок столбца 1
<ТН>Со1итп НеасНпд 2</1:1т> <!-- Заголовок столбца 2 -->
</Ы>
</Нтеас>
<ТЬос1у>
<1г>
<1±>Нои НеасНпд 1</ТЬ> <!-- Заголовок строки 1 -->
<1с1>< /1с!>
</тг>
<1г>
<1±>Кои НеасНпд 2</1±> <!-- Заголовок строки 2 -->
<Тс1 >< / 1а>
<-Гс1></гс>
</1Г>
</1Ьос1у>
</1аЫе>
Это можно улучшить для доступности с помощью атрибута эсере. При-
мер выше будет изменен следующим образом.
<ТаЫе>
<ТНеаб>
<1г>
<1:б></1:с>
<Г1г зсоре=''со1">Со1итп НеасНпд 1</ГЬ> <!-- Заголовок
столбца 1 -->
<ТЬ всоре-"со1">Сс1игсп НеасНпд 2</ТН> <!-- Заголовок
столбца 2 -->
</1г>
</ТНеас1>
<ТЬобу>
<Гг>
<ТН эсоре="гои">Р.о« НеасНпд 1</Г1т> <!-- Заголовок стро-
ки 1 -->
<1:б></1:с>
<бб><,На>
</Тг>
<1г>
<сб 5соре="гон">Кои НеасНпд <!-- Заголовок стро-
ки 1 -->
<1с1 ></1:с!>
<Гб></1:с>
</1г>
</1:Ьобу>
</1аЬ1е>
зсоре — перечисляемый атрибут, и это означает, что он может иметь зна-
чение из определенного набора возможных значений. Этот набор включает:
• со1
• гош
• со1#гоир
• гош§гопр
Ссылки:
• АГОЫ: Йт е1етепс (Мрз://с1еуе1орег.то/:Ша.ог§/еп-И8/
йос8/ШеЬ/НТМЬ/Е1етепЙШ#айг-8соре).
. ШЗС: Н63 (ЬПр8:/М^.ш3.ог§/ТП/и7СА&20-ТЕСН8/Н63.
1йт1).
Глава 9.
Комментарии
Как и в других языках программирования и разметки, комментарии
в НТМЕ предоставляют другим разработчикам информацию, связанную
с разработкой, без влияния на пользовательский интерфейс. Однако, в отли-
чие от других языков, комментарии в НТМЕ могут испо тьзоваться для указа-
ния элементов, предназначенных только для 1пГегпе1 Ехр1огег. В этой главе
объясняется, как писать комментарии в НТМЕ, и рассматривается их функ-
циональное применение.
9.1. Создание комментариев
Комментарии в НТМЕ могут использоваться для оставления заметок
себе или другим разработчикам о конкретной части кода. Они начинаются
с <! - - и заканчиваются -->, например:
< !-- Я НТМ1_-комментарий! -->
Они могут1 быть встроены в другие элементы:
<1т'1>ТИ18 рас!: «111 Ье сНзрТауес! <!-- «Ьт1е ГЫя «111 поТ Ье сНзр1ауес1
--> ,</Ы>
< !-- Эта часть будет отображена, а эта - нет.
Комментарии также могут занимать несколько строк, чтобы предоста-
вить больше информации:
< !-- Это многострочный НТРЪ-ксмментарий.
Все, что находится здесь, не будет отображено браузером
Вы можете "закомментировать" целые секции НТМЕ-кода.
Однако они не могут находиться внутри другого НТМЕ-тега, например:
< М <!-- Деь'ЕА'РТ:г1ЬиУе="зотеУНЕпд" -->>ТЫз «111 пос «огк</Ы>
<!-- Это не сработает
Это создает невалидный НТМЕ, так как весь блок <Ы <!--
СезСАГ1г1|эиСе="8отеС1э111д" будет считаться одним открывающим
тегом И1 с недопустимой информацией внутри, за которым следует ничего
не делающая закрывающая скобка > .
Для совместимости с инструментами которые пытаются парсить НТМЬ
как ХМ Г или 8СМЬ, тело комментария не должно содержать два дефиса под-
ряд--.
9.2. Комментирование пробелов междустрочными
элементами
Строчные элементы, такие как зрап или а, могут включать до одного про-
бела перед и после них в документе. Чтобы избежать слишком длинных
строк в разметке (которые трудно читать) и непреднамеренных пробелов
(которые влияют на форматирование), пробелы можно закомментировать:
<!-- Используйте НПМЬ-комментарий, чтобы убрать символ новой стро-
ки ниже: -->
< а ИгеТ="#">1 Норе бЬеге «111 Ье по ехтга «Ыбезрасе аГбег
а><! --
--><Ьи1:Соп>Еоо</Ьи1:1:оп>
Попробуйте убрать комментарий между строчными элементами, и меж-
ду ними появится пробел. Иногда добавление пробела является желаемым.
Пример кода:
< !-- Используйте НТМ1-комментарий, чтобы убрать символ новей стро-
ки ниже: -->
< а Нге'Г="#">1 Норе СНеге «111 Ье по ехбга «НИезрасе аСбег 1Н1з'</
а><1--
--><Ьи1:1:оп>Еоо</Ьи1:1:оп>
<Нг>
< !-- УНСНоиС 11, уои сап побгее а зшаИ СотаТЫпд сИССегепсе: -->
< !-- Без комментария можно заметить небольшую разницу в форматиро-
вании: -->
< а НгеС"*1#'1»! Норе Убеге «П1 Ье по ехбга «Ыбезрасе аСбег 1Н1з!</
а>
<Ьиб1оп>Боо^/ЬиЫоп>
Результат
1 Ьоре (11е1с у, 111 Ьг по ехгга у 1мге;расе аГге! 11и~. Рос
I Ьопе <11еге У.П1 Ье по ехЕга уукйеурасе айег 1111;! Роо
Глава 10.
Классы и идентификаторы
Параметр Описание
с1аз5 указывает класс элемента (не уникальный)
1с1 указывает идентификатор элемента (уникальный в пределах одного
контекста).
Классы и идентификаторы упрощают обращение к НТМЬ-элементам
из скриптов и таблиц стилей. Атрибут с1азз может использоваться на одном
или нескольких тегах и применяется в С88 для стилизации. Однако иден-
тификаторы (1с1) предназначены для ссылки на один элемент, что означа-
ет, что один и тот же идентификатор не должен использоваться дважды.
Идентификаторы обычно применяются в фа\са8сг!р1 и внутренних ссылках
документа, а их использование в С88 не рекомендуется. В этой главе приве-
дены полезные объяснения и примеры правильного использования атрибу-
тов с1азз и 1с! в НТМЕ.
10.1. Назначение элемента класса
Классы являются идентификаторами для элементов, которым они назна-
чены. Используйте атрибут сЕазз, чтобы назначить класс элементу:
<сИу С1с85="ехатр1е-с1аз8"></а1у>
Чтобы назначить элементу несколько классов, разделите их имена про-
белами:
<617 с!азз="с1азз1 с1азз2'></с117>
Использование классов в С88
Классы можно использовать для стилизации определенных элемен-
тов без изменения всех элементов этого типа. Например, эти два элемен-
та зрап могут иметь совершенно разное оформление:
<зрап></зрап>
<зрап с1азз="8рес1а1"></зрап>
Классы с одинаковыми именами могут быть назначены любому коли-
честву элементов на странице, и все они получат стили, связанные с этим
классом. Это всегда будет верно, если вы не укажете элемент в С88.
Например, у нас есть два элемента, оба с классом ИтдНИдНг:
<с11у с1аез=‘ ' >1огет 1р8игп</61У>
<зрап с1азз="1з1д1111д1т1' >1_огет 1рзит</зрап>
Если наш С58 выглядит следующим образом, то зеленый цвет будет при-
менен к тексту внутри обоих элементов:
.ЫдЬИдЫ { со1ог: дгееп; }
Однако если мы хотим стилизовать только сНу с классом ЫдЬИдЫ,
то можем добавить специфичность следующим образом:
сНу.Ыд!~1хдГтЕ { со!ог: дгееп; }
Тем не менее при стилизации с помощью С88 рекомендуется использо-
вать только классы (например, . ЬгдЬИдЬТ), а не элементы с классами (на-
пример сНу . НтдИИдЬЕ).
Как и с любыми другими селекторами, классы могут быть вложенными.
лпа1п .МдЫздГй { со1ог: гсб; } /* Комбинатор потомков */
. ТооЕег > . ЫдЬИдЫ: { со1ог: Ь1ие; } /* Дочерний комбинатор */
Вы также можете объединять селекторы классов, чтобы выбрать элемен-
ты, имеющие комбинацию нескольких классов. Например, если у нас есть
такой НТМЪ:
<61У с1азз="зрес1а1 1еГ1: пепи|1>Т1з1з Тех! иШ Ье р1пк</с11У>
<!-Этот текст будет розовым-->
...и мы хотим окрасить этот текст в розовый цвет, мы можем сделать
следующее в С88.
.зрес!а1.1еТ1.тени { со1ог: р!пк; }
10.2. Назначение элемента идентификатора
Атрибут 16 элемента является уникальным идентификатором в пределах
всего документа. Его цель — однозначно идентифицировать элемент при соз-
дании ссылок (с использованием якоря), написании скриптов или стилиза-
ции (с помощью С88?
<сНу 1с1-"ехатр1е-1с1"></с11у>
Не следует использовать два элемента с одинаковым идентификатором
в одном документе, даже если атрибуты назначены разным тинам элемен-
тов. Например, следующий код некорректен
<Й1У 1с1="ехатр1е-1с1'></сНу>
<ьрап 1с1="ехэтр1е-1а"></5рап>
Браузеры постараются отобразить этот код, но при стилизации с помо-
щью С88 или добавлении функциональности с использованием ]ауа8спрС
могут возникнуть непредвиденные проблемы.
Для ссылки на элементы по их идентификатору в С88 используйте пре-
фикс #:
#ехатр1е-1с! { со1ог: дгееп; }
Чтобы перейти к элементу с определенным идентификатором на страни-
це, добавьте # с именем элемента в ШЬ:
ЫЕр: //ехатр1е.сот/аЬоиР#ехато1е-1с1
Эта функция поддерживается большинством браузеров ине требует до-
полнительного }ауа8спрГ или С88 для работы.
10.3. Допустимые значения
Для идентификатора
Версия>5
Единственные ограничения для значения 1с1:
1 Оно должно быть уникальным в документе.
2. Оно не должно содержать пробелов.
3. Оно должно содержать хотя бы один символ.
Таким образом, значение может состоять из цифр, одной цифры, знаков
препинания, специальных символов и т. д. Главное — без пробелов.
Примеры допустимых значений:
<617 1с1="сопХа1пег"> ... </017>
<017 ю="999"> . . </с117>
<61V 1С1= "#%1 V- I "> ... </б17>
<сПу 1с1=" Г> . . . </017>
<6IV 16="Ж^">... </д17>
<017 . </617>
<017 . </сП7>
<017 1б="©"> .. </017>
<017 ... </б17>
Пример недопустимого значения:
<61у 16=" «> ... </6ту>
Также недопустимо использовать одинаковые идентификаторы в одном
документе:
<61у 16= геза1Гз"> ... </61У>
<с!1у 16="геза!1з"> ... </61у>
Версия < 4.01
Значение 16 должно начинаться с буквы, за которой могут следовать
только:
• буквы (А-2/а-г);
• цифры (0-9);
• дефисы («-»);
• подчеркивания («_»);
• двоеточия (« :»);
• точки («.»).
Из примеров выше для НТМЬ5 только один является допустимым:
<6ту 16= "соп1:а1пег"> ... </61у>
Также допустимы:
<61у 16="затр1е1:ех1:"> . . . </61у>
<61у Х6="затр1е-Рех1"> ... </61у>
<6ту 16="затр1е_1ех1:"> ... </61у>
<61у 16="затр1е:ТехТ"> ... </сПу>
<6ту 16="затр1еЛех1"> ... </61у>
Если значение не начинается с буквы (в верхнем или нижнем регистре),
оно недопустимо
Для класса
Правила для классов практически такие же, как и для 16. Разница в том,
что значения классов не должны быть уникальными в документе.
Например, если это недопустимо для одного документа:
<сНу 16="гези11з"> ... </сПу>
<61у 1с1 = " гези11з"> ... </61у>
...то это вполне допустимо:
<с11у с1азз="гезиЦз"> ... </сНу>
<сПу с1азз="гезиИз"> ... </61у>
Важное замечание: как значения Ю и С1а88 обрабатываются
внеНТМЬ
Помните, что правила и примеры выше применимы в контексте НТМБ.
Использование цифр, знаков препинания или специальных символов
в значении 16 или с1аз8 может вызвать проблемы в других контекстах, та-
ких как С88, )ача8спрг и регулярные выражения
Например, хотя следующий 1с1 допустим в НТМЕ.5:
<01у 1с!="911опз"> ... </с11у>
...он недопустим в С88:
4.1.3 Символы и регистр
В С88 идентификаторы (включая имена элементов, классы
и идентификаторы в селекторах) мотут содержать только символы
1а-иА-/0-9] и символы 180 106461Н00А0 и выше, а также дефис (-) и подчеркивание (_); они не могут начинаться с цифры, двух дефисов или дефиса, за которым следует цифра. Ссылка па источник (1Щр8:/,'т™.те3.ог§/ТК/С882/8уш1а1а. Ыт1#й1агаиег8). ЕК5Ж&
В большинстве случаев вы можете экранировать символы в контекстах,
где они имеют ограничения или специальное значение. Ссылки на ШЗС • 3.2.5.1 Атрибут 1 с! (1айр8://тт1.8рес.ш11аЦлг^.ог§/ти1йра§е/ аот.1Цт1*Гке-1а-айг1Ь Щ е).
• 3.2.5.7 Атрибут с1а88 (Ыгр8://Й1т1.8рес.и4та{ш§.эг§/ тиИ 1ра§е/(1от.1йт1#с1а 88ез). ЕЙ^В ЭДГ ИЙ№
• 6.2 Базовые типы ЗСМЬ (ййр8://м.тлдалу3.ог§/ТВ/Щт14/ Гуреа.ШшШуре-Ш). Ейй^Е Е^ЙЙЗ'
10.4. Проблемы, связанные с дублированием
идентификаторов
Наличие более одного элемента с одинаковым идентификатором (Ю) —
это сложная для диагностики проблема Обычно НГМЬ-парсер все равно пы-
тается отобразить страницу. Как правило, ошибка не возникает, но страница
может начать работать некорректно
В этом примере:
<6ту 16='а01у">а</б1У>
<сНу 16="аО17,|>Ь</61У>
С55-селекторы все еще работают:
#аС1у {
со1ог: геб;
}
...но }ауа8спрг не может обработать оба элемента:
уаг 1тГп1 = боситегтС. деТЕ1ел1еп1:ВуХс1 ("а01у"). тппегНТМЬ;
В этом случае переменная НТМЬ содержит только содержимое первого
элемента 6IV ('а'1).
Глава 11.
Атрибуты данных (Оа1а АПпЬи^ез)
Значение Описание
501геуа1се Указывает значение атрибута (в виде строки)
11.1. Поддержка в старых браузерах
Атрибуты данных (Дата айтйлйес) были введены в НТМБ5, который под-
держивается всеми современными браузерами. Однако старые браузеры,
выпущенные до НТМЬ5, не распознают атрибуты данных.
Тем не менее., согласно спецификациям НТМЬ, атрибуты, которые не рас-
познаются браузером, должны оставаться без изменений, и браузер просто
проигнорирует их при отображении страницы.
Веб-разработчики использовали этот факт для создания нестандартных
атрибутов, которые не являются частью спецификаций НТМЬ. Например,
атрибут уа1ие в следующей строке считается нестандартным, поскольку
спецификации для тега <1тд> не включают атрибут уа1ие, ионне является
глобальным атрибутом:
<1шд 5гс="затр1е.рд" уа1ие="Сезс" />
Это означает, что хотя атрибуты данных не поддерживаются в старых
браузерах, они все равно работают, и вы можете устанавливать и полу-
чать их с помощью тех же универсальных методов |ауа5сг1р(: зеСАЩгТЬоТе
и деСАЩ г 1Ьобе. Однако вы не сможете использовать новое свойство баСазеС,
которое поддерживается только в современных браузерах.
11.2. Использование атрибутов данных (Оа1а А11пЬи1е Озе)
Атрибуты данных НТМЬ5 баСа-* предоставляют удобный способ хране-
ния данных в НТМЬ-элементах. Хранимые данные можно читать или изме-
нять с помощью ]ауа8сг1рг:
<617 оаСа-зиЬгтнССеб^'уез" с1азз="ибег_ргоТПе '>
... зоте сопбепС ...
</01У>
Структура атрибута данных выглядит как баСа-*, то есть имя атрибута
данных следует после чести баса-. Используя это имя, можно получить до-
ступ к атрибуту. Данные в строковом формате (включая ]8ОИ) могут быть со-
хранены с использованием атрибута баСа-*
Глава 12.
Связывание ресурсов
Атрибут сбагзеС Описание Указывает кодировку символов связанного документа.
сгоззогтдтп Определяет, как элемент обрабатывает запросы между источниками (сгозз-опфп).
Кгеб Указывает местоположение связанного документа.
РгеНапд тесИа Указывает язык текста в связанном документе. Указывает, на каком устройстве будет отображаться связанный доку- мент, часто используется для выбора таблиц стилей в зависимости ст устройства.
ге1 Обязательный. Указывает отношение между текущим документом и связанным документом.
геу Указывает отношение между связанным документом и текущим до- кументом.
517ез Указывает размер связанного ресурса. Используется только при ге1= 1соп".
Сагдег Нуре тпНедгтГу Указывает, где должен быть загружен связанный документ. Указывает тип медиа связанного документа. Указывает хеш (зйа256. яЬа384 или з1та512) в формате Ьазе64 для про- верки подлинности связанного ресурса.
Хоте многие скрипты, иконки и таблицы стилей могут быть написаны
непосредственно в ЕТМЬ-разметке. лучшей практикой и более эффективным
подходом является включение этих ресурсов в отдельные файлы и их свя-
зывание с вашим документом. В этой главе рассматривается подключение
внешних ресурсов, таких как таблицы стилей и скрипты, в НТМЬ-документ.
12.1. иауаЗспр?
Синхронная загрузка
<$спр! 5гс="ра1Ь/1:о.]з"></&сг1р1>
Стандартной практикой является размещение тегов <зсг!р1> непосред-
ственно перед закрывающим тегом </Ьобу>. Загрузка скриптов в псслед-
нюю очередь позволяет быстрее отображать визуальные элементы вашею
сайта и предотвращает попытки ]ауа8спрТ взаимодействовать с элемента-
ми, которые еще не загрузились.
Асинхронная загрузка
<зсг!рТ згс="раТЬ/Го. ]з" азупс></зсг1рТ>
Альтернативный подход, когда загружаемый код ]ауа5спр1 не требуется
для инициализации страницы, — это асинхронная загрузка, которая уско-
ряет загрузку страницы. Использование атрибута азупс позволяет браузеру
загружать содержимое скрипта параллельно и, как только оно будет полно-
стью загружено, прерывает парсинг НТМЬ для выполнения |ауа8сг!рЬ
Отложенная загрузка
<зспрТ з~с="раЫл/То.]з" сеТег></зсг1рГ>
Отложенные скрипты похожи на асинхронные, с тем отличием, что их
выполнение начнется только после полного парсинга НТМЬ. Отложенные
скрипты гарантированно загружаются в порядке их объявления, так же
как и синхронные скрипты
Элемент <позспр1>
<Г|О8сг1рТ>Эауа8сг1аТ б1заЫес</Г|08сг1рТ>
Элемент <по8сг1рт> определяет контент, который будет отображать-
ся, если у пользователя отключен |ауа8спр1: или если браузер не поддер-
живает использование скриптов. Тег <позсг1рТ> может быть размещен
как в <Ьеас!>, так и в <Ьос!у>.
12.2. Внешняя таблица стилей С88
<Ыпк ге1="5Гу1ез11ееГ" пгеТ="раШо/То езз" Туре-"ТехТ/с8з‘'>
Стандартной практикой является разменщние тегов <Ыпк> для С88 вну-
три тега <Неаб> в верхней части НТМЬ-документа. Таким образом, С88 загру-
жается первым и применяется к странице по мере ее загрузки, вместо тою
чтобы показывать неоформленный НТМЬ до загрузки С88 В НТМЬ5 атри-
бут Туре не обязателен, так как НТМЬ5 по умолчанию поддерживает С88:
<Ипк ге1="$Ту1езЬееТ" ИгеТ="раТ11/То.С88‘| Туре="Техс/сз8">
и
<Ылк ге1-"зТу1ез1зееТ" 1згеТ="раЫз/То.сзз">
делают одно и то же в НТМЬЭ
Другой, хотя и менее распространенный подход, — использование дирек-
тивы @1тоог4 внутри С88. Например:
<51у1е Суре="1:ех1:/сзз">
@1тро г 1: («ра1:1т / Со. сзз")
</зСу1е>
пли
<зСу1е>
@1трогГ(«ра1Ь/Со.сзз")
</зСу!е>
12.3. Еау|соп
<Ипк ге1="1соп' Суре=1 Стаде/рпд НгеЕ-"/СауСсоп.рпд">
<11пк ге1="з1погСсиС 1соп" Суре='Стаде/х-Ссоп" Нге‘Г="/Еа\'1соп.1со">
Используйте М1МЕ-тип Стаде/рпд для РИС-файлов
и гтаде/х-юоп для иконок (*.Ссо). Другие варианты ре-
шения этого вопроса рассматриваются на 8(аск Омегйош
(НССр8://8СаскоуегС1о1лг.сот/дие5С1ог18/1344122ДаУ1ссп-рп§-У8-
СаУ1соп-1со-шйу-8Ьои1й-ьи8е-рп§-1П8Сеаб-оМсо).
Файл с именем Ра7Ссоп. Ссо в корне вашего сайта обычно загружа-
ется и применяется автоматически, без необходимости использования
тега <1Спк>. Однако если этот файл изменяется, браузеры могут медленно
и неохотно обновлять его кеш.
12.4. Альтернативные таблицы стилей
<1Спк ге1="а1Сегпасе зСуСезбееС" 1эге'Г="раС1э/Со/8Су1е.с83|
ССС1е="уоигТСС1с">
Некоторые браузеры позволяют применять альтернативные табли-
цы стилей, если они предоставлены. По умолчанию они не применяются,
но обычно их можно изменить через настройки браузера
ГпеСох позволяет пользователю выбрать таблицу стилей через меню «Вид»
> «Стиль страницы». 1п1егпеС Ехр1огег также поддерживает эту функцию
(начиная с 1Е 8), доступную через «Вид» > «Стиль страницы» (по крайней
мере, в 1Е11). СЬготе требует установки расширения для использования
этой функции (по состоянию на версию 48). Веб-страница также может
предоставлять собственный интерфейс для переключения стилей.
Источник: йт1р8://йеуе1орег.тоы11а.ог§/еп-Ът8/сюс8/МеЬ/
НТМЬ/АйпЬиГез/геА/акегпасе-ЬГукзйееС
12.5. Подсказки для ресурсов:
с1п8-ргеТе1с11, рге(е1сЬ, ргегепдег
Предварительное соединение (РгессппесО
Отношение ргесоппесТ похоже на боз-ргеТеГсб, так как оно также раз-
решает ГЖЗ. Однако оно также выполняет ТСР-рукопожатие и, при необходи-
мости, ТЬЭ-согласование. Это экспериментальная функция:
<11пк ге1 = "ргесоппес1:" 1эгеТ="0Р1 ">
Предварительное разрешение (О1\~8 Рге/еСск)
Информирует браузеры о необходимости разрешить ИК8 для ИКЬ, чтобы
все ресурсы с этого ИКЬ загружались быстрее:
<Ипк ге!=*с!пб-ргеТе1сН" Нгеб="11Р1_">
Предварительная загрузка (Рге/е1ск)
Информирует браузеры о необходимости предварительно загрузить ре-
сурс, чтобы он мог быть загружен быстрее:
<11пк ге1="рге1:еТ.сЬ" Нге'Г="ивЬ">
ИИЗ-РгеГеСсй разрешает только доменное имя, тогда как рге’Ге’Ссб загру-
жает/сохраняет указанные ресурсы.
Предварительный рендеринг (Ргегепйег)
Информирует браузеры о необходимости загрузить и отрендерить ИКЪ
в фоновом режиме, чтобы он мог быть мгновенно доставлен пользователю
при переходе на этот ИКЪ. Это экспериментальная функция’
<Ипк ге1="ргегепбег" НгеГ="ПРИ">
12.6. Атрибут тесИа в теге <Ппк>
<11пк ге1="зЦу1егНееЦ" ЬгеГ^'ЧезТ.сзз" теа1а="рг1п4">
Атрибут тесИа указывает, для какого типа медиа должна использоваться
таблица стилей. Использование значения ргьгтЬ означает, что эта таблица
стилей будет применяться только для печати страниц.
Значение этого атрибута может быть любым из типов медиа (аналогично
медиазапросам в С88).
12.7. Предыдущая и следующая страницы
Когда страница является частью сепии статей, можно использовать рге7
и пехХ для указания страниц, которые идут до и после текущей:
<11пк ге1="ргеу' ЬгеТг=| ИХХр://зХаскэуегИои.сот/боситепХаИоп/
]а\'а/1ор1С5">
<Ипк ге1="пехХ" НгеТг' бХХр://зХаскоуег-Пои.сот/боситепХаХюп/
С85/Х0р1СЗ">
12.8. Веб-фид (М/еЬ Ееес1)
Используйте атрибут ге1="а1Хегпа1е 1 для обеспечения возможности об-
наружения ваших АГот/л88-фидов.
<Ипк ге1="а1УегпаХе" Хуре="арр11саХюп/аХотп+хт!" НгеТ='НСХр://
ехатрТе.сот/Хееб.хт!' />
<Ипк ге1="а1ГегпаХе" Хуре-1 аррИсаХтоп/гзз+хт!" ЬгеГ="бХХр://
ехатрТе.сот/Хееб хш!" />
Глава 13.
Включение ^аVа8с^^р^-кода в НТМЬ
Атрибут Описание
5ГС Указывает путь к файлу ]ауа8спр1 Это может быть относительный или абсолютный ШЬ.
Суре Указывает МШЕ-тип. Этот атрибут обязателен в НТМЬ4, но необязате- лен в НТМЬЭ.
азупс Указывает, что скрипт должен выполняться асинхронно (только для внешних скриптов). Этот атрибут не требует значения (кроме ХНТМЬ).
беСег Указывает, что скрипт должен выполняться после завершения разбо- ра страницы (только для внешних скриптов). Этот атрибут не требует значения (кроме ХНГМЬ).
сбагзеС Указывает кодировку символов, используемую во внешнем файле скрипта, например ШТ-8.
сгоззог1д1п Определяет, как элемент обрабатывает запросы между источниками (С1085-оп§ш геоиезЩ.
попсе Криптографический одноразовый код (попсе), используемый для про- верок политики безопасности контента (С8?3)
13.1. Обработка отключенного Зауа§спр(
Возможно, что клиентский браузер не поддерживает }аса8спр) или вы-
полнение }ауа8спр{ отключено, возможно, по соображениям безопасности.
Чтобы сообщить пользователям, что на странице должен выполняться
скрипт, можно использовать тег <псзсг1р1:>. Содержимое <позсг1р1:> ото-
бражается, если }ауа8спр{ отключен для текущей страницы:
<зсг1р1:>
боситеп!: ,игП:е(«Не11о, «ог 1с1!");
</зспр!:>
<псзсг1р-(:>ТЫ8 Ьголзег боев поС заррогб Эауазсг1рС.</позсг1р1:>
<!-- Этот браузер не поддерживает ЭауаЗсгзрб.-->
13.2. Ссылка на вгчешний файл ЗауаЗспр!
<зс г±рХ згс="ехатр1е. ]з"></зсг1рр>
Атрибут зге работает так же, как атрибут НгеТ в ссылках: можно указать
абсолютный или относительный ЪКЬ. В примере выше указан файл, находя-
щийся в той же директории, что и НГМЬ-документ. Обычно этот тег добавля-
ется внутри тегов <Неаб> в верхней части НТМ1-документа
13.3. Прямое включение ^аVа8с^^р^-кода
Вместо ссылки на внешний файл можно включить |ауа8спрг-код непо-
средственно в НТМЬ:
<зсг!р1:>
// ЗауаЗсгтрб-код
</зсг!р1:>
13.4. Включение Зауа8спр*-файла
с асинхронным выполнением
<зсг1рт 1:уре="^:еx^/^аVазсг^р1:,I згс="11К1" азупс></зсг1р1:>
Глава 14.
Использование НТМЬ с С88
С88 предоставляет стили для НТМЬ-элементов на странице. Встроенное
стилирование (ш1ше зГуйп^') предполагает использование атрибута з1:у1е
в тегах, однако этот метод крайне нс рекомендуется, Внутренние таблицы
стилей (ппегпа! зУуйезИеетз) используют тег <згу1е> и применяются для объ-
явления правил для определенных частей страницы. Внешние таблицы сти-
лей (ехТегпа! 81у1е8ЬееГ8) могут быть подключены с помощью тега <Ипк>, ко-
торый загружает внешний файл С88 и применяет его правила к документу.
В этой главе рассматриваются все три метода подключения.
14.1. Использование внешних таблиц стилей
Используйте атрибут Ипк в разделе Неас документа.
<1эеаб>
<11пк ге1="з1:у1езЬеег' 1уре="гех1/сзз11 бгеТ="згу1ез11ее'С ,сзз">
</Меас1>
Также можно использовать таблицы стилей, предоставляемые веб-сайта-
ми через сеть доставки контента (СОИ, СоШепТ ВеИуегу Иейлгогк), например
ВоогзТгар
<беаб>
<Ипк ге1="зГуТееЬее!:1
НгеТ="1э11:рз: //тахсс!п. Ьсо1з1:гаэсбл. сот/
Ьоо1з1:гар/3 3.7/сзз/Ьоо1з1:гар .т! п. езз1 1 п1_е&г Ну =1 з!лаЗ 84-ВУУ а
181РеК1оСтЗ[ШусьНАНКд320тисж7ог1ЗРУс1д4Уа+Рт8752/К68\-ЬаЕ]Мо1
сгоззог1д1п="апопутоиз">
< /беас1>
Как правило, поддержку СПИ для фреймворка можно найти на его офи-
циальном сайте.
14.2. Внутренние таблицы стилей
Вы также можете включать С88-элементы внутри документа с помощью
тега <з1:у1е>:
<Неаб>
<з!у1е 1уре="'(:ех1:/сз8">
бобу {
Ьаскдгоипс1-со1ог: дгау;
}
</зТу 1е>
</беас1>
В программе можно использовать несколько внутренних таблиц стилей:
<беаб>
<зТу1е Туре^'ЧехГ/сзз'Ч
бобу {
баскдгоипб-со1ог: дгау;
}
</з!у 1е>
<з1:у1е Туре="1:ех1/а5з">
Р {
Ьаскдгоипс1-со1ог: Ыие;
}
</з1:у1е>
</Ьеас1>
14.3. Встроенные стили
Вы можете стилизовать конкретный элемент с помощью атрибута зту1е:
<зрап зту1е='со!ог: гесГ>ТЫз Техг «111 арреаг 1п геб.</зрап>
<!-- Этот текст будет отображаться красным -->
Примечание: старайтесь избегать этого метода — цель С88 заключается
в разделении содержимого и представления.
14.4. Несколько таблиц стилей
Можно загружать несколько таблиц стилей:
<беаб>
<Игк ге1="зту1езбее1:" 1уре-"тех1:/С8з" бгеТ="депега1.сзз >
<11пк ге1="збу1ез1эее’(:" буре^'Чехб/сзз" Ьге1:='зрес1-Г1с.сзз">
</беас1>
Обратите внимание, что более поздние файлы и объявления будут
переопределять более ранние Например, если допета!. езз содержит:
Ьос1у {
Ьаскд,’оипа-сс1ог: гео;
}
а 8рес1Т1с. сзз содержит:
Ьоау {
Ьаскдгоипо-со1ог: Ыие;
}
. то при использовании обоих файлов фон документа будет синим.
Глава 15.
Изображения
Параметр Описание
5ГС Указывает ПКТ, изображения
згезеб Изображения для использования в различных ситуациях (например, на экранах с высоким разрешением, маленьких мониторах и т. д.)
з1гез Размеры изображения между точками останова (ЬгеакротГз)
сгоззогтдтп Указывает, как элемент обрабатывает запросы с кросс-доменными источниками
изешар Имя карты изображения, которую следует использовать
тзтар а11 Указывает, является ли изображение серверной картой изображения Альтернативный текст, который должен отображаться, если изобра- жение не может быть загружено
1Л/±сПЬ Указывает ширину изображения (необязательно)
КетдбС Указывает высоту изображения (необязательно)
15.1. Создание изображения
Чтобы добавить изображение на страницу, используйте тег <1шд>.
Теги изображений (<1тд>) не имеют закрывающего тега. Два основных
атрибута, которые вы указываете для тега <1 шд>, — это зге (источник изо-
бражения) и а 11 (альтернативный текст, описывающий изображение):
<1тд 8гс="1тадез/11е11о.рпд1' аШ^"Не11с №ог1б">
Вы также можете использовать изображения из веб-таЬ:
<1тд згс= ’ЬТГрз://1.51аск.ттдиг.сот/АЬд/т.]рд ?з=48&д=1
э1С="8РаокОуегГ1ои изег Са1еЬ К1е>/е1:ег">
Примечание: изображения технически не вставляются в НТМЬ-страни-
цу, а связываются с ней. Тег <1гп§> создает пространство для отображения
ссылки на изображение.
Также можно встраивать изображения напрямую в страницу с использо-
ванием 1эазо64:
<1тр згс="баба:Бтаде/рпд;Ьазеб4,1УВОП... а1б="Не11о Иог1б >
Совет: чтобы связать изображение с другим документом, просто вложите
тег <1тд> внутрь тегов <а>.
15.2. Выбор альтернативного текста
Альтернативный текст (ай-Гех() используется программами чтения
с экрана для пользователей с нарушениями зрения, а также поисковыми
системами Поэтому важно писать качественный альтернативный текст
для ваших изображений.
Текст должен выглядеть корректно, даже если заменить изображение его
атрибутом а1б. Например:
<!-- Неправильно -->
<1тд 8гс="апопутоиз.рлд" а1б="Апопутоиз изег ауабаг"/> Ап
апопутоиз изег «гоге:
<Ыоскдиобе>1_огет 1рзит с!о!ог зеб.</Ыоскаиобе>
<а ЬгеТ="ЫГр5://доод1е,сот/’><1тд згс="еб1Г .рпд" а1б=*ЕбИ
1соп"/></а> /
<а НгеТ="ГтСтзрь ://уоод!е. со1п/ ’хйпд згс="бе1ебе.рпд" а]Л=' 0е1е1е
1сел ’ /></а>
Без изображений это будет выглядеть так:
Апопутоиз изег атаГаг Ап апопутоиз изег ттИе:
Богет 1рзит с1о1ог веб.
' Ебк коп / Эекге коп
Чтобы исправить это:
• Удалите альтернативный текст для аватара. Это изображение до-
бавляет информацию для зрячих пользователей (легко узнаваемый
значок, показывающий, что пользователь анонимный), но эта ин-
формация уже доступна в тексте.
• Удалите слово «1соп» из альтернативного текста для значков.
Знание о том, что это значок, не помогает передать его фактическое
назначение.
<!-- Правильно -->
<1тд згс="апопутсиз.рлд" а1Т=""/> Ап апопутоиз изег «горе:
<ЫоскдиоТ.е>1_огет арзит с1о1ог зеб </Ысскдиобе>
<а НгеТ-"Н1:':р8://доод1е.сот/"х1тд згс="еаК.рпд а1Г="Еб1Г"/></
а> /
<а ЬгеТ=" 1оСгрз ://доод1е.сот/‘'х1тд згс="ае1еГе рпд"
а1Г= БеХеБе"/></а>
Результат.
Ап апопутоиз изег хлтоТе
Еогет хрзшп с!о1ог зей
Ес1й / ОекГе
Примечание: существует семантическая разница между включением пу-
стого атрибута а И и его полным отсутствием Пустой атрибут а! 1 указыва-
ет, что изображение не является ключевой частью контента (как в данном
случае — это просто дополнительное изображение, которое не обязатель-
но для понимания остального). Однако отсутствие атрибута аИ указывает,
что изображение является ключевой частью контента, и для него просто нет
текстового эквивалента.
15.3. Адаптивное изображение с использованием
атрибута згсае!
Использование згсвеР с з!гез
<1гпд 51265=" (шЕп-м/ЕсНЬ: 1200рх) 580рх,
(гп1п-\л/1 с!1:Ь : 640рх) 48ум/,
98ум/"
5гс5еЕ=" 1гпд/Не11о-300. ]рд 300м/,
1тд/Не11о-600. )рд 600м/,
1шд/1те11о-900. )рд 900м/,
1тд/Не11о-1200. ]рд 1200м/"
5гс="1тд/Ре11о-900. ]рд" а.И="Не11о">
51265 работают как медиазапросы, описывая, сколько места изображение
занимает во У1ем/рог1.
• Если уЕем/рогб больше 120Орх, изображение будет ровно 580рх
(например, наш контент центрирован в контейнере шириной 1200рх.
Изображение занимает половину минус отступы).
• Если угем/рогб между 640рх и 1200рх, изображение занимает
4 8% У1ем,рогТ (например, изображение масштабируется вместе со
страницей и занимает половину ширины уюлрог! минус отступы).
• Если утем/рогЕ любого другого размера, в нашем случае меньше 640рх,
изображение занимает 98% утеирогб (например, изображение масшта-
бируется вместе со страницей и занимает всю ширину утем/рогб минус
отступы). Условие медиазапроса должно быть опущено для последнего
элемента.
згсвеТ просто сообщает браузеру, какие изображения у нас есть и какие
у них размеры
• 1тд/Не11о-300. зод имеет ширину ЗР0рх,
• 1тд/Не11о-600. ] рд имеет ширину 60Ррх,
• 1тд/Не11о-900. ]рд имеет ширину 90брх,
• 1 ппд/1пе11о-1200. д рд имеет ширину 1200рх.
Использование згсзе! без зьгез
<1тд згс="1тд/Ие11о-300.}рд" а1!="Ие11с"
згсзе!="1тд/Не11о-300.]рд 1х,
1п1д/Не11о-600. ]рд 2х,
1тд/НеПо-1203.]рд Зх">
згсзе! предоставляет список доступных изображений с указанием плот-
ности пикселей (йеуке-рххе! гайо).
• Если плотность пикселей равна 1, используйте 1тд/Не11о-300.} рд.
• Если плотность пикселей равна 2, используйте 1тд/бе11о-600. д рд.
• Если плотность пикселей равна 3, используйте 1тд/Ие11с -1260 . з рд.
зге — это всегда обязательный источник изображения. В случае исполь-
зования с згсзе! зге будет служить резервным изображением, если браузер
нс поддерживает згсзе!.
15.4. Адаптивное изображение с использованием
элемента <р!с1иге>
Код
<р!с!иге>
<зоигсе тес!1а="(т1п-1ч1с1!!|; 600ох)" згсзе!="1агде_1таде.]рд">
<зоигсе тебга-"(пнп-й1б!Ь• 450ох)" згсзе!="зта11_1таде.]од">
<1тд згс=' беЕаи1!_1тасе.дод1 з!у1е="л1с1!б :аи!о; ">
</р1с!иге>
Использование
отображения разных изображений в зависимости от шири-
ны экрана необходимо включить все изображения с использованием
тега <зои гсе> внутри тега <р1с!иге>, как показано в примере выше.
Результат
• На экранах с шириной >600рх отображается 1а где_1таде. ] рд.
• На экранах с шириной >450рх отображается зта11_1таде. ] рд.
• На экранах с другой шириной отображается бе!аи1!_1таде. д рд.
Глава 16.
Карты изображений (1таде Марз)
Теги / Атрибуты <1тд> Значения Ниже приведены атрибуты, специфичные для карт изображе- ний, которые используются с тегом <1то>. Обычные атрибу- ты < 1ггд > также применяются.
изетар Имя карты с добавленным символом решетки. Например, для карты с именем пате= "тар" изображение должно иметь атрибут езеп1ар="#тар
тар
пате Имя карты для ее идентификации. Используется вместе с атри- бутом изетар изображения.
<агеа> Ниже приведены атрибуты, специфичные для тега < а геа>. Если указан атрибут КгеГ, делающий <агеа> ссылкой, то <агеа> также поддерживает все атрибуты тега <а>, за исклю- чением ртг.д.
а1Т Альтернативный текст, который отображается, если изобра- жения не поддерживаются Этот атрибут необходим только в том случае, если на <агеа> также установлен атрибут КгеТ.
соогбз Координаты, определяющие область для выбора. Если збаре=" ро1удоп", этот атрибут должен быть установ- лен в виде списка пар " х, у", разделенных запятыми (напри- мер, зНаре='ро!у доп" соогс15="х1, у1, х2, у2, хЗ, уЗ, ..."). Если збаре=" гесСапд1е", этот атрибут должен быть установлен в виде ЕеЕС, Сор, гтдЫ, ЬоССот. Если зпаре=" с!гс1е", этот атрибут должен быть установлен в виде сепСегХ. сепСегУ, гасНиз.
ЬгеТ 1ЖЕ-адрес гиперссылки, если он указан. Если он опушен, то <агеа> не будет представлять собой гиперссылку.
збаре Форма области (<агеа>) Может быть установлена как беСаиИ для выбора всего изображения (атрибут соогбз не требуется), стгс1е или ст гс для круга, гесСапд1еили гесСдля прямоугольника, и ро1удоп или ро1у для многоугольной обла- сти, заданной угловыми точками.
16.1. Введение в карты изображений
Описание
Карта изображения (ппа§е тар) — это изображение с кликабельными об-
ластями, которые обычно действуют как гиперссылки.
Изображение определяется тегом <1тд>, а карта — тегом <тар> с тега-
ми <агеа>, обозначающими каждую кликабельную область. Используйте
атрибуты изетар и пате, чтобы связать изображение и карту.
Базовый пример
Для создания карты изображения, в которой каждая из фигур иа изобра-
жении ниже будет кликабельной:
...код будет следующим:
<1тд згс="М1:Гр: / /д асес! . сот/Ыодр1х/2007/1:г18диагес1гс1е/002 дтб*'
изетар^':#збарез">
<тар пате="я11арез">
<агеа збаре="ро1удоп" соогбз="79,6,5,134,153,134">
<агеа збаре= ' гесхапд1е" соо гс1з=" 177, 6,306,134">
<агеа збаре="с1гс1е" сэогбз="397,71,65">
</тар>
Вы увидите, что браузер распознает области, когда курсор превращается
в указатель.
Глава 17.
Элементы управления вводом
Параметр с1азз тс1 Описание Указывает класс элемента ввода Указывает идентификатор элемента ввода.
Руре Определяет тип элемента управления вводом. Допустимые значения: Ыдбеп, РехР, Ре1, ог1, епа11, разз«огс1. с1аРе, Ртте потЬег, гапде, соЪог, сНескЬох, гас11о, Р11е, зиЬттР, ттаде, гезеР, ЬиРРоп. По умолчанию используется РехР, если тип не ука- зан, указан неверно или не поддерживается браузером.
пате с! 1зао1еЬ Указывает имя элемента ввода. Булево значение, указывающее, что элемент ввода должен быть от- ключен. Отключенные элементы нельзя редактировать, они не от- правляются при отправке формы и не могут получать фокус.
сИескес! Если значение атрибута руре — гаато или сНескЬох, наличие это- го булева атрибута указывает, что элемент выбран по умолчанию; в противном случае он игнорируется
ти1Р1р1е НТМБ5: Указывает, что можно передать несколько файлов или зна- чений (применяется только к элементам типа Р11е и егпаН).
о1асеЬо1с1ег НТМБ5: Подсказка для пользователя, что можно ввести в поле Текст подсказки не должен содержать символов перевода строки.
аиРосотрБеРе НТМГ5. Указывает, может ли значение элемента быть автоматиче- ски заполнено браузером.
геасоп1у Булево значение, указывающее, что элемент ввода нельзя редак- тировать. Только для чтения элементы все равно отправляют- ся при отправке формы, но не могут получать фокус. НТМ1.5: Этот атрибут игнорируется, если значение атрибута Руре установлено как Ыбаеп, гапде, со1ог, сНескЬох, гасПо, Ше или ЬиРРоп.
гедьРгеЬ ПТМТ5: Указывает, что значение должно быть указано или элемент должен быть отмечен для отправки формы.
а1Р аиРоРосиз уа1ие Альтернативный текст для изображений, если они не отображаются Элемент <1приР> должен получить фокус при загрузке страницы. Указывает значение элемента <1поиР>.
зрер Определяет допустимые числовые интервалы. Работает с типами ввода: потЬег, гапде СаРе, йаРеР1те-1осэ1, топРИ, Р1те, иеек
Элементы ввода — ключевой компонент интерактивных веб-систем. Это
НТМЬ-элементы. предназначенные для получения определенного типа дан-
ных от пользователей. Различные типы элементов ввода позволяют регули-
ровать формат вводимых данных и обеспечивают безопасность при вводе
паролей.
17.1. Текстовое поле
Самый базовый тип ввода и тип по умолчанию, если тип не указан. Этот
тип определяет однострочное текстовое поле, в котором автоматически
удаляются переносы строк. Все остальные символы могут быть введены.
Элементы <1при1.> используются внутри элемента <Тогш> для объявления
элементов управления, позволяющих пользователям вводить данные.
Синтаксис
стпрсй Суре='СехС">
или (без указания типа, с использованием атрибута по умолчанию):
< 1про1:>
Ширина текстового поля по умолчанию составляет 20 символов.
Это можно изменить, указав значение для атрибута з1ге:
^1при1: 1уре="1:ех1:" з1яе="50">
Атрибут 81хе отличается от установки ширины с помощью С88. Исполь-
зование ширины определяет конкретное значение (в пикселях, процентах
от родительского элемента и т. д.), которое поле ввода должно занимать. Ис-
пользование 3126 рассчитывает ширину на основе используемого шрифта
и ширины символов.
Примечание; использование атрибута зьге не ограничивает количество
символов, которые можно ввести в поле, а только определяет его ширину.
Для ограничения длины см. раздел «Валидация ввода».
Текстовое поле позволяет вводить только одну строку текста. Если вам
нужно многострочное текстовое поле для болвшого объема текста, исполь-
зуйте элемент <1ех1:а-еа>.
17.2. Флажки и переключатели
Обзор
Флажки (сйескЪохез) и переключатели (гасНо Ъпйопз) создаются с по-
мощью НТМЬ-тега <1 приг>, а их поведение определяется в спецификации
НТМЕ.
Самый простой флажок или переключатель — это элемент <1приП>
с атрибутом Суре, установленным как сбескЬох или габьо соответственно:
<1приС Суре="сНескЬох">
<1приб Туре= 1 габ!о">
Одиночный флажок используется для двоичного выбора, например,
для вопроса «да» или «нет». Флажки независимы, то есть пользователь мо-
жет выбрать несколько вариантов в группе флажков. Другими словами, вы-
бор одного флажка не снимает выбор с других флажков в группе.
Переключатели обычно используются в группах (если переключатель
нс сгруппирован с другим, вероятно, вы хотели использовать флажок) Груп-
па переключателей идентифицируется использованием одного и того же
атрибута пате для всех переключателей в группе Выбор переключателей
взаимоисключающий, то есть пользователь может выбрать только один ва-
риант из труппы. Когда один переключатель выбран, любой другой пере-
ключатель с тем же именем, который был выбран ранее, становится невы-
бранным.
Пример:
<1приб Гуре="габ1о" пате="со1ог" 1б="геб" уа1ие="#Е00">
<1при1 Суре="гасПо" папе="оо1ог" 1б="дгееп" уа!ие= '#0Е0">
<1рри1 Руре="гасПо" пате="со1ог" 1б="Ыие" уа1ие="#00Г >
При отображении переключатели выглядят как кружок (не выбран)
или заполненный кружок (выбран). Флажки выглядят как квадрат (не вы-
бран) или заполненный квадрат (выбран). В зависимости от браузера и опе-
рационной системы квадрат иногда имеет закругленные углы.
Атрибуты
Флажки и переключатели имеют несколько атрибутов для управления их
поведением.
уа1ие
Как и у любого другого элемента ввода, атрибут уа1ие указывает строко-
вое значение, связанное с элементом при отправке формы. Однако флажки
и переключатели отличаются тем, что если значение опущено по умолча-
нию отправляется значение оп, а не пустое значение Атрибут уаГие не вли-
яет на внешний вид элемента.
сбескеб
Атрибут сбескеб указывает начальное состояние флажка или переключа-
теля. Это булев атрибут, который может быть опущен.
Каждый из следующих примеров эквивалентен и определяет выбранный
переключатель:
с1при1: сбескеа>
<1ор1Л сбескес!=" ">
<1приР сбескес1= "с1эескесГ>
<1при1 сбескеб="С11ЕсКеО">
Отсутствие атрибута сбескеб — единственный допустимый синтаксис
для иевыбранпого элемента:
<1приг 1уре=" габю">
<1приТ Туре=|,с11ескЬох">
При сбросе формы (<Тогт>) флажки и переключатели возвращаются в со-
стояние, определенное атрибутом соескеб
Доступность
Метки
Чтобы предоставить контекст для элементов и показать пользователям,
для чего нужен каждый элемент, всем им необходимо предоставить метку
Это можно сделать с помощью элемента <1аЬе1>, который оборачивает эле-
мент. Также это делает метку кликабельной, чтобы можно было выбрать со-
ответствующий элемент.
Пример:
<1аЬе1>
сзприй *уре=" гасПо" пате=''со1ог" уа!ие='#Г00">
Красный
</1аЬе1>
...или с использованием элемента <1аЬе1> с атрибутом Тог, установлен-
ным в значение атрибута тс1 элемента:
сгприГ Туре="с1эескЬох" пате-"со1ог" 7а1ие-"#1-00" 1б="геб">
<1аЬе1 Тог="геб">Красный</1аЬе1>
Группы элементов
Поскольку каждый переключатель влияет на другие в гпуппе, обычно
предоставляется метка или контекст для всей группы переключателей.
Чтобы предоставить метку для всей группы, переключатели должны необ-
ходимо включить в элемент <Т1е1бьеТ> с элементом <1едепб> внутри него.
Пример
<Т1е1азеТ>
<1едепб>ТНоте со1ог:</1едепб>
<!-- Цвет темы -->
<р>
<1прцГ Гуре="гасНо" пате="со1ог' 1с1="гес1 уа1ие="#Е00">
<1а1?е1. Тог="гее!">Красный</1аве1>
</р>
<-р>
<1прц1: Туре="габ±о" паше-"со1ог" 1б="дгееп" уа1ие="#0Е0">
<1аЬе1 Тог= 'дгееп">Зеленый</1аЬе1>
</р>
<Р>
<1пра1: 1уре="гасНо" пат1е='со1ог' 1с1="Ыие" уа1ие=' #00Е">
<1аЬе1 Тог="Ыие">Синий</1аое1>
</р>
</ГтеШзе
Флажки также могут быть сгруппированы аналогичным образом, с ис-
пользованием <-Е1е1с1ае1.> и <1едепс1> для идентификации группы связан-
ных флажков Однако помните, что флажки не должны иметь одно и то же
имя, так как они не являются взаимоисключающими. В противном случае
приведет к отправке нескольких значений для одного ключа, и не все сервер-
ные языки обрабатывают это одинаково (неопределенное поведение). Каж-
дый флажок должен иметь уникальное имя или использовать квадратные
скобки ([ ]), чтобы указать, что форма должна отправить массив значений
для этого ключа. Выбор метода зависит ст того, как вы планируете обрабаты-
вать данные формы на стороне клиента или сервера. Также следует делать
легенду короткой, так как некоторые комбинации браузеров и программ
чтения с экрана читают легенду перед каждым полем ввода в <Т 1е 1с1 зеХ>.
17.3. Валидация ввода
Валидация ввода НТМь выполняется браузером автоматически на осно-
ве специальных атрибутов элемента <1при*>. Она может частично или пол-
ностью заменить валидацию ввода на (ачаЗспрР Однако такую валидацию
можно обойти с помощью специально сформированных НТТР-запросов, поэ-
тому она не заменяет валидацию на стороне сервера Валидация происходит
только при попытке отправить форму, поэтому все ограниченные элементы
ввода должны находиться внутри фермы, чтобы валидация сработала (если
только вы не используете ]а7а8спр(). Учтите, что элементы ввода, которые
отключены (сйзаЫеб) или доступны только для чтения (геабоп!у), не вызы-
вают валидацию.
Некоторые новые типы ввода (например, етаЦ, иг1, Ге1, ба1е и многие
другие) автоматически проверяются и не требуют дополнительных ограни-
чений для ва лидации.
Версия >5
Обязательное поле
Используйте атрибут гедитгеД, чтобы указать, что поле должно быть за-
полнено для прохождения валидации:
<1при1: гечи!гес1>
Минимальная /Максимальная длина
Используйте атрибуты тнпТепдГб и тахБепдУН, чтобы указать требования
к длине. Большинство браузеров предотвращают ввод более тах символов
в поде, что не позволяет пользователю сделать запись недействительной
еще до попытки отправки формы:
<1при1 1л1л1епд1Ь="3' >
<1приХ тах1епдГб="15''>
сьпри!: т1п1епд11т="3" тах!епд1Ь="15">
Указание диапазона
Используйте атрибуты т!п и тах, чтобы ограничить диапазон чисел, ко-
торые пользователь может ввести в поле типа пишбег или гапде:
Магкз: <1при1: Руре-"питоег" з12е="6" пате="тагкз'‘ т1п="0" тах="100" />
<!-- Оценки
8иЬ]есР ЕеебЬаск: <1приР Руре="гапде" З1?е="2" пате="ТеебЬаск"
т1п="1" тах="5" />
<!--Отзыв по предмету -->
Версия>5
Соответствие шаблону
Для белее точного контроля используйте атрибут раРРегп, чтобы ука-
зать регулярное выражение, которому должно соответствовать значение
для прохождения валидации. Также можно указать атрибут Щ1е. который
будет включен в сообщение об ошибке, если поле не пройдет валидацию:
<1приБ раБРегп="\б*' Р111е=*МитЬегз оп1у, р1еазе.'>
<!-ТолсКО цифры, пожалуйста -->
Вот пример сообщения, которое отображается в Соо$1е Сйтоте версии 51
при попытке отправить форму с недопустимым значением в этом поле:
М I
21еаье тахсН (Не Госта!
гериеЧес!
(МитЬегх оп1у, р1еа5е.
Не все браузеры отображают сообщение для недопусти-
мых шаблонов, хотя большинство современных браузеров
поддерживают эту функцию.
Проверьте последнюю информацию о поддержке
на СапШзе и реализуйте соответственно (1Шрз://сапш8е.сот/
трит-райегп).
Версия >5
Прием определенных типов файлов
Для полей ввода типа Ше можно указать, что принимаются только опре-
деленные типы файлов, такие как видео, изображения, аудио, определенные
расширения файлов или типы медиа. Например:
<1при1: 1уре="Г11е" ассерГ=‘'1таде/*' Г11:1е="Допускаются только изо-
бражения'^
Несколько значений можно указать через запятую, например:
<1при1: Гуре=" ТПе" ассерГ="1гпаде/*, . гаг, аррИсаГГоп/хтр ">
Примечание: добавление атрибута поуаИбаГе к элементу <Гогш>
или атрибута Еогтпоуа1±ба1:е к кнопке отправки предотвращает валида-
цию элементов формы. Например:
<Гогт>
<1при1: 1уре="1ех1" пате="пате" гедиГгеб^
<1при1 1уре="ета11" па-пе="етаП" геди!геб>
<1приР раГГегп="\б*" пате-"питЬег" геритгеб>
<тпри1: руре="виЬт11;" уа1ие="РиЫ1з!з "> <!-- Опубликовать-->
<!-- форма будет проверена -->
<1приб Туре="5иЬт1Т" уа1ае="5ауе" Гогтпоуа11баГе> <!--
Сохранить -->
<!-- форма НЕ будет проверена -->
</Гогт>
В этом примере форма содержит поля, обязательные для «публикации»
черновика, но не обязательные для «сохранения» черновика.
17.4. Цвет
Версия>5
<1при1: Гуре="со1ог' папе-"Гаусо1ог" уа1ие="#ГГ0000">
В поддерживающих браузерах элемент <1при1> с атрибутом Гуре, уста-
новленным как со!о г, создает кнопку, цвет которой соответствует значению
атрибута уа1ие (ио умолчанию черный, если значение не указано или имеет
недопустимый шестнадцатеричный фермат)
При нажатии на эту кнопку открывается
виджет выбора цвета операционной
системы (на экране компьютера вы увидит е
цветное изображение), который позволяет
пользователю выбрать цвет.
Для браузеров, которые не поддержива-
ют этот тип ввода, используется обычное
ноле тина 1ех1.
.йоооо
17.5. Пароль
<1пр1Л Руре="ра8зл'ога" пате="раззиога">
Элемент <1при1:> с атрибутом 1уре, установленным как разз^огс!, созда-
ет однострочное текстовое поле, похожее на поле типа !ех(, за исключением
того, что текст не отображается при вводе:
«тори! 1уре="раззиогс1" пзте=| рззз^огб р1асеНо1бег=,:Раззиогб">
<!-- Пароль -->
Текст-заполнитель (р1асе1го!(1ег) отображается обычным текстом и авто-
матически заменяется, когда пользователь начинает ввод:
рмш
Примечание: некоторые браузеры и системы изменяют поведение поля
пароля, чтобы отображать последний введенный символ в течение коротко-
го времени, например:
—
• •г
17.6. Файл
<1при1: 1уре="ТПе" пате="ГИе8иЬп118310п">
Ноля ввода файлов позволяют пользователям выбрать файл из локальной
файловой системы для использования на текущей странице Если они ис-
пользуются вместе с элементом <То гт>, они могут позволить пользователям
загружать файлы на сервер.
Следующий пример позволяет пользователям выбрать файл из файловой
системы и загрузить его на сервер с помощью скрипта ир1оас1_'(:11е. р 1~р:
<Согт ас Ноп= ,ор1оас1_1:11е. рбр" теГЬос1="ро81:" епс1:уре= ,гти11:1раг С/
гт-баСа">
8е1ес1: СПе Сэ ир1оаб :
<1про1: 1уре="Г11е" пате="Т11е8иЬт1зз1оп" 1с1="Г11е8иЬт18з1ол">
<1при1: 1:уре="зиЬтИ" уа!ие-"Ор1оас1 уоиг ГПе" паие="зиЬт11:">
</Тогт>
Несколько файлов
Добавление атрибута шиШрХе позволяет пользователю выбрать не-
сколько файлов:
<1Г1ри1: Суре=| ТПе па1ге="Г11е8иЬт1зз1оп" 1<1="-Г11е8иЬп1331оп" то1Т1р1е>
Прием определенных типов файлов
Атрибут ассерГ указывает типы файлов, которые пользователь может
выбрать. Например, .рпд, . д!С, .дред:
<1проС Гуре="1л]е" пате="-Г11е8иЬп11381оп" ассер1="1таде/х-рпд, Хп’аде/
д1С, 1таде/]'ред">
17.7. Кнопка
<1при1: Туре='ЬиЩоп" уа!ие="ВиЩоп 1:ех1:">
Кнопки могут использоваться для выполнения действий на страни-
це без отправки формы. Вы также можете использовать элемент <ЬиСТоп>,
если вам нужна кнопка, которую легче стилизовать или которая может со-
держать другие элементы:
<Ьи1:1:оп Суре="ЬиГГоп">Текст кнопки</Ьи1:Гоп>
Кнопки обычно используются с событием опсПск:
<1пр|Л Суре="йи11:оп ' опсИск="а1егС( *Не13о, ууог1с1! ’)" уа1ие-"СИск Ме">
или
<1)и1:Соп 1уре="Ьи1:1:оп" опс11ск='а1егг('Не11о, иог1б! ’) ">СИск Ме</
ЬиЩоп>
Атрибуты
[пате]
Имя кнопки, которое отправляется с данными формы.
[Гуре]
Тип кнопки.
Возможные значения:
зизтИ кнопка отправляет данные формы на сервер Это значение
по умолчанию, если атрибут не указан или изменен на пустое или недопу-
стимое значение.
геоеГ: кнопка сбрасывает все элементы управления к их начальным зна-
чениям.
ЬиГГоп: кнопка не имеет стандартного поведения. Она может иметь кли-
ентские скрипты, связанные с событиями элемента, которые срабатывают
при наступлении событий.
тели: кнопка открывает всплывающее меню, определенное через соот-
ветствующий элемент.
[уа1ие]
Начальное значение кнопки.
Версия>5
Дополнительные атрибуты для кнопок отправки
Атрибут Тогт Описание Указывает Ю формы, к которой принадлежит кнопка. Если не ука- зано, кнопка принадлежит ближайшей родительской форме (если она существует).
ГогтасИоп Указывает, куда отправлять данные формы при отправке с ис- пользованием этой кнопки
ГоптепсСуре Указывает, как должны кодироваться данные формы при отправ- ке на сервер с использованием этой кнопки. Может использовать- ся только с Гогтще±Нос1="оозС"
ГогтшеРНос! Указывает НТТР-метод (Р08Т или 6Е Г) для отправки данных фор- мы с использованием этой кнопки.
Гогтпоуа11с1аСе Указывает, что данные формы не должны проверяться при от-
ГогпйагдеС правке Указывает, где отображать ответ, полученный после отправки формы с использованием этой кнопки.
17.8. Отправка формы
<1при1: Суре="зиЬт11:" уа1ие=' Отправить '>
Кнопка отправки при нажатии создает кнопку, отправляющую форму,
в которой она находится.
Вы также можете использовать элемент <ЬиТТоп», если вам нужна кноп-
ка отправки, которую легче стилизовать или которая может содержать дру-
гие элементы:
«ЬиГТоп Суре="зиЬт1С >
<1тд 5гс="зиЬт11:-1соп.]рд" /> Отправить
</Ьи1Топ>
17.9. Сброс формы
<1при1: 1:уре= 1 гезет 1 уа1ие="ГСезе1:">
Кнопка сброса (гезеГ) создает кнопку, которая при нажатии сбрасывает
все элементы управления в форме к их начальным значениям.
• Текст в поле ввода будет сброшен на пустое значение или значение
по умолчанию (указанное с помощью атрибута уа1ое).
• Любые выбранные пункты в меню выбора будут сняты, если
они не имеют атрибута зеТесТес!
• Все флажки и переключатели будут сняты, если они не имеют
атрибута сбескеб.
Примечание: кнопка сброса должна находиться внутри формы или быть
привязана к ней (с помощью атрибута Топп), чтобы иметь эффект. Кнопка
сбросит только элементы внутри этой формы.
17.10. Скрытое поле (НкМеп)
сфпрЩ Суре="Н1ббеп" пате="1приСМате" уа1ие="1приТУа1ие">
Скрытое поле не будет видно пользователю, нс его значение будет от-
правлено на сервер при отправке формы.
17.11. Телефон
<1при1: Суре® Се1" уа1ие= +8400060000'>
Элемент <1при1:> с атрибутом Суре, установленным как Се 1, представляет
собой однострочное текстовое поле для ввода номера телефона.
17.12. Электронная почта
Версия>5
Элемент <1приГ 1уре="етаП > используется для нолей ввода, которые
должны содержать адрес электронной почты'
<Тогт>
<1аЬе1>Е-тв11 <1аЬе1>
<1при1: Гуре="ета11" пате="етаП">
</Тогт>
Адрес электронной почты может быть автоматически проверен при от-
правке в зависимости от поддержки браузера.
17.13. Число
Версия>5
<1при1: 1уре="питЬег" 7а1ие="0" пате-"сиап1:11:у">
Элемент <1при*> с атрибутом Гуре, установленным как пишЬег, представ-
ляет собой точный элемент управления для установки значения в виде стро-
ки, представляющей число.
Обратите внимание; это поле не гарантирует ввод корректного числа.
Оно позволяет вводить любые символы, которые могут1 быть частью числа,
например, пользователь сможет ввести значение вида е1 е-,Е.
17.14. Диапазон
Версия >5
<1при1: 1уре="галде" пнг,= "" тах=' " 8Гер=":| />
Элемент управления для ввода числа, точное значение которого не-
важно
Атрибут Описание Значение по умолчанию
ш1п Минимальное значение диапазона О
тах Максимальное значение диапазона 100
эсер Шаг увеличения значения
1
17.15. Поиск
Версия> 5
Тип ввода зеагсб используется для текстового поиска. В большинстве
браузеров он добавляет значок лупы рядом с полем для текста.
<1прит туре= зеагсб" пате="доод1езеагсЬ‘>
17.16. Изображение
<1при1: буре="1таде згс="1тд.рпд" а11:="1таде_пате" ЬетдЫ1="50рх'
1л/1(К11="50рх"/>
Необходимо использовать атрибут зге для указания источника изображе-
ния и атрибут а 16 для указания альтернативного текста Вы можете использо-
вать атрибуты Ье1д1тб и для указания размера изображения в пикселях
17.17. Неделя
Версия>5
<1при1: 6уре="иеек" />
В зависимости от поддержки браузера будет отображаться элемент управ-
ления для выбора номера года и недели без указания часового пояса.
17.18. ОРЬ
Версия >5
<1пр1Д: Суре="иг1" пате='Нотераде">
Этот тип ввода используется для полей, которые должны содержать
ИКЬ-адрес.
В зависимости от поддержки браузера поле Ш.Ь может быть автоматиче-
ски проверено при отправке.
Некоторые смартфоны распознают тип иг! и добавляют «.сот» на клави-
атуре для удобства ввода.
17.19. Локальные дата и время
Версия>5
<1лри1 буре=' Рабеб1те-1оса1" />
В зависимости от поддержки браузера будет отображаться элемент управ-
ления для выбора даты и времени.
17.20. Месяц
Версия >5
«бприб буре=,|топб1'Г />
В зависимости от поддержки браузера будет отображаться элемент управ-
ления для выбора месяца.
17 21. Время
Версия >5
<1приб буре="б1те" />
Тип ввода бтте указывает, что элемент принимает строку, представляю-
щую время. Формат определен в КГС 3339 и должен быть частичным време-
нем. например:
19:04 39
08:2.0:39.04
В настоящее время все версии Ес1§е, СЬготе, Орега и СЬготе для Аибгой!
поддерживают буре="б!те". Более новые версии Апс1го1с1 Вгомгзег, начиная
с 4.4, также поддерживают его. ЗаГап для ЮЗ предлагает частичную под-
держку, не поддерживая атрибуты пип, шах и збер.
17.22. Глобальные дата и время
Элемент <1п ри б> с атрибутом буре, установленным как "^эбеНте", пред-
ставляет собой элемент управления для установки значения в виде строки,
представляющей глобальные дату и время (с информацией о часовом поясе):
<Г1е1б5еб>
< р>< 1аЬе1>1'(ееббпд биле: <1приб буре="бабеб1те' пате="тееб1пд.
збагб1|></1аЬе]></р>
< !-- Время встречи -->
</НеГбзе б>
Допустимые атрибуты:
• Глобальные атрибуты (§1оЬа1 айпЫйез)
• пате
• сИзаЫеб
• Гост
• Гуре
• ап1осотр1еГе
• аиГоГосиэ
• 1181
• т1п и тах
• зЕер (число с плавающей точкой)
• геайогйу
• гецшгей
• уа!ое
17.23. Дата
Версия>5
<1приУ Туре="дате" />
На экране появится элемент1 управления для выбора даты. Этот тип ввода
не поддерживается в ПгеГох и йпегпеГ Ехр1огег.
Глава 18.
Формы
Атрибут Спис ание
ассерС-сНагзес Указывает кодировку символов, которая будет использована при отправке формы.
асПоп Указывает, куда отправлять данные формы при ее отправке.
аи1:осотр1е1:е Указывает, должна ли форма иметь автозаполнение включен-
ным или выключенным.
епсТуре Указывает, как данные формы должны быть закодированы при отправке на сервер (только для тсГНоск" розе )
теЫэос! Указывает НТТР-метод, используемый при стпраьке данных фор- мы (Р08Т или СЕТ).
пате Указывает имя формы.
по уаЫСаТе Указывает, что форма не должна проверяться при отправке.
Сагден Указывает, где отображать ответ, полученный после отправки формы.
Для группировки элементов ввода и отправки данных НТМЬ исполь-
зует элемент Тогт, который объединяет элементы ввода и отправки. Эти
формы обрабатывают отправку данных указанным методом на страницу,
обрабатываемую сервером пли обработчиком. В этой главе объясняется
и демонстрируется использование НТМЬ-форм для сбора и стправки вход-
ных данных.
18.1. Отправка данных
Атрибут асЬюп
Атрибут асЫоп определяет действие, которое должно быть выполнено
при отправке формы. Обычно эго приводит к выполнению скрипта, кото-
рый собирает отправленную информацию и работает с ней. Если оставить
его пустым, данные будут отправлены на тот же файл:
<Есгш асЫоп="асЫоп.р11р">
Атрибут ше!1тог1
Атрибут те 1Моб используется для определения НТТР-метода формы, кото-
рый может быть либо 6ЕТ, либо Р08Т:
<!огт ас!1оп="асТ1оп.р1тр ’ те!бос1=' де!: ’>
< !огт ас!1оп="ас!!оп.рбр те!боб= роз! >
Метод 6ЕТ чаще всего используется для получения данных, напри-
мер, для получения записи по ее 10 или имени или для отправки поис-
кового запроса. Он добавляет данные формы к ШЬ, указанному в атри-
буте ас!1оп:
иии.ехатрТе,сот/ас!1оп.рНр?Т1гзСпате=М1скеу&1аз!пате=Моизе
Метод РС5Т используется при отправке данных в скрипт Он не добавляет
данные формы к Ш1., а отправляет их с использованием тела запроса.
Для корректной отправки данных из формы необходимо указать атри-
бут пате.
Пример отправки значения поля с именем 1аз!пате'
< 1при! !уре='!ех!" пате="1аз!пате" уа1ие="Моизе">
Дополнительные атрибуты
< !огт ас!1оп="ас!1оп.рбр" те!боб= роз!" !агде!="_Ь1апк ассер!-
сНагзе!="1ЛЕ-8"
епс!уре-"арр11са!1оп/х-«йи-!огт-иг1епсобеб' аи!осотр1е!е="о!Т 1
по7а1±ба!е>
< !-- элементы формы -->
</!огт>
18.2. Атрибут (агде! в теге Тоггп
Атрибут !агде! указывает имя или ключевое слово, определяющее, где
отображать ответ, полученный после отправки формы. Этот атрибут опреде-
ляет имя пли ключевое слово для контекста просмотра (например, вкладка,
окно или встроенный фрейм).
Пример формы с атрибутом !агде!:
<!огп1 !агде!="_Ыапк">
Значения атрибута 1агде1
Значение Описание
_Ыапк Ответ отображается в новом окне или вкладке.
_зе1Т Ответ отображается в том же фрейме (по умолчанию).
_рагепТ Ответ отображается в родительском фрейме
_1ор Тгатепате Ответ отображается во всем теле окна. Ответ отображается во встроенном фрейме с указанным именем.
Примечание, атрибут 1а г де! был устаревшим в НТМЬ 4.01. В НТМЬ5
он поддерживается. Фреймы и фреймсеты не поддерживаются в НТМ15,
поэтому значения _рагепр, _1ор и Ггатепате теперь в основном
используются с тТгапе.
18.3. Загрузка файлов
Изображения и файлы могут быть загружены/отправлены на сервер, если
установить атрибут епсУуре тега Гост в значение тиШрэгУ/Тогт-баУа.
Атрибут епсТу ре указывает, как данные формы должны быть закодированы
при отправке на сервер
Пример
<Тогт те1±ос!="ро81:" епс1:уре5="ти11:1раг1:/Гогт-с1а1а" асУ1оп="ир1оас1.
рбр">
сзприт гуре=' ’ТПе" пате="р1с" />
<1прир Ууре="8иЬт1Х" уа1ие="11р1оаа" />
</Тогт>
18.4. Группировка нескольких полей ввода
При проектировании формы может потребоваться сгруппировать не-
сколько полей ввода для улучшения организации макета формы. Это можно
сделать с помощью тега <1г±е1с1зе1;>. Для каждого <11е1с1зе1:> можно устано-
вить заголовок с помощью тега <1едепб>.
Пример:
<"бо гщ>
<Т1е1дзег>
<1есепб>1 зТ -РгеЭс! зет:</1едепб> <!-- Первая группа полей: -->
Р1е1с1 опе:<Ьг>
<1при1 1:уре="1:ех1:"><Ьг>
г!е1с1 Г\мо:<Ьг>
<1приГ Гуре="ГехГ"><Ьг>
</Е1е1с15е1><Ьг>
<Т1е1с!зег>
<1едепс1>2пс1 Т1е1с1 зеС :</1едепс!> <!-- Вторая группа голей: -->
Е1е1с1 1±гее:^Ьг>
<1приГ Гуре="ГехГ"><Ьг>
р1е1с1 Тоиг :<=Ьг>
<1при1 1:уре="1ех1"><Ьг>
</'Г1е1с1зе'С><Ьг>
стриг Еуре=" зиЬтП:' уа1ие="8иот11:">
</Тогт>
Результат;
—1$1 &е!д $« -
Г>е13 опе:
ГхеН пуо
—2п<1 НеИ ье!
Г1е1с1 Ниее
Г1е16 Гоиг
8иЬггн1
Поддержка браузерами
Последние версии СИготе, 1Е, Ес^е, НгеГох, ЗаГап и Орега также
поддерживают тег <‘Е1е1^зеТ>.
Глава 19.
Элемент ОIV
Элемент с11V в IП М1 является контейнерным элементом, который инкапсу-
лирует другие элементы и может использоваться для группировки и разделе-
ния частей веб-страницы. Сам по себе элемент 617 не имеет какого-либо кон-
кретного значения, но является мощным инструментом в веб-дизайне. В этой
главе рассматриваются назначение и применение элемента 6IV.
19.1. Основное использование
Элемент <61у> обычно не имеет конкретного семантического значения
сам по себе, просто представляя собой раздел, и чаще всего используется
для групптгровки и инкапсуляции других элементов внутри НТМБ-докумен-
та, а также для отделения этих групп от другого контента. Таким образом,
каждый <с11у> лучше всего описывается своим содержимым:
<017>
<р>Не11о! ТЬ1з 13 э рагадгар1э.</р> <!-- Привет! Это абзац. -->
</с11у>
Элемент слу обычно является блочным элементом (Ыоск-1есе1 е1ешеЩ),
и это означает, что он отделяет блок НТМЬ-документа и занимает макси-
мальную ширину страницы Браузеры обычно применяют следующее пра-
вило С88 по умолчанию:
сНу {
сНзрТау: Ыоск;
}
Консорциум Всемирной паутины (\Л/ЗС) настоятельно рекомендует
рассматривать элемент 6IV как элемент последнего выбора, когда ни один
другой элемент не подходит. Использование более подходящих элементов
вместо 6IV приводит к лучшей доступности для читателей и упрощению
поддержки для авторов.
Например, записв в блоге следует размечать с помощью <агТ1с1е>, гла-
ву — с помощью <зес1:1оп>, навигационные элементы страницы — с помо-
шью <пау>, а группу элементов управления формы—с помошью <Т1е1с!зеЦ>.
Элементы 617 могут быть полезны для стилистических целей или
для обертывания нескольких абзацев внутри раздела, которые должны
быть аннотированы схожим образом.
19.2. Вложенность
Распространенной практикой является размещение нескольких эле-
ментов <617> внутри другого <617>. Это обычно называется «вложенно-
стью» элементов и позволяет дополнительно разделять элементы на под-
разделы или помогать разработчикам с С88-стилизаписй. Элемент <617
с1азз="оиТег-617"> используется для группировки двух элементов <617
с1азз="1ппег-617">, каждый из которых содержит элемент <р>:
<617 о1азз="оигег-617|,>
<с117 с1азз="1ппег-сНу">
<р>ТГпз 13 а рагадгарб</р> <!-- Это абзац.
</с11у>
<Р1у с1азз="1ппег-617">
<р>ТЫз 1з апоУбег рагадгарб</р> <!-- Это еще один абзац. -->
</617>
</617>
Это приведет к следующему результату (для наглядности применены
С88-стили):
|ТыГ18~а рагаегарЬ ~~|
ГГЫь к апоЛег раГаВГарЙ
Вложенность строчных и блочных элементов
При вложении элементов следует помнить, что существуют строчные
(1п1те) и блочные (Ыоск) элементы. В то время как блочные элементы добав-
ляют разрыв строки в фоновом режиме, а это означает, что другие вложен-
ные элементы автоматически отображаются на следующей строке, строч-
ные элементы по умолчанию могут располагаться рядом друг с другом.
Избегайте глубокой вложенности <617>
Глубокая и часто используемая вложенность контейнеров указывает
на плохой стиль кодирования.
Закругленные углы или подобные функции часто создают такой НТМЬ-
код. Для большинства современных браузеров существуют аналоги в С883.
Старайтесь использовать как можно меньше НТМЬ-элементов, чтобы увели-
чить соотношение контента к тегам и уменьшить время загрузки страницы,
что приведет к лучшему7 ранжированию в поисковых системах.
Элемент б 17 не должен быть вложен глубже, чем на шесть уровней
Глава 20.
Секционные элементы
20.1. Элемент <па7>
Элемент <пау> предназначен в первую очередь для разделов, содержа-
щих основные блоки навигации на веб-сайте. Это может включать ссылки
на другие части веб-страницы (например, якоря для оглавления) или на дру-
гие страницы целиком
Встроенные элементы
Следующий пример отображает набор встроенных гиперссылок:
<пау>
<а НгеГ="1т11р8://доод1е,сот">6оод1е</а>
<а 1неС="НЩрз://илот/, уабоо.сот >УаИоо!</а>
<а 1"|ГеС="1тТ.Гр.с:: //вдмл/.Ыпд. сот">В1пд</а>
</пау>
Использование элементов списка при необходимости
Если контент представляет собой список элементов, используйте элемен-
ты списка для улучшения пользовательского опыта.
Обратите внимание на атрибут го1е-"пау1да1:1оп", подробнее об этом
ниже:
<па\' го1е-"пау1да11оп">
<и1>
<11><а 1эгеЕ="1тЩр5://доод1е.сот">5оод1е</а></И>
<И><а ИгеЕ="б1:'!:р8://«««.уабоо.сот '>УаЬоо! </а></11>
<11><а НгеЕ=‘'1тЫрз ://ш. Ыпд.сот">В1пд</а></11>
</и!>
</пау>
Избегайте излишнего использования
Элементы <ТооЕег> могут содержать список ссылок на другие части сай-
та (ЕАф, условия использования и т. д.). В этом случае достаточно элемен-
та <Еоэ1:ег>, и нет необходимости дополнительно оборачивать ссылки эле-
ментом <пау>:
< !-- Элемент <пау> не требуется внутри <Гоо1:ег> -->
<Тоо1ег>
<пау>
<а 1эгеТ="#">...</а>
</ПЭУ>
</ТооТег>
< !-- Достаточно только элемента <1юо1ег> -->
<-роо1ег>
<а Нгеб="#">...</а>
< /ТооТюг>
Примечания
• Потомки элемента <та!п> не допускаются внутри элемента <пау>.
• Рекомендуется добавлять атрибут го!е=’ пау1даТ1оп" к элемен-
ту <пау>, чтобы помочь пользовательским агентам, которые не под-
держивают НТМЙ5, а также предоставить больше контекста для тех,
которые поддерживают:
<пау го1е="гаузда-Ыоп"><!-- ... --></пау>
Программы чтения с экрана (эсгееп. геаЛегя)
Пользовательские агенты, такие как программы чтения с экрана, мо-
гут интерпретировать элемент <пау> по-разному в зависимости от их
требований.
• Они могут придать элементу <пау> более высокий приоритет при
отображении страницы
• Они могут задержать отображение элемента.
• Оки могут адаптировать страницу определенным образом для
удовлетворения потребностей пользователя. Например: увеличение
текстовых ссылок внутри элементов <пау> для пользователей с на-
рушениями зрения. _
Официальная спецификация НТМ1.5 для элемента <пау>
(Ьйр8://Ыт1.8рес.'1УЬа{’И5.ог§/тиШра8е/8еспоп8.Ыт1#1]1е-пау- К\ь_.
е1етеш).
20.2. Элемент <агОс1е>
Элемент <агНс1е> содержит самодостаточный контент, такой как статьи,
записи в блоге, комментарии пользователей или интерактивные виджеты, ко-
торые могут распространяться вне контекста страницы, например через К88
Когда элементы <аг1:1с1е> вложены друг в друга, содержимое вну-
треннего элемента < агШс1е> должно быть связано с внешним элемен-
том <аг!1с1е>.
Пример блога (раздел) с несколькими записями (статья) и комментария-
ми (статья) может выглядеть следующим образом:
<зес1:1оп>
<!-- Каждая отдельная запись в блого - это <аг11с1е> -->
<агЫс1е>
<Ьеабег>
<Ы>В1од Роз1</Ы> <!-- Запись в блоге -->
<Ыте аа1:е1:1те="2016-03-'|3">13'1Ь МагсИ 2016</11те>
<!-- 13 марта 2016 года -->
с/беаоег>
<р>ТИе агт1с1е е1етеп± геэгезегйз а зе!Т солбатпеб
агПсТе ог боситеп-(:.</р> <!-- Элемент <аг*1с!е> представляет со-
бой самодостаточную статью или документ.
<р>ТИе зесИоп е1ешеп± гергезеп-Ьз а дгоир1пд оТ
соп'1еп'(:.</р> <!-- Элемент <зес1:1оп> представляет собой группу
контента. -->
<зес1:1оп>
<Ь2>Соттеп1:8 <зта11>ге1а1:1пд Ю «В1од РозУ"</зта11></
112> <!-- Комментарии, относящиеся к «Записи в блоге" -->
<!-- Связанный комментарий также является
самодостаточной статьей -->
<аг1:1с1е 1с1="ц8ег-соттеп1-1 ">
<р>Ехсе11еп1:!</р> <!-- Отлично1 -->
<Тоо1ег><р>.. .</рх*1те>.. х/Глтех/ТооУег?
</агИс1е>
</зес1л.оп>
</аг1:1с1е>
< !-- Повторить: <аг1:1с1е> -->
</зес1:1оп>
<!-- Контент, не связанный с блогом или записями, должен
находиться вне раздела. -->
<Тоо1:ег>
< р>ТЫз сопГеп!: з1юи1с! Ье ипге1а1:еа Со ГЬе Ь1од,</р> <!--
Этот контент не должен быть связан с блогом. -->
</ТооСег>
Избегайте излишнего использования
Когда основной контент страницы (за исключением заголовков, ниж-
них колонтитулов, панелей навигации и т. д.) представляет собой просто
одну группу элементов, вы можете опустить элемент <агГ1с1е> в пользу
элемента <та!п>:
<агТ1с1е>
< р>ТП1з боезп’Д таке запзе, 1Ыз агНс1е баз по геа!
’сопТех!'.</р>
< !-- Это не имеет смысла, у этой статьи нет реального
контекста. -->
</аг!1с1е>
Вместо этого замените элемент <аг11е1е> на элемент <та!п>, чтобы ука-
зать. что это основной контент страницы.
<таш>
<р>Гт 1Ье та!п сопЕепт, I бсп’Е пееб то Ье1опд То ап агИс1е.</р>
< !-- Я оснозной контент, мне не нужно принадлежать статье.
</та!п>
Если вы используете другой элемент, убедитесь, что указали роль
АША <та!п> для корректной интерпретации и отображения на различных
устройствах и в браузерах, не поддерживающих НТМЕ5:
оесПоп го1е="та!п">
< р>ТН1з зесНоп 1з Пэе та!п сопТеп! оЕ Пэ1з раде.</р>
< !-- Этот раздел является основным контентом этой страницы. -->
</зес11оп>
Примечания
• Потомки элемента <та!п> не допускаются внутри элемента <аг1:1с1е>.
Официальная спецификация НТМЕ5 для элемен-
та <аг!1с1е> (пйры'/Ыт! зрес.игйаТшу.огд/тиШраде/.зеспопз. Л/
Ыт]#Ше-агйс1е-е1ешепI).
20.3. Элемент <тат>
Элемент <та1п> содержит основной контент вашей веб-страницы Этот
контент уникален для каждой отдельной страницы и не должен повторяться
на других страницах сайта. Повторяющийся контент, такой как заголовки,
нижние колонтитулы, навигация, логотипы и т. д., размещается за пределами
этого элемента.
• Элемент <та!п> должен использоваться не более одного раза на одней
странице.
• Элемент <та)п> не должен быть потомком элементов <аг11с1е>,
<азтбе>, ^оосег*, <Ьеабег> или <пау>.
В следующем примере мы отображаем отдельную запись в блоге (и свя-
занную с ней информацию, такую как ссылки и комментарии).
<Ьобу>
<Неабе г >
<пау>...</пау>
</Неас1е г>
<ша1п>
<М>1Г|С11у1аиа1 В1од Ро81</Н1> <!-- Отделоная запись
в блоге -->
<р>Лп 1лГгобисШоп Тог Сбе оо5Т.</р> <!-- Введение
к записи -->
<аг11с1е>
<И2>РеТегепсез</112> <!-- Ссылки -->
<р>..,</р>
< / а Г1:1с1е>
<агМс1е>
<Н2>Соттеп18</б2> <!-- Комментарии
</агТ1с1е>
</та1п>
<Тоо1ег>.. .</'Гоорег>
</ЬоСу>
Запись в блоге содержится внутри элемента <та!п>, чтобы указать,
что это основной контент для этой страницы (и, следовательно, уникален
для всего сайта).
Элементы <беабег> и <тообег> являются соседними элементами
для <та1п>.
Примечания
• Спецификация НТМЙ5 определяет элемент <та!п> как группирующий
элемент, а не как секционный.
• Атрибуты роли АША: таги (по умолчанию), ргееепТаСюп.
• Рекомендуется добавлять атрибут го1е="та1п" к другим элемен-
там, которые предназначены для использования в качестве
основного контента, чтобы помочь пользовательским агентам,
не поддерживающим НТМЬЗ, а также предоставить больше контекста
для тех. которые поддерживают.
• Элемент <татп> по умолчанию имеет роль гга1п, поэтому ее не нуж-
но указывать явно.
Официальная спецификация НТМЬ5 для элемен-
та <та1п> (НЦр8.//111т1.8рес.\уГ1а1\у§.ог§/тц1Ира^е/2гоар1П§-
соп1еп1.Мт1#1йе-тат-е1етеп1).
20.4. Элемент <Неас1ег>
Элемент <Неас1ег> представляет вводный контент для своего ближайше-
го предка, являющегося секционным контентом или корневым секционным
элементом. Обычно <Неабег> содержит группу вводных или навигацион-
ных элементов.
Примечание: элемент <беабег> не является секционным контентом;
он не создает новый раздел.
Примеры:
<Ееас1ег>
<р>Ие1соте 1о...</р> <!-- Добро пожаловать в... -->
<Н1>Уо1благз! </Ы >
</1эеабег>
В этом примере элемент <агЫс1е> содержит <Ьеабег>:
<агЫс1е>
<Неас1е г >
<111>Е1ехЬох: ТИе беГ1п11:1уе ди!с1е</Ы> <!-- ПехЬох: Пол-
ное руководство -->
</Неас1ег>
<р>Т1эе диНе аЬои! ПехЬох иаз зиррозес! 1о Ье 1эеге, би! И
Ьигпеб оиЬ Й'ез назп'1 а ПехЬох ехрегЬ еНЬег. </р>
<!-- Руководство по НехЬсх должно блло быть здесь, но оказалось,
что Уэс тоже не эксперт по ПехЬох. -->
</а г Шс1е>
Официальная спецификация НТМВ5 для элемента
<Ьеабег> (11Нр8://11Гт1.8рес.мт11айу§.ог§/тиШраре/8есГ1оп8.
ЫтШЬе-йеайег-ектет).
20.5. Элемент <(оогег>
Элемент <Тоо Ье г> содержит нижний колонтитул страницы.
Вот пример элемента <Тоо1ег>, содержащего тег <р> для абзаца:
<ТооЬег>
<р>Л11 г1дЫ:з гезегуеск/р? <!-- Все права защищены -->
</-ЕосЬег>
20.6. Элемент <$ес(юп>
Элемент <8есНоп> представляет собой общий раздел для тематической
группировки контента. Каждый раздел, как правило, должен быть иденти-
фицирован с помощью заголовка, который является дочерним элементом
раздела,
• Бы можете использовать элемент <зесЕ1оп> внутри элемента
<агИс1е=- п наоборот.
• Каждый раздел должен иметь тему (заголовок, идентифицирующий
эту область).
• Не используйте элемент <зесНоп> в качестве общего контейнера
для стилизации. Если вам нужен контейнер для применения стилей,
используйте <сНу>.
В следующем примере мы отображаем отдельную запись в блоге с не-
сколькими главами, где каждая глава представляет собой раздел (группу те-
матически связанного контента, который может быть идентифицирован
с помощью заголовков в каждом разделе).
<агИс1е>
<6еаоег>
<И2>В1сд Ро81</Н2> <!-- Запись в блоге -->
</6еас!ег>
<р>Ап 1п11 гоСисШоп Тог ГЬе ро81.</р> <!-- Введение к записи -->
<8ест1оп>
<1лЗ>С1тар1:ег 1</КЗ> <!-- Глава 1 -->
<р>...</р>
</зес1:1оп>
<8ес11оп>
<63>С6ар1:ег 2</63> <!-- Глава 2 -->
<р>. .</р>
</зес1:1оп>
<8есС1оп>
<63?Соттеп1 з</113> <!-- Комментарии -->
</зес1:10Г|>
</аг11с1е>
Примечание:
• Разработчики должны использовать элемент <аг1:Ес1е>, если имеет
смысл синдицировать содержимое элемента.
Глава 21.
Навигационные панели
21.1. Базовая навигационная панель
Навигационные панели по сути представляют собой список ссылок,
поэтому для их создания используются элементы и1 и И:
<и1>
<-1±><а Иге'Г="?/ >Нот1е</а></1±> <!-- Главная -->
<11><а НгеТ="#">АЬои-(:</а></11> <!-- О нас -->
<11><а Ьге-Г="# 1 >Соп-Ьас1:</а></11> <!-- Контакты -->
</и1>
21.2. Навигационная панель в НТМ1_5
Чтобы создать навигационную панель с использованием элемента пау
в НТМЬЗ, поместите ссылки внутрь тега пау:
<пау>
<а НгеТ='#">Ноше</а> <!-- Главная -->
<а НгеГ= #">АЬоиС</а> <!-- О нас -->
<а НгеТ= #'>СопТас1</а> <!-- Контакты -->
</пау>
Глава 22.
Элемент < 1аЬе1>
Атрибут Описание
Тог Ссылка на ГО целевого элемента. Например: Тог="8огпате"
Тогт НТМЬБ, [Устаревший] Ссылка на форму, содержащую целевой элемент.
Элементы <1аЬс1> обычно располагаются внутри элемента <Тогт>. Если
указан Тогт-"зотеЕог1п1б", это позволяет разместить <1аЬе1> в любом
месте документа.
22.1. Об элементе <1аЬе1>
Элемент <1абе1> используется для связи с элементом формы,
выполняющим действие.
В контексте пользовательского интерфейса он упрощает выбор элемен-
тов, таких как радиокнопки (гасНо) или флажки (сЬескЪох).
<1аЬе1> как обертка
Элемент ^1аЬе1> может заключать в себе целевой элемент:
<1аЬе1>
<1приТ. Дуре="сбескЬох" пате="Са1:8' >
I Ике Сэбз! <!-- Мне нравятся кошки! -->
</1аЬе1>
<1аЬе1> как ссылка
Используя атрибут Тог, не обязательно помещать целевой элемент
внутрь <1аЬе1>, но значение Тог должно совпадать с его ГО:
<1при1 1б="са1з" 1уре="с11ескЬох" пате="СаТз">
<1аЬе1 Тог="са1:з">1 Ике СаТе!</1аэе1> <!-- Мне нравятся кошки! -->
Примечание
Не используйте более одного управляющего элемента внутри элемен-
та <1аЬе1>.
22.2. Базовое использование
Простая форма с элементами <1аЬе1>
<Гогт ас1:1оп="/1од1п" ше11тос1="РО8Т">
<1аЬе1 ^ог='изегпате ' >С1зегпате :</1аЬе1> <!-- Имя пользовате-
ля: -->
<1при1: 1с1=" изегпате" Туре="Тех! пате= 'изегпате" />
<1аЬе1 Тог="разз">Разз1«огс1 :</1аЬе1> <!-- Пароль: -->
<тпри1: тс1-"раз8" 1:уре-"раз8иогс1" г.ате= раза" />
<1при1 1уре="зиЬт11:" г.ате="зиЬ^1^1:', />
</-Гогт>
Версия >5
<Гогт ’ту-Гогт" ао1:1оп="/1од1п| те1:1тос1="РС8Т">
<1при1 1с1-"изегпате" 1уре="1:ех1" пате="ияегпате' />
<1аЬе1 Тог='разз">Разз\л/огс1 :</1аЬе1> <!-- Пароль: -->
<1при1: 1с1="раз8" 1уре="раз5И'0гсГ гате="раз8" />
<1при1: 1уре="зиЬтП:" пате="зиЬт1т'' />
</Гогт>
<1аЬе1 Гог="и8егпате" Гогт='ту-Гогт">изегпате:</1аЬе1> <!-- Имя
пользователя:
Глава 23.
Элемент Ои1ри1 (Вывод)
Атрибут
Глобальные
атрибуты
пате
Гог
тот
Описание
Атрибуты, доступные для любого элемента НТМЬ5.
Строка, представляющая имя элемента оиТриГ (вывод). Как эле-
мент формы оиГриР может быть ссылкой по его имени с исполь-
зованием свойства боситепС. Гогпз Этот атрибут также исполь-
зуется для сбора значений при отправке формы.
Список идентификаторов элементов формы, разделенных про-
белами (например, <1приС 1б="1пр1 > Гог уаГае та ?'1пр1"),
для которых вывод должен отображать вычисления.
Строка, представляющая <Гот>, с которой связан элемент
оиГриГ. Если онГриГ находится вне <Гот>, этот атрибут гаран-
тирует, что оиТоиТ все еще принадлежит форме и будет учиты-
ваться при сборе и отправке данных этой формы.
Ссылка на дополнительную, информацию по глобаль-
ным атрибутам (ййр8://йеуе1орег.гпогШа.ог§/еп-П8/с1ос8Д/УеЬ/
Н1'МЬ/61оЬа1_аПпЬиГе.8).
23.1. Использование атрибутов Еог и Еоггп в элементе
Ои(ри(
Следующий пример демонстрирует использование атрибутов [Гог]
и [ Го гш ] в элементе <сиГри1:>. Обратите внимание, что для работы <оиГриЕ>
требуется]а\7а8спрсВстроенный}ауа8спр1частэ используетсяв формах, какпо-
казано в этом примере Хотя элементы <1приГ> имеют тип Суре="питЬег", их
значения являются текстом, а не числами. Поэтому, если вам нужно выпол-
нить вычисления, вы должны преобразовать каждое значение в число с помо-
шью таких методов, как рагзе1пС(), раг5еЕ10сГ(), МитЬег() ит.д.
<!-- Тогт1 будет собирать значения 1п1 и 1п2 при событии 'ТпоиГ'. -->
< !-- Значение оиП будет суммой значений 1п1 и 1п2. -->
<Тогт ±ск"Гогт1" пате="Тогт1" оп1при1="ои11.уа1ие = рагзе1пТ(1п1.
уа1ие, 10) + рагзе1пТ(1п2.жа1ие, 10)">
<Т1е1с1зеГ>
<1едепс1>Пример использования 0и1:риг</ 1едепс>
<1приТ Туре-"питЬег" 1с1='1п1" пате="1п1" уа1ие-"0">
<Ьг/>
+
<1при1 Туре-'питоег" 1а="зп2" пате-"1п2" уа1ие="0">
</Т1е1бзеТ>
</Тогт>
< !-- Атрибут [Тог] позволяет оиТ1 отображать вычисления для 1п1
и 1п2. -->
< !-- Атрибут [Тогт] указывает, что Тогго1 является владельцем оиТ1,
даже если он не является потомком. -->
<он1:риТ: папе="си1:1" Тог="1п1 1п2’ Тогт='Тогт11 ^0</оьТриТ>
23.2. Элемент ОиГри1 с атрибутами
<оиГриТ папе="оиТ1 ' Тогт="Тогт1 Тог=."1пр1 1пр2"х/оиТриТ
Глава 24.
Пустые элементы (\Ло«с1 Е1етеп1з)
Не все НТМЬ-теги имеют одинаковую структуру. В то время как боль-
шинство элементов требуют открывающего тега, закрывающего тега и со-
держимого, некоторые элементы — известные как пустые элементы (уо!с1
е1ешелЩ) — требуют только открывающего тега, так как они сами по себе
не содержат никаких элементов. В этой главе объясняется и демонстрирует-
ся правильное использование пустых элементов в НТМЬ.
24.1. Пустые элементы
НТМЬ 4.01'ХНТМЬ 1.0 Зспсг включает следующие пустые элементы:
• а геа — кликабельная, определенная область в изображении
• базе — указывает базовый ИНЬ, от которого основываются все ссылки
• Ь г — разрыв строки
• со1 — колонка в таблице [устарел]
• Нг — горизонтальная линия
• Ьтд — изображение
• 1г риС — поле, в которое пользователи вводят данные
• Ипк — связывает внешний ресурс с документом
• теЬа — предоставляет информацию о документе
• ра гат — определяет параметры для плагинов
Стандарты НТМЬ5 включают все не устаревшие теги из предыдущего
списка, а также:
• соттапс! — представляет команду, которую пользователи могут
вызвать [устарел]
• кеудеп — облегчает генерацию открытого ключа для веб-сертификатов
[устарел]
• зоигее — указывает источники медиа для элементов ртсТшге,
аисИо и утбео
Пример ниже не включает пустые элементы:
<Лу>
<а НгоС="НЩр://з1:аскоуог1:1о1Л'.соп|/">
<НЗ>СИск Неге Со у1з11 <1>81:аск ОуегЫот! </1></НЗ>
</а>
<Ьи'С1:оп опс11ск="а1ег1:('Не11о '); ">8ау Не11о1 </Ьи11:оп>
<р>Му Тауоггсе 1апдоаде 1з <Ь>НТМ1</Ь>. Неге аге ту оТЬегз :</р>
<о1>
<И>С88</11>
<11>Зауа8сг1р1</11>
<И>РНР</11>
</о1>
Обратите внимание, что каждый элемент имеет открывающий тег, за-
крывающий тег и текст или другие элементы внутри открывающего и за-
крывающего тегов. Однако пустые теги показаны в примере ниже:
<11пд згс="ЬИрз: //сбп.ззСаИс.пеУ/ЗИез/зУаскоуегНои/сстрапу/
1тд/1одоз/зо/8о-1соп.рпд 1 />
<Ьг>
<Нг>
сгприУ 1:уре="питЬег" р1асеЬо1с1ег=’ Егйег уоиг ГауогКе питЬег">
За исключением тега 1тд все эти пустые элементы имеют только откры-
вающий тег. Тег 1тд, в отличие от других тегов, имеет самозакрывающий-
ся / перед знаком больше в открывающем теге. Рекомендуется ставить про-
бел перед слешем
Глава 25.
Медиаэлементы
атрибут иГскК Описание Устанавливает ширину элемента в пикселях.
ЬеГдЫ: Устанавливает высоту элемента в пикселях.
<зоигсе> Определяет ресурсы аудио- или видеофайлов.
<ггаск> Определяет текстовую дорожку для медиаэлементов.
С0П1Г015 Отображает элементы управления.
аи1:ор1ау 1оор шиГед Автоматически начинает воспроизведение медиа. Воспроизводит медиа в повторяющемся цикле. Воспроизводит медиа без звука.
розСег Назначает изображение, которое будет отображаться до загрузки видео.
25.1. Аудио
НТМЬ5 предоставляет новый стандарт для встраивания аудиофайлов
на веб-странипу. вы можете встроить аудиофайл на страницу с помошью
элемента <аи<Ло>:
<аиб1о соп1:го1з>
<зоигсе згс='ТПе.шрЗ1 1уре-"аис11о/тред' >
Уоиг Ьготзег боев поУ зироогГ Тбе аибю е1етепГ.
<!-- Ваш браузер не поддерживает элемент аисИо. -->
</аис!1О>
25.2. Зидео
Вы также можете встроить видео на зеб-страницу с помощью
элемента <У1с1ео>:
<У1с1ео и1с11±="500" Ье1дЫ:="700" соп1:го18>
<зоигсе згс='У1аео.тэ4" буре="у1с1ео/тр4">
Уоиг Ьготзег с1оез по! биррогУ ЦПе У1сео Гад.
<!-- Ваш браузер не поддерживает элемент У1с1ео.
<Л'1оео>
25.3. Использование элементов <У1бео> и <аисПо>
для отображения аудио/видео контента
Используйте НТМЬ-элемент <у1бео> или < аис11о> для встраивания ви-
део,'аудио контента в документ. Элемент <У1бео>/<аиб1о> содержит один
или несколько источников видео/аудио. Чтобы указать источник, исполь-
зуйте либо атрибут зге, либо элемент <зоагсе>: браузер выберет наиболее
подходящий.
Пример тега <У1бео>:
< !-- Простой пример видео -->
< у!бео згс="утс1ео'!:11е.леЬп1" аоборХау роз1:ег="розйегйтаде. дрд >
Зоггу, уоиг Ьгоизег с1оезп> 1 зиррог!: етЬеббеб утбеоз,
боб боп>Г иоггу, уои сап <а 1зге*="71с1ео1:г11е.йеЬт">с1оип1оас1
11</а>
апб иабеН 1У иП:Н уоиг ГауогХйе У1с1ео р1ауег!
</у!с1со>
< !-- Видео с субтитрами -->
<у1с1ео згс="-Гоо,иеЬт">
<тгаск к1пс1="зиЫ:1б1ез" згс="Тоо.еп.м(:1" згсХапд="еп"
1аЬе1="Епд11з11">
сТгаск к1пб="зиЬСХТХез" згс="Тоо.зу.уГ1" згс1апд="зу"
1аЬс1="8уепзка">
</утбео>
<!-- Простой пример видео -->
<\/1бео И16ТГ|="480 сопХгоХз розТег="ЬТТрз ://агсНлуе.огд/доипХоад/
йеЬтУр8УогЬХз/меЬпгур8.д1Т ’>
<зои гее згс=’ ЬТтрз: //агсЫуе .огд/боипХоаб/йеЬпУрвУогЫз/
иебтурЗ.иеЬт 1 Хуре="У1бео/иеЬп1 ’>
<зоигсе згс="1тЫ:рз: //агсИХус. огд/с1оууп1оас1 /УУсЬтУр8\/огЫз/
иеЬтурЗ_512кЬ.тр4" Туре=" У1с1ео/лр4">
<зоигсе згс=' |т1:бр8://агсЫуе.огд/с1о«п1оас1/1Л1еЬт7р87огЫ8/
и/еЬтур8.оду" 1уре="\'1с1ео/одд| >
Уоиг Ьгоизег боезп>1: зиррогТ: НТМ15 у!бео "Гад. <!-- Ваш
браузер не поддерживает тег НТМ15 итбео. -->
</утбео>
Пример тега <аосПо>:
<!-- Простое воспроизведение аудио -->
< аосПо згс=" Нтгр: //беуеХорег .п102111а. огд/@ар!/бекХ/
Г1Хез/2926/-Аиб1оТезХ_(1).одд" аиХор1ау>
Уоиг Ьгоизег аоез по1 зиррогУ Убе <сос!е>аас1о</соае> е1етеп1:
<!-- Ваш браузер не поддерживает элемент <сос1е>аис11о</сос1е>. -->
</аис11о>
<!-- Аис1о р1аубаск «ИЬ сарИопз --> <*!-- Воспроизведение аудио
с субтитрами -->
<аис!1о згс- 'Тоо.одд'>
<1гаск к1пс1="сар1:1опз' згс="Тоо.еп.убб" згс1апд = "еп"
1сЬе1="Епд11з11">
<±гаск ктпсК'сарНопз" згс-'Чоо.зу.уИ" згс1аг|д = "з7'
1сЬе1=',8уепзка">
</аис11о>
25.4. Видео в качестве заголовка или фона
Добавление видео, которое будет автоматически воспроизводиться в ци-
кле без элементов управления и звука. Идеально подходит для видеозаго-
ловка или фона:
<У16ео докИ:11="128В" Ме1д1тС=" 728" аи1ор1ау тибеб 1оор роз1:ег="у1с1ео.
Зрд" 16="уюеоЬд ">
<зоигсе згс="У1сео.тр4" 1уре-"у1с1ео/тр4">
<зоигсе згс="у1сео.«еЬт" Гуое="утбео/иебт >
^зоигсе згс='уьсео.одд" 1уре="у16ес/одд'>
</у1оео>
Этот С8.8 предоставляет резервный вариант, если видео не может быть за-
гружено. Обратите внимание, что рекомендуется использовать первый кадр
видео в качестве изображения-заглушки (роз(ег) V1 с!ео. з рд.
#71деобд {
Ьаскдгоипб: игЗДуьаео.]рд) пс-гереаР;
Ьаскдгоипа-З1ге: соуег;
}
Глава 26.
Элемент Ргодгезз
Параметр Значение
шах Общий объем работы необходимый для выполнения задачи
са1ие Количество уже выполненной работы
рОЗПЙОП 1аЬе1з Этот атрибут возвращает текущую позицию элемента <р год гезз Этот атрибут возвращает список меток элемента <ргод гезз> (если они есть)
26,1. Прогресс
Элемент <ргодгезз> является новым в НТМБ5 и используется для отобра-
жения прогресса выполнения задачи:
^ргодгезз уа1ие="22" шах= 100"></ргодгезз>
Это создает полосу заполненную на 22%.
26.2. Изменение цвета полосы прогресса
С помощью селектора ргодгезз [уа1ие] можно стилизовать полосы про-
гресса.
Б этом примере задается ширина полосы прогресса 2ь0рх и высота 20рх:
ргодгезз[уа1ае] {
и1скН: 250рх;
Нс±дЫ: 20рх;
}
Стилизация полос прогресса может быть особенно сложной.
Скготе / 8а/аг1 / Орега
Эти браузеры используют селектор -иеЬкИ-арреагапсе для стилизации
тега р год гезз. Чтобы переопределить это, мы можем сбросить внешний вид:
ргодгезз['/а1ие] {
-иеЬкИ-арреагапое: попе;
арреагапсе: попе;
}
Теперь мы можем стилизовать сам контейнер:
ргодге8&[уа1ие] : :-«еЬк11:-ргодге88-Ьаг {
Ьаскдгоипс-со1ог: "дгееп";
}
Пге/ох
ЕТгеГох стилизует полосу прогресса немного иначе. Мы должны исполь-
зоьать следующие стили
ргодгезз[уа1ие] {
- тог-арреагапсе попе;
арреагапсе: попе;
Ьогсег; попе; /* ПгеТох также отображает границу */
}
1п1егпе1 Ехр1огег
МегпеС Ехр1огег 10+ поддерживает элемент р год гезз. Однако он не под-
держивает свойство Ьаскдгоипб-соТог. Вместо этою вам нужно использо-
вать свойство со1ог:
ргодгезз[уа1ие] {
- «еЬкзл-арреагапсе: попе;
- тог-арреагапсе попе;
арреагапсе: попе;
Ьогсег: попе; /* Удаляем границу в ПгеЕох */
и1с1ХЬ: 250рх;
ЬеьдЬГ: 2йрх;
со1сг Ыое;
}
26.3. Запасной вариант с использованием НТМ1_
Для браузеров, которые не поддерживают элемент р год гезз, можно ис-
пользовать следующий обходной путь:
<ргодгезз тах="100" уа1ие="20">
<а1ж с1азз="ргодгез8-Ьаг">
<зраг1 зГу1е="и!с1ГЬ: 20%, ">Ргодгезз : 20%</зрап>
</сзж>
</ргодгезз>
Браузеры, поддерживающие тег р г од гезз, проигнорируют вложен-
ный сИж. Устаревшие браузеры, которые не распознают тег огодгезз, ото-
бразят Ы V вместо него.
Глава 27.
Элементы управления
выпадающими меню
27.1. Элемент <зе1ес1>
Элемент <зе1ес1:> создает выпадающее меню, из которого пользователь
может выбрать опцию:
<зе1ес1: паие= ">
<орТ1оп \'а1ие= 1 ">Опе</ор 1иоп>
<орТ1оп уа!ие= 2">Тй,о</ор(:зоп>
сорНоп уа1ие-"3">ТНгее</ор11оп>
<орГ1оп уа1ие="4">Гоиг</ор1:1оп>
</зе1ес1:>
Изменение размера
Вы можете изменить размер выпадающего меню с помощью атрибу-
та з1ге. Значение 0 или 1 отображает стандартное выпадающее меню. Зна-
чение больше 1 преобразует выпадающее меню в поле, отображающее ука-
занное количество строк, с одной опцией на строку и полосой прокрутки
для навигации по доступным опциям:
<8е1ес1: пате="" з12е=" 4"></зе1есб>
Меню с множественным выбором
По умолчанию пользователи могут выбрать только одну опцию. Добав-
ление атрибута тиШрТе позволяет пользователям выбирать несколько оп-
ций одновременно и отправлять все выбранные опции вместе с формой. Ис-
пользование атрибута ти11:1р1е автоматически преобразует выпадающее
меню в поле, как если бы был задан размер. Размер по умолчанию в этом
случае определяется конкретным браузером, и невозможно вернуть меню
в выпадающий стиль, сохранив возможность множественного выбора:
<зе1ес1: пагпе="" ти1Г1р1е></зе1есУ>
При использовании атрибута тиИтрТе существует разница между зна-
чениями 0 и 1 для атрибута зтге, тогда как без этого атрибута разницы нет.
Использование 0 заставит браузер вести себя в соответствии с его стандарт-
ными настройками. Использование 1 явно установит размер поля б одну
строку.
27.2. Опции
Опции внутри выпадающего меню — это то, что пользователь будет вы-
бирать Стандартный синтаксис для опции выглядит следующим образом:
<ор1:1о1т>?оте Орт1оп</орт1оп>
<!-Какая-то опция -->
Однако важно отметить, что текст внутри элемента <ор1иоп> не всегда
используется и по сути становится значением но умолчанию для атрибутов,
которые не указаны.
Атрибуты, которые управляют внешним видом и функциональностью
опции — это уа!ие и 1аЬе1 Атрибут 1аЬе1 представляет текст, который бу-
дет отображаться в выпадающем меню (то, что вы видите и на что кликае-
те для выбора). Атрибут уа1ие представляет текст, который будет отправлен
вместе с фермой. Если один из этих атрибутов опущен, используется текст
внутри элемента. Таким образом, приведенный выше пример можно «рас-
ширить» следующим образом:
-орбюп 1аЬе1="8оте ОрИоп" уа!ие="8оте 0р7.1оп">
Обратите внимание на отсутствие текста внутри элемента и закрывающе-
го тега, которые не требуются для создания опции в меню. Если бы они были
включены, внутренний текст был бы проигнорирован, гак как оба атрибу-
та уже указаны, и текст не нужен. Однако чаще всего опции записываются
с указанием значения, которое будет отправлено на сервер, и текста внутри
элемента, который становится атрибутом 1аЬе1, например:
<ор1иоп уа1ие="ор'!:1оп1 >8оте ОоГ1ол</ооГ1ог1>
<!-Какая-то опция -->
Выбор опции по умолчанию
Вы также можете указать определенную опцию, которая будет выбра-
на в меню по умолчанию, добавив атрибут зе1ес1:еб. По умолчанию, если
ни одна опция не указана как выбранная, первой оппии в меню будет при-
своен статус выбранной при отображении. Если более одной опции име-
ют атрибут зеТесбеб, то последняя опция с этим атрибутом будет выбрана
по умолчанию:
<ор1юп уа1ие="орт1оп1 ' зе1сс1ес>8оте оэ11оп</ор1:1оп>
<!-Какая-то опция -->
Если вы используете атрибут в меню с множественным выбором, то все
опции с атрибутом зе1ес1еб будут выбраны по умолчанию, и ни одна не бу-
дет выбрана, если ни у одной опции нет этого атрибута:
<8е1ес1 пи»111р1е>
<орГ1оп уа1ие- ор11оп1" зе1ес1:еб>8оте орТ1оп</ор1:1оп>
<орЫоп уа1ие= орсТоп2" ее 1естеб>8от1е орб!оп</орТ1оп>
<!-- Какая-то опция -->
</зе1есТ>
27.3. Группы опций
Вы можете аккуратно сгруппировать опции внутри выпадающего меню,
чтобы обеспечить более структурированный вид в длинном списке опций,
используя элемент <орСдгоир>.
Синтаксис очень прост: используйте элемент с атрибутом 1аЬе1 для ука-
зания заголовка группы и поместите внутрь ноль или более опций, которые
должны быть в этой группе:
<8е1есС паше="">
<-орТ1оп уа1ие= "пи1к '>МИк</ор1:1оп> <!-- Молоко -->
<ор1дгоир 1аЬе1="ГгиЛз'> <!-- Фрукты -->
<ор1:1оп 7а1ие=,'Ьапапа">Вапаг1а5</ор1:1оа> <!-- Бананы -->
<орЕ1оп Vа1ие="з^^айЬе^^у">81:^аире^^^е8</ср(:^оп^ -^-Клуб-
ника -->
</орСдгеир>
<ор1дгоир 1аЬе1="Уеде1:аЫе8" скзаЫесН <!-- Овощи -->
<ор1:1оп уа1ие="сагго1:">Сагго1:з</ор1:1ог1> < 1-Морковки -->
<орЫоп уа1ие="2иссЕ|1п1">7иссН1п1</ор1:1ОП> <!-- Цукини -->
</орЦдгоир>
</зе1ес1>
При использовании групп опций не все опции должны быть сгруппиро-
ваны. Также отключение группы опций отключает все опции внутри нее,
и невозможно вручную включить отдельную опцию внутри отключенной
группы.
27.4. Элемент <с1а(а1|з(>
Элемент <ба1:а1181:> определяет список предопределенных опций для
элемента <1при1:>. Он предоставляет функцию «автозаполнения» для эле-
ментов <Торит>. Пользователи увидят выпадающий список опций по мере
ввода:
<1при1: 11з1:="1_апдиадез‘|>
<6аГа118Г 1с1="1_апдигде8">
<ор11оп уа1ие="РНР">
<орИоп уа1ие-"Рсг1">
<ор-С1оп уг1ие="Ру-сНоп1 >
<ор1:1оГ| уа1ие="РиЬу">
<ср1:1оп уа1ие="С+">
</с!аГ а11з1:>
Поддержка браузерами
Браузер Версия
СИготе 20.0
ЕЛ§е 10.0
МогШа 4.0
БаГап Не поддерживается
Орега 9.0
Глава 28.
Элемент <етЬесЬ
Параметр Описание
зге Адрес ресурса
1 у ре Тип встраиваемого ресурса
иТсТЬ Горизонтальный размер
НегдЫ Вертикальный размер
28.1. Основное использование
Элемент <стЬес1> является новым в НТМЬ5. Этет элемент предоставля-
ет точку интеграции для внешнего (обычно не НТМЬ) приложения или ин-
терактивного контента:
<етЬес1 згс="туТ1аз1э. з«Т">
28.2. Определение М1МЕ-типа
М1МЕ-тип должен быть определен с использованием атрибута Туре:
<етЬес1 Туре="у1бео/лр4г згс="у1с1ео,тр4" и!с1ГК="640" Не1дП1 ="48Э' >
Глава 29.
1Егате§ (Встроенные фреймы)
Параметр Описание
пате Задает имя элемента, которое используется с теюм <а> для из- менения атрибута зге ПГгаше.
у/хсЙН Задает ширину элемента в пикселях.
Ье±д1П: Задает высоту элемента в пикселях.
зге Указывает страницу, которая будет отображаться во фрейме.
згсбос Указывает содержимое, которое будет отображаться во фрейме, при условии, что браузер поддерживает этот атрибут Содержимое должно быть валидным НТМЕ.
запббох При установке содержимое 1Етэте рассматривается как про- исходящее из уникального источника, и такие функции как скрипты, плагины, формы и всплывающие окна будут отключены. Ограничения могут быть выборочно ослаблены путем добавления списка значений, разделенных пробелами.
аПолЕиПзсгееп Разрешает ли содержимому Кгаше использовать метод гедиеЕСЕи11зсгееп().
29.1. Основы встроенного фрейма
Термин ТЕгапе означает «встроенный фрейм» (ГпПпе Ггате). Он может
использоваться для включения другой страницы в вашу страницу. Это соз-
даст небольшой фрейм, который отображает точное содержимое файла
Ьазе. Ыт!.
<1Тгате згс="Ьазе. 1"1Гт1"></1Тгатс>
29.2. Песочница (8апс1Ьохтд)
Следующий пример встраивает ненадежную веб-страницу со всеми
включенными ограничениями:
<1Тгате запоЬох 8ГС-"б1:1:р://ехатр1е.сот/"></1Ггате>
Чтобы разрешить странице выполнять скрипты и отправлять формы, до-
бавьте значения аИои-зсгзр-рз и аПои-Еогтз в атрибут запс!Ьох:
<1(тагпе запбЬох="а11ои-зсг1р(:з аПом-Тогтз згс="1т(:'1р://ехатрЕе.
сот/"></1Тгате>
Если на том же домене, на котором находится родительская веб-страни-
ца, есть ненадежное содержимое (например, пользовательские коммента-
рии), 1Тгате может быть использован для отключения скриптов, при этом
позволяя родительскому документу взаимодействовать с его содержимым
с помощью |ауа8спрй
<1-Ггате запс!Ьох="а11оуу-зате-ог1д1п аПои-Уор-паутдаПоп"
згс="11Щр : //ехатр1е .сот/ип1ги81:ес1/со11теп1:з/раде2">
Родительский документ может добавлять обработчики событий и изме-
нять размер ТЕгате, чтобы он соответствовал сто содержимому Это, вме-
сте с аИол-Тор-паутдаНоп, может сделать песочницу 1Фгате частью роди-
тельского документа.
Песочница не является заменой санитизации входных
данных, но может использоваться как часть стратегии за-
щиты в глубину. Также следует помнить, что эту песочни-
цу можно обойти, если злоумышленник убедит пользова-
теля посетить источник гагате напрямую. НТТР-заголовок
СоЩеЩ Зесигйу Робсу (1зП:р8://Ал,тЗс.§й1шЬ гоДуеЬаррзес-сзр/
Мйесйче-запйЬох) может быть использован для смягчения
этой атаки.
29.3. Установка размера фрейма
Размер 1Е гаше может быть изменен с помощью атрибутов «1с11:Н и НегдЫ,
где значения указываются в пикселях (НТМ1.4.01 допускал процентные зна-
чения, но НТМЙ5 разрешает только значения в С88-пикселях):
<1Тгате згс="Ьазе.бУт!" И16Т.Ь='800" Не1д1т1:="5И0"></11:гате>
29.4. Использование атрибута згсбос
Атрибут з гсдос может быть использован (вместо атрибута з гс) для указа-
ния точного содержимого 1Т гате в виде целого НТМЕ-доку мента. Это создаст
1Егате с текстом «ТГгашез аге соо!!»:
<1-Егате згсбос="<-р>1Егап1ез аге соо1!</р>"></11:гап1е>
Если браузер не поддерживает атрибут з теске, ТЕгагпе вместо этого бу-
дет использовать атрибут зге. Однако если оба атрибута зге и згсбос при-
сутствуют и поддерживаются браузером, приоритет имеет з собес:
<Огате згсс!ос="<р>Огатез аге соо1!</р>" згс='базе.б1т1"></1Егагпе>
В приведенном выше примере, если браузер но поддерживает атри-
бут згсаос, он отобразит содержимое страницы базе. Ыт1.
29.5. Использование якорей с 1Егатез
Обычно изменение веб-страницы внутри ТЕгате инициируется изнутри
ТЕ сате, например, при наж.атии на ссылку внутри ТЕ сате. Однако можно из-
менить содержимое ТЕгате извне. Для этого можно использовать тот <а>,
у которого атрибут НгеЕ указывает на нужный ОКЕ, а атрибут га едет —
на имя Огате:
<Огате з-с="«еЬраде.б1т1" пате="туТГгате"></Огате>
<а Нге1:="с1О1:егегц_иебраде.1т(:т1" га гдег="туОгапе" >СНапде Тбе
ТЕгате солгегтс то аОТегеполебраде. И1:т1</а>
Глава 30.
Языки контента
30.1. Основной язык документа
Рекомендуется указывать основной язык документа в элементе бЕпм.
<бЕт1 1апд="еп"> <!-- Основной язык документа - английский. -->
Если в документе нс указаны другие атрибуты ] апд, это означает, что весь
контент (содержимое элементов и текстовые значения атрибутов) написан
на этом языке. Если документ содержит части на других языках, эти части
должны иметь свои собственные атрибуты 1 апд, чтобы «переопределить»
объявление языка.
30.2. Язык элемента
Атрибут 1апд используется для указания языка содержимого элемента
и текстовых значений атрибутов:
<р 1апд= "еп">Тбе сопЕепЕ оЕ ЕбЕз е1етепЕ 15 Еп ЕпдИзЬ.</р>
<!-- Содержимое этого элемента на английском языке, -->
<р 1апд="еп" ЕЕЕ1е="Тбе уаЕие оЕ ЕбЕз аГГгъЬиГе Ез а1зо 1п
Епд1Езб. ">Тбе сопЕепЕ оЕ ЕбЕз е1етепЕ Ез Еп Епд118б.</р> <!--
Содержимое этого элемента на английском языке.
Объявление языка наследуется:
<сН’/ 1агд="еп"> <!-- Основной язык - английский. -->
<р>ТбЕз е1етепЕ сопЕаЕпз ЕпдИзб сопЕепЕ.</р> <!-- Этот
элемент содержит контент на английском языке. -->
<р ЕЕЕ1е="Тб13 аЕЕгЕЬиЕе, Еоо.">8ат1е лЕЕб ЕбЕз е1етепЕ.</р>
<!-- Этот элемент также содержит контент на английском языке. -->
</бЕч>
30.3. Элементы с несколькими языками
Вы можете «переопределить» объявление языка:
<Р 1апд-"еп">ТбЕз ЕпдИзб зепЕепсе сопЕаЕпз Ебе Сегшап логб <зрап
1апд="бе">На11о</зрап>.</р> <!-- Это предложение на английском
содержит немецкое слово «На11о . -->
30.4. Региональные 11Н1-
Можно добавить атрибут НгеПапд к элементам <а> и <агеа>, которые
создают гиперссылки. Таким образом указывается язык связанного ресурса.
Указанный язык должен быть действительным тегом ВСР 47Г1]:
<р>
<а НгеТ="ехатр1е.о.д" НгеЕ1апд="еп">ехатр1е,огд</а> 1з опе об
ТАМА'з ехатр1е ботаьлз.
<!-- ехатр1е.огд - один из примеров доменов 1А1\А. -->
</р>
Примечание: ТЕТЕ МеГшогк Шогкгп§ Сгоир: КЕС 5646 Гадз
Гог Тс1епйТут§ Еап§иа§ез, ТЕТЕ, ЗерГетЬег 2009 (1Шр8:/Л/\гаг,у.
гей. ог§/гЕс/Ьср/Ь ср47 Ш)
30.5. Обработка атрибутов с разными языками
Вы можете «переопределить» объявление языка родительского эле-
мента. добавив любой элемент (кроме арр1еб, базе, Ьазебопб, Ьг, Егэте,
Тгатезеб, Нг, 1бгате, теба, рагат, зсг!рб из НТМЬ 4.0) с собственным атри-
бутом 1апд:
<р 1апд-"еп" Ш1е-‘1Ап Епд11зН рагадгарН"> <!-- Абзац на англий-
ском языке. -->
<зрап 1апд="се" Ш1е="А Бегтап зепгепсе">На1]с Ие11!</зрап>
<!-- Предложение на немецком языке.
</р>
Глава 31.
8У6
8УС (8са1аЫе УесГог СгарЫсз) — это масштабируемая векторная графика.
8УС используется для определения графики б вебе.
Элемент НГМЬ <зуд> является контейнером для 8УС-графики.
8УС предоставляет несколько методов для рисования путей, прямоуголь-
ников, кругов, текста и графических изображений.
31.1. Встроенный 8У6
8УС можно встраивать напрямую в НТМЬ-документ. Встроенный 8У&
можно стилизовать и управлять им с помощью С88 и }ауа8спрй
<Ьобу>
<з\-д с1азз-' аНепИоп" хт1пз-’Ь11р://мм.и3.огд/2000/зуд
хт1пз:х11пк="1э11р://ййй.йЗ огд/1999/хИпк" у1ойВох="0 0
1000 1000'>
<ра11э ^<^="а16еп1^оп,
с1="т571,76710,-106д0,-8,-5,-131-12,-51-
108,0д-7,0,-12,51-5,1310,10бд0,8,5,13112,61108,0д7,0,12,-
615, -132т-1, -208110, -257д0, -6,-5, -10Ц-7, -6,-14, -6-
1-122,0д-7,0,-14,6д-5,4,-5,1219,255д0,5,6,9113,31103,
0д8,0,13,-31б,-92т-7,-5221428,786д2О,35,-1,70д-10,17,-26,26±-
35,101-858,0д-18,0,-35,-101-26,-26д-21,-35,-1,-701429,-786д9,-
17,26,-27136,-10136,10127,272" />
</зуд>
</Ьобу>
Встроенный 8УС можно стилизовать с помощью соответствующего
С88-класса:
.аНепИоп {
Ш1: гей;
И1с111э: 50рх;
Не1дЫ: 50рх;
}
Результат будет выглядеть следующим образом:
31.2. Встраивание внешних 8У6-файлов в НТМ1_
Вы можете использовать элементы <1тд> или <оЬзес1:> для встраивания
внешних 8УС-элементов. Указание высоты и ширины необязательно, но на-
стоятельно рекомендуется.
Использование элемента <1тд>
спид згс^'аЩепЫоп. зуд" и1сШв="50" Ке1дНХ="50">
Использование <нпд> не позволяет стилизовать 8УС с помощью С88
или управлять им с помощью ]ауа8спрТ
Использование элемента <оЬ]ес{>
<оЬ]есР 1уре="1таде/8уд+хт1" с1а!а-="а1:1епМоп.зуд" и1сйЩ="50 1
1ле1д1ли=1 50">
В отличие от <1тд>, <об] сс1> напрямую импортирует 8УС в документ, по-
этому им можно управлять с помощью ]ауа8спрг и С88.
31.3. встраивание §76 с помощью С88
Вы можете добавлять внешние 8У&-файлы с помощью свой-
ства Ьаскдгоипб-1л1аде, как и с любым другим изображением.
НТМЬ
<О1У с1аз8-“аЩ:еп1:]оп"></а1У>
С88
. аЩепЫоп {
Ьаскдгоипа-1таде: иг1(аЫепМоп. зуд};
Ьаскдгоипб-812е: 100% 100%;
й1сН1э: 50рх;
ВеьдВГ. 50рх,
}
Также можно встроить изображение напрямую в С88-файл с использова-
нием йаЩ ИКЬ:
Ьаскдгоипс1-1П1аде: и г 1 (с!а1:а :1таде/зуд+хт1,%ЗС57д%20
Х111пз%30%221тКр%ЗА%2Е%2Рло(.иЗ. огд°/с2^2000%2Е5Уд%22%20хп11п5
%ЗАх11пк%ЗО%22ЬЕ1р%ЗА%2Е%2Еими.лЗ ,огд%2Е1999%2Ех11пк%22%20
у1еиВох%ЗО%220%200%201000%201000%22%20%ЗЕ%0О%0А%ЗСра1±%20
1с1%30%22а1: Сеп11ОП%22%20(1%ЗО%22т571%2С76710%2С-106д0%2С-8%2С-5-
%2С-1ЗТ-12%2С-51-108%2С6д-7%2С0%2С-12%2С5-С-5%2С131Э%2С16бд0%2С8%2
С5%2С1 3±12%2С611О8%2С0д7%2С0%2С12%2С-615%2С-132т-1°/о2С-208110%2С-
257д0%2С-6%2С-5%2С-1Э я-7%2С-6%2С-14%2С-61-122%2С0д-7%2С0%2С-
14и/о2Сбд-5%2С4%2С-5%2С1219%2С255дЭ%2С5%2С6%2С9Г13%2С31103%2СОд8
%2С0%2С13%2С-316%2С-97п1-7%2С-5221428%2С786д20%2С35%2С-1%2С70д-
10%2С17%2С-26%2С26Т-35%2С101-858%2С0д-18%2С0%2С-35%2С-10Г-26%2С-
26д-21%2С-35%2С-1%2С-701429%2С-786д9%2С-17%2С26%2С-27С36%2С-
10Г36%2С101:27%2С2/2%22%20%2Р%ЗЕ%0О%0Ас/оЗС%2Е8\'д%ЗЕ);
Глава 32.
Сапуаз (Холст)
Атрибут Описание
ЬегдЬт Указывает высоту холста
«1скК Указывает ширину холста
32.1. Базовый пример
Элемент <сапуаз> был введен в НТМЙ5 для рисования графики:
<сапуаз 1б=‘|туСапуаз‘|>
СаэпоГ сИзрТау дгарНтс. Сапуаз 13 по! зиррогДес! Ьу уоиг Ьгоизег
(1Е<9)
<!-- Не удается отобразить графику. Ваш браузер (1Е<9) не под-
держивает элемент сапуаз. -->
</сапуаз>
Вышеприведенный код создаст прозрачный элемент НТМ1. <сапуаз>
размером 300 * 150 пикселей.
Элемент <сапуаз> можно использовать для рисования удивительных
вещей, таких как фигуры, графики, манипуляции с изображениями,
создания увлекательных игр и т. д. с помощью }ауа8спр1.
Двумерный слой для рисования на холсте представлен объектом
СапуазКепбег1Г|дСогт!:ех1:20, который можно получить из элемента
НТ№1_СапуазЕ1етел1: с помощью метода . деТСопТехГ (" 2с1").
уаг стх = боои1Г1епт.де1:Е1етеп'(:Ву1а("туСапуаз') деТСотЬех-Ц"2сГ) ;
// теперь мы можем ссылаться на 20-контекст холста с помощью
сДх'
С1х.ТП181у1е = «#Т00";
с!хМ11Кес1(0, 0, сДх сапуаз итсЙВ, сДх. саГ|'/аз.Ье1д1т1); // х, у,
и1б1±, Не1дВ1:
сТх . Г11181’.у1е = «#000";
с1:х.’Г111ТехГ(«Ку геб сапуаз и/111'1 зоте Ыаск 1ех1", 24, 32); //
1ех1, х, у
32.2. Рисование двух прямоугольников на <сапуа$>
«ЮОСТУРЕ 1тСт1>
1апд="еп">
<теТа сНагзе'С="и1Т-8" />
<11С1е>Пга« гес1апд!ез оп "Ыпе сапуа8</41-Ые> <!--
Нарисуйте два прямоугольника на холсте
<-з1у!е>
сапуаз {
Ьогс1ег: 1 рх зоИс! дгау; <!-- Граница холста: 1 рх
сплошная серая -->
}
</з1:у1е>
<зсг1р1: азупс>
и!пс1ои.оп1оас1 = ±п±Т; // вызов 1п1Г() после полной за-
грузки окна
ГипсИоп 1гп1() {
// #1 - получаем ссылку на элемент <сапуаз>
уаг сапуаз = с1оситеп1: .циегуЗе1ес1:ог('сапуаз’) ;
/ / #2 — получаем ссылку на контекст рисования и АР1
для рисования
уаг сЛх = сапуаз .де1:Соп1:ех1:(’2сГ );
// #3 - все операции залиеки теперь выполняются
красным цветом
сГх. ГП181:у1е = ' гесГ ;
// #4 - заливаем прямоу! ольник 100x100 на позиции
х=0, у=0
с1:х.Т111Рес1:(0, 0, 100, 100);
// #5 - все операции заливки теперь выполняются
зеленым цветом:
с1:х.Г1115Ху1е = 'дгееп';
// #6 - заливаем прямоугольник 50x56 на позиции х=25,
у-25
сГх Г111Кес1:(25, 25, 50. 50);
}
</зсг1рХ>
</Ьеас1>
<Ьсбу>
<сапуаз «кШп=300 Не1д1тГ-200>Уоиг Ьгоизег оосз по! зиорог!
сапуаз.</сапуаз> <!-- Ваш браузер не поддерживает элемент сапуаз.
</Ьосу?
</Ыш1>
Результат выглядит следующим образом.
Глава 33.
Метаинформация
Метатеги в ЕТМЬ-документах предоставляют полезную информацию
о документе, включая описание, ключеввю слова, автора, даты изменений
и около 90 других нолей. В этой главе рассматриваются исполвзование и на-
значение этих тетов.
33.1. Информация о странице
аррИсаТтоп-пате
Указывает имя веб-приложения, которое представляет страница:
<те1:а пате^'1 аррИсаИоп-пате" сопТепТ="ОрепЕЩгееТМар">
Если эго не всб-ирпложсние, мстатсг аррИсаИоп-пате не должен
использоваться.
аи1±ог
Устанавливает автора страницы:
<ше1а пате="аи1:бог соп1:еп1:="уоиг Мате'>
Можно указать только одно имя.
де5СГ1рГ1оп
Устанавливает описание страницы:
<те1:а пате="бе8сг1рР1оп" соп1еп1:= Раде Ое8сг1р11оп">
Метатег дезсгьрИоп может использоваться различными поисковыми
системами при индексации вашей веб-страницы для поиска. Обычно описа-
ние, содержащееся в этом теге, представляет собой краткое резюме, которое
отображается под основным заголовком страницы,'сайта в результатах по-
иска. 6оо§1е обычно использует только первые 20-25 слов вашего описания.
депега1ог
<теГа пате=11 депегаСог" согтГеп1:="НТМЕ СепегаТог 1,42">
Идентифицирует один из программных пакетов, используемых для гене-
рации документа. Используется только для страниц, где разметка генериру-
ется автоматически.
кеуиогбз
Устанавливает ключевые слова для поисковых систем (через запятую):
<теРа пете="кеуиогс18" соп1епР="Кеуиогс11, Кеум/огс!/1»
Мегатег кеутог Не иногда используется поисковыми системами для опре-
деления поискового запроса, релевантного вашей веб-странице
Как правило, не стоит добавлять слишком много слов, так как большин-
ство поисковых систем, использующих этот метатег для индексации, будут
учитывать только первые примерно 20 слов. Убедитесь, что вы указали наи-
более важные ключевые слова первыми.
33.2. Кодировка символов
Атрибут сбагзеР указывает кодировку символов для НГМЬ-документа
и должен быть допустимой кодировкой символов (например нппс1оэд8-1252,
80-8859-2, $Ый_}18 и ШТ-8). ШТ-8 (Ыгдсойе) является наиболее широко ис-
пользуемой и должна применяться в любых новых проектах'
стера сНагзеР="11ТЕ-8">
<теРа сКагзеР="1$0-8859-1'>
Все браузеры всегда распознают форму <теРа сбагзеР>, но если по ка-
кой-то причине вам нужно, чтобы ваша страница была валидной НТМЕ 4.01,
вы можете использовать следующее:
<теРа 1гРРр-ери1у-"сопРепР-Суре" соп1еп1="1ех1/Г1Рт1;
сИагзеР=0ТЕ-8'>
<теРа 1эРРр-еаи1У="сопРепР-Гуре" сопРеГ|р="РехР/Г1Рт1;
сИагзеР=150-8859-1
См также стандарт кодирования (Епсосйяй ЗГагйагс!),
чтобы просмотреть все доступные метки кодировки сим-
волов, которые распознают браузеры (ЪйрзУ/епсссйщузрес.
\уЬаГте^.ог§/#пате5-аг.с1-1гэе15).
33.3. Роботы (гоЬо1з)
Атрибут гоЬоРз, поддерживаемый несколькими крупными поисковыми
системами, контролирует, разрешено ли поисковым роботам индексировать
страницу, а также должны ли они переходить по ссылкам на странице.
<те1:а па.те=" гоЬоГз" соп1еп1:="по1пс1ех">
Этот пример запрещает всем поисковым системам показывать страницу
в результатах поиска. Другие допустимые значения.
Значение/Директива Описание
311 По умолчанию. Эквивалентно 1пс1ех, То11оч. См. примечание ниже.
потпРех Не индексировать страницу.
поТоПои Не переходить пэ ссылкам на этой странице.
ТоПода По ссылкам на странице можно переходить. См. примечание ниже.
попе Эквивалентно потпеех, поТоИои.
поагсЫуе Не создавать кешировашгую версию этой страницы в резуль- татах поиска.
посаейе Синоним пэагсЫуе, используемый некоторыми ботами, на- пример В1п§
по5п1ррег Не показывать сниппет этой страницы в результатах поиска.
пооар Не использовать метаданные этой страницы из проекта Ореп ЫгесЮгу для заголовков или сниппетов в результатах поиска.
поггап51а1:е Не предлагать переводы этой страницы в результатах поиска
по1таде1пс1ех Не индексировать изображения на этой странице.
ипауа11аЫе_аГтег Не показывать эту страницу в результатах поиска после ука-
(КГС-85О дата/время] занной даты/времени. Дата/время должны быть указаны в формате КГС 850.
Примечание: явное определение 1пс1ех и/или Го11ои, хотя и является до-
пустимым значением, необязательно, так как практически все поисковые
системы предполагают, что они могут это делать, если явно не запрещено.
Подобно тому как работает файл гоЬоХзЛхТ, поисковые системы обычно
ищут только то, что им запрещено делать. Указание только запретов так-
же предотвращает случайное указание противоположностей (например,
тпбех, ..., пепг^ех), которые не все поисковые системы обрабатывают оди-
наково.
33.4. Социальные сети
Ореп СгарН — это стандарт метаданных, который расширяет обычную
информацию, содержащуюся в разметке <Иеас1> сайта. Это позволяет таким
платформам, как РасеЬоок, отображать более глубокую и детальную инфор-
мацию о сайте в структурированном формате. Эта информация автоматичс-
ски отображается, когда пользователи делятся ссылками на сайты, содержа-
щие метаданные Ореи Старк, на Гасекоэк.
ГасеЪоок / Ореп Сгарк
<те1а ргсрег1у="ТЬ:арр_1сГ соп1епС="123456789">
«теСа ргорегДу="од:иг1" сопСепд="НС1:р8://ехатр1е.сот/раде.Ыт]">
<те!а ргорегСу="од:Суэе" солСеп^'теЬвКе'^
стеГа ргорег1:у="од : ' сопСеп1:=' СопТепТ Т11:1е"> <!-- Заголовок
контента -->
<те1:а ргорегТу="од:1таде" сопТег1="ГйСрз://ехатр!е.сот/1таде ]'рд">
<тега ргорегСу="ос:безсг1рГ1оп" соггсегтг="Ое5сг1р1:1оп Неге"> <!--
Описание здесь -->
<те1:а ргорег(:у=' сд:з11:е_па1пе" сопСеп1="8Ие Мате'> <!-- Название
сайта -->
<те!а ргорег1:у="од 1оса1е' сол1еп1="еп_118">
<те1:а ргорег1:у-"аг'!:1с1е аиГЬог" сопСепТ^" ">
Разметка Ореп Старк для Еасекоок (кйрз://с1еуе1орег8.
ГасеЬоок.сот/'с1ос8/8кагт§,'Чуейта5Гег8#тагкир).
Протокол Ореп Сгарк (кйр8://о§р.те/).
ГасеЬоок/1п81апГ А гИс1е$
<те1а сЬаг8е,Е=‘|1йЕ-8">
<те1:а ргорег1:у="ор:тагкио_\/ег81ол" сопСегЛ^ VI И">
<!-- ПР1_ веб-версии вашей статьи -->
<1±пк ге1="сапоп1саГ ЬгеТ="ЬТ'Ср ://ехатэ1е сот/агД1с1е.Гй:т1">
<!-- Стиль, используемый для этой статьи
<те1а ргорегСу="ТЬ:аг11с1е_81у1е" сопЕел(:="туагС1с1ез1у1е">
Создание статей для Гасекоок 1п81агй Агйс1е$ (кйрз://
с1еуе1орег8.Тасекоок.сот/с1ос8).
Ттйег использует собственную разметку для метаданных. Эти метадан-
ные используются для управления отображением твитсв, содержащих ссыл-
ки на сайт.
ТшШег
<теТа пате="ТийКег:сагс!" соп'Гегй="зиттагу">
<теТа пате="1:м1Шег :зП:е" соп1еп1:="@81'(:е_ассоип1:">
<теба пате="1МНег:сгеаГог" соп1:еп1:="@1пб1У1боа1_ассоип1:">
<те4а пате="ТУ1пЛгег:иг1" соп1:еп1:="ЬНр8://ехатр1е.сот/раде.Ы:п11 *>
<теУа пэте= Чи/Шег:Ш1е" соп1:еп'(:="Соп1:еп'Е ТП:1е"> <!-- Заголовок
контента -->
<те4а пате="ТиП1ег:безегтрбюп" сопГепГ="СопГепГ сезсгырИоп 1езз
Итап 20й сНагас1сегз"> <•-- Описание контента менее 20Э символов -->
<те1а пате^'ЧчА/Шег :1таде" соп1еп1="1т11р8://ехатр1е.сот/ттаде ]ру '>
Руководство по началу работы с Ттайег Сагйз (Зайрз://
йеуеТорег.х.сош/еп/йосз/х-Гог-шеЬзйез/сагйз/дшйез/дейтд-
зГагГей).
Соо§1е+ / 8скета. ог§
<11пк Нг еТ= Т11:1:р8://р1ис.доод1е.сот/+УоигРаде‘| ге1= 'риЫ1зНег">
<теУа Петр гор=" пате" соп1:еп1:="Соп1:еп1 ТП:1е"> <!-- Заголовок кон-
тента -->
<те1:а Пе1Т|ргор=',безсг1р11оп" соп1еп'Г="Соптеп1 йезсгхрИоп 1езз Ытап
200 сбагасбегз1> <!-- Описание контента менее 200 символов -->
<те1а Петргор="1таде' соп1.еп'(:="1т(Лрз://ехатр1е.сот/1тэде.]рд">
33.5. Управление мобильной версткой
Оптимизированные для мобильных устройств сайты часто используют
тег «тебе лате="\'1елрог1:"> следующим образом
<те(:а пал1е='\1ейрог!:" сопрелС="л1сИ1т-с1е\/1се-й1с111т, 1п111а1-
зса1е=1 ">
Элемент у!е«рос1 дает браузеру инструкции о том, как управлять раз-
мерами страницы и масштабированием в зависимости от используемого
устройства.
В приведенном выше примере соп1:еп(:= ,«1с1(:1т=с|еу1се-,л1б1:п" означа-
ет, что браузер будет отображать ширину страницы равной ширине экрана
устройства. Таким образом, если ширина экрана составляет 480 пикселей,
ширина окна браузера будет 480 пикселей. 1п11:1а1-8са1е-1 указывает на-
чальный масштаб (в данном случае 1, что означает отсутствие масштабиро-
вания).
Ниже приведены атрибуты, поддерживаемые этим тегом.
Атрибут И1СЙ6 Описание Ширина виртуального окна просмотра устройства. Значения: беутсе-итсНб или фактическая ширина в пикселях, например 480
бегдбг Высота виртуального окна просмотра устройства. Значения: Веутое-бетдбТ или фактическая высота в пикселях, например 600.
1п1Ща1-2са1е Начальный масштаб при загрузке страницы. 1 .0 означает отсут- ствие масштабирования.
ттпТтит-зса1е Минимальный масштаб, который может установить посетитель па странице. 10 означает отсутствие масштабирования.
тах1тит-зса1е Максимальный масштаб, который может установить посетитель на странице. 1.0 означает отсутствие масштабирования.
изег-8са1аЫе Позволяет устройству масштабировать стпанищ. Значения: уез или по Если установлено по, пользователь не сможет масштаби- ровать страницу. По умолчанию уез. Настройки браузера могут игнорировать это правило.
Примечания
1. Свойство иХсИб может быть указано либо в пикселях («16Гб=500), либо
как Феу! се-\л/1Фхб (и) сНб=беу1 се-«т сНб), что представляет физическую ши-
рину экрана устройства.
2. Аналогично свойство бет дбГ может быть указано либо в пикселях
(бе1дбг=600), либо как беуюе-беьдбг (бе1дбГ=с!еУ1ое-бетдбт), что пред-
ставляет физическую высоту экрана устройства.
33.6. Автоматическое обновление
Чтобы обновлять страницу каждые пять секунд, добавьте этот мета-
элемент в элемент < бе ас! >:
<теГа бЩр-еаи1у="геГгезб" соп1епГ="5">
ВНИМАНИЕ! Хотя это допустимая команда, рекомендуется не исполь-
зовать ее из-за негативного влияния на пользовательский опыт. Слишком
частое обновление страницы может привести к ее зависанию, а также ча-
сто прокручивает страницу вверх. Если информация на странице должна
обновляться непрерывно, существуют гораздо более эффективные способы
сделать это, обновляя только часть страницы.
33.7. Распознавание телефонных номеров
Мобильные платформы, такие как 105, автоматически распознают теле-
фонные номера и преобразуют их в ссылки Ге1Хотя эта функция очень
удобна, система иногда ошибочно распознает 18Вл[-коды и другие числа
как телефонные номера.
Чтобы отключить автоматическое распознавание и форматирование те-
лефонных номеров в мобильном 8а1ап и некоторых других мобильных бра-
узерах на основе М/еЬКй, используйте этот метатег:
<теСа пате^'ТогтаГ-беГесГтоп" сопбеГ11:="1е1ер1эопе=по">
33.8. Автоматическое перенаправление
Иногда вашей веб-странице требуется автоматическое перенаправление.
Например, для перенаправления на ехашр1е. сот через 5 секунд:
<теГа Н1:1:р-еди1у="геТгезб" соп*епГ="5;иг1=НТ1:р8://л™.ехатр1е.сог1/" />
Эта строка перенаправит вас на указанный сайт (в данном случае
ехашр1е.сош) через 5 секунд.
Если вам нужно изменить задержку перед перенаправлением, просто
измените число перед ;цг1=, чтобы задать нэвую задержку
33.9. Веб-приложение
Вы можете настроить свое веб-приложение или сайт так. чтобы на глав-
ный экран устройства добавлялся ярлык приложения, а само приложение
запускалось в полноэкранном режиме (без адресной строки) с помощью
пункта меню «Добавить на главный экран» в Сйготе для АвйгокЕ
Следующие метатеги откроют веб-приложение в полноэкранном режиме.
АпйгоШ Скготе
<теГа па’пе=',тоЫ1е-\иеЬ-арр-сараЫе" соп):еп1:="уез '>
105
<те1:а пате="арр1е-тоЫ1е-иеЬ-арр-сараЫе" соп1:еп1:="уе8 >
Вы также можете задать цвет строки состояния и адресной строки с по-
мощью метатега.
Апс1го1(1 Скготе
<те1:а пате=" 1±ете-со1ог" сэпТепГ=’ Ыаск' >
105
<теТ.а пате=|,арр1е-тоЫ1е-иеЬ-арр-8ТаТ.и8-Ьаг-8С.у1е"
согЩегй-"Ыаск">
Глава 34.
Разметка компьютерного кода
34.1. Блок с использованием <рге> и <сос!е>
Если форматирование кода (пробелы, новые строки, отступы) имеет зна-
чение, используйте элемент рге в сочетании с элементом собе:
<рге>
<сосе>
х = 42
И х == 42:
РГ1П1: "х 18 ... ... 42"
</сосе>
</рге>
Все равно необходимо экранировать символы, имеющие специальное
значение в НТМЬ (например, < заменяется на &11;). Поэтому для отобра-
жения блока НТМЬ-кода (<р''ТН1з 18 а рагадгарп. </р>) это может выгля-
деть так
<рге>
<сос1е>
&11;р>ТМ18 18 а рагадгаэб &1Г;/р> <!-- Это абзац. -->
</собе>
</рге>
34.2. Встроенный код с использованием <сос1е>
Если предложение содержит компьютерный код (например, название
НТМЬ-элемента), используйте элемент собе для его разметки:
<р>ТТ|е <собе>а</соое> е1етел1: сгеаГез а Иуоег11пк.</р>
<!-- Элемент <собе>а</собе> создает гиперссылку.
Глава 35.
Разметка цитат
35.1. Встроенные цитаты с использованием <ц>
Элемент <д> может использоваться для цитаты, которая является частью
предложения:
< р>8Ие пгоГе <д>ТНе апзпег 1з 42.</д> апс! еуегуопс адгеос1.</р>
< !-- Она написала <д>0твет - 42.</д>, и все согласились. -->
Кавычки
Версия < 4.01
Кавычки не следует добавлять вручную. Пользовательские агенты должны
(в НТМЬ 4.01) или обязаны (в НТМЪ 4 0) отображать их автоматически.
Версия - 5
Кавычки не должны добавляться вручную. Пользовательские агенты бу-
дут отображать их автоматически.
(ЛИ источника (атрибут с Не)
Атрибут с Не может использоваться для указания ПКЬ источника цитаты:
<р>811е итоге <д сПе="ИНр://ехагпр1е.сот/Ыод/Ке11о-пог1б' >ТНе
апз'лег 1з 42.</д> а г. б есюгуопе адгеес1.</р>
< !-- Она написала <д сИе="11Нр://еха1пр1е.сот/Ыод/
Не11о-пог1сГ>0твет - 42.</д>, и все согласились. -->
Обратите внимание, что браузеры обычно не отображают этот ПКЬ, поэ-
тому, если источник важен, следует добавить гиперссылку (элемент <а>) до-
полнительно.
35.2. Блочные цитаты с использованием <Ыоскдио1е>
Элемент <Ыоскдоо1:е> может использоваться для блочной цитаты:
<Ыоскдио1е>
< р>ТНе апзиег 1з 42.</р>
< !-- Ответ - 42. -->
</Ыосксио1е>
14111. источника (атрибут сИе)
Атрибут с1бе может использоваться для указания 11КТ, источника цитаты:
<Ыоскдио1е сИе="ЬГГр: //ехатр1е. сот/Ь1од/пе11о-иог1с1">
< р>ТИе апзтег 18 42.</р>
< !-- Ответ - 42.
</Ь1осксиоТе>
Обратите внимание, что браузеры обычно не отображают этот ШЬ, поэ-
тому, если источник важен, следует добавить гиперссылку (элемент <а>) до-
полнительно (см. дополнительно ниже, где разместить эту ссылку).
Цитирование/Атрибуция
Версия <4.01
Цитирование,'атрибуция не должны быть частью элемента <э1оскдао1:е>:
<Ыоскаио1:е с11е="1тЩр;//ехатр1е сот/Ыод/Ье11о-мюг1сГ>
< р>Т1эе апзиег 1з 42,</р>
< !-- Ответ - 42. -->
</ЫосксиоТе>
<р>8оигсе <с!те><а Игсб='Итбо'//ехатоХе сот/Ыод/11е11о-иог1сГ
ге1= ехге^па!" ^не!1о !Л/ог1с!</а></с±1:е></р>
<!-- Источник: <с11е><а Нгеб=" 1тЫр://ехатр1е.сот/Иод/Ье11о-
1лог1с1" ге1="ех!егпа1">Не11с Иог1б</а></с11:е> -->
Вы можете добавить элемент < с! 1V> для группировки цитаты и атрибуции,
но семантически связать их невозможно.
Элемент <с!±е> может использоваться для указания источника цитаты
(но нс для имени автора).
Версия ~ 5
Цитирование/атрибуция (например, гиперссылка, указывающая на 11ВВ
источника) может находиться внутри ^ЫоскдисТе>, но в этом случае она
должна быть внутри элемента <с11:е> (для встроенной атрибуции) или эле-
мента <-ГооГег>:
сЫоскдиобе сИе^кЫр: //ехатр1е . сот/Ыод/1эе11о-иог1сГ>
<р>Т1эе апзтег 1з 42.</р>
<!-- Ответ - 42. -->
<бооРег>
<р>8оигсе: <сП:е><а 1зге1:="1'|1:1:р://ехатр1е.сот/Ыод/11е11о-
иог1сГ ге1="ех1егпа1 >Не11о йог1с1</а></с1Се></р>
<!-- Источник: <с11е><а 1">ге'!:="1'Шр,//ехатр1е.сот/1Яод/
Не11о-иог1сГ ге1="ех1егпа!">Не11о 1Л/о г1с1</а></с1±е> -->
</Тоо1:ег >
</Ыоскдио1:е>
Элемент <с!1е> может использоваться для указания источника цитаты
или имени автора цитаты.
Глава 36.
ТаЫпс1ех
Значение Описание
отрицательное Элемент будет доступен для фокусировки, но не должен быть до- ступен через последовательную навигацию с клавиатуры.
0 Элемент будет доступен для фокусировки и доступен через после- довательную навигацию с клавиатуры, но его относительный по- рядок определяется соглашениями платформы.
положительное Элемент должен быть доступен для фокусировки и доступен через последовательную навигацию с клавиатуры; его относи- тельный порядок определяется значением атрибута, последова- тельность следует возрастающему числу Сас1Г|с1ех.
36.1. Добавление элемента в порядок табуляции
<а!у 1аЫпаех="0 >8оте Ьи11оп</с11у> <!-- Какая-то кнопка -->
Примечание, но возможности используйте нативные ПТМЪ-элементы,
такие как <ЬиТТоп> или <а>.
36.2. Удаление элемента из порядка табуляции
<Ьи11оп 1аЫпс1ех="-1 ">Тп1з ЬиНоп «111 г.о1 Ье геасНаЫе Ьу 1аЬ</
Ьи11:оп> <!-- Эта кнопка не будет доступна через табуляцию
Элемент будет удален из порядка табуляции, ко останется доступным
для фокусировки.
36.3. Определение пользовательского порядка табуляции
(не рекомендуется)
<01У 1аЫпс1сх=|'2'>8есопб</Лу> <!-- Второй -->
<о1у 1аЫаоех-"1 ">Е1гз1</о1у> <!-- Первый -->
Положительные значения вставят элемент в порядок табуляции на пози-
цию, соответствующую его значению. Элементы без предпочтения (напри-
мер, 1:аЬ1Пс1ех="0" или нативные элементы, такие как <Ьи1Лоп> и <а>) будут
добавлены после тех, у которых есть предпочтение.
Положительные значения нс рекомендуются, так как они нарушают ожи-
даемое поведение табуляции и могут сбить с телку пользователей, которые
полагаются на скринридеры. Попробуйте создать естественный порядок, из-
менив структуру ПОМ.
Глава 37.
Глобальные атрибуты
Атрибут сТакз Описание Определяет одно или несколько имен классов для элемента.
еопСепгесИаЫе Устанавливает, можно ли редактировать содержимое элемента.
сопСехТтепи Определяет контекстное меню, которое отображается при пра- вом клике на элемент.
сПг Устанавливает направление текста внутри элемента.
бгаддаЫе ЫсИеп Устанавливает, можно ли перетаскивать элемент. Скрывает элемент, который в данный момент не используется на странице.
16 Определяет уникальный идентификатор для элемента.
1апд Определяет язык содержимого элемента и значений его тексто- вых атрибутов.
зреПсбеск Устанавливает, нужно ли проверять орфографию и грамматику содержимого элемента.
5Су1е ТаЫпбех Определяет набор встроенных С88-стилей для элемента. Устанавливает порядок, в котором элементы на странице будут переключаться с помощью клавиши ТаЪ.
Ш1е Определяет дополнительную информацию об элементе, обычно в виде текста подсказки при наведении курсора.
1гапз1аТе Определяет, нужно ли переводить содержимое элемента.
37.1. Атрибут соп1еп1ес!|1аЫе
<р соп1е1Т*:ес111аЫе>Т1113 15 ап есПСаЫе рагадгарИ.</р> <!-- Это
редактируемый абзац. -->
При клике на абзац его содержимое можно редактировать, как в тексто-
вом поле.
Если атрибут соп1еп1:ес111:аЫе не установлен для элемента, он будет
унаследован от родительского элемента. Таким образом, весь дочерний
текст редактируемого элемента также будет редактируемым, но вы можете
отключить это для конкретного текста, например:
<р сопРеп^ебИаЫо
ТТ11$ ±5 ап ебтДаЫе рагадгарН. <!-- Это редактируемый абзац.
^зрап сопДеп1:ес111:аЫе= "Та1зе">Ви1: по! т±1з.</зрап> <!--
Но не этот. -->
</р>
Обратите внимание, что нередактируемый текстовый элемент внутри
редактируемого элемента все равно будет иметь текстовый курсор, унасле-
дованный от родительского элемента.
Глава 38.
Кеш НТМЬ5
38.1. Базовый пример кеша НТМ1_5
Это наш файл 1гс1ех. ЬТ гп1-
<!ЭОСТУРЕ Ыап1>
<Ыт1 тсп1Тез1:="1пс!ех арэсасНе">
<Ьооу>
<р>Согйегй</р> <!-- Содержимое -->
</Ьосу>
</Ы:т1>
Затем мы создадим файл 1пс1ех. аррсасИе со следующим содержимым:
САСНЕ МАИ1ЕЕ5Т
_1пс1ех Н1т1
Укажите файлы, которые вы хотите кешировать. Загрузите 1пс1ех. Ыш1,
затем перейдите в автономный режим и перезагрузите вкладку.
Примечание, в этом примере оба файла до лжны находиться в одной папке.
Глава 39.
Атрибуты событий НТМЬ
39.1. События форм НТМЬ
События, вызываемые действиями внутри НТМЬ-формы (применяются поч-
ти ко всем НТМЬ-элементам, но чаще всею используются в элементах форм):
Атрибут опЫиг Описание Срабатывает в момент, когда элемент теряет фокус.
опсбапде Срабатывает в момент изменения значения элемента.
опсопТехТшепи Скрипт, выполняемый при вызове контекстного мены.
оггГосиБ Срабатывает в момент, когда элемент получает фокус.
опСпрЩ Скрипт, выполняемый при получении элементом пользователь- ского ввода.
0П1П7с.11С| Скрипт, выполняемый при невалидности элемента.
опгезе! Срабатывает при нажатии кнопки «Сброс» (тезе!) в форме.
опзеагсб Срабатывает, когда пользователь вводит что-то в поле поиска (длжтприС Суре-"зеагсК">).
опзеТесС Срабатывает после выделения текста в элементе.
опзиЬтИ Срабатывает при отправке формы
39.2. События клавиатуры
Атрибут опкеубоип опкеургезз опкеуир Описание Срабатывает, когда пользователь нажимает клавишу. Срабатывает, когда пользователь нажимает клавишу. Срабатывает, когда пользователь отпускает клавишу.
Глава 40.
Символьные сущности
(СКагас1ег ЕггйНеа)
40.1. Символьные сущности в НТМ1_
Многие символы и специальные знаки необходимы при разработке
веб-страниц на НТМЕ Однако, как мы знаем, иногда использование симво-
лов напрямую может конфликтовать с самим НТМЕ-кодом, в котором неко-
торые символы зарезервированы, а также могут быть недоступны на кла-
виатуре. Таким образом, чтобы избежать конфликтов и при этом иметь
возможность использовать различные символы з пашем коде, консорциум
\Л/ ЗС предоставляет нам так называемые символьные сущности (СЪагасгег
ЕпППез).
Символьные сущности предопределены с использованием имени
сущности (ЕгПйу Мате) — &ик:я_сущности, и номера сущности (ЕпШу
МшпЬег) — &#номер_сущности;. Таким образом, нам нужно использовать
один из этих двух вариантов, чтобы отобразить нужный символ на нашей
странице.
Список некоторых символьных сущностей можно найти
по адресу пйрз //йеу м'З.ог^'ЪЩ^З/МшЕаЩпог/сйаггеЕ
Простой пример использования символьной сущности для «лупы»:
<1приЕ Суре="СехЕ" р1асебо1бег=" /8269; Зеагсб"/>
Этот код отображается следующим образом.
Зеагсп
40.2. Распространенные специальные символы
Некоторые символы могут быть зарезервированы для НТМЕ и не могут
быть использованы напрямую, так как это может нарушить работу НТМЕ-
кода. Например, попытка отобразить угловые скобки (< и >) в исходном коде
может привести к неожиданным результатам в выводе. Аналогично пробе-
лы, написанные в исходном коде, могут отображаться не так, как ожидается,
в итоговом НТМЬ. Некоторые символы, такие как Е, отсутствуют в наборе
символов А8СП.
Для этой цели созданы символьные сущности. Они имеют вид &имя_оущ-
ности; или &#номер_сущности;. Ниже приведены некоторые из доступных
НТМЬ-сущно стей.
Символ Описание Имя сущности (ЕлЩу Капе) Номер сущности (ЕпйСу ЫшпЬег)
« » неразрывный пробел &эЬзр;  
«< » меньше &И; < ;
«>» больше &дь; &#б?;
«&» амперсанд &ашэ; &
«-» длинное тире йтдасб; §#8212 ;
« — » короткое тире &лбазН ; –
«©» знак авторского права &сору; ©
«®» зарегистрированный знак &гед; ®
«™» товарный знак &Ггас1е; ™
«22» телефон &?1юпе: ☎
Таким образом, чтобы написать'
© 2016 8Гаск Ехсйап^е 1пс.
используется следующий НТМЬ-код:
<Ь>&сору; 2016 31:аск ЕхсНапде 1пс.</Ь>
Глава 41.
АК1А
41.1. го1е="рге8еп1а11оп"
Элемент, чья неявная семантика роли не будет отображаться в ЛР1 доступ-
ности:
<С1У 5Су1е="Т1са1:1еТС;">8оше сол1:еп1: оп Р^е 1еТУ.</б17> <!-- Не-
который контент слева. -->
ссИх/ згу1е="Г1саС: гтдЫ:; ">8оте солГепС оп г1дЫ:</с11у> <!--
Некоторый контент справа. -->
<с11у го!е="ргезегтСаТ1оп" з1:у1е="с1еаг,Ьо1Ь;' ></61 <!--
Используется только для очистки плавающих элементов. -->
41.2. го1е="а1ег1"
Сообщение с важной, обычно срочной информацией.
<сИу го1е="а1егЧ" аг1а-11уе="аззег11уе">Уоиг зеззтол «111 ехртге
1п 60 зесопбз.</б17>
<!-- Ваш сеанс истечет через 60 секунд. -->
Обратите внимание, что включены и го1е="а1ег1:",
и аг1а-11Уе="аззег1:1уе1, одновременно. Эти атрибуты являются
синонимами, но некоторые программы чтения с экрана поддерживают
только один из них. Используя оба одновременно, мы максимизируем
шансы, что живая область будет работать как ожидалось.
Источник — Хейдон Пикеринг, «Некоторые
практические примеры АША» (Ъ11р8://1геус1оп«огк8.сот/
ргасйса1_аг1а_ехаптр1е8/#сШ1пе-э 1 е г 0.
41.3. го1е="а1ег1сНа1од"
Тип диалога, содержащего предупреждающее сообщение, где начальный
фокус переходит на элемент внутри диалога.
<сН\/ го1е="а1егТс11а1од">
<М>Л'агП1пд</Н1 > <!-- Предупреждение -->
<с11у го!е-"а1егТ ’>Уоиг зеззДоп «111 ехртге Дп 60 сесопс1з.</
сИ\/> <!-- Ваш сеанс истечет через 60 секунд. -->
</с11у>
41.4. го1е="арр||сайоп1'
Область, объявленная как ьеб-приложение, в отличие от веб-документа.
В этом примере приложение представляет собой простор; калькулятор, кото-
рый может складывать два числа:
<сИ.у го1е="аррИса1:]оп">
<К1>Са1с1:1аГ.ог</1"|1> <!-- Калькулятор -->
<1при1 1б = "пит1:' Туре="Гех1"> + стрит 1с1="пит2" Туре='Чех1:"> =
<зрап 16=" гези11:"></зрап>
</61У>
41.5. го1е="аП1с1е"
Раздел страницы, состоящий из композиции., которая образует независи-
мую часть документа, страницы или сайта.
Установка роли АРДА и/или атрибута а г 1а - который
соответствует неявней семантике АША по умолчанию,
избыточна и не рекомендуется, так как эти свойства уже
установлены браузером.
Источник: Ьир8://\увду.и13.огя/тК/1кт1-ат1а/#8ес-з1гопй-
пайуе-зетапйез.
< а г 1:1с1е>
<Н1>Му ТДгзУ агТ1с1е</М > <!-- Моя первая статья -->
<р>1_огегп Дрзит..,</р>
</а г 1:1с1е>
Вы можете использовать го 1 е=" а г! 1 с 1 е11 на несемантичсских элементах
(не рекомендуется, невалидно):
<ск\' го1е="агТ1с1е">
<Ь1 >Му ГДгзТ: агИс1е</Ы> <!-- Моя пеовая статья -->
<ргЬогеш Дрзит..,</р>
</с11у>
Запись Ж?С для го1е="аг1:1с1е" (йНрз^/ГПтГзреслуйаГ’л^.
ог§/пшШра§е/8ссйопз.1йт1#Ше-агйс1е-е1сшеп1).
41.6. го1е="Ьаппег"
Область, содержащая в основном контент, связанный с сайтом, а не с кон-
кретной страницей:
<с11У го1е="Ьаппег">
<М>Р'у 811е</111> <!-- Мой сайт -->
<и1>
<11><а НгеТ="/">Ноте</а></11> <!-- Главная
<11><а бгеТ-"/аЬои1:">АЬои1:</а></11> <!-- О нас -->
<11><а ЬгеТ="/сопГасГ">Соп 1:асГ</а></11> <!-- Контакты -->
</и1>
</с11у>
41.7. го1е="ЬиПоп"
Элемент ввода, который позволяет выполнять действия, инициируемые
пользователем, при нажатии-
<Ьи11:оп го1е="Ьи1:1:оп" >А66</Ьи1:1:оп> <!-- Добавить -->
41.8. го1е="сеН"
Ячейка в табличном контейнере:
<1:аЫе>
<тЬеас!>
<!-- и т.д. -->
</1:1леаа>
<1Ьос1у>
<1:6 го1е="се11">95</1:6>
<1:6 го1е="се11">14</1:6>
<1а го1е="се11">25</16-»
</1Ьо6у>
</1аЫе>
41.9. го1е="сНескЬох"
Элемент ввода, который может быть отмечен и имеет три возможных
значения 1:гие, Та1зе или п!хе6:
<р>
<1при1: туро='сРескЬох' го1е-"с1юскЬох“ аг1а-сГ1ескеб="Га18е">
I адгее То ТНе Гегтз <!-- Я согласен с услоьиями -->
</р>
41.10. го1е=' со1итпНеас1ег"
Ячейка, содержащая заголовочную информацию для столбца:
<ТаЬ1е го1е="дг1сГ>
<"Ыпеас1>
<бг>
го1е=' со1итп11еас1ег">0ау 1</ТЬ> <!-- День 1 -->
<1± го1е='соТитпЬеабег'>Эау 2</1±> <!-- День 2
<1± го1е=‘ соБилтбеабег">Юау 3</Т1"1> <!-- День 3 -->
</1 г>
</ТЬеад>
<ТЬос1у>
<!-- и т.д. -->
</ТЬобу>
<1аЫе>
41.11. го1е= сотЬ&Ьох"
Представление элемента выбора (зе1есТ); обычно похоже на текстовое
поле, где пользователи могут вводить текст для выбора опции или добав-
лять произвольный текст как новый элемент в список:
<1при1: 1уре="ТехТ" го1е= сотЬоЬох' апа-ехрапбеб="Та1зе">
Обычно для реализации функциональности автодополыения или выбора
из списка используется ]ауа8спрг.
41.12. го1е="сотр1етегйагу"
Вспомогательный раздел документа, предназначенный для дополнения
основного контента на том же уровне иерархии Т)ОМ, но остающийся значи-
мым при отделении от основного контента:
<617 го1е="сопр1етеп1:агу '>
<Н2>'/1оге Аг1:1с1ез</Н2> <!-- Дополнительные статьи -->
<и1>
<!-- и т.д. -->
</и1>
</с11у>
41.13. го1е='соп(еп11п!о"
Большая воспринимаемая область, содержащая информацию о родитель-
ском документе
<р го1е="соп1:еп1:1пГо">
АиГЬог: Л1Рег1: Е1пз1:е1п<Ьг> <!-- Автор Альберт Эйнштейн -->
РиЫьзбеб: Аидаз!: 15, 1940 <!-- Опубликовано: 15 августа 1940 -->
</р>
41.14. ^оIе=,,сIеЛп^^^оп,,
Определение термина или концепции:
<зрал го1е="1:егт" аг1а-1аЬе11е6Ьу="6еГ1 ">1_оуе</зрап> <!-- Любовь -->
<зрап 16= ’6еТ1 " го1е="6е^1п1Г1оп">ап 1гт1епяе ТееИпд от беер аТТесТлоп. </
зрап> <!-- интенсивное чувство глубокой привязанности. -->
41.15. го1е="сНа1од"
Диалог — это окно приложения, предназначенное для прерывания те-
кущего процесса с целью запроса информации или ответа от пользова-
теля
<О1У го1е="61а1од">
<р>Аге уои зиге?</р> <!-- Вы уверены? -->
<Ь(Л1оп го1е="Ьи1:1:оп">Уез</Ьи1:Гоп> <!-- Да
<ЬиМоп го1е="Ьи'Щоп">Мо</ЬиЩ:оп> <!-- Нет -->
</61У>
41.16. го1е="с11гес1огу"
Список ссылок на элементы группы, например, статичное оглавление:
<и1 гс1е="61гес1:огу' >
<11><а йгеС="/сйао1:ег-1 ">С11ао1:ег 1</а></И> <!-- Глава 1 -->
<11><а НгеТ="/сЬаэТег-2">С1-1арСег 2</а></11> <!-- Глава 2 -->
<11><а НгеТ="/сбаэТег-3">СНар1:ег 3</а></11> <!-- Глава 3 -->
</и!>
41.17. го1е-"с!оситепГ
Область, содержащая связанную информацию, объявленную как контент
документа, в отличие от веб-приложения
<61у го1е = "6осител1:">
<Н1>ТНе ЫСе оГ АТЬегЕ Е1пз1е1п</111> <!-- Жизнь Альберта Эйн-
штейна -->
<р>1_огеш 1рзрт...</р>
</61У>
41.18. го1е= 'Тогт '
Лендмарк-область, содержащая коллекцию элементов и объектов, кото-
рые вместе образуют форму.
Использование семантически корректного НТМЬ-элемента <Тогт> под-
разумевает неявную семантику АША, поэтому использование го1е="Тогш"
не требуется, так как не следует применять противоречащую роль к элемен-
ту, который уже является семантическим, поскольку добавление рели пере-
определяет нативную семантику элемента.
Установка роли АКТА и/или атрибута а г 1а-*, который
соответствует неявней семантике АША по умолчанию,
избыточна и не рекомендуется, так как эти свойства уже
установлены браузером
Источник: 1Шрз://ш1лте.шЗ ог§/ТК/1лт1-аг1а/#8ес-зГгоп^-
пайус-зеталйсз.
<Тогт ас11оп="">
<11е16зе-(:>
<1едеп6>Ьод1п 1огт</1едеп6> <!-- Форма входа -->
<61у>
<1аЬе1 Тог="изегпате">Уоиг изеггате</1абе1> <!-- Ваше
имя пользователя -->
<1прий Туре= УехУ" 16="изегпате" аг!а-
6езсг1Ье6Ьу= 'изег пате-11р" гедиьгеб />
<6ту го1е="1оо!1:1р 16="изегпате-1:1р ’>уоиг изегпате
1з уоиг е.таП а66гезз</617> <!-- Ваше имя пользователя - это ваш
ешаП.
</сИу>
<61у>
<1аЬе1 (юг="раззиог6">Уоиг раззиог6</1абе1> <!-- Ваш
пароль -->
<1приг Туре="1:ехт" 16="раззиог6" агта-
6езсг1Ье6Ьу=' разз'Логд-Ир " гедиьгеб />
<617 го1е="1оо1Г1р" 16="раззадг6-Г1р '>Иаз егоаПеб
Фо уои ибеп уои зтдпеб ир</61у> <!-- Был отправлен вам го ета!1
при регистрации. -->
</617>
</Г1е16зеГ>
</Тогт>
Вы можете использовать го1е=" Гогш" на несемаитических элементах (не
рекомендуется, невалидно):
го1е-"Тогт">
<1пр1К 1уре="етаП" р1асеНо1с1е г= Уоиг ета11 ас1оге88|> <!-- Ваш
етаП -->
<Ьи1:1:оп>81дп ир</Ьи1:1:ол> <!-- Зарегистрироваться
</сНу>
41.19- го1е="дпсГ
Сетка (§псГ) — это интерактивный элемент управления, содержащий ячей-
ки табличных данных, организованные в строки и столбцы, как таблица.
<СаЫе го1е='дг1сГ>
<тЬеас!>
<!-- и т.д. -->
</ЦЬеас!>
<СЬоЛу>
<!-- и т.д. -->
</ЦЬоду>
</1:аЫе>
41.20. го1е=1,дг1с1се11"
Ячейка в сетке (§г!б) или древовидной сетке (Ггеедпй):
<1аЫе го1е="дг1сГ>
<СИеас1>
< ! -- и т.д. -->
</ТКеаО
< 1Ьос1у >
<1г>
<1а го!е="дг1с!се] 1">17</1о>
<йс1 го1 е=" д г 1с1се11" >64-^/1с1>
<Сс1 го1е="дг1осе11">18'/Сс>
</Тг>
< /т.Ьоду>
<1:аЫе>
41.21. го1е- дгоир"
Набор объектов пользовательского интерфейса, которые не предназначе-
ны для включения в краткое содержание страницы или оглавление с помо-
щью вспомогательных технологий
<с!1у го]е="дгоир >
«ФиЩоп го1е-"биЩоп">РгеУ1ои8</ЬиЩоп> <!-- Назад -->
<ЬиГ1:оп го1е="ЬиКоп">Мех1:</ЬиШоп> <!-- Вперед -->
</Лу>
41.22. го1е= ЪеасНпд"
Заголовок для раздела страницы:
<Ы гэЛе="Ье&сИпд“>1п1:гобис1:1оп</Ы> <!-- Введение -->
<р>1_огет 1рзит...</р>
41.23. го1е="1тд"
Контейнер для набора элементов, которые формируют изображение:
<Г1дцге го1е="1тд">
<1тд аИ="А соРе са! 1 згс="а1Ьег1.]рд ’> <!-- Милый кот. -->
<-Г1дсар1иоп>Т1т1з 1з ту саг, АТЬегТ.</^хдсарПого <!-- Это мой
кот, Альберт. -->
<Г1диге>
41.24. го1е="Нпк"
Интерактивная ссылка на внутренний или внешний ресурс, которая
при активации вызывает переход пользователя к этому ресурсу.
В большинстве случаев установка роли АМА и/или
атрибута апа-* который соответствует неявной семантике
АША по умолчанию, избыточна и не рекомендуется, так
как эти свойства уже установлены браузером
Источник: ййрз ://\отцуЗ. ог§/ТК/Ьпп] 5/йот.1т1:т1#апа-
11 заде-поТе
41.25. го1е=“НзГ
Группа неинтерактивных элементов списка:
<и! го!е= ’ПзР"»
<П го1е="11з1:11:ет">0пе</11> <!-- Один -->
<11 го1е="11зг11ет">Тио</11> <!-- Два -->
<11 го!е="Изноет">Пзгее</11> <!-- Iри -->
</и1>
41.26. го1е= 'Нз1Ьох"
Виджет, который позволяет пользователю выбрать один или несколько
элементов из списка:
<и1 го1е='11з1:Ьох ">
<11>Спе</11> <!-- Один -->
<11>Тио</11> <!-- Два -->
<И>ТЬгее</11> <!-- Три -->
</и1>
Обычно для реализации функциональности множественного выбора ис-
пользуется |ауа8сг1р1.
41.27. го1е='Т|5Г11:ет"
Отдельный элемент в списке или директории:
<и! го1е="115Т">
<И го1е=' 11811Тет">Опе</11> <!-- Один -->
<11 го1е="118111ет">Тто</11> <!-- Два -->
<11 го1е="11з1:11:ет">ТЬгее</11> <!-- Три -->
</и1>
41.28. го1е="1од"
Тип живой области (Име ге§1оп), в которую новая информация добавляет-
ся в осмысленном порядке, а старая информация может исчезать:
<и1 г о1е="1од1>
<И>11зег 1 1оддес! 1п.</11> <!-- Пользователь 1 вошел
в систему --> <11>11зег 2 1оддес1 1п.</11> <!-- Пользователь 2 вошел
в систему. --> <11>11зег 1 1оддеб оиТ </11> <!- - Пользователь 1 вышел
из системы. -->
</и1>
41.29. го1е="та1п"
Основное содержимое документа:
<!-- Неабег & пау здесь -->
<61У го1е="та1п">
<р>1_сгет 1рзьт.. </р>
</с11у>
<!-- Тоогег здесь -->
41.30. го1е= 'тагяиее'’
Тип живой области (1п/е ге§1оп), ь которой несущественная информация
часто изменяется:
<и! го1е="тагдиее">
<И>0ол +0.26%</11> <!-- Оои +0.26% -->
<И>Мазбад +0.54%</И> <!-- Чазбад +0.54% -->
<11>8&атр;Р +0.44%<111р> <!-- 8&Р +0.44% -->
</о1>
41.31. го1е=г,та1Р1"
Контент, представляющий математическое выражение:
<1шд го1е="таТЬ' а11="у=тх+Ь' згс="з1оре.рпд"> <!-- у=тх+Ь -->
41.32. го1е="тепи"
Тип виджета, который предоставляет пользователю список вариантов
выбора:
<и1 го1е="тепи">
<11 го1е=",11епи11е,11">Меи</11> <!-- Новый
<11 го1е="иепи1Те,п' >Ореп</И> <!-- Открыть -->
<И го1е="11епиИе,11">8ауе</11> <!-- Сохранить
<11 го1е="тепц11:ет">С1озе</11> <!-- Закрыть -->
</о1>
41.33. го1е= ,тепиЬаг"
Представление меню, которое обычно остается видимым и отображается
горизонтально:
<01 го1е="тепоЬаг">
<11 го1е="тепцИ:ет">Р11е</11> <!-- Файл -->
<11 го1е="тепо11:ет">Ес111:</11> <!-- Редактировать -->
<11 го1е="тепи1бет">У1ещ</11> <!-- Вид -->
<И го1е="тепо11:ет1">Не1р</11> <!-- Помощь -->
</о1>
41.34. ^оIе=,,тепи^^ет,,
Вариант выбора в группе опций, содержащейся в меню пли строке меню:
<01 го1е="тепоЬаг">
<И го!е= шепоИет1 >ГПе</11> <!-- Файл -->
<11 го!е="тепоШет">Ес111:</11> <!-- Редактировать -->
<11 го1е="тепо11:еп1">71ей</11> <!-- Вид -->
<И го1е="т1епо11:ет1">Не1р</11> <!-- Помощь -->
</о 1>
41.35. го1е-'тепиНетсИескЬох"
Элемент меню с возможностью выбора, который может иметь три
значения 1: гие, Та1зе или птхеск
<о! го1е="тепи">
<11 го1е="тепи1-(:ет">Соп5С1е</11> <!-- Консол= -->
<11 го1е=*'тепи11:ет">1_ауои1;</11> <!-- Макет -->
<11 го1е="тепи1Тетс1тескэох1' аг1а-сбескеа="1:гое">Иогс! и/гар</
11> <!-- Перенос слов -->
</о!>
41.36. го1е='тепиНетгасИо"
Элемент меню с возможностью выбора в группе элементов тина
теп лтетгасю, из которых одновременно может быть выбран только один:
<и1 го1е="П1епи">
<11 го1е="теГ|ОП:етгаб1о" аг!а-с1эескес1="Сгэе">1_еН</11> <!--
Слева -->
<11 го1е="тепи11етгас'1с" аг1а-с1эескеб="'Га1зе">Сеп1:ег</11>
<!-- По центру -->
<11 го1е='тепиНетгаотс" а г 1а-сЬескес1=11 Та1зе" >Р1д1гЬ< /11> <!--
Справа -->
</и1»
41.37. го1е="па7Ёда(юп"
Коллекция навигационных элементов (обычно ссылок) для навигации
по документу или связанным документам:
<и1 го1е="пау1даГюп">
<11><а ИгеТ='1/">Ноте</а></11> <!-- Главная -->
<11><а НгеТ="/аЬоо1">АЬоиТ</а></11> <!-- О нас -->
<11><а НгеТ="/соп1асС'>Соп1ас1</а></И> <!-- Контакты -->
</о1>
41.38. го1е="по1е"
Раздел, содержимое которого является дополнительным или вспомога-
тельным по отношению к основному контенту ресурса:
<р>1_огеш 1рзит.. ,</р>
<р>1огет 1рзот...</р>
<р го1е="по1:е| >1_огет трзот.. ,</р> <!-- Примечание -->
41.39. го1е= 'ор1юп"
Выбираемый элемент в списке выбора:
<и! го1е="1181:Ьох">
<11 го1е="ор1:1оп">Ор1:1оп 1</11> <!-- Опция 1 -->
<И го1е="орТ1оп">Ор1:1оп 2</Ц> <!-- Опция 2 -->
<11 го!е="ор1:1оп">ОрГ10п 3</И> <!-- Опция 3 -->
</о1>
41 40. го1е="ргодге88Ьаг"
Элемент, отображающий статус выполнения задач, которые занимают
длительное время:
<ргодгсзз го1е-"ргоугеззЬаг" уа1ие="25" шах="100">25%</ргодгс88>
<!-- 25% -->
41.41. го1е="гасНо"
Элемент выбора в группе раднокнопок, из которых одновременно может
быть выбрана только одна:
< 61У го1е="гаЛодгоир'>
<1при1 го1е="гасНо' 1уре="гаЛо" аг 1а-сГескес1="1гие"> Опе<Ьг>
<!-- Один -->
<1при1 го1е="га<Ло" 1уре=" гаЛо" аг1а-сНескеб-"Га18с">
1ио<Ьг> <!-- Два -->
<1при1 го1е=' гаЛо" Туре=" гаЛо" аг 1а-сИескес1="Га] 8е"> ТИгее
< !-- Три -->
< /Лу>
41.42. го1е="гедюп"
Большая воспринимаемая область веб-страницы или документа, кото-
рую автор считает достаточно важной для включения в краткое содержание
страницы или оглавление, например, область страницы, содержащая стати-
стику живого спортивного события:
<бту го1е="гед!оп">
Ноте Уеат: 4<Ьг> <!-- Домашняя команда: 4 -->
Аиау Теэт: 2 <!-- Гостевая команда: 2 -->
</Л у>
41.43. го1е='гасНодгоир"
Группа раднокнопок:
< Лу го1е="гаЛодгоир1 >
<1приС го1е="гасНо1 туре=' гасИо" аг 1а-сГ.ескеЛ 1гие"> Опе<Ьг>
<!-- Один -->
<1при1: го1е="гао1о 1 Суре-"тасИс" аг1а-с|-|ескес1= Га1зе' >
Тмо<Ьг> <!-- Два -->
<1приС го!е="гаа!о" Гуре="гасИо" аг1а-сНескес1=',Са1 зе' > Тбгее
< !-- Три -->
< /с11у>
41.44. ^оIе=,,^ОVV,,
Строка ячеек в табличном контейнере:
<ГаЬ1е>
<С1пеас1>
<!-- и т.д. -->
</1Ьеас>
<1Ьобу>
<Сг го1е="го«">
<!-- и т д. -->
</1г>
</1Ьсс!у>
</СаЫе>
41.45. го1е="гоу/дгоири
Группа, содержащая одну или несколько строк (гс«) в сетке (д г 1д):
<СаЫе>
<ГИеаб го1е="гоидгоир'>
<!-- и т.д. -->
</Г|-|еаа>
<ГЬос1у го1е="го«д-оир">
<!-- и т.д. -->
</СЬойу>
</1аЫе>
41.46. го1е= "гоууЬеа(1ег"
Ячейка, содержащая заголовочную информацию для строки в сетке (§г 1с1):
<СаЫе го!е=' дг!с1">
<гИеас1>
<!-- и т.д. -->
</1Неас1>
<тЬойу>
<111 го!е="гоиИеаоег1 >Оау 1</С11> <!-- День 1 -
<1:с1>65</1:с1>
</Гг>
<Гг>
<1Ь го1е=| голГеас1ег">0ау 2</1:1п> <!-- День 2
<1(1>74< / гс1>
</Гг>
</1Ьобу>
< / 1аЫе>
41.47. го1е=г,5Сго11Ьаг"
Графический объект, управляющий прокруткой содержимого в пределах
области просмотра, независимо от того, отображается ли содержимое полно-
стью в этой области:
<Лу 1б="соп1:е1тМ ">1_огет Грзит..
<с11у
го1е="зсго11Ьаг'
аг1а-соп1:го1з="соп1:еп1:1"
аг1а-ог±еп1:а1:1оп=| уег1:1са1
аг1а-уа1иетах= 1100"
а г1а-\/ а1иегг|1п= 0"
агга-уа1иепои-"25">
<с11у с!азз=' зсго11бапб1е"></б1У>
41.48. го1е= '8еагс11"
Ьаш1тагк-область. содержащая набор элементов и объектов, которые
вместе образуют поисковый механизм:
<6IV го 1е="зеагсб">
<1при1: го1е="зеагсНЬох" 7уре= 1ех1: >
<Ьи1:1:оп го1е="Ьи1йоп">8еагсК</Ьи1:1:оп> <!-- Поиск -->
41.49. го1е= 5еагсЬЬох'
Тип текстового поля, предназначенного для указания критериев поиска:
<сИу го1е="зеагс11">
<1приГ. го1е="зеагсНЬох" Туре='ГехТ">
<ЬиТ1:оп го1е="Ь^11:оп">8еагсН</Ьи1:1:оп> <!-- Поиск -->
</б1У>
41.50. го1е="зерага1ог"
Разделитель, который отделяет и различает разделы контента или груп-
пы элементов меню:
<р>1огеш 1рзит. . .</р>
го1е="зсрага1:ог| >
<р>1_огет хрзит.. .</р>
41.51. го1е="зНс1ег"
Элемент ввода, позволяющий пользователю выбрать значение из задан-
ного диапазона:
<сИу
го1е="з11сег"
аг1а-уа1иетах="100"
аг1а-уа1иет1п= 01
аг1а-уа1иепо^="25">
<сНу с1аз8="зИсег11апс1е ' ></сЛу>
</с11у>
41.52. го1е="зр1пЬи(1оп"
Форма диапазона, в которой пользователь выбирает из дискретных зна-
чений.
<1приТ
го1е="зр1пЬа1:топ"
аг1а-уа1иетах-"100
апа-уа1иепн1Э="0"
аг1а-уа1иепои=*25"
1уре="питЬег"
уа1ие="25‘ >
41.53. го1е="81а1из"
Контейнер, содержимое которого представляет собой справочную инфор-
мацию для пользователя, но не настолько важную, чтобы оправдать исполь-
зование предупреждения (а1егГ). Часто, но не всегда, отображается в виде
строки СОСТОЯНИЯ’
<сНу го1е="з1а1из,|>0п11пе</с11У> <!-- В сети -->
41.54. го1е="з\лл!сЬ"
Тип флажка (сйескЬох). представляющий значения вкл/выкл. в отличие
от значений отмечено/не отмечено:
<зе1ес1: го1е="зи11:сЬ" аг1а-сНескес1-"Га1ье">
<орГ1оп>0п</орС1оп> <!-- Вкл -->
<орИоп зе1ес1:ес1>0ТТ</ор11ог> <!-- Выкл -->
</5е1есС>
41.55. го1е-'1аЬ"
Группирующая метка, предоставляющая механизм для выбора содержи-
мого вкладки, которое будет показано пользователю:
<и! го1е=''ГаЫ181">
<И го1е="1:аЬ ">1п1тос1ис1:1оп</11> <!-- Введение -->
<И го1е="1:аЬ">СНар1:ег 1</И> <!-- Глава 1 -->
<П го!е="ГаЬ">СНар1:ег 2</11> <!-- Глава 2 -->
</о1>
41.56. го1е="1аЫе1'
Раздел, содержащий данные, организованные в строки и столбцы Роль
СаЫе предназначена для табличных контейнеров, которые не являются ин-
терактивными:
<1аЫе гоГе-ЧаЫе ’>
<Г1эеас1>
<!-- и т.д. -->
< / Шлеас1>
<1Ьос1у>
<!-- и т.д. -->
</1Ьос1у>
</1аЫе>
41.57. го1е= ,1аЫ|51"
Список элементов вкладок (СаЬ), которые ссылаются на элементы
СаЬрапе!:
<о1 го1е="ГаЫ1зГ">
<11 го1е= ' 1а1э">1пСгос1ос1:1оп</11> <!-- Введение -->
<И го1е="1:аЬ">СНар1ег 1</И> <!-- Глава 1 -->
<11 го1е="1аЬ">СЬар!ег 2</И> <!-- Глава 2 -->
</о1>
41.58. го1е="1аЬрапе1"
Контейнер для ресурсов, связанных с вкладкой, где каждая вкладка содер-
жится в СабИз!.
<и1 го1е="1аЫ151: ">
<11 го1е="1аЬ">1п1гоаис1:1ог1</11> <!-- Введение -->
<И го1е="1:аЬ">СНар1:ег 1</И> <!-- Глава 1 -->
<11 го1е="1:аЬ‘|>СЬар1:ег 2</И> <!-- Глаза 2 -->
</и1>
<сИу го1е="таЬрапе1 >
<!-- и т.д. -->
</Л у>
41.59, го1е="1ех1Ьох"
Элемент ввода, позволяющий вводить произвольный текст в качестве
значения:
<1ех1:агеа го1е="1:ех1:Ьох"х/РехРа геа>
41.60. го1е="Г|тег"
Тип активной области (1ше ге§юп), содержащей числовой счетчик, ко-
торый указывает количество прошедшего времени с начальной точки
или оставшееся время до конечной точки:
<р>
<зрап го1е="Нтег">60</зрап> зесопс18 гета1п1пд. <!-- Осталось
60 секунд -->
</р>
41.61. го1е=1оо1Ьаг"
Коллекция часто используемых кнопок функций, представленных в ком-
пактной визуальной форме:
<и! го1е="1оо!Ьаг
</ц1>
<11><1тд
<11><1тд
<11><1тд
<11х1тд
а11=
а1с=
а1Х=
а11:=
'№«" згс»"пеи.рпд"></И> <!-- Новый -->
'Ореп" 5ГС="орег).рпд,,></11> <!-- Открыть -->
'Зауе" 8гс="зауе.опд'х/11> <!-- Сохранить -->
'С1озе" згс="с108е.рпд"х/Ц> <!-- Закрьпь -->
41.62. го1е="1оо11|р"
Контекстное всплывающее окно, которое отображает описание элемента’
<зрап аг1а-иезсг1ЬесЬу=',81среиезс">31оре</8раг1> <!-- Наклон -->
<Лу го1е = "соо1Т1р" 1б="81среое8с">у=П'1хеЬ</с!17> <!-- у-тх+Ь
Обычно подсказка (ТооШр) скрыта. С использованием ЩуаЗспрГ подсказка
отображается с задержкой, когда пользователь наводит курсор на элемент,
который она описывает.
41.63. го1е="1гее"
Тип списка, содержащий вложенные группы, которые можно сворачи-
вать и разворачивать.
<и! го1е="1гее">
<11 го1е="1гее11:епГ>
Рагб 1 <!-- Часть 1 -->
<и1>
<11 го1е=" 1 гееИет">СНарСег 1</11> <!-- Глава 1 -->
<11 го1е-"1гееИеп1'>СЬар1ег 2</11> <!-- Глава 2
<11 го!е='СгееИет’>С11ар1ег 3</11> <-- Глава 3
</и1>
</И>
<11 го1е="1гееИет">
Раг! 2 <!-- Часть 2 -->
<и1>
<И го1е="1гееИет">С11ар1ег 4</И> <!-- Глава 4 -->
<11 го1е=' тгее1Тет'>СНарТег 5</11> <!-- Глава 5 -->
<И го1е-' 1 гееИет">С11ар1:ег б</И> <!-- Глава б -->
</и1>
</Ц>
<11 го!е=' 1гее11ет1">
Рагб 3 <!-- Часть 3 -->
<и1>
<И го1е= 1 гееИет '>СНар1ег 7</11> <1-- Глава 7 -->
<11 го1е="НееИет">СНар1ег 8</11> <!-- Глава 6 -->
<11 го1е="1гее11спг'>С11ар1сг 9</11> <!-- Глава 9 -->
</и1>
</11>
</и1>
41.64. го1е="1геедпсГ
Сетка, строки которой можно разворачивать и сворачивать, как в дереве
(тгее).
41.65. го1е="1гееНет"
Элемент списка (опция) в дереве (йее). Это элемент внутри дерева, ко-
торый может быть развернут или свернут, если он содержит вложенную
группу элементов Йгеейетз):
<и1 го1е="Сгее">
<11 го!е="1гее11ет">
Рас! 1 <!-- Часто 1 -->
<ц1>
<11 го1е="1гее11ет">СГ|ар1ег 1</Ц> <!-- Глава 1 -->
<11 г01е-"1гееИет">С!1ар1ег 2</И> <!-- Глава 2 -->
<И го1е=" 1:гееП:ет">С!гар1:ег 3</11> <!-- Глава 3 -->
</и1>
</11>
<11 го1е='1-ееИет">
Рас! 2 <!-- Часто 2 -->
<а1>
<11 го1е="ггее1гет">С?1ар'Сег 4</И> <! -- Глава 4 -->
<11 го1е=" 1: гееИет" >СЧарГе г 5</И> < -- Глава 5
<11 го1е=" 1: гееИет" ^СНарГе г 6</И> <! -- Глава 6 -->
</и1>
< /11>
< И го1е="1гееИет >
Раг! 3 <!-- Часть 3 -->
<а1>
<11 го1е="1гее11ет">СларСег 7</11> <!-- Глаза 7 -->
<И го1е="1:гее11:ет">С11ао1:е1’ 8</И> <!-- Глава 8 -->
<11 го1е="1гее11ет">СИар1ег 9</11> <!-- Глава 9 -->
</и1>
< /11>
</и1>
Благодарности
Огромное спасибо всем участникам 8(аск ОуегШнм Посшпетаноп, кото-
рые помогли в создании этого контента.
Дополнительные изменения или предложения можно отправить
на адрес утеЬ@ре1егсу.сот для публикации или обновления материалов
АА2992 Глава 12
АЫпзНек Рапйеу Главы 17 и 33
АЬгаг]аЫп Глава 4
Айр! Глава 29
аЬтеДпаша/ЬиП Глава 1
А1.С. Главы 2, 6 и 17
а!ЬеП Глава 8
А1ех Глава 15
Акхапйег АУщтогс Глава 33
А1ехапс1ге Ц. Главы 8,13,15, 28 и 29
АП А1тоиШт Главы 18 и 27
Атапйа АЬп Глава 1
атПаге Главы 1 и 27
АтПау 81ет Главы 1 и 17
апбгеает Глава 13
апйгеаз Глава 31
Апогеи Вгооке Глава 20
Ап§е108 Ска1ап8 Главы 2,10,17 и 33
Ат Мепоп Главы 2, 3, 9,17,18 и 33
АпП Глава 20
аттизоп Главы 1,2, 5, 6, 7, 8, 9,15,17 18,
27, 29, 33, 37 и 40
Апзекп Главы 6,12 и 13
АпШопу РПат Глава 6
Аоиг МиПаттас! Глава 18
Агактс! Глава 19
Ага\4пс1 Зигеек Глава 12
АзД’лап Катазиат, Глава 9
Ахе Глава 33
ВаНШ Глава 33
Ьап17 Глава 6
Мксреп Главы 9,14 и 33
Весса Глаза 37
Веп НГгуз Глава 5
ЬЬапяа Глава 17
ВЬаууа 81п§1а Глава 41
Воокеагег Глава 33
Вопз Глава 33
ВоузепЬЗггу Глава 15
Ьгаайаетоп Глава 10
Са1еЬ Ккпегег Главы 10 и 15
Са11ап ПеагО Главы 1 и 12
Сейпс 2орро1о Глава 8
СГьагкз Глава 13
СИ из Главы 2 и 19
СЬг15 КпСПегГагс! Глава 12
СНпзВ Главы 1, 9, 24, 29 и 31
СЬпз'аап Тети 8 Глава 14
СЬпз'орпе ЗггоЬЬе Глава 17
сопе56 Главы 12 и 32
СэгПеш 8о!ииопз Главы 2,19, 26, 35 и 36
СиПиЬ Глава 18
В М Глава 19
Бате! Глава 17
Бате! КаГег Глава 7
БаппуТПеВее Глава 17
Вауе ЕуепП Глава 1
ВаипРа1ас1ш Главы 6,12 и 17
В1реп 8На1т Глава 17
йтраз Глава 3
Вотетс Главы 12 и 33
Вптоп Глава 17
Етпапие! УтШа Глава 29
Ели! Главы 5, 6 и 10
Еуап Глава 3
Гатйай Глаза 38
Геее1а Главы 12 и 25
ГеПреАк Глава 30
Е1у!п§Р!Мопз1ег Глава 6
§аЬе3886 Глаза 17
СаЬпе! СЫ Ноп§ Бее Главы 15 и 18
Са1 Каккш Глава 19
§еек1011 Главы 1 и 33
^еекза! Глава 17
Сеток Вгсзег Главы 1 и 30
СоакУкагНак Глава 10
Стасе ГЧоСе Глава 7
Стал! РаНп Глава 8
дизТтуоЬег.ке Глава 5
Суйз Тепоуппаз Глава 17
НМк/а Глава 1
Н. Раиуге!уп Глава 1
ЫаЬе1 РИкр Глава 33
НаГ1<к Штат Ар Регтапа Глава 33
НапИГогто1у Глава 20
ИеегГк Глава 2
Неппдие Вагсе1оз Главы 12 и 17
Ниу Муиуеп Глава 17
ТпГигкп Главы Зи 12
тзегГизегпатсЬеге Глава 6
1п1Ьоо1з1г1п§ Глава 1
Еак СотЬгтск Главы 25 и 30
!уп Глава 15
Т Г Главы 5 и 8
]08691 Главы 8 и 18
]кг.апсе Глава 10
]Гоаапа Глава 33
|Н8 Главы 6, 8, 9,12 и 19
]кс!еу Глаза 9
)ое_уоип§ Главы 1, 3 и 8
)о!тп 81е§егз Главы 10 и 17
|о)ос1то Глава 6
|ог, Епсзоп Глава 7
уог.айгап Ьат Главы 1,6,12 и 16
}опез ]озерк Главы 6 и 14
Каке_Г1зк Глава 15
кср!ке Глава 7
кеМпекуе Главы 1 и 33
Кпг.гтах Глава 18
ЬаЫги Азкап Глава 17
Геспказ Мепепскх Глава 1
Гисакп^еИа Глава 18
Биса Рики Глава 10
Маг]ог1е Рккагй Глава 13
Магут Главы 7 и 17
МаСаз Уаккеукшз Главы 6, 7,12 и 17
Мак Глава 1
Махтккап Еаите!з!ег Главы 15 и 17
Мегу8 Главы 13 и 40
Мккае! МопагТу Глава 33
Мкпае1_В Глава 10
тпогопЬа Глава 1
МоГ.с! Запит КНап Глава 15
тогешгу Глава 17
Моз’п Геи Глава 27
Моке Глава 8
мгизкг Глава 8
Мг. АИеп Глава 33
Мшказк Глава 30
МуЗреей Глава 19
т_са11еп8 Главы 22 и 33
ва!р]у Глава 20
Хайке Глава 10
Майгап Т觧у Глава 6
Штаг. Главы 12 и 15
Мек Вгоиу/ег Глава 18
М1дп22 Глава 8
№1 ЬИзкгг] Глава I7
Мзкскау Главы 1 и 33
ХосЬСойет Глава 17
О]еп Глава 29
Огкта1а Еокт Главы 17 и 33
Рагезк МазкосНуа Глава 39
Раи! Зтуеайе Глава 41
Регзцп Глава 1
РеГег Ь. Глава 5
Й Рго§таш8 Глава 17
р1гца8аиг Глава 2
р1а1у! 1 Глава 7
Ргапау Глава 6
РгаТеек Главы 6, 7, 8 и 17
РгАкк Еоскаша1а Глава 8
Ргауееп Кишат Глава 8
Рзаткс Главы 17 и 36
Рзеийогут Ра1е1 Главы 3 и 7
Кас11 НПап Глава 11
га]аг5к1§ Глава 11
КатепСкеГ Главы 16 и 17
Каг.рГ 8;п§к Глава 17
КаузГаГаг’ап Главы 3 и 6
Кюкагс! НатШоп Главы 7,10, 26 и 32
КокегГ Сок_тЫа Глава 6
Коко С, ВиГап Главы 13,17, 22 и 32
8а1’оог 8аШаг Глава 33
зазка Глава 3
ЗеторЗуз Глава 17
8еп]иГ1 Макарагга Глава 33
Зкаг.поп Уоип§ Главы 20 и 41
Зкагаупап Ку Глава 17
8Ыуа Глава 25
8к1уап§1 Скаигаз1а Главы 15 и 17
ЗПЛогеШ Главв; 8 и 13
81топе Саг1еШ Глава 10
8]П8 Глава 17
Ыаск Глава 40
81еркеп Еерр1к Главв; 17 и 33
81е\уаг(ыс1е Главы 7 и 17
81еуп уап ЕзуеМ Глава 6
Зшппег Еуапз Глава 2
Биллу К Сирга Главы 1 и 17
8ирег8Гогтег Главы 13,19 и 34
8Уэк Глава 17
8Уаго§ Глаза 8
Тей Соаз Главы 8 и 33
111612 Главы 1 и 17
1к1пк123 Глава 17
Ткотаз Сею! Глава 24
Ткотаз ЕашГаиег Глава 8
гкоиизгеп Глава 14
Т1топ Глава 17
ТппоХку МШег Глава 31
(т§ Главв! 2, 7 и 17
Тот]о11П8оп Глава 7
гопеГЬаг Глава 32
То1 Хат Главв! 17 и 27
Тгаутз Глава 41
Тгеуог С1агке Глава 32
1гип§к18 Глава 17
Ту1ег 21ка Глава 10
Шпек 8ск\таг2 Глава 9
Спко Глава 17
илот Главы 1, 5, 6, 7,12, 30, 33, 34, 35 и 37
И8ег3130333 Глава 1
и8ет5389107 Глава 17
У4капап Глава 12
Уа1ог Магат Главы 1,4 и 38
укорю Глава 3
у1ас1с1оЪ1’а Главы 12 и 17
и5т Глава 31
\Уо1Г^ап§ Главы 6, 9 и 15
Х1ГП8 Глава 33
Уаз1гТ Глава 11
У0881 Акагоп Главы 20 и 25
Хаск Глава 7
Хап§е Глава 37
Ха/ Глава 1
гегООпе Главв! 8 и 23
2уй1тап1из Глава 1
Х/е Глава 1
222хВоу Глава 17
Справочное издание
Аныцтамалык, басылым
Серия «Программирование. Оффер на миллион»
НТМ1.5 ДЛЯ ПРОФЕССИОНАЛОВ
РУКОВОДСТВО ПО РАЗРАБОТКЕ В ПРИМЕРАХ
ОТ СООБЩЕСТВА 5ТАСК ОУЕКЕЮМ
Ответственный за выпуск: И. Резвко
Ответственный редактор: А. Кодякова
Оформление обложки: С. Дарсич
Подписано в печать 14,10.2025.
Формат 70x100’/16. Бумага офсетная. Печать офсетная.
Гарнитура МоГо 5епГЗст|Сопс1еп5сс1.
Уел. печ. л. 13 Тираж 1500 экз. Заказ №
Общероссийский классификатор продукции ОК-034-2014 (КПЕС 2008)
58.11.1 — книги, брошюры печатные.
Изготовлено в 2.025 г.
Произведено в Российской Федерации.
Изготовитель: ООО «Издательство АСГ».
129085, Российская Федерация, г. Москва, Звёздный бульвар, дом 21,
строение 1, комната 705, пом. I, 7 этаж.
Адрес места осуществления деятельности по изготовлению продукции:
123112, Российская Федерация, г. Москва, Пресненская набережная, д. б, стр. 2,
Деловой комплекс «Империя», 14,15 этаж.
Наш электронный адрес: азк@а5С.ги
Наш сайг: тмлм/.азТ.гы
Интернет-магазин: имлл/.Ьоок24.ги
Ондтрушт: «Издательство АСТ»ЖШК, 129085, Ресей Федерациясы,
Мэскеу, Звёздный бульвары, 21-уй, 1-курылыс, 705-белме, 1уй-жай, 7-к;абат.
бнтм. ендтру к,ызмет)н жузеге асыру мекенжайы:
123112, Ресей Федерациясы, Мэскеу, Пресненская жат б-уй, 2-к.ур..
«Империя» 1скерл1к кешенг 14 15-кабат.
Б|здщ электрондык, мекенжаймыз: улмА/.азГ.ги Е-таП азкгаазГ.ги
Интернет-магазин: \лллл.Ьсок24.ш Интернег-дукен: тмллл/.Ьоок24 кг
Импортер в Республику Казахстан, дистрибьютор и представитель по приёму
претензий на продукцию в Республике Казахстан: ТОО «РДД-Алмагы».
г. Алматы, ул. Домбровского, 3«а». литер Б, офис 1.
К,азак,стан Республикасына импорттаушы дистрибьютор жэне
К,азакстан Реотубликасында ен1мге шагымдар кабылдау жеындеп ектл:
«РДЦ-Алматы» ЖШС. Алматы к-, Домбровский кеш., 3«а», Б литере офис 1
Тел.: 8(727)2 51 59 90,91, факс: 8 (727) 251 59 92. 107;
Е-таП: РОС-А1тасу@ек5то.кг, 'лмТ|Л/.Ьоок24.кг
0нд|р1лген жылы: 2025. 0н1мнщ жарамдылык, мерз1М1 шектелметен
Сертификаттауга жатпайды
Ресей Федерациясында ендтртлтен
Эта книга — не очередной справочник по разметке, а реальное практическое
руководство, где каждый пример сразу же пригодится при верстке веб-страниц.
Ведь здесь рассматривается НТМЬ, который действительно необходим в реше-
нии конкретных задач — без перегрузки и интуитивных догадок.
ДЛЯ КОГО ЭТА КНИГА?
• Для тех, кто начинает верстать с нуля и желает получить быстрый, но каче-
ственный результат.
• Для разработчиков, которым необходимо освежить знания или закрыть
пробелы.
• Для всех, кто хочет писать читаемый, современный и надежный НТМЬ-код.
ПОЧЕМУ СТОИТ ВЫБРАТЬ ИМЕННО ЭТО РУКОВОДСТВО?
• Только практическая ценность — никакой теории ради теории, весь мате-
риал направлен на решение реальных задач.
• НТМЬ от А до Я — формы, таблицы, мультимедиа, доступность, семантика
и даже 8УС с <сапуа«>.
• Все понятно без специальной подготовки — объяснения простым языком,
даже если вы впервые видите тег <§ес1юп>.
• Приведенные примеры можно сразу использовать в коде — ив небольшом
собственном проекте, и в масштабной работе.
• Легко найти нужные сведения — удобная навигация по главам и логичная
структура.
НАЧНИТЕ РАБОТАТЬ С НТМЕ БЕЗ ТЕОРЕТИЧЕСКИХ ПРЕМУДРОСТЕЙ!
ЭТА КНИГА - ВАШ НАДЕЖНЫЙ ПРАКТИЧЕСКИЙ ПУТЕВОДИТЕЛЬ
ПО МИРУ ВЕБ-РАЗРАБОТКИ!
КНИГИ ДЛЯ ЛЮБОГО
НАСТРОЕНИЯ ЗДЕСЬ:
। ^мл.азГги / \л/1л™.Ьоок24.ги
С Ук.сот/|7с1а1е15иоаз1
। О ок.ги/.7с!а1е15^оа51
ыг