HTML5BOOK

HTML5 B O O K
1
HTML
HTML5
1.1. Основы HTML
o Структура HTML-документа
o Тег <html>
o Тег <head>
o Тег <title>
o Тег <meta>
o Тег <style>
o Тег <link>
o Тег <script>
o Тег <body>
1.2. HTML-теги
1.3. HTML-атрибуты
1.4. HTML-текст
o Теги заголовков
o Теги для форматирования текста
o Теги для ввода «компьютерного» текста
o Теги для оформления цитат и определений
o Абзацы, средства переноса текста
1.5. HTML-ссылки
o Структура ссылки
o Абсолютный и относительный путь
o Якорь
o Как сделать изображение-ссылку
o Как сделать ссылку на телефонный номер, скайп или адрес электронной почты
o Атрибуты ссылок
1.6. HTML-изображения
o Тег <img>
o Адрес изображения
o Размеры изображения
o Форматы графических файлов
o Тег <map>
o Тег <area>
o Пример создания карты-изображения
1.7. HTML-таблицы
o Как создать таблицу
o Как создать строки (ряды) таблицы
o Как сделать ячейку заголовка столбца таблицы
o Как сделать ячейку тела таблицы
o Как добавить подпись (заголовок) к таблице
o Группирование строк и столбцов таблицы <colgroup> и <col>
o Группировка разделов таблицы <thead>, <tbody> и <tfoot>
o Как объединить ячейки таблицы
o Атрибуты элементов таблицы
o Пример создания таблицы
1.8. HTML-списки
o Маркированный список <ul>
o Нумерованный список <ol>
o Список определений <dl>
o Вложенный список
o Многоуровневый нумерованный список
1.9. Спецсимволы HTML
o Полезные знаки и символы
o Знаки пунктуации
o Стрелки
o Карточные масти
o Деньги
o Знаки зодиака
1.10. HTML-генераторы
1.11. Семантические элементы HTML5
1.11.1. Элемент документа
1.11.2. Метаданные документа
o Элемент <head>
o Элемент <title>
o Элемент <base>
o Элемент <link>
o Элемент <meta>
o Элемент <style>
1.11.3. Разделы документа
o Элемент <body>
o Элемент <article>
o Элемент <section>
o Элемент <nav>
o Элемент <aside>
o Элементы <h1>, <h2>, <h3>, <h4>, <h5> и <h6>
o Элемент <header>
o Элемент <footer>
1.11.4. Группировка содержимого
o Элемент <p>
o Элемент <address>
o Элемент <hr>
o Элемент <pre>
o Элемент <blockquote>
o Элемент <ol>
o Элемент <ul>
o Элемент <li>
o Элемент <dl>
o Элемент <dt>
o Элемент <dd>
o Элемент <figure>
o Элемент <figcaption>
o Элемент <main>
o Элемент <div>
1.11.5. Семантика уровня текста
o Элемент <a>
o Элемент <em>
o Элемент <strong>
o Элемент <small>
o Элемент <s>
o Элемент <cite>
o Элемент <q>
o Элемент <dfn>
o Элемент <abbr>
o Элемент <ruby>
o Элемент <rb>
o Элемент <rt>
o Элемент <rtc>
o Элемент <rp>
o Элемент <data>
o Элемент <time>
o Элемент <code>
o Элемент <var>
o Элемент <samp>
o Элемент <kbd>
o Элементы <sub> и <sup>
o Элемент <i>
o Элемент <b>
o Элемент <u>
o Элемент <mark>
o Элемент <bdi>
o Элемент <bdo>
o Элемент <span>
o Элемент <br>
o Элемент <wbr>
1.11.6. Правки документа
o Элемент <ins>
o Элемент <del>
o Атрибуты, общие для элементов <ins> и <del>
1.12. HTML5-аудио
o Элемент <audio>
o Аудио кодеки
o Альтернативные медиа-ресурсы <source>
o Добавление субтитров и заголовков <track>
o Стилизованный пример аудио плеера
1.13. HTML5-видео
o Элемент <video>
o Встраиваемый интерактивный контент <embed>
o Видеокодеки
o Видеоконтейнеры
o Альтернативные медиа-ресурсы <source>
o Добавление субтитров и заголовков <track>
o Пример: размещаем видео на сайте
o Видеоконвертеры
1.14. Необязательные теги HTML5-разметки
1.15. HTML5-формы
o Элемент <form>
o Группировка элементов формы <fieldset>
o Создание полей формы <input>
o Текстовые поля ввода <textarea>
o Раскрывающийся список <select>
o Надписи к полям формы <label>
o Кнопки <button>
o Флажки и переключатели в формах
1.16. Контентная модель HTML5
o Мета содержимое
o Потоковое содержимое
o Секционное содержимое
o Заголовочное содержимое
o Текстовое содержимое
o Встроенное содержимое
o Интерактивное содержимое
o Явное содержимое
o Элементы, поддерживающие скрипт
o Корневое секционное содержимое
o Прозрачная модель содержимого
1.1. Основы HTML

Опубликовано: 22 октября 2014Обновлено: 1 января 2021141 Comments
Основы HTML содержат основные правила языка HTML, описание структуры

HTML-страницы, отношения в структуре HTML-документа между HTML-
элементами.
HTML-документ — это обычный текстовый документ, может быть создан как в
обычном текстовом редакторе (Блокнот), так и в специализированном, с
подсветкой кода (Notepad++, Visual Studio Code и т.п.). HTML-документ имеет
расширение .html .
HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент
обозначается в исходном документе начальным (открывающим) и конечным
(закрывающим) тегом (за редким исключением).
Начальный тег показывает, где начинается элемент, конечный — где
заканчивается. Закрывающий тег образуется путем добавления слэша / перед
именем тега: <имя тега> … </имя тега> . Между начальным и закрывающим
тегами находится содержимое элемента — контент.
Элементы, представленные одиночными тегами, не могут хранить в себе
содержимого напрямую, оно прописывается как значение атрибута, например,
элемент <input type="button" value="Кнопка"> создаст кнопку с
текстом Кнопка внутри.
Элементы могут вкладываться друг в друга, например, <p><i>Текст</i></p> .
При вложении следует соблюдать порядок их закрытия (принцип «матрёшки»),
например, следующая запись будет неверной: <p><i>Текст</p></i> .
HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-
элементов, и собственные). Атрибуты прописываются в открывающем теге
элемента и содержат имя и значение, указываемые в формате имя
атрибута="значение" . Атрибуты позволяют изменять свойства и поведение
элемента, для которого они заданы.
Каждому элементу можно присвоить несколько значений class и только одно
значение id . Множественные значения class записываются через
пробел, <div class="nav top"> . Значения class и id должны состоять
только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться
только с букв или цифр.
Браузер просматривает (интерпретирует) HTML-документ, выстраивая его
структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в
этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне
браузера будет отображена HTML-страница, содержащая HTML-элементы —
заголовки, таблицы, изображения и т.д.
Процесс интерпретации (парсинг) начинается прежде, чем веб-страница

полностью загружена в браузер. Браузеры обрабатывают HTML-документы
последовательно, с самого начала, при этом обрабатывая CSS и соотнося таблицы
стилей с элементами страницы.
HTML-документ состоит из двух разделов — заголовка — содержимое
элемента <head> и содержательной части — содержимое <body> .
Структура веб-страницы
 Содержание:
 1. Структура HTML-документа
 1.1. Элемент <html>
 1.2. Элемент <head>
 1.2.1. Элемент <title>
 1.2.2. Элемент <meta>
 1.2.3. Элемент <style>
 1.2.4. Элемент <link>
 1.2.5. Элемент <script>
 1.3. Элемент <body>
1. Структура HTML-документа
Язык HTML следует правилам, которые содержатся в файле объявления типа
документа (Document Type Definition, или DTD). DTD представляет собой XML-
документ, определяющий, какие теги, атрибуты и их значения действительны для
конкретного типа HTML. Для каждой версии HTML есть свой DTD.
DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE
определяет не только версию HTML (например, html), но и соответствующий DTD-
файл в Интернете.
<!DOCTYPE html> 

<html>
<head> 
<meta charset="UTF-8"> 
<title>...</title> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<script src="script.js"></script> 
</head>
<body> 
</body>
</html>
HTML
Элементы, находящиеся внутри элемента <html> , образуют дерево документа,
так называемую объектную модель документа, DOM (document object model).
При этом элемент <html> является корневым элементом.
РИС
. 1. ПРОСТЕЙШАЯ СТРУКТУРА ВЕБ-СТРАНИЦЫ
Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо
рассмотреть так называемые «родственные отношения» между элементами.
Отношения между множественными вложенными элементами подразделяются на
родительские, дочерние и сестринские.
o Предок — элемент, который заключает в себе другие элементы. На рисунке
1 предком для всех элементов является <html> . В то же время
элемент <body> является предком для всех содержащихся в нем
элементов: <h1> , <p> , <span> , <nav> и т.д.
o Потомок — элемент, расположенный внутри одного или более типов
элементов. Например, <body> является потомком <html> , а
элемент <p> является потомком одновременно для <body> и <html> .
o Родительский элемент — элемент, связанный с другими элементами более
низкого уровня, и находящийся на дереве выше их. На рисунке
1 <html> является родительским только для <head> и <body> .
Элемент <p> является родительским только для <span> .
o Дочерний элемент — элемент, непосредственно подчиненный другому
элементу более высокого уровня. На рисунке 1 только
элементы <h1> , <h2> , <p> и <nav> являются дочерними по отношению
к <body> .
o Сестринский элемент — элемент, имеющий общий родительский элемент с
рассматриваемым, так называемые элементы одного уровня. На рисунке
1 <head> и <body> — элементы одного уровня, так же как и
элементы <h1> , <h2> и <p> являются между собой сестринскими.
1.1. Элемент <html>
Является корневым элементом документа. Все остальные элементы содержатся
внутри <html>...</html> . Все, что находится за пределами элемента, не
воспринимается браузером как HTML-код и никак им не обрабатывается.
Для элемента доступен атрибут, описанный в таблице ниже, а также глобальные
атрибуты.
ТАБЛИЦА 1. АТРИБУТ ЭЛЕМЕНТА <HTML
Атрибут Описание, принимаемое значение

С помощью значения атрибута указывается путь к документу кэша манифеста, например
manifest
<html manifest="about_company.appcache">
1.2. Элемент <head>

Раздел <head>...</head> содержит техническую информацию о странице:
заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д.
Введенная в нем информация не отображается в окне браузера, однако содержит
данные, которые указывают браузеру, как следует обрабатывать страницу.
Для элемента доступны глобальные атрибуты.
1.2.1. Элемент <title>
Обязательным элементом раздела <head> является <title> . Текст,

размещенный внутри элемента <title> , отображается в строке заголовка веб-
браузера.
Длина заголовка должна быть не более 60 символов, чтобы полностью
поместиться в заголовке. Текст заголовка должен содержать максимально полное
описание содержимого веб-страницы.

1.2.2. Элемент <meta>
Необязательным элементом раздела <head> является элемент <meta> . С его

помощью можно задать описание содержимого страницы и ключевые слова для
поисковых машин, автора HTML-документа и прочие свойства метаданных.
Элемент <head> может содержать несколько элементов <meta> , потому что в
зависимости от используемых атрибутов они несут различную информацию.
<meta name="description" content="Описание содержимого страницы">

<meta name="keywords" content="Ключевые слова через запятую">
HTML
Описание содержимого страницы и ключевые слова одновременно можно
указывать на нескольких языках, например, на русском и английском:
<meta name="description" lang="ru" content="Описание содержимого страницы">

<meta name="description" lang="en" content="Description">
<meta name="keywords" lang="ru" content="Ключевые слова через запятую">
<meta name="keywords" lang="en" content="Keywords">
HTML
С помощью элемента <meta> можно запретить или разрешить индексацию веб-
страницы поисковыми машинами:
Индексация и переход по ссылкам разрешены:
<meta name="robots" content="index, follow">
HTML
Индексация разрешена, переход по ссылкам запрещен:
<meta name="robots" content="index, nofollow">
HTML
Индексация и переход по ссылкам запрещены:
<meta name="robots" content="noindex, nofollow">
HTML
Для автоматической перезагрузки страницы через заданный промежуток времени
нужно воспользоваться значением refresh :
<meta http-equiv="refresh" content="30">
HTML
Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на
другую страницу, нужно указать URL-адрес в параметре url :
<meta http-equiv="refresh" content="0; url=http://yandex.ru/">
HTML
Для элемента <meta> доступны атрибуты, описанные в таблице ниже, а
также глобальные атрибуты.
ТАБЛИЦА 2. АТРИБУТЫ ЭЛЕМЕНТА <META

Указывает кодировку символов для текущего HTML-документа: <meta charset="UTF-
charset
8">
Содержит произвольный текст, который определяет значение, ассоциируемое с

content
атрибутом http-equiv или name , в зависимости от их значения.
Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков).

При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте:
default-style указывает предпочтительный стиль для использования на странице.
Атрибут content должен содержать идентификатор элемента <link> , который
ссылается на таблицу стилей CSS, или идентификатор элемента <style> , содержащего
таблицу стилей.
refresh указывает время в секундах до перезагрузки страницы или время до
http-
перенаправления на другую страницу, если в атрибуте content после указания времени
equiv
идет строка "url=адрес_страницы" .
Автоматическая перезагрузка страницы через заданный промежуток времени, в данном
примере, через 30 секунд:
Если необходимо сразу перебросить посетителя на другую страницу, то можно указать
URL-адрес в параметре url :
<meta http-equiv="refresh" content="0; url=http://mail.ru/">
name Ассоциируется со значением, содержащемся в атрибуте content . Не должен

использоваться в случае, если для элемента уже заданы атрибуты http-
equiv , charset или itemprop .
application-name указывает название веб-приложения, используемого на странице.
author указывает имя автора документа в свободном формате.
description определяет краткое описание к содержимому страницы, например:
<meta name="description" content="Описание содержимого страницы">
generator указывает один из пакетов программного обеспечения, используемого для
создания документа, например:
<meta name="generator" content="WordPress 4.0"> .
keywords содержит список ключевых слов, разделенных запятыми, соответствующих
содержимому страницы, например:
<meta name="keywords" content="Ключевые слова через запятую"> .
Также атрибут name может принимать следующие значения из расширенной
спецификации, такие
как creator , googlebot , publisher , robots , slurp , viewport , хотя ни одно
из них еще не было официально принято.
1.2.3. Элемент <style>
Внутри этого элемента задаются стили, которые используются на странице. Для

задания стилей в HTML-документе используется язык CSS. Таких элементов на
странице может быть несколько.
Для элемента доступны атрибуты, приведенные в таблице ниже, а

ТАБЛИЦА 3. АТРИБУТЫ ЭЛЕМЕНТА <STYLE
Атрибу
Описание, принимаемое значение
т
Определяет, для какого типа устройства предназначены те или иные каскадные таблицы
media стилей. Внутри таблицы стилей CSS специфичные правила для определенных устройств
прописываются с помощью media query.
Генерируемая случайным образом на сервере строковая переменная, которая устанавливает
nonce правила использования встроенных стилей с целью защиты контента. Значение атрибута —
строка текста.
Определяет MIME-тип подключаемого файла со стилями, в данном
type
случае type="text/css" .
Элемент может содержать код форматирования как самих элементов веб-
страницы, так и веб-страницы целиком.
<style>
.paper {
width: 200px;
height: 300px;
background-color: #ef4444;
color: #666666;
}
</style>
HTML
Чтобы подключить к элементу заданный стиль, необходимо через
атрибут class (или id ) присвоить элементу соответствующее название:
<div class="paper">
...
</div>
HTML
CSS-код можно встраивать непосредственно в элемент разметки в виде значение
атрибута style , например:
<p style="color: #666666; background-color: #ef4444; padding: 20px;">
HTML
1.2.4. Элемент <link>
Задать стили для документа можно также при помощи другого способа — записать
их в отдельный файл с расширением .css , например, style.css .
Подключить файл со стилями к веб-странице можно двумя способами:
o через директиву @import url

o с использованием элемента <link> . Данный способ является
предпочтительным.
<!DOCTYPE html>
<html>
<head>
<style>
@import url(style.css);
</style>
<meta>
<title> </title>
</head>
HTML
Элемент <link> определяет отношение между текущей страницей и другими
документами. Таких элементов на странице может быть несколько.
<link rel="stylesheet" href="style.css" type="text/css">
HTML
ТАБЛИЦА 4. АТРИБУТЫ ЭЛЕМЕНТА <LINK

crossorigin Указывает, должен ли использоваться CORS (технология браузеров, которая позволяе
предоставить веб-странице доступ к ресурсам другого домена) при извлечении
изображения с сайта.
anonymous — в кросс-доменный запрос браузер автоматически добавляет заголово
Origin, содержащий имя домена, с которого осуществлён запрос. Если сервер не
ответит CORS-заголовком Access-Control-Allow-Origin: * (или имя домена
вместо звёздочки), то загрузка изображения будет заблокирована.
use-credentials — если сервер не предоставляет учётные данные с
помощью Access-Control-Allow-Credentials: true , то загрузка
изображения будет заблокирована.
href Основной атрибут элемента, в качестве значения выступает путь к файлу со стилями.
hreflang Определяет язык текста в документе, на который идет ссылка.
media Определяет тип устройства, к которым должен быть применен ресурс ссылки.
Генерируемая случайным образом на сервере строковая переменная, которая

nonce устанавливает правила использования встроенных стилей с целью защиты контента.
Значение атрибута — строка текста.
rel Атрибут определяет отношения между текущим документом и документом, на

который идет ссылка.
alternate — ссылка на тот же документ, но в другом формате (например, страниц
для печати, перевод, зеркало, лента в формате RSS или Atom),
<link rel="alternate stylesheet" type="text/css"
title="small_font" href="small-font.css"> .
<link rel="alternate" type="application/rss+xml" title="my_RSS"
href="index.xml">
<link rel="alternate" type="application/atom+xml" title="News"
href="/atom.xml?type=news">
archives — указывает на то, что документ по ссылке представляет исторический
интерес. Ссылка может указывать на коллекцию записей, документов и других
материалов.
author ссылка на страницу об авторе документа или на страницу с контактными
данными автора.
bookmark ссылка на ближайшего предка статьи, являющегося связующим звеном,
или на раздел статьи, наиболее тесно связанных с элементом, если нет предка.
external используется для указания того, что страница на которую ведет ссылка н
являются частью данного сайта.
first указывает ссылку, ведущую на первый документ из последовательности
документов.
help ссылка на документ со справкой.
icon определяет путь к иконке, которая будет использована для текущего документ
last указывает ссылку, ведущую на последний документ в последовательности
документов.
license ссылка на сведения об авторских правах для документа.
next указывает, что этот документ является частью серии, и что ссылка ведет на
следующий документ в этой серии.
<link rel="next" href="/next.html" type="text/html"
title="Следующая страница">
nofollow указывает на то, что ссылка не одобрена автором страницы или что ссылк
носит коммерческий характер.
noreferrer указывает на то, что заголовок запроса клиента,
содержащий url источника запроса, не должен передаваться при переходе по ссылк
pingback указывает адрес пингбэк-сервера, что дает возможность для блога
автоматически оповещать сайты, ссылающиеся на него.
prefetch указывает, что следует заранее кэшировать файл, на который ведет
ссылка.
prev указывает, что этот документ является частью серии, и что ссылка ведет на
предыдущий документ в этой серии.
<link rel="prev" href="/next.html" type="text/html"
title="Предыдущая страница">
search указывает, что ссылаемый документ содержит интерфейс поиска и
связанных с ним ресурсов.
sidebar указывает, что ссылаемый документ, если это возможно, будет показан в
дополнительном контексте браузера, и некоторые браузеры при щелчке по
гиперссылке открывают окно для добавления ссылки в панель закладок.
stylesheet ссылка на внешний файл, который будет использоваться в качестве
таблицы стилей для данного документа.
tag указывает на то, что метка, на которую ведет гиперссылка, относится к данному
документу.
up указывает, что страница является частью иерархической структуры, и что
гиперссылка ведет на более высокий уровень ресурса в структуре.
Указывает размер иконок для визуального отображения.
Атрибут sizes используется только совместно с rel="icon" , и может принимать
следующий значения:
ширинахвысота — определяет список размеров, разделенных пробелами, каждый
sizes размер должен быть в формате — ширинахвысота (размеры иконки задаются в
пикселях), например:
<link rel="icon" href="favicon.png" sizes="16x16 32х32"
type="image/png"> ;
any — иконка может масштабироваться до любого размера.
title Определяет заголовок ссылки или название набора альтернативных таблиц стилей.
Значение атрибута — текст.
Определяет MIME-тип документа, на который идет ссылка. В данном случае он
type
принимает значение "text/css" .
1.2.5. Элемент <script>
Элемент <script> позволяет присоединять к документу различные сценарии.

Текст сценария может располагаться либо внутри этого элемента, либо во
внешнем файле. Если текст сценария расположен во внешнем файле, то он
подключается с помощью атрибутов элемента.
ТАБЛИЦА 5. АТРИБУТЫ ЭЛЕМЕНТА <SCRIPT

async Атрибут указывает на то, что сценарий будет выполняться асинхронно с остальной
частью страницы (сценарий начнет выполняться одновременно с загрузкой страницы
charset Определяет кодировку символов
Определяет, будет ли использоваться CORS при загрузке внешних скриптов (с

использованием атрибута src).
anonymous — перед загрузкой скрипта в кросс-доменный запрос браузер
автоматически добавляет заголовок Origin, при этом не передаются параметры доступ
(cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). Если
в ответе сервера отсутствует заголовок Access-Control-Allow-Origin: имя
crossorigin
домена , скрипт не будет загружен.
use-credentials — перед загрузкой скрипта в кросс-доменный запрос браузер
автоматически добавляет заголовок Origin с указанием параметров доступа (cookie,
SSL-сертификат или пары логин/пароль). Если в ответе сервера отсутствует
заголовок Access-Control-Allow-Credentials: true , скрипт не будет
загружен.
defer Интерпретация сценариев откладывается до окончания отображения документа на

устройстве пользователя.
Обеспечивает безопасность, защищая от атак с внедрением межсайтового скриптинга
(XSS, cross site scripting). Устанавливает правила использования встроенных скриптов
nonce с помощью nonce-значений и хэшей. Во время рендеринга страницы браузер для
каждого инлайн-скрипта вычисляет хэши и сравнивает с перечисленными в CSP.
Загрузка с ресурсов, не входящих в «белый список», блокируется.
Указывает на месторасположение файла со сценарием, значение атрибута —
src
это url файла, содержащего JavaScript-программу.
type Используются для объявления языка сценария, использованного при составлении

содержимого элемента.
1.3. Элемент <body>
В разделе <body> располагается все содержимое документа.
ТАБЛИЦА 5. АТРИБУТЫ ЭЛЕМЕН
onafterprint Событие, срабатывающее после отправки страницы на печать или после закрытия
печати.
onbeforeprint Событие, срабатывающее перед отправкой страницы на печать.
Событие срабатывает, когда посетитель инициировал переход на другую страниц

onbeforeunload нажал «закрыть окно». Позволяет отображать сообщение в диалоговом окне подт
чтобы сообщить пользователю, хочет ли он остаться или покинуть текущую стран
onhashchange Событие срабатывает, когда меняется hash-часть URL, например, когда пользоват
перейдет с
адреса example.domain/test.aspx#page1 на example.domain/test.as
onmessage Событие происходит, когда сообщение получено через источник события.
onoffline Событие вызывается браузером в том случае, когда браузер определит, что соеди
интернет пропало.
ononline Событие вызывается браузером в том случае, когда соединение с интернет возобн
onpagehide Событие происходит, когда пользователь покидает страницу посредством навига

например, нажав на ссылку, обновив страницу, заполнив форму и т.д.
onpageshow Событие происходит, когда пользователь переходит на веб-страницу, после собы
onunload Событие срабатывает если страница не загрузилась по каким-либо причинам, либ

закрытии окна браузера.
1.2. HTML-теги
Опубликовано: 27 июня 2014Обновлено: 1 января 2021171 Comments
HTML-теги — основа языка HTML. Теги используются для разграничения начала и

конца элементов в разметке.
Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый
HTML-элемент обозначается начальным (открывающим) и конечным
(закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега.
Все HTML-элементы делятся на пять типов:
o пустые
элементы — <area> , <base> , <br> , <col> , <embed> , <hr> , <img> , <in
put> , <link> , <menuitem> , <meta> , <param> , <source> , <track> , <wb
r> ;
o элементы с неформатированным текстом — <script> , <style> ;
o элементы, выводящие неформатированный
текст — <textarea> , <title> ;
o элементы из другого пространства имён — MathML и SVG;
o обычные элементы — все остальные элементы.
В таблице приведен полный список элементов, поддерживаемых HTML4 и HTML5.
Экспериментальные и устаревшие теги исключены. Элементы, добавленные в
спецификацию HTML5, выделены бирюзовым цветом.
Полный список HTML-элементов
ТАБЛИЦА 1. HTML-ЭЛЕМЕНТ
Тег Описание
 Используется для добавления комментариев.
<!DOCTYPE> Объявляет тип документа и предоставляет основную информацию для браузера —

его язык и версия.
<a> Создаёт гипертекстовые ссылки.
Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с

<abbr>
помощью атрибута title .
<address> Задает контактные данные автора/владельца документа или статьи. Отображается в

браузере курсивом.
Представляет собой гиперссылку с текстом, соответствующей определенной област
<area> на карте-изображении или активную область внутри карты-изображения. Всегда
вложен внутрь тега <map> .
<article> Раздел контента, который образует независимую часть документа или сайта,
например, статья в журнале, запись в блоге, комментарий.
<aside> Представляет контент страницы, который имеет косвенное отношение к основному

контенту страницы/сайта.
<audio> Загружает звуковой контент на веб-страницу.
<b> Задает полужирное начертание отрывка текста, не придавая акцент или важность
выделенному.
Задает базовый адрес (URL), относительно которого вычисляются все
<base> относительные адреса. Это поможет избежать проблем при переносе страницы в
другое место, так как все ссылки будут работать, как и прежде.
<bdi> Изолирует отрывок текста, написанный на языке, в котором чтение текста

происходит справа налево, от остального текста.
Отображает текст в направлении, указанном в атрибуте dir , переопределяя

<bdo>
текущее направление написания текста.
<blockquote> Выделяет текст как цитату, применяется для описания больших цитат.
<body> Представляет тело документа (содержимое, не относящееся к метаданным

документа).
<br> Перенос текста на новую строку.
<button> Создает интерактивную кнопку. Внутрь тега можно поместить содержимое — текс
или изображение.
Холст-контейнер для динамического отображения изображений, таких как простые
<canvas> изображения, диаграммы, графики и т.п. Для рисования используется скриптовый
язык JavaScript.
<caption> Добавляет подпись к таблице. Вставляется сразу после тега <table> .
<cite> Используется для указания источника цитирования. Отображается курсивом.
Представляет фрагмент программного кода, отображается шрифтом

<code>
семейства monospace .
<col> Выбирает для форматирования один или несколько столбцов таблицы, не

содержащих информацию одного типа.
<colgroup> Создает структурную группу столбцов, выделяющую множество логически

однородных ячеек.
Элемент используется для связывания значения атрибута value , которое

<data> представлено в машиночитаемом формате и может быть обработано компьютером,
содержимым тега.
Элемент-контейнер для выпадающего списка элемента <input> . Варианты

<datalist>
значений помещаются в элементы <option> .
<dd> Используется для описания термина из тега <dt> .
<del> Помечает текст как удаленный, перечёркивая его.
Создаёт интерактивный виджет, который пользователь может открыть или закрыть

<details> Представляет собой контейнер для контента, видимый заголовок виджета
помещается в тег <summary> .
<dfn> Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, долже
содержать расшифровку этого термина.
Интерактивный элемент, с которым взаимодействует пользователь для выполнения
<dialog> задачи, например, диалоговое окно, инспектор или окно. Без атрибута open не
виден для пользователя.
<div> Тег-контейнер для разделов HTML-документа. Используется для группировки

блочных элементов с целью форматирования стилями.
<dl> Тег-контейнер, внутри которого находятся термин и его описание.
<dt> Используется для задания термина.
<em> Выделяет важные фрагменты текста, отображая их курсивом.
<embed> Тег-контейнер для встраивания внешнего интерактивного контента или плагина.
<fieldset> Группирует связанные элементы в форме, рисуя рамку вокруг них.
<figcaption> Заголовок/подпись для элемента <figure> .
<figure> Самодостаточный тег-контейнер для такого контента как иллюстрации, диаграммы

фотографии, примеры кода, обычно с подписью.
<footer> Определяет завершающую область (нижний колонтитул) документа или раздела.
Форма для сбора и отправки на сервер информации от пользователей. Не работает

<form>
без атрибута action .
<h1-h6> Создают заголовки шести уровней для связанных с ними разделов.
Элемент-контейнер для метаданных HTML-документа, таких

<head>
как <title> , <meta> , <script> , <link> , <style> .
<header> Секция для вводной информации сайта или группы навигационных ссылок. Может
содержать один или несколько заголовков, логотип, информацию об авторе.
<hr> Горизонтальная линия для тематического разделения параграфов.
<html> Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ.

Является контейнером для всех остальных html-элементов.
<i> Выделяет отрывок текста курсивом, не придавая ему дополнительный акцент.
<iframe> Создает встроенный фрейм, загружая в текущий HTML-документ другой документ
Встраивает изображения в HTML-документ с помощью атрибута src , значением

<img>
которого является адрес встраиваемого изображения.
<input> Создает многофункциональные поля формы, в которые пользователь может вводит

данные.
<ins> Выделяет текст подчеркиванием. Применяется для выделения изменений, вносимы

в документ.
<kbd> Выделяет текст, который должен быть введён пользователем с клавиатуры,

шрифтом семейства monospace.
<label> Добавляет текстовую метку для элемента <input> .
<legend> Заголовок элементов формы, сгруппированных с помощью элемента <fieldset>
<li> Элемент маркированного или нумерованного списка.
<link> Определяет отношения между документом и внешним ресурсом. Также

используется для подключения внешних таблиц стилей.
Контейнер для основного уникального содержимого документа. На одной странице
<main>
должно быть не более одного элемента <main> .
Создаёт активные области на карте-изображении. Является контейнером для

<map>
элементов <area> .
<mark> Выделяет фрагменты текста, помечая их желтым фоном.
Используется для хранения дополнительной информации о странице. Эту

информацию используют браузеры для обработки страницы, а поисковые системы
<meta>
— для ее индексации. В блоке <head> может быть несколько тегов <meta> , так
как в зависимости от используемых атрибутов они несут разную информацию.
<meter> Индикатор измерения в заданном диапазоне.

<nav> Раздел документа, содержащий навигационные ссылки по сайту.
<noscript> Определяет секцию, не поддерживающую сценарий (скрипт).
Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты,

ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий
<object> HTML-документ. Для передачи параметров встраиваемого плагина используется
тег <param> .
<ol> Упорядоченный нумерованный список. Нумерация может быть числовая или

алфавитная.
<optgroup> Контейнер с заголовком для группы элементов <option> .
Определяет вариант/опцию для выбора в раскрывающемся

<option>
списке <select> , <optgroup> или <datalist> .
<output> Поле для вывода результата вычисления, рассчитанного с помощью скрипта.
<p> Параграфы в тексте.
Определяет параметры для плагинов, встраиваемых с помощью

<param>
элемента <object> .
Элемент-контейнер, содержащий один элемент <img> и ноль или несколько

<picture> элементов <source> . Сам по себе ничего не отображает. Дает возможность
браузеру выбирать наиболее подходящее изображение.
Выводит текст без форматирования, с сохранением пробелов и переносов текста.
<pre> Может быть использован для отображения компьютерного кода, сообщения
электронной почты и т.д.
<progress> Индикатор выполнения задачи любого рода.
<q> Определяет краткую цитату.
<ruby> Контейнер для Восточно-Азиатских символов и их расшифровки.
<rb> Определяет вложенный в него текст как базовый компонент аннотации.
Добавляет краткую характеристику сверху или снизу от символов, заключенных в

<rt>
элементе <ruby> , выводится уменьшенным шрифтом.
<rtc> Отмечает вложенный в него текст как дополнительную аннотацию.
<rp> Выводит альтернативный текст в случае если браузер не поддерживает элемент

<ruby>.
<s> Отображает текст, не являющийся актуальным, перечеркнутым.
Используется для вывода текста, представляющего результат выполнения

<samp> программного кода или скрипта, а также системные сообщения. Отображается
моноширинным шрифтом.
Используется для определения сценария на стороне клиента (обычно JavaScript).
<script> Содержит либо текст скрипта, либо указывает на внешний файл сценария с
помощью атрибута src .
<section> Определяет логическую область (раздел) страницы, обычно с заголовком.
Элемент управления, позволяющий выбирать значения из предложенного

<select>
множества. Варианты значений помещаются в <option> .
<small> Отображает текст шрифтом меньшего размера.
Указывает местоположение и тип альтернативных медиаресурсов для

<source>
элементов <picture> , <video> , <audio> .
<span> Контейнер для строчных элементов. Можно использовать для форматирования

отрывков текста, например, выделения цветом отдельных слов.
<strong> Расставляет акценты в тексте, выделяя полужирным.
<style> Подключает встраиваемые таблицы стилей.
<sub> Задает подстрочное написание символов, например, индекса элемента в химически

формулах.
Создаёт видимый заголовок для тега <details> . Отображается с закрашенным

<summary>
треугольником, кликнув по которому можно просмотреть подробности заголовка.
<sup> Задает надстрочное написание символов.
<table> Тег для создания таблицы.
<tbody> Определяет тело таблицы.
<td> Создает ячейку таблицы.
Используется для объявления фрагментов HTML-кода, которые могут быть

<template> клонированы и вставлены в документ скриптом. Содержимое тега не является его
дочерним элементом.
<textarea> Создает большие поля для ввода текста.
<tfoot> Определяет нижний колонтитул таблицы.
<th> Создает заголовок ячейки таблицы.
<thead> Определяет заголовок таблицы.
<time> Определяет дату/время.
Заголовок HTML-документа, отображаемый в верхней части строки заголовка

<title> браузера. Также может отображаться в результатах поиска, поэтому это следует
принимать во внимание предоставление названия.
<tr> Создает строку таблицы.
<track> Добавляет субтитры для элементов <audio> и <video> .
<u> Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
<ul> Создает маркированный список.

<var> Выделяет переменные из программ, отображая их курсивом.
<video> Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM,

Ogg.
<wbr> Указывает браузеру возможное место разрыва длинной строки.
Таблица-шпаргалка с тегами
Для удобства пользования я сгруппировала теги по тематическим разделам,
добавив значения свойства display для каждого тега. Чтобы перейти к таблице,
кликните по рисунку.
РИС. 1. ТЕМАТИЧЕСКАЯ ТАБЛИЦА ТЕГОВ
1.3. HTML-атрибуты
Опубликовано: 16 июля 2014Обновлено: 26 февраля 202043 Comments
HTML-атрибуты сообщают браузеру, каким образом должен отображаться тот или

иной элемент страницы. Атрибуты позволяют сделать более разнообразными
внешний вид информации, добавляемой с помощью одинаковых тегов.
Значение атрибута заключается в кавычки "" . Названия и значения атрибутов не
чувствительны к регистру, но, тем не менее, рекомендуется набирать их в
нижнем регистре.
Глобальные атрибуты
Глобальные атрибуты, приведенные в таблице ниже, могут быть использованы
для любого HTML-элемента, хотя некоторые из них могут не оказывать на
элементы никакого влияния.
ТАБЛИЦА 1. ГЛОБАЛЬНЫЕ АТРИ

Генерирует сочетания клавиш для доступа к текущему элементу. Состоит из раз
пробелами списка символов. Браузер в первую очередь выбирает те клавиши, ко
accesskey существуют на раскладке клавиатуры. Применяется к следующим
элементам: <a> , <area> , <button> , <input> , <label> , <legend> , <
Принимаемые значения: перечень названий клавиш.
Определяет имя класса для элемента (используется для определения класса в таб
class стилей).
Принимаемые значения: имя класса.
Определяет, может ли пользователь редактировать содержимое (контент). Позво
contenteditable преобразовать любое поле HTML в редактируемый элемент.
Принимаемые значения: true/false .
Определяет направление текста контента в элементах <bdo> и <bdi> .

dir
Принимаемые значения: ltr/rtl/auto .
Определяет, может ли пользователь перетащить элемент.

draggable
Принимаемые значения: true/false/auto .
hidden Указывает на то, что элемент должен быть скрыт.

Принимаемые значения: hidden .
Определяет уникальный идентификатор элемента.

id
Принимаемые значения: id — идентификатор элемента.
lang Определяет код языка содержимого (контента) в элементе.

Принимаемые значения: код языка.
Указывает, подлежит ли содержимое элемента проверке орфографии и граммати
spellcheck
Принимаемые значения: true/false .
style Указывает на код CSS, применяемую для оформления элемента.

Принимаемые значения: код CSS.
tabindex Определяет порядок перехода к элементу при помощи клавиши TAB.

Принимаемые значения: порядковый номер.
Определяет дополнительную информацию об элементе, задавая всплывающую п
title для страницы.
Принимаемые значения: текст.
Разрешает или запрещает перевод текста внутри элемента.
translate
Принимаемые значения: yes/no .
1.4. HTML-текст
Опубликовано: 20 марта 2014Обновлено: 23 декабря 202039 Comments
HTML- текст представлен в спецификации элементами для форматирования и

группировки текста. Данные элементы являются контейнерами для текста и не
имеют визуального отображения.
Элементы для форматирования текста несут смысловую нагрузку и обычно задают
для текста, заключенного внутрь, стилевое оформление, например, выделяют
текст жирным начертанием или отображают его шрифтом другого семейства
(свойство font-family ).
Грамотно отформатированный текст дает понять поисковым системам, какие
слова несут важную смысловую нагрузку, по каким из них предпочтительно
ранжировать веб-страницу в поисковой выдаче. Вся текстовая информация,
отображаемая на сайте, размещается внутри элемента <body> .
HTML-элементы для текста
 1. Заголовки: <h1...h6>
 2. Форматирование текста: <b>, <em>, <i>, <small>, <strong>, <sub>,
<sup>, <ins>, <del>, <mark>
 3. Ввод «компьютерного» текста: <code>, <kbd>, <samp>, <var>, <pre>
 4. Оформление цитат и определений: <abbr>, <bdo>, <blockquote>, <q>,
<cite>, <dfn>
 5. Абзацы, средства переноса текста: <p>, <br>, <hr>
1. HTML-элементы для заголовков
Заголовки являются важными элементами веб-страницы, они упорядочивают
текст, формируя его визуальную структуру. Элементы <h1>...<h6> должны
использоваться только для выделения заголовков нового раздела или подраздела.
При использовании заголовков необходимо учитывать их иерархию, т.е.
за <h1> должен следовать <h2> и т.д. Также не рекомендуется вкладывать в
заголовки другие элементы.
Заголовок 1-го уровня

ФИГУРА. 1. ЭЛЕМЕНТЫ ДЛЯ ЗАГОЛОВКОВ HTML-ДОКУМЕНТА

1.1. Элемент <h1>
Заголовок самого верхнего уровня, на странице рекомендуется использовать

только один раз, по возможности частично дублируя заглавие страницы.
Элемент <h1> должен быть уникальным для каждой страницы сайта.
Рекомендуется прописывать в начале статьи, используя ключевое слово в тексте
заголовка. Размер шрифта в браузере равен 2em, верхний и нижний отступ по
умолчанию 0.67em.
Представляет подзаголовки элемента <h1> . Размер шрифта в браузере

равен 1.5em, верхний и нижний отступ по умолчанию 0.83em.
Показывает подзаголовки элемента <h2> . Размер шрифта в браузере

равен 1.17em, верхний и нижний отступ по умолчанию 1em.
1.4. Элементы <h4>, <h5>, <h6>
Обозначают подзаголовки четвёртого, пятого и шестого уровня. Размер шрифта в
браузере равен 1em / 0.83em / 0.67em, верхний и нижний отступ по
умолчанию 1.33em / 1.67em / 2.33em соответственно.
Для всех элементов доступны глобальные атрибуты.
2. Элементы для форматирования текста
2.1. Элемент <b>
Задаёт полужирное начертания шрифта. Выделяет текст без акцента на его

важность.

2.2. Элемент <em>
Отображает шрифт курсивом, придавая тексту значимость.

2.3. Элемент <i>
Отображает шрифт курсивом.

2.4. Элемент <small>
Уменьшает размер шрифта на единицу по отношению к обычному тексту.

2.5. Элемент <strong>
Задаёт полужирное начертание шрифта, относится к тегам логической разметки,

указывая браузеру на важность текста.

2.6. Элемент <sub>
Используется для создания нижних индексов. Сдвигает текст ниже уровня строки,
уменьшая его размер.

2.7. Элемент <sup>
Используется для создания степеней. Сдвигает текст выше уровня строки,

уменьшая его размер.

2.8. Элемент <ins>
Выделяет текст в новой версии документа, подчёркивая его.
Для элемента доступны атрибуты cite и datetime .

2.9. Элемент <del>
Перечёркивает текст. Используется для выделения текста, удаленного из
документа.
Для элемента доступны атрибуты cite и datetime .

2.10. Элемент <mark>
Применяется для выделения фрагментов текста в справочных целях, окрашивая

блок символов желтым цветом.

3. Элементы для ввода «компьютерного» текста
3.1. Элемент <code>
Служит для выделения фрагментов программного кода. Отображает текст


3.2. Элемент <kbd>
Отмечает фрагмент как вводимый пользователем с клавиатуры. Отображает текст


3.3. Элемент <samp>
Применяется для выделения результата, полученного в ходе выполнения

программы. Отображает текст моноширинным шрифтом.

3.4. Элемент <var>
Выделяет имена переменных, отображая текст курсивом.

3.5. Элемент <pre>
Позволяет вывести текст на экран, сохранив изначальное форматирование.

Пробелы и переносы строк при этом не удаляются.

4. Элементы для оформления цитат и определений
4.1. Элемент <abbr>
Применяется для форматирования аббревиатур. Браузером обычно

подчеркивается пунктирной линией. Расшифровка сокращения осуществляется с
помощью атрибута title , она появляется при наведении курсора мыши на текст.
4.2. Элемент <bdo>
Используется для изменения текущего направления текста.

Для элемента доступен атрибут dir .
4.3. Элемент <blockquote>
Выделяет цитаты внутри документа, выделяя его отступами и переносами строк.
Для элемента доступен атрибут cite .

4.4. Элемент <q>
Используется для выделения коротких цитат. Браузерами заключается в кавычки.
Для элемента доступен атрибут cite .

4.5. Элемент <cite>
Применяется для выделения цитат, названий произведений, сносок на другие

документы.

4.6. Элемент <dfn>
Позволяет выделить текст как определение. Несмотря на наличие данного

элемента, рекомендуется выделять текст силами CSS.
Для элемента доступен атрибут title .

5. Абзацы, средства переноса текста
5.1. Элемент <p>
Разбивает текст на отдельные абзацы, отделяя друг от друга пустой строкой.

Браузер автоматически добавляет верхнее и нижнее внешнее поле margin ,
равное 1em , при этом поля соседних абзацев «схлопываются».
5.2. Элемент <br>
Переносит текст на следующую строку, создавая разрыв строки.

5.3. Элемент <hr>
Используется для разделения контента на веб-странице. Отображается в виде

горизонтальной линии.

Публикации по этой теме:

2.31. CSS3-способы письма
2.29. CSS3-шрифты
Красивое оформление цитат на сайте

Красивые заголовки
Градиент для текста

Идеи для оформления заголовков на сайте
Красивые шрифты от Google Web Fonts
2.18. CSS3-оформление текста

2.6. CSS-шрифты
2.5. CSS-текст
HTML-атрибуты
1.5. HTML-ссылки
Опубликовано: 10 июля 2014Обновлено: 1 января 202135 Comments
HTML-ссылки создаются с помощью элементов <a> , <area> и <link> . Ссылки

представляют собой связь между двумя ресурсами, одним из которых является
текущий документ.
Ссылки можно поделить на две категории:
o ссылки на внешние ресурсы — создаются с помощью элемента <link> и

используются для расширения возможностей текущего документа при
обработке браузером;
o гиперссылки — ссылки на другие ресурсы, которые пользователь может
посетить или загрузить.
Как сделать гиперссылки на сайте
 1. Структура ссылки
 2. Абсолютный и относительный путь
 3. Якорь
 4. Как сделать изображение-ссылку
 5. Как сделать ссылку на телефонный номер, скайп или адрес электронной почты
 6. Атрибуты ссылок
1. Структура ссылки
Гиперссылки создаются с помощью элемента <a></a> . Внутрь помещается текст,
который будет отображаться на веб-странице. Текст ссылки отображается в
браузере с подчёркиванием, цвет шрифта — синий, при наведении на ссылку
курсор мыши меняет вид.
Обязательным параметром элемента <a> является атрибут href , который
задает URl-адрес веб-страницы.
<a href="http://site.ru">указатель ссылки</a>
HTML
Ссылка состоит из двух частей — указателя и адресной части. Указатель
ссылки представляет собой фрагмент текста или изображение, видимые для
пользователя. Адресная часть ссылки пользователю не видна, она представляет
собой адрес ресурса, к которому необходимо перейти.
Адресная часть ссылки состоит из URl. URl (Uniform Resource Locator) —
унифицированный адрес ресурса. При создании адресов для разделения слов
между собой рекомендуется использовать дефис, а не символ подчёркивания. В
общем виде URl имеющий следующий формат:
метод доступа://имя сервера:порт/путь
HTML
Метод доступа, или протокол, осуществляет обмен данными между рабочими
станциями в разных сетях. Наиболее распространенные протоколы передачи
данных:
file обеспечивает чтение файла с локального диска:
file:/gallery/pictures/summer.html
HTML
http предоставляет доступ к веб-странице по протоколу HTTP:
http://site.ru/
HTML
https — специальная реализация протокола HTTP, использующая шифрование
(как правило, SSL или TLS):
https://site.ru/
HTML
ftp осуществляет запрос к FTP-серверу на получение файла:
ftp://pgu/directory/library
HTML
mailto запускает сеанс почтовой связи с указанным адресатом и хостом:
mailto: nika@gmail.com
HTML
Имя сервера описывает полное имя машины в сети, например, site.ru . Если
имя сервера не указано, то ссылка считается локальной, т.е. она относится к той
же машине, на которой находится HTML-документ, содержащий ссылку.
Номер порта ТСР, на котором функционирует веб-сервер. Представляет собой
число, которое необходимо указывать, если метод требует номер порта
(отдельные сервера могут иметь свой отличительный номер порта). Если порт не
указан, по умолчанию используется порт 80. Стандартными портами являются:
o 21 — FTP
o 23 — Telnet
o 70 — Gopher
o 80 — HTTP
Путь содержит имя папки, в которой находится файл.
2. Абсолютный и относительный путь
Когда в ссылке указывается только имя файла, браузер предполагает, что файл
находится в той же папке, что и документ, содержащий гиперссылку. На практике
веб-сайты содержат сотни документов, которые размещают в отдельные папки,
чтобы ими было легче управлять. Чтобы создать ссылку на файл, находящийся
вне папки, содержащей текущий документ, необходимо указать расположение
файла или путь. HTML поддерживает два вида пути: абсолютный и
относительный.
РИС. 1. ПРИМЕР
СТРУКТУРЫ ПАПОК
2.1. Абсолютный путь
Абсолютный путь указывает точное местоположение файла в пределах всей

структуры папок на компьютере (сервере). Абсолютный путь к файлу даёт доступ
к файлу со сторонних ресурсов и содержит следующие компоненты:
o протокол, например, http (опционально);
o домен (доменное имя или IP-адрес компьютера);
o папка (имя папки, указывающей путь к файлу);
o файл (имя файла).
Существует два вида записи абсолютного пути — с указанием протокола (полный)
и без него:
http://site.ru/pages/tips/tips1.html
//site.ru/pages/tips/tips1.html
HTML
Когда вы ссылаетесь на страницу на другом сайте, вы можете использовать
только полный абсолютный путь.
Если файл находится в корневой папке, то путь к файлу будет следующим:
http://site.ru/index.html
HTML
При отсутствии имени файла будет загружаться веб-страница, которая задана по
умолчанию в настройках веб-сервера (так называемый индексный файл).
http://site.ru/
HTML
Обычно в качестве индексного файла выступает документ с именем index.html .
Наличие завершающего слеша / означает, что обращение идет к папке, если его
нет — напрямую к файлу.
2.2. Относительный путь
Относительный путь описывает путь к указанному документу относительно

текущего. Путь определяется с учётом местоположения веб-страницы, на которой
находится ссылка. Относительные ссылки используются при создании ссылок на
другие документы на одном и том же сайте. Когда браузер не находит в ссылке
протокол http:// , он выполняет поиск указанного документа на том же сервере.
Относительный путь содержит следующие компоненты:
o папка (имя папки, указывающей путь к файлу);

o файл (имя файла).
Путь для относительных ссылок имеет три специальных обозначения:
o / указывает на корневую директорию и говорит о том, что нужно начать

путь от корневого каталога документов и идти вниз до следующей папки
o ./ указывает на текущую папку
o ../ подняться на одну папку (директорию) выше
Главное отличие относительного пути от абсолютного в том, что относительный
путь не содержит имени корневой папки и родительских папок, что делает адрес
короче, и в случае переезда с одного домена на другой не нужно прописывать
новый абсолютный адрес. Но если сторонний ресурс будет ссылаться например,
на ваши изображения с относительными адресами, то они не будут отображаться
на другом сайте.
3. Якоря
Якоря, или внутренние ссылки, создают переходы на различные разделы текущей
веб-страницы, позволяя быстро перемещаться между разделами. Это оказывается
очень удобным в случае, когда на странице слишком много текста. Внутренние
ссылки также создаются при помощи элемента <a> с разницей в том, что
атрибут href содержит имя указателя — так называемый якорь, а не URl-адрес.
Перед именем указателя всегда ставится знак # .
Следующая разметка создаст оглавление с быстрыми переходами на
соответствующие разделы:
<h1>Времена года</h1>
<h2>Оглавление</h2>
<a href="#p1">Лето</a> 
<a href="#p2">Осень</a>
<a href="#p3">Зима</a>
<a href="#p4">Весна</a>
<p id="p1">...</p> 
<p id="p2">...</p>
<p id="p3">...</p>
<p id="p4">...</p>
HTML
Если нужно сделать ссылку с одной страницы сайта на определенный
раздел другой страницы, то необходимо задать id для этого раздела страницы,
а затем добавить его к абсолютному адресу ссылки:
<th id="about-color">color</th>
<a href="https://html5book.ru/css-shrifty/#about-color" class="site"
target="_blank">color</a>
HTML
4. Как сделать изображение-ссылку
Чтобы сделать кликабельное изображение, необходимо поместить
элемент <img> внутрь элемента <a> . Чтобы ссылка открывалась в другом окне,
нужно добавить атрибут target="_blank" для ссылки.
<a href="http://www.fast-torrent.ru/film/gran-za-granyu-tv.html"
target="_blank"><img src="//html5book.ru/wp-
content/uploads/2014/07/Fringe.jpg" alt="Fringe"></a>
HTML
РИС. 2. ИЗОБРАЖЕНИЕ-ССЫЛКА
5. Как сделать ссылку на телефонный номер, скайп или адрес
электронной почты
У ссылок появились новые возможности — по клику можно не только переходить
на другие страницы и скачивать файлы, но и совершать звонки на телефоны,
отправлять сообщения или звонить по скайпу.
ссылка на телефонный номер

<a href="tel:+74951234567">+7 (495) 123-45-67</a>
ссылка на адрес электронной почты

<a href="mailto:example@mail.ru">example@mail.ru</a>
ссылка на скайп (позвонить)

<a href="skype:имя-пользователя?call">Skype</a>
ссылка на скайп (открыть чат)

<a href="skype:имя-пользователя?chat">Skype</a>
ссылка на скайп (добавить в список контактов)

<a href="skype:имя-пользователя?add">Skype</a>
ссылка на скайп (отправить файл)

<a href="skype:имя-пользователя?sendfile">Skype</a>
HTML
6. Атрибуты ссылок
Элемент <a> поддерживает глобальные атрибуты и собственные.
ТАБЛИЦА 1. АТРИБУТЫ ЭЛЕМЕНТА <A

Дополняет атрибут href и сообщает браузеру, что ресурс должен быть загружен в
момент, когда пользователь щелкает по ссылке, вместо того, чтобы, например,
предварительно открыть его (как PDF-файл). Задавая имя для атрибута, мы таким образом
задаем имя загружаемому объекту. Разрешается использовать атрибут без указания его
значения:
<a href="/images/logo.png" download><img src="/images/logo.png"
download
alt="logo"></a>
<a href="/images/logo.png" download="logo"><img
src="/images/logo.png" alt="logo"></a>
<a href="files/20022014.pdf" download=" Отчет Февраль
2014.pdf">Загрузить отчет за Февраль 2014</a>
href Значением атрибута является URL-адрес документа, на который указывается ссылка.
Определяет язык связанного веб-документа. Используется только вместе с

атрибутом href . Принимаемые значения — аббревиатура, состоящая из пары букв,
hreflang
обозначающих код языка, например:
<a href="http://www.anysite.ru" hreflang="en">Anysite</a>
media Определяет, для каких типов устройств файл будет оптимизирован. Значением может быт
любой медиа-запрос.
ping Отслеживает URL-адреса ресурсов, по которым переходил пользователь.
rel Дополняет атрибут href информацией об отношении между текущим и связанным

документом. Принимаемые значения:
alternate — ссылка на альтернативную версию документа (например, печатную форм
страницы, перевод или зеркало).
author — ссылка на автора документа.
bookmark — постоянный URL-адрес, используемый для закладок.
help — ссылка на справку.
license — ссылка на информацию об авторских правах на данный веб-документ.
next/prev — указывает связь между отдельными URL. Благодаря этой разметке Googl
может определить, что содержание данных страниц связано в логической
последовательности.
nofollow — запрещает поисковой системе переходить по ссылкам на данной странице
или по конкретной ссылке.
noreferrer — указывает, что переходе по ссылке браузер не должен посылать
заголовок HTTP-запроса (Referrer), в который записывается информация о том, с какой
страницы пришел посетитель сайта.
prefetch — указывает, что целевой документ должен быть кэширован, т.е. браузер в
фоновом режиме загружает содержимое страницы к себе в кэш.
search — указывает, что целевой документ содержит инструмент для поиска.
tag — указывает ключевое слово для текущего документа.
Указывает на то, в каком окне должен открываться документ, к которому ведет ссылка.
Принимает следующие значения:
_self — страница загружается в текущее окно;
target _blank — страница открывается в новом окне браузера;
_parent — страница загружается во фрейм-родитель;
_top — страница загружается в полное окно браузера.
type Указывает MIME-тип файлов ссылки, т.е. расширение файла, носит больше справочную

информацию.
Красивые кнопки для сайта. Часть 4

Красивые кнопки для сайта

1.6. HTML-изображения
Опубликовано: 30 июля 2014Обновлено: 1 января 202137 Comments
HTML-изображения добавляются на веб-страницы с помощью элемента <img> .

Использование графики делает веб-страницы визуально привлекательнее.
Изображения помогают лучше передать суть и содержание веб-документа.
Элементы <map> и <area> позволяют создавать карты-изображения с
активными областями.
Вставка изображений в HTML-документ
 1. Элемент <img>
 1.1. Адрес изображения
 1.2. Размеры изображения
 1.3. Форматы графических файлов
 2. Элемент <map>
 3. Элемент <area>
 4. Пример создания карты-изображения
1. Элемент <img>
Элемент <img> представляет изображение и его резервный контент, который
добавляется с помощью атрибута alt . Так как элемент <img> является
строчным, то рекомендуется располагать его внутри блочного элемента,
например, <p> или <div> .
Элемент <img> имеет обязательный атрибут src , значением которого является
абсолютный или относительный путь к изображению:
<img src="image.png" alt="Пример кода">
HTML
Для элемента <img> доступны следующие атрибуты:
ТАБЛИЦА 1. АТРИБУТЫ ЭЛЕМЕНТА <IMG

Атрибут alt добавляет альтернативный текст для изображения. Выводится на месте
alt появления изображения до его загрузки или при отключенной графике, а также
выводится всплывающей подсказкой при наведении курсора мыши на изображение.
Синтаксис: alt="описание изображения" .
Атрибут crossorigin позволяет загружать изображения с ресурсов другого домен

с помощью CORS-запросов. Изображения, загруженные в холст с помощью CORS-
запросов, могут быть использованы повторно. Допускаемые значения:
anonymous — Cross-origin запрос выполняется с помощью HTTP-заголовка, при
crossorigin этом учетные данные не передаются. Если сервер не даёт учетные данные серверу, с
которого запрашивается контент, то изображение будет испорчено и его
использование будет ограничено.
use-credentials — Cross-origin запрос выполняется с передачей учетных данных
Синтаксис: crossorigin="anonymous" .
Атрибут height задает высоту изображения в px .

height
Синтаксис: height="300" .
Атрибут ismap указывает на то, что картинка является частью изображения-карты,

расположенного на сервере (изображение-карта — изображение с интерактивными
областями). При нажатии на изображение-карту координаты передаются на сервер в
ismap виде строки запроса URL-адреса. Атрибут ismap допускается только в случае, если
элемент <img> является потомком элемента <a> с действительным
атрибутом href .
Синтаксис: ismap .
URL расширенного описания изображения, дополняющее атрибут alt .

longdesc
Синтаксис: longdesc="http://www.example.com/description.txt" .
Атрибут src задает путь к изображению.

src
Синтаксис: src="flower.jpg" .
Задаёт размер изображения в зависимости от параметров отображения. Работает
sizes только при заданном атрибуте srcset . Значением атрибута является одна или
несколько строк, указанных через запятую.
Создаёт список источников для изображения, которые будут выбраны, исходя из
разрешения экрана. Может использоваться вместе или вместо атрибута src .
Значением атрибута является одна или несколько строк, разделенных запятой.
<img src="flower.jpg"
srcset="
img/flower-mobile.jpg 320w,
img/flower-wide-mobile.jpg 480w,
srcset img/flower-tablet.jpg 768w,
img/flower-desktop.jpg 1024w,
img/flower-hires.jpg 1280w"
sizes="
(max-width: 20em) 30vw,
(max-width: 30em) 60vw,
(max-width: 40em) 90vw"
alt="Роза в моём саду">
HTML
Атрибут usemap определяет изображение в качестве карты-изображения. Значение

обязательно должно начинаться с символа # . Значение ассоциируется со значением
атрибута name или id элемента <map> и создает связь между
usemap
элементами <img> и <map> . Атрибут нельзя использовать, если
элемент <map> является потомком элемента <a> или <button> .
Синтаксис: usemap="#mymap" .
Атрибут width задает ширину изображения в px .

width
Синтаксис: width="500" .
1.1. Адрес изображения
Адрес изображения может быть указан полностью (абсолютный URL),

например: url(http://anysite.ru/images/anyphoto.png)
Или же через относительный путь от документа или корневого каталога сайта:
o url(../images/anyphoto.png) — относительный путь от документа,
o url(/images/anyphoto.png) — относительный путь от корневого
каталога.
Это интерпретируется следующим образом:
o ../ — означает подняться вверх на один уровень, к корневому каталогу,

o images/ — перейти к папке с изображениями,
o anyphoto.png — указывает на файл изображения.
1.2. Размеры изображения
Без задания размеров изображения рисунок отображается на странице в реальном

размере. Отредактировать размеры изображения можно с помощью
атрибутов width и height . Если будет задан только один из атрибутов, то
второй будет вычисляться автоматически для сохранения пропорций рисунка.
1.3. Форматы графических файлов
o Формат JPEG (Joint Photographic Experts Group). Изображения JPEG

идеальны для фотографий, они могут содержать миллионы различных цветов.
Сжимают изображения лучше GIF, но текст и большие площади со сплошным
цветом могут покрыться пятнами.
o Формат GIF (Graphics Interchange Format). Идеален для сжатия
изображений, в которых есть области со сплошным цветом, например,
логотипов. GIF-файлы позволяют установить один из цветов прозрачным,
благодаря чему фон веб-страницы может проявляться через часть
изображения. Также GIF-файлы могут включать в себя простую анимацию. GIF-
изображения содержат всего лишь 256 оттенков, из-за чего изображения
выглядят пятнистыми и нереалистичного цвета, как плакаты.
o Формат PNG (Portable Network Graphics). Включает в себя лучшие черты
GIF- и JPEG-форматов. Содержит 256 цветов и дает возможность сделать один
из цветов прозрачным, при этом сжимает изображения в меньший размер, чем
GIF-файл.
o Формат APNG (Animated Portable Network Graphics). Формат изображения,
основанный на формате PNG. Позволяет хранить анимацию, а также
поддерживает прозрачность.
o SVG (Scalable Vector Graphics). SVG-рисунок состоит из набора
геометрических фигур, описанных в формате XML: линия, эллипс,
многоугольник и т.п. Поддерживается как статичная, так и анимированная
графика. Набор функций включает в себя различные преобразования, альфа-
маски, эффекты фильтров, возможность использования шаблонов.
Изображения в формате SVG могут изменяться в размере без снижения
качества.
o Формат BMP (Bitmap Picture). Представляет собой несжатое (оригинальное)
растровое изображение, шаблоном которого является прямоугольная сетка
пикселей. Bitmap-файл состоит из заголовка, палитры и графических данных.
В заголовке хранится информация о графическом изображении и файле
(глубина пикселей, высота, ширина и количество цветов). Палитра указывается
только в тех Bitmap-файлах, которые содержат палитровые изображения (8 и
менее бит) и состоят не более чем из 256 элементов. Графические данные
представляют саму картинку. Глубина цвета в данном формате может быть 1,
2, 4, 8, 16, 24, 32, 48 бит на пиксель.
o Формат ICO (Windows icon). Формат хранения значков файлов в Microsoft
Windows. Также, Windows icon, используется как иконка на сайтах в интернете.
Именно картинка такого формата отображается рядом с адресом сайта или
закладкой в браузере. Один ICO-файл содержит один или несколько значков,
размер и цветность каждого из которых задаётся отдельно. Размер значка
может быть любым, но наиболее употребимы квадратные значки со сторонами
16, 32 и 48 пикселей.
2. Элемент <map>
Элемент <map> служит для представления графического изображения в виде
карты с активными областями. Активные области определяются по изменению
вида курсора мыши при наведении. Щелкая мышью на активных областях,
пользователь может переходить к связанным документам.
Для элемента доступен атрибут name , который задает имя карты. Значение
атрибут name для элемента <map> должно соответствовать имени в
атрибуте usemap элемента <img> :
<img src="url" usemap="#имя_карты">

<map name="имя_карты">
...
</map>
HTML
Элемент <map> содержит ряд элементов <area> , определяющих интерактивные
области в изображении карты.
3. Элемент <area>
Элемент <area> описывает только одну активную область в составе карты
изображений на стороне клиента. Если одна активная область перекрывает
другую, то будет реализована первая ссылка из списка областей.
<map name="имя_карты">
<area атрибуты>
</map>
HTML
ТАБЛИЦА 2. АТРИБУТЫ ЭЛЕМЕНТА <AREA
Атрибут Краткое описание

alt Задает альтернативный текст для активной области карты.
Определяет позицию области на экране. Координаты задаются в единицах длины и

разделяются запятыми:
для круга — координаты центра и радиус круга;
coords для прямоугольника — координаты верхнего левого и правого нижнего углов;
для многоугольника — координаты вершин многоугольника в нужном порядке, также
рекомендуется указывать последние координаты, равные первым, для логического
завершения фигуры.
Дополняет атрибут href и сообщает браузеру, что ресурс должен быть загружен в
момент, когда пользователь щелкает по ссылке, вместо того, чтобы, например,
download предварительно открыть его (как PDF-файл). Задавая имя для атрибута, мы таким образом
задаем имя загружаемому объекту. Разрешается использовать атрибут без указания его
значения.
href Указывает URL-адрес для ссылки. Может быть указан абсолютный или относительный
адрес ссылки.
Определяет язык связанного веб-документа. Используется только вместе с
hreflang атрибутом href . Принимаемые значения — аббревиатура, состоящая из пары букв,
обозначающих код языка.
media Определяет, для каких типов устройств файл будет оптимизирован. Значением может быт
любой медиа-запрос.
Дополняет атрибут href информацией об отношении между текущим и связанным
документом. Принимаемые значения:
alternate — ссылка на альтернативную версию документа (например, печатную форм
страницы, перевод или зеркало).
author — ссылка на автора документа.
bookmark — постоянный URL-адрес, используемый для закладок.
help — ссылка на справку.
license — ссылка на информацию об авторских правах на данный веб-документ.
next/prev — указывает связь между отдельными URL. Благодаря этой разметке Googl
rel может определить, что содержание данных страниц связано в логической
последовательности.
nofollow — запрещает поисковой системе переходить по ссылкам на данной странице
или по конкретной ссылке.
noreferrer — указывает, что переходе по ссылке браузер не должен посылать
заголовок HTTP-запроса (Referrer), в который записывается информация о том, с какой
страницы пришел посетитель сайта.
prefetch — указывает, что целевой документ должен быть кэширован, т.е. браузер в
фоновом режиме загружает содержимое страницы к себе в кэш.
search — указывает, что целевой документ содержит инструмент для поиска.
tag — указывает ключевое слово для текущего документа.
Задает форму активной области на карте и ее координаты. Может принимать следующие

значения:
rect — активная область прямоугольной формы;
shape circle — активная область в форме круга;
poly — активная область в форме многоугольника;
default — активная область занимает всю площадь изображения.
Указывает, куда будет загружен документ при переходе по ссылке. Принимает следующи
значения:
_self — страница загружается в текущее окно;
target _blank — страница открывается в новом окне браузера;
_parent — страница загружается во фрейм-родитель;
_top — страница загружается в полное окно браузера.
type Указывает MIME-тип файлов ссылки, т.е. расширение файла.
4. Пример создания карты-изображения

РИС. 1. ПРИМЕР РАЗМЕТКИ ИЗОБРАЖЕНИЯ ДЛЯ СОЗДАНИЯ КАРТЫ
1. Размечаем исходное изображение на активные области нужной формы.
Координаты областей можно вычислить с помощью программы для обработки
фотографий, например, Adobe Photoshop или Paint.
2. Задаем имя карты, добавив ее в элемент <map> с помощью
атрибута name . Это же значение присваиваем
атрибуту usemap элемента <img> .
3. Добавляем ссылки на веб-страницы или части веб-документа для каждой
активной области, по которым пользователь будет переходить при нажатии
курсором мыши на активную область изображения.
<img src="https://html5book.ru/wp-content/uploads/2014/12/flowers_foto.jpg"
alt="flowers_foto" width="680" height="383" usemap="#flowers">
<map name="flowers">
<area shape="circle" coords="70,164,50"
href="https://ru.wikipedia.org/wiki/Гербера" alt="gerbera" target="_blank">
<area shape="poly" coords="191,13,240,98,143,98,191,13"
href="https://ru.wikipedia.org/wiki/%C3%E8%E0%F6%E8%ED%F2" alt="hyacinth"
target="_blank">
href="https://ru.wikipedia.org/wiki/Ромашка" alt="camomiles" target="_blank">
href="https://ru.wikipedia.org/wiki/Нарцисс_(растение)" alt="narcissus"
target="_blank">
<area shape="rect" coords="480,3,572,89"
href="https://ru.wikipedia.org/wiki/Тюльпан" alt="tulip" target="_blank">
</map>
HTML
РИС. 2. ПРИМЕР СОЗДАНИЯ КАРТЫ-ИЗОБРАЖЕНИЯ, ПРИ НАЖАТИИ КУРСОРА МЫШИ
НА ЦВЕТОК ОСУЩЕСТВЛЯЕТСЯ ПЕРЕХОД НА СТРАНИЦУ С ОПИСАНИЕМ
Красивое оформление изображений на сайте

Идеи для интернет-магазина: как красиво оформить акцию
Красивые рамки для текста и фото на сайте

Эффекты наложения
FotoJet — онлайн-сервис для создания коллажей и графического

дизайна
Обтекание картинки текстом

Оформление изображений на сайте: 10 идей
1.7. HTML-таблицы
Опубликовано: 25 июня 2014Обновлено: 1 января 202160 Comments
HTML-таблицы упорядочивают и выводят на экран данные с помощью строк или
столбцов. Таблицы состоят из ячеек, образующихся при пересечении строк и
столбцов.
Ячейки таблиц могут содержать любые HTML-элементы, такие как заголовки,
списки, текст, изображения, элементы форм, а также другие таблицы. Каждой
таблице можно добавить связанный с ней заголовок, расположив его перед
таблицей или после неё.
Таблицы больше не используются для вёрстки веб-страниц и компоновки
отдельных элементов, потому что такой приём не обеспечивает гибкость
структуры и адаптивность сайта, существенно увеличивая HTML-разметку.
Для всех элементов таблицы доступны глобальные атрибуты, а также

собственные атрибуты.
Создание таблиц в HTML
 1. Как создать таблицу
 2. Как создать строки (ряды) таблицы
 3. Как сделать ячейку заголовка столбца таблицы
 4. Как сделать ячейку тела таблицы
 5. Как добавить подпись (заголовок) к таблице
 6. Группирование строк и столбцов таблицы <colgroup> и <col>
 7. Группировка разделов таблицы <thead>, <tbody> и <tfoot>
 8. Как объединить ячейки таблицы
 9. Атрибуты элементов таблицы
 10. Пример создания таблицы
1. Как создать таблицу
Таблица создаётся при помощи элемента <table></table> , который является
контейнером для элементов таблицы и все элементы должны находиться внутри
него.
Например, с помощью данной разметки можно создать таблицу, состоящую
из двух столбцов и двух строк:
<table>
<tr><th>текст заголовка</th><th>текст заголовка</th></tr> 
<tr><td>данные</td><td>данные</td></tr> 
</table>
HTML
текст заголовка текст заголовка
данные данные
ФИГУРА 1. ВНЕШНИЙ ВИД ТАБЛИЦЫ БЕЗ ФОРМАТИРОВАНИЯ CSS-СВОЙСТВАМИ
По умолчанию таблица и ячейки не имеют видимых границ. Границы задаются с
помощью свойства border :
/* внешние границы таблицы серого цвета толщиной 1px */

table {
border: 1px solid grey;
}
/* границы ячеек первого ряда таблицы */
th {
}
/* границы ячеек тела таблицы */
td {
}
CSS
Промежутки между ячейками таблицы убираются с помощью свойства table
{border-collapse: collapse;} .
Ширина таблицы по умолчанию равна ширине её внутреннего содержимого.
Чтобы установить ширину, нужно задать значение для свойства width :
/* сделает ширину таблицы равной ширине блока контейнера, в котором она

находится */
table {
width: 100%;
}
/* задаст фиксированную ширину для таблицы */
table {
width: 600px;
}
CSS
Если для ячеек таблицы заданы внутренние отступы и границы, то ширина
таблицы будет включать в себя следующие значения: padding-
left и padding-right , ширина border-left плюс ширина border-
right последней ячейки в ряду.
Если заданы ширина и границы ячеек, то ширина таблицы будет складываться из
ширины ячеек плюс ширина border-left и ширина border-right последней
ячейки в ряду.
2. Как создать строки (ряды) таблицы
Строки или ряды таблицы создаются с помощью элемента <tr> . Количество
горизонтальных строк таблицы определяется количеством элементов <tr></tr> .
3. Как сделать ячейку заголовка столбца таблицы
Элемент <th> создаёт заголовок столбца — специальную ячейку, текст в которой
выделяется полужирным. Количество ячеек заголовка определяется количеством
элементов <th></th> . Для элемента доступны
атрибуты colspan , rowspan , headers .
<table>
<tr><th>ячейка заголовка</th><th>ячейка заголовка</th></tr>
</table>
HTML
4. Как сделать ячейку тела таблицы
Элемент <td> создаёт ячейки таблицы, внутрь которых помещаются данные
таблицы. Элементы <td></td> , расположенные в одном ряду, определяют
количество ячеек в строке таблицы.
Количество пар ячеек <td> должно быть равно количеству пар ячеек <th> . Для
элемента доступны атрибуты colspan , rowspan , headers .
<table>
<tr><th>ячейка заголовка</th><th>ячейка заголовка</th></tr>
<tr><td>ячейка тела таблицы</td><td>ячейка тела таблицы</td></tr>
</table>
HTML
5. Как добавить подпись (заголовок) к таблице
Элемент <caption> создает подпись таблицы. Добавляется непосредственно
после тега <table> , вне строки или ячейки.
<table>
<caption>Перечень продуктов</caption>
<tr>
<th>№ п/п</th>
<th>Наименование товара</th>
<th>Ед. изм.</th>
<th>Количество</th>
<th>Цена за ед. изм., руб.</th>
<th>Стоимость, руб.</th>
</tr>
<tr>
<td>1.</td>
<td>Томаты
свежие</td><td>кг</td><td>15,20</td><td>69,00</td><td>1048,80</td>
</tr>
<tr>
<td>2.</td>
<td>Огурцы
</tr>
<tr>
<td colspan="5" style="text-align:right">ИТОГО:</td><td>1168,80</td>
</tr>
</table>
HTML
6. Группирование строк и столбцов таблицы
Элемент <colgroup> создает структурную группу столбцов, выделяя логически
однородные ячейки. Группирует один или более столбцов для единого
форматирования, позволяя применить стили к столбцам вместо того, чтобы
повторять стили для каждой ячейки и для каждой строки.
Добавляется непосредственно после тегов <table> и/или <caption> .
Элемент <col> формирует группы столбцов, которые делят таблицу на разделы,
не относящиеся к общей структуре, т.е. не содержащие информацию одного типа.
Позволяет задавать свойства столбцов для каждого столбца в пределах
элемента <colgroup> .
С помощью атрибута style можно изменить основной цвет фона ячеек. Для
элемента <col> доступен атрибут span , задающий количество столбцов для
объединения.
<table>
<colgroup>
<col span="2" style="background:Khaki">
<col style="background-color:LightCyan">
</colgroup>
<tr>
<th>№ п/п</th>
<th>Наименование</th>
<th>Цена, руб.</th>
</tr>
<tr>
<td>1</td>
<td>Карандаш цветной</td>
<td>20,00</td>
</tr>
<tr>
<td>2</td>
<td>Линейка 20 см</td>
<td>30,00</td>
</tr>
</table>
HTML
РИС. 2. ВЫДЕЛЕНИЕ СТОЛБЦОВ

ТАБЛИЦЫ ДРУГИМ ЦВЕТОМ С ИСПОЛЬЗОВАНИЕМ ЭЛЕМЕНТОВ <COL> И <COLGROUP>
7. Группировка разделов таблицы
Элемент <thead> создает группу заголовков для строк таблицы с целью задания
единого оформления. Используется в сочетании с
элементами <tbody> и <tfoot> для указания каждой части таблицы.
Элемент должен быть использован в следующем порядке: как дочерний
элемент <table> , после <caption> и <colgroup> , и
перед <tbody> , <tfoot> и <tr> элементами. В пределах одной таблицы
можно использовать один раз.
Элемент <tbody> группирует основное содержимое таблицы. Используется в
сочетании с элементами <thead> и <tfoot> .
Элемент <tfoot> создает группу строк для представления информации о суммах
или итогах, расположенную в нижней части таблицы. Используется в таблице
один раз. Располагается после элемента <thead> , перед
элементами <tbody> и <tr> .
<table>
<thead>
<tr>
<th>№ п/п</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5" style="text-align:right">ИТОГО:</td><td>1168,80</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1.</td>
<td>Томаты
</tr>
<tr>
<td>2.</td>
<td>Огурцы
</tr>
</tbody>
</table>
HTML
Такая группировка строк была заложена в стандарте в расчете на то, что
обозреватели при отображении длинных таблиц обеспечат прокрутку строк
данных при сохранении надзаголовка и подзаголовка неподвижными, а при их
выводе на принтер смогут использовать надзаголовок и подзаголовок в
качестве колонтитулов страницы. Однако, современные обозреватели этого
не делают и либо просто отображают <thead> и <tfoot> как строки
данных, либо, в лучшем случае, просто помещают соответствующие строки
в начало и конец таблицы.
8. Как объединить ячейки таблицы
Атрибуты colspan и rowspan объединяют ячейки таблицы.
Атрибут colspan задает количество ячеек, объединенных по горизонтали,
а rowspan — по вертикали.
<table>
<tr>
<th>№ п/п</th>
</tr>
<tr>
<td>1.</td>
<td>Томаты
</tr>
<tr>
<td>2.</td>
<td>Огурцы
</tr>
<tr>
<td colspan="5" style="text-align:right">ИТОГО:</td><td>1168,80</td>
</tr>
</table>
HTML
РИС. 3. ПРИМЕР ОБЪЕДИНЕНИЯ ЯЧЕЕК ТАБЛИЦЫ ПО ГОРИЗОНТАЛИ ПРИ ПОМОЩИ

АТРИБУТА COLSPAN
9. Атрибуты элементов таблицы
ТАБЛИЦА 1. АТРИБУТЫ ЭЛЕМЕНТОВ ТАБЛИЦ

Количество ячеек в строке для объединения по горизонтали.
colspan <td colspan="3">
Возможные значения: число от 1 до 999.
Задает список ячеек заголовка, содержащих информацию о заголовке текущей
ячейки данных. Предназначен для речевых браузеров.
<th id="идентификатор">...</th>
headers
<th headers="идентификатор">...</th>
Принимаемые значения: список имен ячеек, разделенных пробелами; эти имена
должны быть присвоены ячейкам через их атрибут id .
Количество ячеек в столбце для объединения по вертикали.

rowspan <td rowspan="2">
Возможные значения: число от 1 до 999.
Количество колонок, объединяемых для задания единого стиля, по умолчанию равн
1.
span
<col span="2">
Принимаемые значения: любое целое положительное число.
10. Пример создания таблицы
РИС. 4. СОЗДАНИЕ МЕНЮ РЕСТОРАНА С ПОМОЩЬЮ HTML-ТАБЛИЦЫ
<table>
<caption>Меню ресторана "Ромашка"</caption>
<tr>
<th rowspan="2" class="first">Кухня</th>
<th colspan="2">Холодные блюда</th>
<th colspan="2">Горячие блюда</th>
<th rowspan="2">Десерты</th>
</tr>
<tr>
<td class="first">Салаты</td>
<td class="first">Закуски</td>
<td class="first">Первые блюда</td>
<td class="first">Вторые блюда</td>
</tr>
<tr>
<td rowspan="3" class="first">Русская</td>
<td>Винегрет</td>
<td>Язык с хреном</td>
<td>Щи с квашеной капустой</td>
<td>Вареники с картошкой</td>
<td>Печеные яблоки с медом</td>
</tr>
<tr>
<td>Оливье</td>
<td>Студень говяжий</td>
<td>Рассольник домашний</td>
<td>Караси запеченые в сметане</td>
<td>Блинчатый пирог</td>
</tr>
<tr>
<td>Сельдь под "шубой"</td>
<td>Судак заливной</td>
<td>Мясная солянка</td>
<td>Котлеты "Пожарские"</td>
<td>Пирожное "Картошка"</td>
</tr>
<tr>
<td rowspan="3" class="first">Испанская</td>
<td>Севиче из гребешков</td>
<td>Эмпанадас</td>
<td>Хлебный суп с чесноком</td>
<td>Паэлья с морепродуктами</td>
<td>Чуррос</td>
</tr>
<tr>
<td>Тимбал из авокадо и тунца</td>
<td>Ахотомате</td>
<td>Астурийская фабада</td>
<td>Свиное раксо</td>
<td>Альмойшавена</td>
</tr>
<tr>
<td>Фасоль с ветчиной</td>
<td>Чанфайна</td>
<td>Рыбный суп с манными клецками </td>
<td>Тортилья картофельная</td>
<td>Бунуэлос</td>
</tr>
<tr>
<td rowspan="3" class="first">Французская</td>
<td>Вогезский салат</td>
<td>Рийет из курицы</td>
<td>Баклажанный крем-суп "Ренуар"</td>
<td>Картофель огратен</td>
<td>Бриоши</td>
</tr>
<tr>
<td>Салат "Панзанелла"</td>
<td>Делисьез из сыра</td>
<td>Французский тыквенный суп</td>
<td>Гратин из птицы</td>
<td>Лигурийский лимонный пирог</td>
</tr>
<tr>
<td>Тар-тар</td>
<td>Маринованный лосось</td>
<td>Суп "Конти"</td>
<td>Тартифлетт</td>
<td>Саварен "Триумф"</td>
</tr>
</table>
HTML
body {
margin: 0;
background: #F4F1F8;
}
table {
border-collapse: collapse;
line-height: 1.1;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background: radial-gradient(farthest-corner at 50% 50%, white, #DCECF8);
color: #0C213B;
}
caption {
font-family: annabelle, cursive;
font-weight: bold;
font-size: 2em;
padding: 10px;
color: #F3CD26;
text-shadow: 1px 1px 0 rgba(0,0,0,.3);
}
caption:before, caption:after {
content: "\274B";
color: #A9E2CC;
margin: 0 10px;
}
th {
padding: 10px;
border: 1px solid #A9E2CC;
}
td {
font-size: 0.8em;
padding: 5px 7px;
border: 1px solid #A9E2CC;
}
.first {
font-size: 1em;
font-weight: bold;
text-align: center;
}
CSS
Шпаргалка по работе с таблицами
Оформление таблицы с помощью псевдоклассов

CSS таблицы цен
Красивое оформление таблиц
Выравнивание текста в таблице с помощью CSS

1.8. HTML-списки
Опубликовано: 17 июля 2014Обновлено: 23 декабря 202070 Comments
HTML-списки используются для группировки связанных между собой фрагментов

информации. Существует три вида списков:
o маркированный список — <ul> — каждый элемент
списка <li> отмечается маркером,
o нумерованный список — <ol> — каждый элемент
списка <li> отмечается цифрой,
o список определений — <dl> — состоит из пар
термин <dt> — <dd> определение.
Каждый список представляет собой контейнер, внутри которого располагаются
элементы списка или пары термин-определение.
Элементы списка ведут себя как блочные элементы, располагаясь друг под
другом и занимая всю ширину блока-контейнера. Каждый элемент списка имеет
дополнительный блок, расположенный сбоку, который не участвует в компоновке.
Создание HTML-списков
 1. Маркированный список <ul>
 2. Нумерованный список <ol>
 3. Список определений <dl>
 4. Вложенный список
 5. Многоуровневый нумерованный список
1. Маркированный список
Маркированный список представляет собой неупорядоченный список (от англ.
Unordered List). Создаётся с помощью элемента <ul> . В качестве маркера
элемента списка выступает метка, например, закрашенный кружок.
Браузеры по умолчанию добавляют следующее форматирование блоку списка:
ul {
padding-left: 40px;
margin-top: 1em;
margin-bottom: 1em;
}
CSS
Каждый элемент списка создаётся с помощью элемента <li> (от англ. List
Item).
Для элемента <ul> доступны глобальные атрибуты.
<ul>
<li>Microsoft</li>
<li>Google</li>
<li>Apple</li>
<li>IBM</li>
</ul>
HTML
 Microsoft
 Google
 Apple
 IBM
ФИГУРА. 1. МАРКИРОВАННЫЙ СПИСОК
2. Нумерованный список
Нумерованный список создаётся с помощью элемента <ol> . Каждый пункт
списка также создаётся с помощью элемента <li> . Браузер нумерует элементы
по порядку автоматически и если удалить один или несколько элементов такого
списка, то остальные номера будут автоматически пересчитаны.
Блок списка также имеет стили браузера по умолчанию:
ol {
padding-left: 40px;
margin-top: 1em;
margin-bottom: 1em;
}
CSS
Для элемента <li> доступен атрибут value , который позволяет изменить номер
по умолчанию для выбранного элемента списка. Например, если для первого
пункта списка задать <li value="10"> , то остальная нумерация будет
пересчитана относительно нового значения.
Для элемента <ol> доступны следующие атрибуты:
ТАБЛИЦА 1. АТРИБУТЫ ЭЛЕМЕНТА <OL

Атрибут reversed задает отображение списка в обратном порядке (например, 9,
reversed
7…).
Атрибут start задает начальное значение, от которого пойдет отсчет нумерации,

например, конструкция <ol start="10"> первому пункту присвоит порядковый
start
номер «10». Также можно одновременно задавать тип нумерации, например, <ol
type="I" start="10"> .
Атрибут type задает вид маркера для использования в списке (в виде букв или
цифр). Принимаемые значения:
1 — значение по умолчанию, десятичная нумерация.
type A — нумерация списка в алфавитном порядке, заглавные буквы (A, B, C, D).
a — нумерация списка в алфавитном порядке, строчные буквы (a, b, c, d).
I — нумерация римскими заглавными цифрами (I, II, III, IV).
i — нумерация римскими строчными цифрами (i, ii, iii, iv).
<ol>
<li>Microsoft</li>
<li>Google</li>
<li>Apple</li>
<li>IBM</li>
</ol>
HTML
1. Microsoft
2. Google
3. Apple
4. IBM
ФИГУРА. 2. НУМЕРОВАННЫЙ СПИСОК
3. Список определений
Списки определений создаются с помощью элемента <dl> . Для добавления
термина применяется элемент <dt> , а для вставки определения —
элемент <dd> .
Блок списка определений имеет следующие стили браузера по умолчанию:
dl {
margin-top: 1em;
margin-bottom: 1em;
}
CSS
Для элементов <dl> , <dt> и <dd> доступны глобальные атрибуты.
<dl>
<dt>Режиссер:</dt>
<dd>Петр Точилин</dd>
<dt>В ролях:</dt>
<dd>Андрей Гайдулян</dd>
<dd>Алексей Гаврилов</dd>
<dd>Виталий Гогунский</dd>
<dd>Мария Кожевникова</dd>
</dl>
HTML
Режиссер:
Петр Точилин
В ролях:
Андрей Гайдулян
Алексей Гаврилов
Виталий Гогунский
Мария Кожевникова
ФИГУРА. 3. СПИСОК ОПРЕДЕЛЕНИЙ
4. Как создать вложенный список
Зачастую возможностей простых списков не хватает, например, при создании
оглавления никак не обойтись без вложенных пунктов. Разметка для вложенного
списка будет следующей:
<ul>
<li>Пункт 1.</li>
<li>Пункт 2.
<ul>
<li>Подпункт 2.1.</li>
<li>Подпункт 2.2.
<ul>
<li>Подпункт 2.2.1.</li>
<li>Подпункт 2.2.2.</li>
</ul>
</li>
<li>Подпункт 2.3.</li>
</ul>
</li>
<li>Пункт 3.</li>
</ul>
HTML
 Пункт 1.
 Пункт 2.
 Подпункт 2.1.
 Подпункт 2.2.1.
 Подпункт 2.2.2.
 Пункт 3.
ФИГУРА. 4. ВЛОЖЕННЫЙ СПИСОК
5. Многоуровневый нумерованный список
Многоуровневый список используется для отображения элементов списка на
разных уровнях с различными отступами. Разметка для многоуровневого
нумерованного списка будет следующей:
<ol>
<li>пункт</li>
<li>пункт
<ol>
<li>пункт</li>
<li>пункт</li>
<li>пункт
<ol>
<li>пункт</li>
<li>пункт</li>
<li>пункт</li>
</ol>
</li>
<li>пункт</li>
</ol>
</li>
<li>пункт</li>
<li>пункт</li>
</ol>
HTML
Такая разметка по умолчанию создаст для каждого вложенного списка новую
нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию,
нужно использовать следующие свойства:
o counter-reset сбрасывает один или несколько счётчиков, задавая

значение для сброса;
o counter-increment задаёт значение приращения счётчика, т.е. с каким
шагом будет нумероваться каждый последующий пункт;
o content — генерируемое содержимое, в данном случае отвечает за вывод
номера перед каждым пунктом списка.
ol {
/* убираем стандартную нумерацию */
list-style: none;
/* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано
- по умолчанию оно равно 0 */
counter-reset: li;
}
li:before {
/* Определяем элемент, который будет нумероваться — li. Псевдоэлемент
before указывает, что содержимое, вставляемое при помощи свойства content,
будет располагаться перед пунктами списка. Здесь же устанавливается значение
приращения счетчика (по умолчанию равно 1). */
counter-increment: li;
/* С помощью свойства content выводится номер пункта списка. counters()
означает, что генерируемый текст представляет собой значения всех счетчиков с
таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а
точка с пробелом добавляется перед содержимым каждого пункта списка */
content: counters(li, ".") ". ";
}
CSS
1. пункт
2. пункт
1. пункт
2. пункт
3. пункт
1. пункт
2. пункт
3. пункт
4. пункт
3. пункт
4. пункт
ФИГУРА. 5. МНОГОУРОВНЕВЫЙ НУМЕРОВАННЫЙ СПИСОК
Адаптивное выпадающее мега меню на CSS
Горизонтальное выпадающее многоуровневое меню

Оформление многоуровневых нумерованных списков
Вертикальное меню для сайта
Горизонтальное выпадающее меню

Примеры красивого оформления списков
Горизонтальное меню для сайта

1.9. Спецсимволы HTML
Опубликовано: 21 мая 2014Обновлено: 31 декабря 201990 Comments
Спецсимволы HTML, или символы-мнемоники, представляют собой конструкцию

SGML (англ. Standard Generalized Markup Language — стандартный обобщённый
язык разметки), ссылающуюся на определенные символы из символьного набора
документа. В основном они используются для указания символов, которых нет в
стандартной компьютерной клавиатуре, либо которые не поддерживает кодировка
HTML-страницы (Windows-1251, UTF-8 и т.д.).
Чтобы разместить символ на веб-странице, необходимо указать HTML-код или
мнемонику.
Спецсимволы чувствительны к регистру, поэтому их необходимо прописывать

точно так, как указано в таблице. Спецсимволы, не имеющие мнемоники, могут
не отображаться вовсе или же некорректно отображаться в тех или иных
браузерах.
Для вставки символов внутрь тегов воспользуйтесь HTML-кодом символа, а для

использования символов в таблицах стилей, например, в качестве значения
свойства content — CSS-код.
Спецсимвол наследует цвет от цвета текста родительского элемента. Чтобы
изменить цвет спецсимвола, можно поместить HTML-код внутрь тега <span> или
задать нужное значение свойства color (при вставке спецсимволов через
свойство content ).
Популярные спецсимволы HTML
 1. Полезные знаки и символы
 2. Знаки пунктуации
 3. Стрелки
 4. Карточные масти
 5. Деньги
 6. Знаки зодиака
1. Полезные знаки и символы
Вид HTML-код CSS-код Описание
🖂 🖂 \1F582 Обратная сторона конверта
☃ ☃ \2603 Снеговик
☦ ☦ \2626 Православный крест
⚓ ⚓ \2693 Якорь
✆ ✆ \2706 Знак телефона
☎ ☎ \260E Телефон
☕ ☕ \2615 Горячие напитки
✎ ✎ \270E Карандаш, направленный вправо-вниз
✏ ✏ \270F Карандаш
✐ ✐ \2710 Карандаш, направленный вправо-вверх
✑ ✑ \2711 Незакрашенное острие пера
✒ ✒ \2712 Закрашенное острие пера
⚜ ⚜ \269C Геральдическая лилия
⛑ ⛑ \26D1 Шлем с белым крестом
⚝ ⚝ \269D Начерченная белая звезда
❄ ❄ \2744 Снежинка
❤ ❤ \2764 Закрашенное жирное сердце
❅ ❅ \2745 Зажатая трилистниками снежинка
❆ ❆ \2746 Жирная остроугольная снежинка

★ ★ \2605 Закрашенная звезда
☆ ☆ \2606 Незакрашенная звезда
✪ ✪ \272A Незакрашенная звезда в закрашенном круге
✫ ✫ \272B Закрашенная звезда с незакрашенным кругом внутри
✯ ✯ \272F Вращающаяся звезда
❉ ❉ \2749 Звёздочка с шарообразными окончаниями
❋
Жирная восьмиконечная каплеобразная звёздочка-
❋ \274B
пропеллер
✲ ✲ \2732 Звёздочка с незакрашенным центром
☀ ☀ \2600 Закрашенное солнце с лучами
☁ ☁ \2601 Облака
☂ ☂ \2602 Зонтик
☑ ☑ \2611 Галочка в квадрате
☒ ☒ \2612 Крестик в квадрате
☹ ☹ \2639 Нахмуренный смайлик
☺ ☺ \263A Улыбающийся смайлик
☻ ☻ \263B Закрашенный улыбающийся смайлик
☭ ☭ \262D Серп и молот
⚑ ⚑ \2691 Закрашенный флаг
⚐ ⚐ \2690 Незакрашенный флаг

☰ ☰ \2630 Триграмма
✿ ✿ \273f Закрашенный цветок
❀ ❀ \2740 Незакрашенный цветок
✾ ✾ \273E Цветок с шестью лепестками
❁ ❁ \2741 Закрашенный обведённый цветок
❂ ❂ \2742 Цветок из точек
✉ ✉ \2709 Конверт
❦ ❦ \2766 Сердце в виде цветка
❶ ❶ \2776 Номер 1
❷ ❷ \2777 Номер 2
❸ ❸ \2778 Номер 3
❹ ❹ \2779 Номер 4
❺ ❺ \277A Номер 5
❻ ❻ \277B Номер 6
❼ ❼ \277C Номер 7
❽ ❽ \277D Номер 8
➒ ➒ \2792 Номер 9
➓ ➓ \2793 Номер 10
✖ ✖ \2716 Жирный знак умножения
✘ ✘ \2718 Жирный крестик

✔ ✔ \2714 Жирная отметка галочкой
✚ ✚ \271A Жирный крест
⚛ ⚛ \269B Символ атома
♺ ♺ \267A Символ переработки
❑ ❑ \2751 Незакрашенный квадрат с правой нижней тенью
❒ ❒ \2752 Незакрашенный квадрат с правой верхней тенью
◈ ◈ \25C8 Алмаз в оправе
◐ ◐ \25D0 Круг с левой закрашенной половиной
◑ ◑ \25D1 Круг с закрашенной правой половиной
⁂ ⁂ \2042 Три звездочки
2. Знаки пунктуации
\00A0 Неразрывный пробел
\00AD Место возможного переноса
< < \003C Знак "меньше чем" (начало тега)
> > \003E Знак "больше чем" (конец тега)
« « \00AB Левая двойная угловая скобка
» » \00BB Правая двойная угловая скобка
‹ &lsaquo; \2039 Левая угловая одиночная кавычка
› &rsaquo; \203A Правая угловая одиночная кавычка
" " \0022 Двойная кавычка

′ ′ \2032 Одиночный штрих
″ ″ \2033 Двойной штрих
‘ ‘ \2018 Левая одиночная кавычка
’ ’ \2019 Правая одиночная кавычка
‚ &sbquo; \201A Нижняя одиночная кавычка
“ “ \201C Левая двойная кавычка
” ” \201D Правая двойная кавычка
„ &bdquo; \201E Нижняя двойная кавычка
❜ ❜ \275C Жирная одинарная верхняя запятая
❛ ❛ \275B Жирная одинарная повёрнутая верхняя запятая
& & \0026 Амперсанд
' ' \0027 Апостроф (одинарная кавычка)
§ § \00A7 Параграф
© © \00A9 Знак copyright
¬ ¬ \00AC Знак отрицания
® ® \00AE Знак зарегистрированной торговой марки
¯ ¯ \00AF Знак долготы над гласным
° ° \00B0 Градус
± ± \00B1 Плюс-минус
¹ ¹ \00B9 Верхний индекс "1"
² ² \00B2 Верхний индекс "2"

³ ³ \00B3 Верхний индекс "3"
¼ ¼ \00BC Одна четверть
½ ½ \00BD Одна вторая
¾ ¾ \00BE Три четверти
´ ´ \00B4 Знак ударения
µ µ \00B5 Микро
¶ ¶ \00B6 Знак абзаца
· · \00B7 Знак умножения
¿ ¿ \00BF Перевернутый вопросительный знак
ƒ &fnof; \0192 Знак флорина
™ ™ \2122 Знак торговой марки
• • \2022 Маркер списка
… … \2026 Многоточие
‾ &oline; \203E Надчеркивание
– – \2013 Среднее тире
— — \2014 Длинное тире
‰ &permil; \2030 Промилле
} } \007D Правая фигурная скобка
{ { \007B Левая фигурная скобка
= = \003D Знак равенства
≠ ≠ \2260 Знак неравенства
≅ &cong; \2245 Конгруэнтность (геометрическое равенство)

≈ ≈ \2248 Почти равно
≤ ≤ \2264 Меньше чем или равно
≥ ≥ \2265 Больше чем или равно
∠ &ang; \2220 Угол
⊥ &perp; \22A5 Перпендикулярно (кнопка вверх)
√ √ \221A Квадратный корень
∑ ∑ \2211 N-ичное суммирование
∫ ∫ \222B Интеграл
※ ※ \203B Знак сноски
÷ ÷ \00F7 Знак деления
∞ ∞ \221E Знак бесконечности
@ @ \0040 Символ собака
[ [ \005B Левая квадратная скобка
] ] \005D Правая квадратная скобка
3. Стрелки
← ← \2190 Стрелка влево
↑ ↑ \2191 Стрелка вверх
→ → \2192 Стрелка вправо
↓ ↓ \2193 Стрелка вниз
↔ ↔ \2194 Стрелка влево-вправо
↵ &crarr; \21B5 Стрелка вниз и влево – знак возврата каретки

⇐ ⇐ \21D0 Двойная стрелка налево
⇑ &uArr; \21D1 Двойная стрелка вверх
⇒ ⇒ \21D2 Двойная стрелка направо
⇓ &dArr; \21D3 Двойная стрелка вниз
⇔ ⇔ \21D4 Двойная стрелка влево-вправо
➠ ➠ \27A0 Летящая стрела
➤ ➤ \27A4 Наконечник стрелы
➥ ➥ \27A5 Изогнутая стрела, указывающая вниз и вправо
➦ ➦ \27A6 Изогнутая стрела, указывающая вверх и вправо
➳ ➳ \27B3 Стрела направо
↺ ↺ \21BA Круглая стрелка с наконечником против часовой стрелк
↻ ↻ \21BB Круглая стрелка с наконечником по часовой стрелке
⇧ ⇧ \21E7 Толстая полая стрелка вверх
↩ ↩ \21A9 Стрелка налево с крючком
➫ ➫ \27AB Наклонённая вниз объёмная стрелка
⬇ ⬇ \2B07 Закрашенная стрелка вниз
⬆ ⬆ \2B06 Закрашенная стрелка вверх
4. Карточные масти
♠ &spades; \2660 "Пики"
♣ &clubs; \2663 "Трефы"

♥ &hearts; \2665 "Червы"
♦ &diams; \2666 "Бубны"
♡ ♡ \2661 Контур "Червы"
♢ ♢ \2662 Контур "Бубны"
♤ ♤ \2664 Контур "Пики"
♧ ♧ \2667 Контур "Трефы"
5. Деньги
¢ ¢ \FFE0 Цент
£ £ \FFE1 Фунт стерлингов
₽ ₽ \20BD Российский рубль
¥ ¥ \00A5 Йена или юань
€ € \20AC Евро
$ $ \0024 Доллар
₴ ₴ \20B4 Знак гривны
₹ ₹ \20B9 Индийская рупия
圓圓 \5713 Китайский юань
₸ ₸ \20B8 Казахстанский тенге
6. Знаки зодиака
♈ ♈ \2648 Овен
♉ ♉ \2649 Телец

♊ ♊ \264A Близнецы
♋ ♋ \264B Рак
♌ ♌ \264C Лев
♍ ♍ \264D Дева
♎ ♎ \264E Весы
♏ ♏ \264F Скорпион
♐ ♐ \2650 Стрелец
♑ ♑ \2651 Козерог
♒ ♒ \2652 Водолей
♓ ♓ \2653 Рыбы
1.10. HTML-генераторы
Опубликовано: 20 марта 2014Обновлено: 5 января 202015 Comments
HTML-генераторы и полезные сервисы облегчат работу с HTML-кодом,

протестируют отображение вашего сайта в разных браузерах, а также дадут
информацию о поддержке браузерами тех или иных тегов и технологий.
Подборка HTML-генераторов
Image-Maps — сервис для создания карт-изображений.
Mobirise — оффлайн приложение для Windows и Mac, с помощью которого можно
создавать небольшие веб-сайты, лендинги, онлайн-резюме и портфолио, промо-
сайты для приложений, событий, продуктов и услуг.
FREE Banner Maker — сервис для HTML5-баннеров.

HTML minifier — сервис для минимизации HTML-кода.
Mobile HTML5 таблица совместимости HTML5 API на мобильных и планшетных

браузерах с тестированием на реальных устройствах.
Initializr — генератор HTML5-шаблонов, которые помогут начать работу над вашим
новым проектом. Он построен на базе HTML5 Boilerplate, мощнейшем HTML5-
шаблоне, созданном Paul Irish и Divya Manian. С его помощью вы элементарно
создадите HTML5-проект с необходимыми настройками по вашему выбору. По
сути, это облегченная версия Boilerplate. Выбираемыми параметрами являются:
структура, серверные опции (.htaccess, nginx.conf, web.config), подключение
jquery, аналитики google, выбор между css и less и тд. Как только вы настроите
конфигурацию шаблона, нажмите Download и вы получите набор файлов,
согласно сделанному выбору.
Browsershots делает скриншоты дизайна вашего сайта в разных операционных

системах и браузерах. Проверка может длиться несколько часов, в зависимости
от количества файлов на сайте.
Сервис Can I use… тестирует поддержку основных возможностей HTML5 для всех
версий всех браузеров. Он позволяет выделить именно те возможности, которые
требуются вам. Для работы с сервисом нужно выбрать вкладку Tables, затем
вкладку Compatibility tables, после чего выбрать требуемую возможность
(возможности), установив флажок. Также можно производить поиск через
поле Search.
Сервис HTML5Test проверяет, насколько тот или иной браузер готов работать со

стандартом HTML5.
Сервис HTML5 Please содержит информацию о поддержке браузерами всех новых
API стандарта HTML5.
FormLinter найдёт на сайте формы и проверит, есть ли у них проблемы с

доступностью.
Опубликовано: 26 октября 2014Обновлено: 22 мая 2020124 Comments
Семантические элементы HTML5 доступно описывают свой смысл или

назначение как для браузеров, так и для веб-разработчиков.
До появления стандарта HTML5 вся разметка страниц осуществлялась
преимущественно с помощью элементов <div> , которым присваивали
классы class или идентификаторы id для наглядности разметки
(например, <div id="header"> ). С их помощью в HTML-документе размещали
верхние и нижние колонтитулы, боковые панели, навигацию и многое другое.
Стандарт HTML5 предоставил новые элементы для структурирования, группировки
контента и разметки текстового содержимого. Новые семантические элементы
позволили улучшить структуру веб-страницы, добавив смысловое значение
заключенному в них содержимому (было <div id="header"> ,
стало <header> ). Для отображения внешнего вида элементов не задано никаких
правил, поэтому элементы можно стилизовать по своему усмотрению. Для всех
элементов доступны глобальные атрибуты.
Согласно спецификации HTML5 каждый элемент принадлежит к определенной
(ноль или более) категории. Каждая из них группирует элементы со схожими
характеристиками. Выделяют следующие общие категории:
o Метаданные
o Потоковое содержимое
o Секционное содержимое
o Заголовочное содержимое
o Текстовое содержимое
o Встроенное содержимое
o Интерактивное содержимое
1.11.1. Элемент документа

Опубликовано: 20 февраля 2020Обновлено: 17 марта 20210 Comments
Элемент <html>
Категории содержимого: нет.
Контекст, в котором этот элемент может быть использован: как корневой
элемент HTML-документа. Везде, где разрешен фрагмент поддокумента в
составном документе, например, внутри <iframe> .
Пропуск тегов: начальный тег <html> может быть пропущен, если сразу за
тегом не идет комментарий. Закрывающий тег </html> также может быть
пропущен, если перед ним нет комментария.
<!DOCTYPE html>
<head>
<title>Тест</title>
</head>
<body>
<h1>Тестовая страница</h1>
</body>
HTML
Для элемента доступны глобальные атрибуты и атрибут manifest , который
указывает путь к документу кэша манифеста (в нем перечисляются ресурсы,
которые должны быть сохранены в локальном кэше), например:
<html manifest="about_company.appcache">
HTML
Элемент <html> представляет корень HTML-документа (элемент верхнего
уровня). Рекомендуется указывать атрибут lang с указанием языка документа.
Это помогает инструментам синтеза речи для определения произношения,
инструментам перевода для определения правил перевода и т.д.
Все остальные элементы должны быть потомками элемента <html> . Все, что
находится за пределами <html>...</html> , не воспринимается браузером как
HTML-код и никак им не обрабатывается.
Базовый HTML-документ выглядит так:
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Название документа</title>
</head>
<body>
<h1>Заголовок документа</h1>
<p>Абзац текста.</p>
<p>
<a href="another-html-document.html">
Текстовая ссылка на another-html-document.html
</a>
</p>

</body>
</html>
HTML
Над тегом <html> в самом начале каждого документа указывается тип
документа, который объясняет, какой тип HTML следует ожидать и,
следовательно, какие спецификации валидаторов (например, валидатор HTML
W3C) должны проверять данный документ.
Тип документа также служит для того, чтобы браузер отображал страницу в так
называемом «стандартном режиме». В стандартном режиме браузеры обычно
пытаются отобразить страницу в соответствии со спецификациями CSS, то есть
предполагается, что документ создан с учетом веб-стандартов.
По материалам The document element
1.11.2. Метаданные документа

К метаданным относится содержимое, которое устанавливает представление или

поведение остального содержимого, отношения документа с другими
документами, или передает другую «внешнюю» информацию.
HTML-элементы, семантика которых связана с

метаданными
 1. Элемент <head>
 2. Элемент <title>
 3. Элемент <base>
 4. Элемент <link>
 5. Элемент <meta>
 6. Элемент <style>
1. Элемент <head>
Категории содержимого: нет.
Контекст, в котором этот элемент может быть использован: как первый
элемент в элементе <html> .
Пропуск тегов: начальный тег <head> может быть пропущен, если
элемент <head> пуст, или если сразу после него идет другой HTML-элемент.
Закрывающий тег </head> может быть пропущен, если он не следует сразу за
пробелом или за комментарием.
<!DOCTYPE html>
<html lang="ru">
<body>
</body>
HTML

Раздел <head>...</head> содержит набор технической информации
(метаданных) о текущей веб-странице: заголовок, описание, ключевые слова для
поисковых машин, кодировку и т.д. Введенная в нем информация не
отображается в окне браузера, однако содержит данные, которые указывают
браузеру, как следует обрабатывать страницу.
Набор метаданных может быть как большим, так и маленьким:
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Документ с небольшим head</title>
</head>
<body>
...
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Документ с большим head</title>
<link rel="stylesheet" href="default.css">
<link rel="stylesheet alternate" href="big.css" title="Большой текст">
<script src="main.js"></script>
</head>
<body>
...
HTML
2. Элемент <title>
Категории содержимого: метаданные.
Контекст, в котором этот элемент может быть использован: в
элементе <head> , не содержащем других элементов <title> .
Пропуск тегов: ни один из тегов не может быть пропущен.
Элемент <title> представляет заголовок или название документа (веб-
страницы). Авторы должны использовать заголовки, которые дают поисковой
системе понять, что содержится на странице, даже если заголовки используются
вне контекста, например, в истории, закладках пользователя или в результатах
поиска. Заголовок документа может отличаться от заголовка первого уровня,
поскольку <h1> не должен стоять отдельно, когда он вырван из контекста.
<title>Подробное руководство по Flexbox</title>
...
<h1>Что такое Flexbox</h1>
<p>...</p>
HTML
Текст внутри <title> отображается браузером в заголовке окна. Также этот

текст будет содержать ссылку на ваш сайт на странице результатов поиска. Длина
заголовка должна быть не более 60 символов, чтобы поместиться полностью.
В одном документе должно быть не более одного элемента <title> .
Элемент <title> является обязательным в большинстве ситуаций, но если
протокол более высокого уровня предоставляет информацию о заголовке,
например, в строке «Тема» электронного письма, когда HTML используется в
качестве формата создания электронного письма, элемент <title> может быть
опущен.
3. Элемент <base>
Контекст, в котором этот элемент может быть использован: в
элементе <head> , не содержащем других элементов <base> .
Пропуск тегов: отсутствует закрывающий тег.
Элемент <base> с помощью атрибута href предоставляет базовый URL
документа для парсинга всех относительных URL-адресов на странице,
установленных атрибутами src и href .
Атрибут target задает тип окна просмотра по умолчанию при переходе по всем
гиперссылкам.
В одном документе может быть только один элемент <base> и он должен иметь
атрибут href , target или оба сразу.
Элемент <base> должен находиться перед любыми другими элементами в
дереве, которые имеют атрибуты, определенные как принимающие URL, кроме
элемента <html> (его атрибут manifest не подвержен влиянию
элемента <base> ).
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Пример для элемента base</title>
<base href="https://www.example.com/news/index.html">
</head>
<body>
<p>Посетите страницу <a href="archives.html">архивов</a>.</p>
</body>
</html>
HTML
Ссылка в приведенном выше примере будет ссылкой
на https://www.example.com/news/archives.html .
4. Элемент <link>
Категории содержимого: метаданные. Если его использование разрешено
в <body> — потоковое или текстовое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидаются
метаданные. В элементе <noscript> , который является дочерним элементом
элемента <head> . Если элемент разрешен в <body> — там, где ожидается
текстовое содержимое.
Для элемента доступны глобальные атрибуты, а также атрибуты, приведенные в
таблице:
ТАБЛИЦА 1. АТРИБУТЫ ЭЛЕМЕНТА <LINK
href Задает адрес гиперссылки.
crossorig Описывает, как элемент обрабатывает CORS-запросы, предназначен для использования

in со ссылками на внешние ресурсы.
Задает тип указанной ссылки, может содержать как одно значение, так и набор
разделенных пробелами ключевых слов:
rel
alternate , dns-prefetch , icon , next , pingback , preconnect , prefetch
preload , prerender , search , serviceworker .
Описывает обратное отношение текущего документа к связываемому документу, как

rev
определено атрибутом href .
Указывает, к какому типу медиа относится ресурс. Значение должно быть допустимым
media
списком медиазапросов.
Используется в проверках политики безопасности контента, представляет

криптографический одноразовый номер, который может использоваться политикой
nonce
безопасности содержимого, чтобы определить, будет ли внешний ресурс, указанный в
ссылке, загружаться и применяться к документу.
hreflang Задает язык связанного ресурса.
type Устанавливает подсказку для типа ссылочного ресурса.
referrerp
Указывает URL источника запроса при переходе с одной страницы на другую.
olicy
Задает размеры иконок (для rel="icon" ) для визуальных медиа, значение носит
sizes
рекомендательный характер.
title Устанавливает заголовок ссылки, альтернативное имя таблицы стилей.
Атрибут href элемента <link> позволяет связывать HTML-документ с

различным видами ресурсов, например, таблицами стилей, скриптами,
альтернативными формами документа и ссылками навигации (оглавление,
предыдущие и последующие страницы, уведомления об авторских правах и т.п.).
Тип связанного ресурса задается значением обязательного атрибута rel .
С помощью элемента <link> можно создать две категории ссылок: ссылки на
внешние ресурсы и гиперссылки. Например, следующий элемент ссылки создает
две гиперссылки (на одну и ту же страницу):
<link rel="author license" href="/about">
HTML
Семантика первой состоит в том, что целевая страница содержит информацию об

авторе текущей страницы, семантика второй заключается в том, что целевая
страница содержит информацию о лицензии, под которой предоставляется
текущая страница.
Гиперссылки, созданные с помощью элемента <link> и его атрибута rel ,

применяются ко всему документу. Это отличается от
атрибута rel элементов <a> и <area> , который указывает тип ссылки,
контекст которой определяется местоположением ссылки в документе.
Если значения атрибута rel содержат только ключевые слова, разрешенные
в <body> , элемент <link> можно использовать там, где ожидается фразовое
содержание, то есть внутри <body> .
5. Элемент <meta>
Контекст, в котором этот элемент может быть использован: если для элемента
указаны атрибуты charset и http-equiv , то в элементе <head> . Если
значением атрибута не является content-type , то внутри
элемента <noscript> , являющимся дочерним элементом <head> . Если
присутствует атрибут name — там, где ожидаются метаданные.
таблице:
ТАБЛИЦА 2. АТРИБУТЫ ЭЛЕМЕНТА <META

Определяет кодировку символов, используемую в документе. В документе должен
charset быть один элемент <meta> с атрибутом charset . Необходимо
использовать utf-8 или другую кодировку, совместимую с ASCII.
content Задает значение метаданных документа или прагма директив.
http-equiv Задает прагма директиву.
name Устанавливает название/имя метаданных документа.
Элемент <meta> представляет различные виды метаданных, которые не могут

быть выражены с использованием
элементов <title> , <base> , <link> , <style> и <script> .
Для элемента обязательно должен быть определен один из атрибутов
— name , http-equiv или charset . Если указан атрибут name или http-
equiv , также должен присутствовать атрибут content (или пропущен, если нет
соответствующих значений).
Стандартные названия метаданных
Для атрибута name доступны следующие значения (чувствительны к регистру):

o application-name — значение должно быть короткой строкой
произвольной формы, содержащей название веб-приложения, которое
представляет страница. Если страница не является веб-
приложением, application-name не должно использоваться. В одном
документе должно быть не более одного названия веб-приложения.
Браузеры могут использовать название веб-приложения в пользовательском
интерфейсе вместо <title> , поскольку <title> может содержать
сообщения о состоянии и тому подобное, относящиеся к состоянию страницы в
определенный момент времени, а не просто как название приложения.
o author — значение должно быть строкой произвольной формы с указанием
имени одного из авторов страницы.
o description — значение должно быть строкой произвольной формы,
описывающей страницу. Значение должно быть подходящим для использования в
каталоге страниц, например, в поисковой системе.
o generator — значение должно быть строкой произвольной формы, которая
идентифицирует один из пакетов программного обеспечения, использованных
для создания документа. Это значение не должно использоваться на страницах,
разметка которых не создается программным обеспечением, например на
страницах, разметка которых была написана пользователем в текстовом
редакторе.
<meta name="generator" content="WordPress 5.2">
HTML
o keywords — значение должно быть набором разделенных запятыми
ключевых слов, относящихся к странице. Многие поисковые системы не
рассматривают такие ключевые слова, потому что эта функция исторически
использовалась ненадежно и спамила результаты поиска.
<meta name="keywords" content="шрифт,шрифты,типографика">
HTML
o referrer — необязательное поле заголовка HTTP, которое позволяет

отслеживать перемещения пользователей между страницами в инструментах
аналитики, а также понять происхождение входящего трафика. Реферер
передаётся при переходе с http на любой тип сайта, при переходе с https на
https, и не передаётся при переходе с https на http.
В наиболее распространенной ситуации это означает, что когда пользователь
щелкает гиперссылку в браузере, на сервер отправляется запрос, содержащий
целевую веб-страницу. Запрос может содержать поле referer , в котором
указана последняя страница, на которой был пользователь (то есть та, на
которой он щелкнул ссылку).
Значения атрибута content :
 no-referrer — не передает никакую информацию о реферере.
 no-referrer-when-downgrade — передает реферальные данные
только сайтам на HTTPS. Поведение браузера по умолчанию, если не указано иное.
 unsafe-url — всегда передает полный URL реферера.
 origin-when-cross-origin — отправляет полный URL при переходе на
страницы в рамках одного сайта, вне зависимости от протокола, а на все остальные
— только базовый домен/поддомен.
<meta name="referrer" content="origin-when-cross-origin">
HTML
o viewport — позволяет определять конкретные характеристики области

просмотра, например, ширину макета и коэффициент масштабирования веб-
страниц. Можно запретить или ограничить пользователям возможность
масштабирования, используя такие значения, как content="user-
scalable=no" или content="width=device-width, initial-scale=1.0,
maximum-scale=1.0" .
Могут быть конкретные случаи использования, в которых целесообразно
предотвращение масштабирования пользователями, например, приложения-
карты — когда пользовательские функции масштабирования обрабатываются с
помощью сценариев, но в целом такой практики следует избегать.
Распознаваемые свойства атрибута content :

 width — определяет ширину области просмотра, значением может
быть определенное количество пикселей, например, width=768 или
ключевое слово device-width (соответствует 100vw).
<meta name="viewport" content="width=device-width, initial-scale=1">
HTML
 height — определяет высоту области просмотра, значением может быть

определенное количество пикселей, например, height=480 или ключевое
слово device-height (соответствует 100vh)
 initial-scale — указывает браузеру соотношение пикселей CSS и
устройства.
 minimum-scale — определяет наименьший допустимый коэффициент
масштабирования.
 maximum-scale — определяет максимально допустимый коэффициент
масштабирования.
 user-scalable — указывает, может ли коэффициент масштабирования
быть изменен в результате взаимодействия с пользователем или нет.
Прагма директивы
Когда атрибут http-equiv указан в элементе <meta> ,

элемент <meta> является прагма директивой, которая предоставляет
дополнительную информацию о документе:
o content-type — является альтернативной формой установки
атрибута charset .
<meta http-equiv="content-type" content="text/html; charset=utf-8">
HTML
o default-style — задает имя альтернативной таблицы стилей,

используемой по умолчанию.
<meta http-equiv="default-style" content="default">
HTML
o refresh — устанавливает таймер для обновления и перенаправления.

Например, главная страница новостного сайта может содержать следующую
разметку в элементе <head> , чтобы обеспечить автоматическую перезагрузку
страницы с сервера каждые пять минут:
HTML
Последовательность страниц может использоваться в качестве автоматического

слайд-шоу, если каждая страница обновляется до следующей страницы в
последовательности с использованием следующей разметки:
<meta http-equiv="refresh" content="20; url=page4.html">
HTML
o content-security-policy — позволяет настроить политику защиты

содержимого, с помощью которой можно защищаться, например, от
межсайтового скриптинга:
<meta http-equiv="content-security-policy" content="script-src 'self'">
HTML
6. Элемент <style>
Контекст, в котором этот элемент может быть использован: где ожидаются
метаданные. Внутри элемента <noscript> который является дочерним
элементом <head> . Внутри <body> , где ожидается потоковое содержимое.
таблице:
ТАБЛИЦА 3. АТРИБУТЫ ЭЛЕМЕНТА <STYL
Указывает, к каким медиа применяются стили. Значение должно быть допустимым

списком медиазапросов. Браузер должен применять стили, когда значение
media атрибута media соответствует среде и применяются другие соответствующие
условия. Если атрибут media пропущен, по умолчанию он принимает
значение all , то есть стили применяются ко всем видам медиа.
Представляет криптографический одноразовый номер, который может

nonce использоваться политикой безопасности содержимого, чтобы определить, будет ли
стиль, указанный элементом, применяться к документу.
Устанавливает язык таблиц стилей, значение должно быть допустимым MIME-типом

type
Значением по умолчанию является text/css .
title Задает альтернативное имя таблиц стилей.
Элемент <style> позволяет авторам встраивать информацию о стилях в свои

документы. Элемент не представляет какое-либо содержимое для пользователя.
Элемент <style> желательно использовать внутри раздела <head> .
<!DOCTYPE html>
<html>
<head>
<title>Моя любимая книга</title>
<style>
em {
font-style: normal;
color: red;
}
</style>
</head>
<body>
<p>Моя <em>любимая</em> книга - «Приключения Алисы в Стране чудес».</p>
</body>
</html>
HTML
По материалам Document metadata
1.11.3. Разделы документа

Структура документа В HTML5 состоит из разделов и подразделов. Разделы могут

быть представлены в виде схем документа по аналогии с оглавлением. Каждый
секционный элемент имеет свою собственную схему, поэтому каждый раздел
можно начинать с заголовка <h1> .
Браузеры могут обрабатывать эту информацию для создания содержания
(оглавления) документа, которое впоследствии будет использоваться
ассистивными (вспомогательными) технологиями для облегчения навигации по
статье или поисковыми системами для улучшения результатов поиска.
Схема состоит из списка одного или более вложенных разделов. Раздел (секция)
представляет собой контейнер, который соответствует некоторым узлам в
исходном дереве DOM. Раздел в данном случае не является
элементом <section> , он просто подразумевает его концепцию. Каждый раздел
может иметь один заголовок, связанный с ним, а также любое количество
дополнительных вложенных разделов.
Также отдельно выделяют корневые секционные элементы. Они отличаются от
секционных элементов, но могут также иметь схему.
Элементы, формирующие разделы HTML-документа

 1. Элемент <body>
 2. Элемент <article>
 3. Элемент <section>
 4. Элемент <nav>
 5. Элемент <aside>
 6. Элементы <h1>, <h2>, <h3>, <h4>, <h5> и <h6>
 7. Элемент <header>
 8. Элемент <footer>
1. Элемент <body>
Категории контента: корневой секционный.
Контекст, в котором этот элемент может быть использован: как второй
элемент в элементе <html> .
Пропуск тегов: начальный тег <body> может быть опущен, если элемент пуст,
или если первое, что внутри элемента не является пробелом или комментарием,
за исключением случаев, когда первое, что идет за тегом <body> являются
элементы <meta> , <link> , <script> или <style> .
Закрывающий тег </body> может быть опущен, если перед ним нет
комментария.
<!DOCTYPE html>
HTML
Элемент <body> представляет содержимое документа.
таблице ниже.
Элемент <body> предоставляет в качестве атрибутов ряд обработчиков событий
объекта Window
— onblur , onerror , onfocus , onload , onresize и onscroll .
ТАБЛИЦА 1. АТРИБУТЫ ЭЛЕМЕНТА <BODY
onafterprint Событие, срабатывающее после отправки страницы на печать или после

закрытия окна печати.
onbeforeprint Событие, срабатывающее перед отправкой страницы на печать.
onbeforeunload Событие срабатывает, когда посетитель инициировал переход на другую

страницу или нажал «закрыть окно». Позволяет отображать сообщение в
диалоговом окне подтверждения, чтобы сообщить пользователю, хочет ли он
остаться или покинуть текущую страницу.
Событие срабатывает, когда меняется hash-часть URL, например, когда
пользователь перейдет с
onhashchange адреса example.domain/test.aspx#page1 на example.domain/test
aspx#page2 .
onlanguagechange Событие срабатывает при изменении предпочтительных языков.
onmessage Событие происходит, когда сообщение получено через источник события.
onoffline Событие вызывается браузером в том случае, когда браузер определит, что
соединение с интернет пропало.
ononline Событие вызывается браузером в том случае, когда соединение с интернет

возобновилось.
Событие происходит, когда пользователь покидает страницу посредством
onpagehide навигации, например, нажав на ссылку, обновив страницу, заполнив форму и
т.д.
Событие происходит, когда пользователь переходит на веб-страницу, после
onpageshow
события onload .
onpopstate Событие срабатывает, когда пользователь просматривал историю сеанса.
onrejectionhandl
Событие возникает, когда Promise s отклоняются.
ed
onstorage Событие срабатывает при изменении места хранения.
onunhandledrejec
Событие используется для обработки необработанных событий отказа.
tion
onunload Событие срабатывает если страница не загрузилась по каким-либо причинам,

либо при закрытии окна браузера.
В этом примере на странице обновляется индикатор, показывающий, находится ли
пользователь в сети:
<!DOCTYPE html>
<html>
<head>
<title>Онлайн или офлайн?</title>
<script>
function update(online) {
document.getElementById('status').textContent =
online ? 'Онлайн' : 'Офлайн';
}
</script>
</head>
<body ononline="update(true)"
onoffline="update(false)"
onload="update(navigator.onLine)">
<p>Вы: <span id="status">(Статус неизвестен)</span></p>
</body>
</html>
HTML
2. Элемент <article>
Категории контента: потоковое содержимое, секционное содержимое, видимое
содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается
потоковое содержимое.
Элемент <article> представляет собой законченное или автономное
произведение в документе, странице, приложении или сайте. Может
дублироваться на других страницах сайта и содержать внутри другие
элементы <article> , которые по содержанию имеют близкое отношение к
содержанию внешней статьи. Если на странице присутствует только одна статья с
заголовком и текстовым содержимым, она не нуждается в обёртке
элементом <article> .
Общее правило заключается в том, что элемент <article> уместен только в том
случае, если содержимое элемента будет явно указано в схеме документа.
Каждая статья должна быть идентифицирована, обычно путем включения
заголовка (элемент <h1-h6> ) в качестве дочернего элемента
элемента <article> .
<article>
<header>
<h2><a href="https://herbert.io">Короткая заметка о ношении
шорт</a></h2>
<p>Опубликовано в пятницу, 13 марта 2020 Патриком Люком.
<a href="https://herbert.io/short-note/#comments">6
комментариев</a></p>
</header>
<p>Попутчик задал интересный вопрос: почему вы носите шорты, а не длинные
брюки? Человек носил брюки-кюлоты как время, поэтому я считал вопрос
двусмысленным по своей природе, но я попытался дать честный ответ, несмотря
на сомнительную одежду спрашивающего.</p>
<p>Короткий ответ: мне нравится носить шорты, длинный ответ ...</p>
<p><a href="https://herbert.io/short-note/">Продолжить чтение: Короткая
заметка о ношении шорт</a></p>
</article>
HTML
<section>
<article>
<h2><a href="">Весна приходит (и уходит) в графстве Суссекс</a></h2>
<p>Вчера я присоединился к Brooklyn Bird Club для нашей ежегодной
поездки в Западный Нью-Джерси, в частности, в Hyper Humus, относительно
недавно обнаруженную «горячее место».</p>
</article>
<article>
<h2><a href="">Как стать бердвотчером?</a></h2>
<p>Птицы — почти единственная связь современного городского
человека с дикой природой. Благодаря бердвотчингу вы, скорее всего, начнете
больше путешествовать, причем по самым неожиданным местам. Если у вас есть
дети, можно изучать птиц вместе — это идеальное семейное хобби. </p>
</article>
<nav>
<a href="">« Предыдущие записи</a>
</nav>
</section>
HTML
3. Элемент <section>
Элемент <section> представляет общий раздел документа или приложения,
группируя тематическое содержимое. Каждый раздел должен быть
идентифицирован, обычно путем включения заголовка (элемент <h1-h6> ) в
качестве дочернего элемента <section> .
Примерами разделов могут быть главы, различные страницы во вкладках или
пронумерованные разделы. Домашняя страница веб-сайта может быть разбита на
разделы для введения, новостей и контактной информации.
Авторам рекомендуется использовать элемент <article> вместо

элемента <section> , когда контент завершен или самодостаточен.
Элемент <section> не является универсальным контейнерным элементом.
Когда элемент нужен только для стилизации или для удобства написания
сценариев, рекомендуется использовать вместо этого элемент <div> . Общее
правило заключается в том, что элемент <section> уместен только в том
случае, если содержимое элемента будет явно указано в схеме документа.
<article>
<header>
<h2>Яблоки</h2>
<p>Вкусные, восхитительные фрукты!</p>
</header>
<p>Яблоко является плодом яблони.</p>
<section aria-label="Красные яблоки">
<h3>Ред Делишес</h3>
<p>Эти ярко-красные яблоки чаще всего встречаются во многих
супермаркетах.</p>
</section>
<section aria-label="Зеленые яблоки">
<h3>Гренни Смит</h3>
<p>Эти сочные зеленые яблоки станут отличной начинкой для яблочных
пирогов.</p>
</section>
</article>
HTML
<article> внутри <section>
Можно создавать родительские элементы <section> с вложенными

элементами <article> , в которых есть один или несколько
элементов <article> . Не все страницы должны быть устроены именно так, но
это допустимый способ вложения элементов. Например, основная область
контента страницы содержит два блока со статьями разной тематики. Можно
сделать на этом акцент, поместив каждую статью одной тематики внутрь
элемента <section>
<section>
<h1>Заметки о природе</h1>
<article>
<h2>...</h2>
<p>...</p>
</article>
<article>
<h2>...</h2>
<p>...</p>
</article>
</section>
<section>
<h1>Исторические заметки</h1>
<article>
<h2>...</h2>
<p>...</p>
</article>
<article>
<h2>...</h2>
<p>...</p>
</article>
</section>
HTML
4. Элемент <nav>
Элемент <nav> представляет собой раздел страницы с навигационными
ссылками, который ссылается на другие страницы или части внутри страницы,
при этом не обязательно должен находиться внутри <header> . На странице
может быть несколько элементов <nav> .
В случаях, когда содержимое элемента <nav> представляет список элементов,
рекомендуется использовать разметку списка. Не заменяет теги <ul> или <оl> ,
он просто их обрамляет.
Не все группы ссылок на странице должны быть обернуты элементом <nav> —
этот элемент предназначен главным образом для разделов, состоящих из
основных навигационных блоков. В частности, нижние колонтитулы обычно имеют
краткий список ссылок на различные страницы сайта, такие как условия
обслуживания, домашняя страница и страница об авторских правах. Для таких
случаев достаточно одного элемента <footer> .
<body>
<h1>Вики-центр</h1>
<nav>
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/events">Текущие события</a></li>
...
</ul>
</nav>
<article>
<header>
<h2>Афиша мероприятий</h2>
</header>
<nav>
<ul>
<li><a href="#public">Лекции</a></li>
<li><a href="#practice">Практические занятия</a></li>
...
</ul>
</nav>
<div>
<section id="public">
<h2>Лекции</h2>
<p>...</p>
</section>
<section id="practice">
<h2>Практические занятия</h2>
<p>...</p>
</section>
...more...
</div>
<footer>
<p><a href="?edit">Редактировать</a> | <a href="?delete">Удалить</a> |
<a href="?rename">Переименовать</a></p>
</footer>
</article>
<footer>
<p><small>© 2020 Вики-центр</small></p>
</footer>
</body>
HTML
В качестве элементов панели навигации можно использовать не только элементы
списков:
<nav>
<p><a href="">...</a></p>
<p><a href="">...</a></p>
</nav>
HTML
Также можно добавлять заголовки внутрь элемента:
<nav>
<h2>...</h2>
<ul>
<li><a>...</a></li>
<li><a>...</a></li>
<li><a>...</a></li>
</ul>
</nav>
HTML
5. Элемент <aside>
Элемент <aside> представляет раздел страницы, который состоит из
содержимого, косвенно связанного с родительским секционным элементом и
который можно рассматривать отдельно от него. Чаще всего элемент
позиционируется как боковая колонка (как в книгах) и включает в себя группу
элементов: <nav> , цифровые данные, цитаты, рекламные блоки, архивные
записи. Не подходит для блоков, просто позиционированных в стороне.
<aside>
<h2>Швейцария</h2>
<p>Швейцария, страна в центре географической Европы, не имеющая выхода к
морю, не присоединилась к геополитическому Европейскому союзу, хотя она
подписала ряд европейских договоров.</p>
</aside>
HTML
<body>
<header>
<h1>Мой замечательный блог</h1>
<p>Мой слоган</p>
</header>
<aside>
<nav>
<h2>Мой блогролл</h2>
<ul>
<li><a href="https://blog.example.com/">Интересная ссылка</a>
</ul>
</nav>
<nav>
<h2>Архивы</h2>
<ol reversed>
<li><a href="/last-post">Моя последняя запись</a>
<li><a href="/first-post">Моя первая запись</a>
</ol>
</nav>
</aside>
<aside>
<h2>Мой Twitter</h2>
<blockquote cite="https://twitter.example.net/t31351234">
Я в отпуске, пишу для своего блога.
</blockquote>
<blockquote cite="https://twitter.example.net/t31219752">
Я скоро пойду в отпуск.
</blockquote>
</aside>
<article>
<h2>Моя последняя запись</h2>
<p>Это моя последняя запись.</p>
<footer>
<p><a href="/last-post" rel=bookmark>Ссылка</a>
</footer>
</article>
<article>
<h2>Моя первая запись</h2>
<p>Это моя первая запись.</p>
<aside>
<h1>Публикация</h1>
<p>Пока я думаю об этом, я хотел бы сказать кое-что о публикациях.
Опубликовывать статьи - это весело!</p>
</aside>
<footer>
<p><a href="/first-post" rel=bookmark>Ссылка</a>
</footer>
</article>
<footer>
<nav>
<a href="/archives">Архивы</a> — <a href="/about">Обо мне</a> —
<a href="/copyright">Copyright</a>
</nav>
</footer>
</body>
HTML
6. Элементы <h1>, <h2>, <h3>, <h4>, <h5> и <h6>
Элементы <h1-h6> представляют заголовки для своих разделов. Эти элементы
имеют ранг, определяемый числом в их имени. Элемент <h1> имеет наивысший
ранг, элемент <h6> имеет наименьший ранг, а два элемента с одинаковым
именем имеют одинаковый ранг. Используйте ранг элементов заголовка, чтобы
создать схему документа.
Элементы <h1 – h6> не должны использоваться для разметки подзаголовков,
альтернативных заголовков и слоганов, если только они не предназначены для
заголовка нового раздела или подраздела.
<body>
<h1>Заголовок верхнего уровня</h1>
<section><h2>Заголовок второго уровня</h2>
<section><h3>Заголовок третьего уровня</h3>
<section><h4>Заголовок четвертого уровня</h4>
<section><h5>Заголовок пятого уровня</h5>
<section><h6>Заголовок шестого уровня</h6>
</section>
</section>
</section>
</section>
</section>
</body>
HTML
Для элементов доступны глобальные атрибуты.
7. Элемент <header>
Категории контента: потоковое содержимое, видимое содержимое.
Элемент <header> представляет вводное содержимое для его ближайшего
предка — элемента <main> или элемента из категории секционного содержимого
или корневого секционного элемента. Элемент <header> обычно содержит
группу вводных или навигационных элементов.
Если элемент <header> является ближайшим предком элемента <body> и не
находится внутри <main> , он представляет вводное содержимое для страницы в
целом.
Элемент <header> обычно содержит заголовок раздела (элемент <h1–h6> ), но
это не обязательно. Элемент <header> также можно использовать как элемент-
обертку для оглавления раздела, формы поиска или любых уместных логотипов. В
документе может содержаться одновременно несколько элементов <header> и
они могут располагаться в любой части страницы.
Элемент <header> не является секционным содержимым, он не вводит новый
раздел.
<article>
<header>
<h1>Flexbox: Полное руководство</h1>
<aside>
<header>
<h2>Автор: Wes McSilly</h2>
<p><a href="./wes-mcsilly/">Связаться с ним!</a></p>
</header>
<p>Эксперт в Flexbox.</p>
</aside>
</header>
<p><ins>Руководство о Flexbox должно было быть здесь, но оно оказалось, что
Wes не был экспертом по Flexbox.</ins></p>
</article>
HTML
Элемент <header> может содержать только <header> или <footer> , если они
сами находятся внутри <article> , <aside> , <nav> или <section> .
8. Элемент <footer>
Элемент <footer> представляет нижний колонтитул для его ближайшего предка
элемента <main> , или элемента из категории секционного содержимого или
корневого секционного элемента.
Обычно содержит информацию об авторе статьи, данные о копирайте и т.д. Если
используется как колонтитул всей страницы, содержимое дополняется
сведениями об авторских правах, ссылками на условия использования,
контактную информацию, ссылками на связанное содержимое и т.п.
...
<footer>
<nav>
<section>
<h2>Статьи</h2>
<p><img src="images/somersaults.jpeg" alt=""> Посетить спортзал с
нашим классом сальто! Наш учитель Джим проведет вас через шаги в этой статье
из двух частей. <a href="articles/somersaults/1">Часть 1</a> · <a
href="articles/somersaults/2">Часть 2</a></p>
<p><img src="images/crisps.jpeg"> Чипсы закончились, теперь осталась
только картошка. Что вы можете с этим сделать? <a
href="articles/crisps/1">Читать далее...</a></p>
</section>
<ul>
<li> <a href="/about">О нас...</a>
<li> <a href="/feedback">Связаться с нами!</a>
<li> <a href="/sitemap">Карта сайта</a>
</ul>
</nav>
<p><small>© 2020 The Snacker — <a href="/tos">Условия
обслуживания</a></small></p>
</footer>
</body>
HTML
В одном веб-документе может быть несколько элементов <footer> . Как каждая
страница, так и каждая статья может иметь свой элемент <footer> .
Также, <footer> можно поместить в элемент <blockquote> , чтобы указать
источник цитирования.
По материалам Sections
1.11.4. Группировка содержимого

Опубликовано: 25 февраля 2020Обновлено: 22 мая 20202 Comments
HTML-элементы для группировки содержимого веб-
страниц
 1. Элемент <p>
 2. Элемент <address>
 3. Элемент <hr>
 4. Элемент <pre>
 5. Элемент <blockquote>
 6. Элемент <ol>
 7. Элемент <ul>
 8. Элемент <li>
 9. Элемент <dl>
 10. Элемент <dt>
 11. Элемент <dd>
 12. Элемент <figure>
 13. Элемент <figcaption>
 14. Элемент <main>
 15. Элемент <div>
1. Элемент <p>
Пропуск тегов: закрывающий тег элемента <p> может быть пропущен, если
сразу за ним
следует <address> , <article> , <aside> , <blockquote> , <details> , <div
> , <dl> , <fieldset> , <figcaption> , <figure> , <footer> , <form> , <h1>
, <h2> , <h3> , <h4> , <h5> , <h6> , <header> , <hr> , <main> , <nav> , <ol> ,
<p> , <pre> , <section> , <table> или <ul> элемент, или если в
родительском элементе больше нет содержимого, а родительский элемент не
является <a> , <audio> , <del> , <ins> , <map> , <noscript> или <video> .
Элемент <p> представляет абзац. Абзацы — это блоки текста, физически
отделенные от смежных блоков пустыми строками.
<p>Маленький котенок осторожно уселся на кусок ковра. Позже в его жизни это
будет упоминаться как время, когда кошка сидела на коврике.</p>
HTML
<fieldset>
<legend>Персональная информация</legend>
<p>
<label>Имя: <input name="n"></label>
<label><input name="anon" type="checkbox"> Скрыть от других
пользователей</label>
</p>
<p><label>Адрес: <textarea name="a"></textarea></label></p>
</fieldset>
HTML
Элемент <p> не должен использоваться, когда уместен более конкретный
элемент. Следующий пример является технически правильным:
<section>
...
<p>Последнее изменение: 2001-04-23</p>
<p>Автор: fred@example.com</p>
</section>
HTML
Тем не менее, это было бы лучше разметить как:
<section>
...
<footer>Последнее изменение: 2001-04-23</footer>
<address>Автор: fred@example.com</address>
</section>
HTML
Или так:
<section>
...
<footer>
<p>Последнее изменение: 2001-04-23</p>
<address>Автор: fred@example.com</address>
</footer>
</section>
HTML
Элементы списка (в частности, элементы <ol> и <ul> ) не могут быть дочерними
элементами <p> . Поэтому, когда предложение содержит маркированный список,
его можно разметить следующим образом:
<p>Например, в этом фантастическом предложении есть элементы маркированного

списка, относящиеся к</p>
<ul>
<li>волшебникам,
<li>путешествию быстрее скорости света,
<li>телепатии,
</ul>
<p>и это обсуждается ниже.</p>
HTML
2. Элемент <address>
Элемент <address> представляет контактную информацию о человеке или
организации. Он должен включать физическое и / или цифровое местоположение
/ контактную информацию и средства идентификации лица (лиц) или
организации, к которой относится эта информация. В браузере обычно
отображается курсивом.
Например, твиттер-аккаунт W3C:
<address>
<p>W3C в Twitter:
<p><a href="https://twitter.com/w3c">@w3c</a>
</address>
HTML
Адрес, телефон и факс организации:
<address>
Центральный офис АО «Почта России»<br>
131000, Москва, Варшавское шоссе, 37<br>
Тел.: +7 (495) 956-20-67 | Факс: +7 (495) 956-99-51
</address>
HTML
3. Элемент <hr>
Категории контента: потоковое содержимое.
Элемент <hr> представляет собой тематический разрыв на уровне абзаца,
например, изменение сцены в рассказе или переход к другой теме в разделе
справочника.
<section>
<h1>Общение</h1>
<p>Существуют различные способы общения. Этот раздел охватывает несколько
важных, используемых проектом.</p>
<hr>
<p>Камни связи, кажется, приходят парами и имеют загадочные свойства:</p>
<ul>
<li>Они могут передавать мысли в двух направлениях после активации, если
используются в одиночку.</li>
<li>Если оба камня используются с другим устройством, сознание
переключается на другое тело.</li>
</ul>
<hr>
<p>Радиоприемники используют электромагнитный спектр в метровом диапазоне и
дольше.</p>
<hr>
<p>Сигнальные вспышки используют электромагнитный спектр в нанометровом
диапазоне.</p>
</section>
HTML
Нет необходимости в элементе <hr> между разделами, поскольку
элементы <section> и элементы <h1> сами подразумевают смену тематики.
Элемент <hr> не влияет на структуру документа.
4. Элемент <pre>
Элемент <pre> представляет собой блок предварительно отформатированного
текста, в котором структура представлена типографскими соглашениями, а не
элементами.
В синтаксисе HTML ведущий символ новой строки, следующий сразу за начальным
тегом <pre> , удаляется.
Для представления блока компьютерного кода, элемент <pre> может
использоваться с элементом <code> . Для представления результата выполнения
программного кода или скрипта элемент <pre> может использоваться с
элементом <samp> . Аналогично, элемент <kbd> может использоваться в
элементе <pre> для указания текста, который должен ввести пользователь.
<p>Это конструктор <code>Panel</code>:</p>

<pre><code>function Panel(element, canClose, closeHandler) {
this.element = element;
this.canClose = canClose;
this.closeHandler = function () { if (closeHandler) closeHandler() };
}</code></pre>
HTML
5. Элемент <blockquote>
Категории контента: потоковое содержимое, корневой секционный, видимое
Для элемента доступны глобальные атрибуты и необязательный атрибут cite ,
содержащий ссылку на источник цитаты. Браузеры могут разрешать
пользователям переходить по таким ссылкам, но они в первую очередь
предназначены для частного использования (например, серверными скриптами,
собирающими статистику использования цитат сайта), а не для читателей.
Элемент <blockquote> представляет содержимое, цитируемое из другого
источника, необязательно со ссылкой на источник цитирования, которая
указывается в элементе <footer> или <cite> , и, необязательно, с
изменениями по тексту, такими как аннотации и сокращения.
<blockquote>
<p>От перца, верно, начинают всем перечить... От уксуса - куксятся, от
горчицы - огорчаются, от лука - лукавят, от вина - винятся, а от сдобы -
добреют. Как жалко, что никто об этом не знает... Всё было бы так просто! Ели
бы сдобу и добрели!</p>
<cite>Льюис Кэрролл. Приключения Алисы в Стране чудес</cite>
</blockquote>
HTML
<blockquote>
<p>Моя любимая книга <cite class="from-source">"О водоплавающих"</cite></p>
<footer>- <cite>Майк Смит</cite></footer>
</blockquote>
HTML
6. Элемент <ol>
Категории контента: потоковое содержимое. Если содержит хотя бы один
элемент <li> — видимое содержимое.
таблице ниже:
ТАБЛИЦА 1. АТРИБУТЫ ЭЛЕМЕНТА <OL

Логический атрибут. Если присутствует, это означает, что список является
reversed нисходящим (…, 3, 2, 1). Если атрибут опущен, список является восходящим (1, 2, 3
…).
Целое число, задающее порядковый номер первого элемента списка. По умолчанию
start
равно 1 (если отсутствует атрибут reversed ).
Используется для указания типа маркера, по умолчанию используется десятичная

нумерация. Принимаемые значения:
1 — десятичная нумерация.
A — нумерация списка в алфавитном порядке, прописные буквы латинского
type алфавита (A, B, C, D).
a — нумерация списка в алфавитном порядке, строчные буквы латинского
алфавита (a, b, c, d).
I — нумерация римскими заглавными цифрами (I, II, III, IV).
i — нумерация римскими строчными цифрами (i, ii, iii, iv).
Элемент <ol> представляет собой список элементов, где элементы были

изначально упорядочены таким образом, что изменение порядка изменило бы
смысл документа. Элементами списка являются элементы <li> .
<p>Я жил в следующих странах (приведено в порядке, когда я впервые жил

там):</p>
<ol>
<li>Швейцария
<li>Великобритания
<li>США
<li>Норвегия
</ol>
HTML
7. Элемент <ul>
Категории контента: потоковое содержимое. Если содержит хотя бы один
элемент <li> — видимое содержимое.
Элемент <ul> представляет собой список элементов, где порядок элементов не
важен, то есть когда изменение порядка не приведет к существенному изменению
смысла документа.
<p>Я жил в следующих странах:</p>

<ul>
<li>Швейцария
<li>Великобритания
<li>США
<li>Норвегия
</ul>
HTML
8. Элемент <li>
Категории контента: отсутствуют.
Контекст, в котором этот элемент может быть использован: внутри
элемента <ol> и <ul> .
Пропуск тегов: закрывающий тег </li> может быть опущен, если
элемент <li> сразу следует за другим элементом <li> , или если больше нет
содержания в элементе, в который вложен тег.
Для элемента доступны глобальные атрибуты. Если элемент является дочерним
элементом <ol> — необязательный атрибут value .
Элемент <li> представляет собой элемент списка. Если родительским
элементом является элемент <ol> , то элемент <li> имеет порядковый номер.
Атрибут value , если он присутствует, должен быть допустимым целым числом,
задающим порядковый номер элемента списка.
<figure>
<figcaption>Топ 10 фильмов всех времен</figcaption>
<ol>
<li value="10"><cite>Джози и кошечки</cite>, 2001</li>
<li value="9"><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
<li value="8"><cite>Приключения Флика</cite>, 1998</li>
<li value="7"><cite>История игрушек</cite>, 1995</li>
<li value="6"><cite>Корпорация монстров</cite>, 2001</li>
<li value="5"><cite>Тачки</cite>, 2006</li>
<li value="4"><cite>История игрушек 2</cite>, 1999</li>
<li value="3"><cite>В поисках Немо</cite>, 2003</li>
<li value="2"><cite>Суперсемейка</cite>, 2004</li>
<li value="1"><cite>Рататуй</cite>, 2007</li>
</ol>
</figure>
HTML
9. Элемент <dl>
Категории контента: потоковое содержимое. Если имеется хотя бы одна
пара <dt> — <dd> — видимое содержимое.
Элемент <dl> представляет список описаний, состоящий из нуля или более
групп термин-описание. Термин представлен элементом <dt> , описание —
элементом <dd> .
Группы термин-описание могут быть терминами и определениями, вопросами и
ответами, категориями и темами и т.п.
<dl>
<dt>Текила «Бланко»</dt>
<dd>Кристально прозрачная текила с медовым вкусом спелой агавы...</dd>
<dt>Текила «Репосадо»</dt>
<dd>Текила, выдержанная в бочках из белого дуба в течение 8-10
месяцев...</dd>
</dl>
HTML
10. Элемент <dt>
Контекст, в котором этот элемент может быть использован: перед
элементами <dd> или <dt> внутри элементов <dl> .
Пропуск тегов: закрывающий тег элемента <dt> может быть опущен, если за
элементом <dt> сразу же следует другой элемент <dt> или элемент <dd> .
Элемент <dt> представляет термин в списке описаний <dl> .
При использовании в элементе <dl> элемент <dt> не обязательно представляет
определяемый термин. Для этой цели можно использовать элемент <dfn> .
<dl>
<dt lang="en-us"><dfn>Color</dfn></dt>
<dt lang="en-gb"><dfn>Colour</dfn></dt>
<dd>A sensation which (in humans) derives from the ability of the fine
structure of the eye to distinguish three
differently filtered analyses of a view.</dd>
</dl>
HTML
11. Элемент <dd>
Контекст, в котором этот элемент может быть использован: после
элементов <dt> или <dd> внутри элементов <dl> .
Пропуск тегов: закрывающий тег элемента <dd> может быть опущен, если за
элементом <dd> сразу же следует другой элемент <dd> или элемент <dt> или
если в родительском элементе больше нет содержимого.
Элемент <dd> представляет описание в списке описаний <dl> .
12. Элемент <figure>
Категории контента: потоковое содержимое, корневой секционный, видимое
Элемент <figure> представляет автономное содержимое (необязательно с
подписью), являющееся самостоятельным элементом основного потока. С
помощью элемента <figure> можно добавлять краткие характеристики к
иллюстрациям, фотографиям, диаграммам, фрагментам кода и т.д.
<figure>
<img src="picture.jpg" alt="Осень">
<figcaption>Осенний лес</figcaption>
</figure>
HTML
Когда на <figure> ссылаются из основного содержимого документа,
идентифицируя его по заголовку (например, по номеру рисунка), это позволяет
легко перемещать такое содержимое из основного содержимого, например, в
боковую колонку или приложение, не затрагивая поток документа.
Стили браузеров по умолчанию для элемента <figure> :
display: block;
margin-left: 40px;
margin-right: 40px;
margin-top: 1em;
margin-bottom: 1em;
CSS
13. Элемент <figcaption>
Контекст, в котором этот элемент может быть использован: как потомок
элемента <figure> .
Элемент <figcaption> представляет заголовок или легенду для остального
содержимого родительского элемента <figure> .
14. Элемент <main>
потоковое содержимое; не может быть потомком таких элементов
как <article> , <aside> , <footer> , <header> или <nav> .
Элемент <main> включает основное содержимое элемента <body> документа
или приложения и исключает содержимое, которое повторяется на страницах
сайта/приложения, таких как ссылки для навигации по сайту, информация об
авторских правах, логотипы сайта и баннеры, а также поисковые формы (за
исключением случаев, когда основной функцией документа или приложения
является поисковая форма).
Не является секционным содержимым, поэтому не оказывает никакого влияния на
структуру документа.
В документе должно быть не более одного элемента <main> .

<body>
<header>
<h1>Пудель</h1>
<nav>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="about.html">О породе</a></li>
<li><a href="health.html">Здоровье</a></li>
</ul>
</nav>
</header>
<main>
<section>
<header>
<h2>О породе</h2>
<nav>
<ul>
<li><a href="#basic">Разновидности</a></li>
<li><a href="#app">Внешний вид</a></li>
<li><a href="#temp">Характер</a></li>
</ul>
</nav>
</header>
<section id="basic">
<h3>Разновидности</h3>
<p>...</p>
</section>
<section id="app">
<h3>Внешний вид</h3>
<p>...</p>
</section>
<section id="temp">
<h3>Характер</h3>
<p>...</p>
</section>
<footer>
<a href="#basic">Разновидности</a>
<a href="#app">Внешний вид</a>
<a href="#temp">Характер</a>
</footer>
</section>
</main>
<footer>
<small>Copyright © <time datetime="2016">2016</time> Моя
собака.ру</small>
</footer>
</body>
HTML
15. <div>
потоковое содержимое; как дочерний элемент <dl> .
Элемент <div> сам по себе ничего не значит. Он представляет свои дочерние
элементы. Может использоваться с атрибутами class , lang и title для
разметки семантики, общей для группы последовательных элементов.
Рекомендуется использовать элемент <div> в случаях, когда другой элемент не
подходит. Использование более подходящих элементов вместо
элемента <div> обеспечивает лучшую доступность для читателей и облегчает
обслуживание кода.
С другой стороны, элемент <div> может быть полезны для стилистических
целей или для обертывания нескольких абзацев внутри раздела, имеющих общие
свойства. В примере ниже мы видим элемент <div> , используемый в качестве
способа задания языка двух абзацев сразу, вместо того чтобы устанавливать язык
для двух элементов абзаца отдельно:
<article lang="en-US">
<h2>My use of language and my cats</h2>
<p>My cat’s behavior hasn’t changed much since her absence, except that she
plays her new physique to the neighbors regularly, in an attempt to get
pets.</p>
<div lang="en-GB">
<p>My other cat, colored black and white, is a sweetie. He followed us
to the pool today, walking down the pavement with us. Yesterday he apparently
visited our neighbours. I wonder if he recognizes that their flat is a mirror
image of ours.</p>
<p>Hm, I just noticed that in the last paragraph I used British English.
But I’m supposed to write in American English. So I shouldn’t say "pavement"
or "flat" or "color"...</p>
</div>
<p>I should say "sidewalk" and "apartment" and "color"!</p>
</article>
HTML
По материалам Grouping content

Опубликовано: 26 февраля 2020Обновлено: 22 мая 20200 Comments
HTML-элементы для текстового содержимого
 1. Элемент <a>
 2. Элемент <em>
 3. Элемент <strong>
 4. Элемент <small>
 5. Элемент <s>
 6. Элемент <cite>
 7. Элемент <q>
 8. Элемент <dfn>
 9. Элемент <abbr>
 10. Элемент <ruby>
 11. Элемент <rb>
 12. Элемент <rt>
 13. Элемент <rtc>
 14. Элемент <rp>
 15. Элемент <data>
 16. Элемент <time>
 17. Элемент <code>
 18. Элемент <var>
 19. Элемент <samp>
 20. Элемент <kbd>
 21. Элементы <sub> и <sup>
 22. Элемент <i>
 23. Элемент <b>
 24. Элемент <u>
 25. Элемент <mark>
 26. Элемент <bdi>
 27. Элемент <bdo>
 28. Элемент <span>
 29. Элемент <br>
 30. Элемент <wbr>
1. Элемент <a>
Категории контента: потоковое содержимое, текстовое содержимое, видимое
содержимое; если элемент имеет атрибут href — интерактивное содержимое.
таблице:
ТАБЛИЦА 1. АТРИБУТЫ ЭЛЕМЕНТА <A

href Задает адрес гиперссылки.
target Устанавливает контекст просмотра по умолчанию для навигации по

гиперссылкам.
download Определяет, скачивать ли целевой ресурс вместо перехода на него.
rel Устанавливает отношение текущего документа (или подраздела / темы) с

целевым.
rev Устанавливает обратную связь отношения целевой страницы с текущим

документом (или подразделом / темой).
hreflang Описывает язык целевого ресурса.
type Добавляет подсказку для типа ссылочного ресурса.
referrerpolicy Устанавливает политику HTTP-заголовка — количество информации об исходно

странице, с которой осуществлен переход на целевую страницу.
Если элемент <a> имеет атрибут href , то он представляет
собой гиперссылку (ссылку на другой ресурс, к которому можно перейти или
скачать) или якорь (ссылку на идентификатор фрагмента, который является
значением в атрибуте id элемента в связанном документе).
Элемент <a> может быть обернут вокруг целых абзацев, списков, таблиц и т. д.,
даже целых разделов, при условии, что внутри отсутствует интерактивный
контент (например, кнопки или другие ссылки).
<aside class="advertising">
<h2>Викиум</h2>
<a href="https://ad.example.com/?adid=1929&pubid=1422">
<section>
<h3>Тренажеры для мозга</h3>
<p>Какая функция мозга у тебя сильнее?</p>
</section>
</a>
</aside>
HTML
2. Элемент <em>
Элемент <em> делает логические усиления в тексте, подчеркивает слова или
словосочетания, уточняя смысл фразы таким образом, чтобы читателю было
точно понятно, что хотел выразить автор. Уровень акцента, который имеет
конкретный отрывок текста, определяется количеством элементов <em> .
В этом предложении общая констатация факта:
<p>Кошки это милые животные.</p>
HTML
Выделяя первое слово, данное утверждение подразумевает, что это именно
обсуждаемый вид животного (возможно, кто-то утверждает, что собаки милые):
<p><em>Кошки</em> это милые животные.</p>
HTML
Элемент <em> не должен использоваться для расстановки визуальных акцентов в
тексте за счет курсивного начертания, для этого больше подходит элемент <i> .
Также <em> не предназначен для передачи важности, для этой цели лучше
использовать элемент <strong> .
3. Элемент <strong>
Элемент <strong> подчеркивает важность, серьезность или срочность своего
содержимого, также может быть использован для обозначения предупреждения
или предостережения.
Элемент <strong> может быть использован в заголовке, подписи или абзаце,
чтобы отличить действительно значимую часть текста от других частей.
<p>Добро пожаловать в Реми, систему напоминаний.</p>

<p>Ваши задачи на сегодня:</p>
<ul>
<li><p><strong>Выключите духовку</strong></p></li>
<li><p>Выбросьте мусор</p></li>
<li><p>Займитесь стиркой</p></li>
</ul>
HTML
4. Элемент <small>
Элемент <small> представляет собой примечания, набранные мелким шрифтом.
Такой текст обычно содержит заявления об отказе от ответственности,
предостережения, юридические ограничения или авторские права. Мелкий шрифт
также иногда используется для атрибуции или для удовлетворения требований
лицензирования.
Элемент <small> предназначен для коротких отрывков текста, он не должен
использоваться для расширенных отрывков текста, таких как несколько абзацев,
списков или разделов текста.
<aside>
<h1>Компания Example Corp</h1>
<p>Эта компания в основном создает небольшое программное обеспечение и
веб-сайты.</p>
<p>Миссия компании Example Corp - «Предоставлять развлечения и новости на
выборочной основе».</p>
<p><small>Информация получена с <a
href="https://example.com/about.html">example.com</a> главной
страницы.</small></p>
</aside>
HTML
5. Элемент <s>
Элемент <s> представляет содержимое, которое больше не является точным или
актуальным. В этом примере рекомендованная розничная цена была помечена как
неактуальная, поскольку у рассматриваемого продукта новая продажная цена.
<p>Купите наш чай со льдом и лимонад!</p>

<p><s>Рекомендованная розничная цена: 100 руб. за бутылку</s></p>
<p><strong>Успей купить сегодня всего за 60 руб. за бутылку!</strong></p>
HTML
Элемент <s> не подходит для обозначения правок документа; чтобы пометить
область текста как удаленную из документа, используйте элемент <del> .
6. Элемент <cite>
Элемент <cite> представляет собой ссылку на творческое произведение. Он
должен включать название работы или имя автора (человека, людей или
организации) или ссылку на URL, или ссылку в сокращенной форме в
соответствии с соглашениями, используемыми для добавления метаданных
цитирования.
К творческим произведениям относятся: книга, газета, эссе, стихотворение,
партитура, песня, сценарий, фильм, телешоу, игра, скульптура, картина,
театральная постановка, пьеса, опера, мюзикл, выставка, отчет о судебном деле,
компьютерная программа, веб-сайт, веб-страница, сообщение или комментарий в
блоге, на форуме, твит, письменное или устное заявление и т.д.
<p>Кто твой любимый доктор (в сериале <cite>Доктор Кто</cite>)?</p>
HTML
7. Тег <q>
Для элемента доступны глобальные атрибуты, а также необязательный
атрибут cite , содержащий ссылку (URL) на источник цитаты или
дополнительную информацию о редактировании.
Элемент <q> представляет некоторое содержимое, цитируемое из другого
источника.
Знаки препинания (такие как кавычки), добавляются браузером автоматически,
поэтому их не нужно ставить в тексте вручную. Ссылки на источник цитаты в
основном предназначены для частного использования (например, серверными
сценариями, собирающими статистику использования цитат сайта), а не для
читателей.
8. Тег <dfn>
атрибут title .
Элемент <dfn> используется для выделения термина (в некоторых браузерах
отображается курсивом). Определение (описание) термина должно находиться в
том же абзаце <p> , списке описания <dl> или разделе <section> , что и
элемент <dfn> .
<p><dfn>Certificate Signing Request</dfn> — это ключ, генерируемый при

запросе на выдачу SSL-сертификата.</p>
HTML
При последующем использовании одного и того же термина в тексте он не
нуждается в обертке элементом <dfn> .
Если элемент <dfn> содержит атрибут title , значение
атрибута title переопределяет содержимое элемента <dfn> .
<p><dfn title="Certificate Signing Request">CSR</dfn> — это ключ,

генерируемый при запросе на выдачу SSL-сертификата.</p>
HTML
Элемент <dfn> часто используется в сочетании с элементом <abbr> , чтобы
определить первое вхождение аббревиатуры для последующего использования.
Значение атрибута title элемента <abbr> должно быть точным значением
этого термина.
<p><dfn><abbr title="Certificate Signing Request">CSR</abbr></dfn> — это

ключ, генерируемый при запросе на выдачу SSL-сертификата.</p>
HTML
Для элемента <dfn> можно определить атрибут id , чтобы использовать его для
связывания будущих вхождений аббревиатуры с термином.
<p><dfn id="csr"><abbr title="Certificate Signing Request">CSR</abbr></dfn> —

это ключ, генерируемый при запросе на выдачу SSL-сертификата.</p>
<p>Для генерации <a href="#csr"><abbr title="Certificate Signing
Request">CSR</abbr></a> Вам понадобится предоставить следующую
информацию...</p>
HTML
9. Тег <abbr>
атрибут title .
Элемент <abbr> представляет аббревиатуру, необязательно с расшифровкой (в
браузере обычно подчеркивается пунктирной линией). Расшифровка
аббревиатуры осуществляется с помощью атрибута title , она появляется при
наведении курсора мыши на текст.
<p><dfn id=whatwg><abbr title="Web Hypertext Application Technology Working

Group">WHATWG</abbr></dfn> это свободное неофициальное сотрудничество
производителей веб-браузеров и заинтересованных сторон, которые хотят
разрабатывать новые технологии, позволяющие авторам создавать и развертывать
приложения через World Wide Web.</p>
HTML
10. Элемент <ruby>
Элемент <ruby> позволяет пометить один или несколько фрагментов текста
ruby-аннотациями. Содержимое внутри элемента <ruby> разбивается на
сегменты. Ruby-аннотация используется в преимущественно в Восточно-Азиатской
типографике как руководство по произношению или для включения других
характеристик.
Элемент может содержать:
o один и более текстовых узлов или элементов <rb> ;

o один или несколько элементов <rt> или <rtc> , каждый из которых либо
непосредственно предшествует, либо сопровождается элементами <rp> .
<ruby>日<rt>に</rt></ruby><ruby>本<rt>ほん</rt></ruby>
<ruby>語<rt>ご</rt></ruby>で<ruby>書<rt>か</rt></ruby>
いた<ruby>作<rt>さく</rt></ruby><ruby>文<rt>ぶん</rt></ruby>です。
HTML
11. Элемент <rb>
Пропуск тегов: закрывающий тег элемента <rb> может быть опущен, если сразу
за элементом <rb> следует элемент <rb> , <rt> , <rtc> или <rp> или если в
родительском элементе больше нет содержимого.
Содержимое элемента <rb> представляет основные сегменты текста ruby-
аннотации. Является дочерним элементом элемента <ruby> .
12. Элемент <rt>
Пропуск тегов: закрывающий тег элемента <rt> может быть опущен, если сразу
за элементом <rt> следует элемент <rb> , <rt> , <rtc> или <rp> или если в
Элемент <rt> используется для разметки аннотации к тексту, выводя ее сверху
или снизу над текстом. Является дочерним элементом
элемента <ruby> или <rtc> .
13. Элемент <rtc>
Пропуск тегов: закрывающий тег элемента <rtc> может быть опущен, если за
элементом <rtc> сразу следует элемент <rb> или <rtc> , или если в
Элемент <rtc> отмечает вложенный в него текст как дополнительную
аннотацию. Является дочерним элементом элемента <ruby> .
14. Элемент <rp>
Пропуск тегов: закрывающий тег элемента <rp> может быть опущен, если за
элементом <rp> сразу следует элемент <rb> , <rt> , <rtc> или <rp> или
если в родительском элементе больше нет содержимого.
Элемент <rp> выводит альтернативный текст в случае если браузер не
поддерживает элемент <ruby> . Содержимое элементов <rp> обычно не
отображается браузерами, которые поддерживают ruby-аннотации. Является
дочерним элементом элемента <ruby> или <rtc> , непосредственно перед или
сразу после элемента <rt> или <rtc> , но не между элементами <rt> .
15. Элемент <data>
Для элемента доступны глобальные атрибуты, а также обязательный
атрибут value .
Элемент <data> представляет свое содержимое вместе с машиночитаемой
формой этого содержимого в атрибуте value . Значение атрибута value должно
быть представлением содержимого элемента в машиночитаемом формате.
<p>Новые поступления:</p>
<ul>
<li><data value="44678">Альбом «На память о дне пятидесятилетия Эммануила
Людвиговича Нобеля. 10 июня 1909 г.»</data></li>
<li><data value="44668">Ноты. Травиата. Опера Джузеппе Верди</data></li>
<li><data value="44688">Обух Н.К. Первый снег. Павловск. 1910-е
годы</data></li>
</ul>
HTML
Элемент <data> может быть использован для следующих целей:
o в сочетании с микроформатами или микроданными для улучшения
результатов выдачи в поисковых системах, за счет более точного описания
содержимого элемента;
o в сочетании со сценариями на странице для хранения и обработки данных.
16. Элемент <time>
атрибут datetime .
Элемент <time> представляет свое содержимое вместе с машиночитаемой
формой этого содержимого в атрибуте datetime . Тип содержимого ограничен
различными типами дат, времени, смещений часовых поясов и
продолжительности. Содержимое элемента <time> должно быть валидным
значением атрибута datetime :
Валидный месяц:
<time>2020-05</time>
HTML
Валидная дата:
<time>2020-05-05</time>
HTML
Валидное время:
<time>09:54</time>
HTML
<time>09:54:39</time>
HTML
Валидная дата и время:
<time>2011-11-18 14:54</time>
HTML
Валидная временная зона:
<time>+0000</time>
HTML
<time>+00:00</time>
HTML
Валидная неделя:
<time>2020-W47</time>
HTML
Валидная глобальная дата и время:
<time>2011-11-18T14:54+0000</time>
HTML
Если атрибут datetime присутствует, то содержимым элемента <time> может
быть произвольный текст.
<div class="vevent">
<a class="url"
href="https://www.web2con.com/">https://www.web2con.com/</a>
<span class="summary">Конференция Web 2.0</span>:
<time class="dtstart" datetime="2005-10-05">5</time> -
<time class="dtend" datetime="2005-10-07">7 октября</time>,
at the <span class="location">Отель Argent, Сан-Франциско</span>
</div>
HTML
Сегодня <time datetime="2011-11-18">пятница</time>.

HTML
17. Элемент <code>
Элемент <code> представляет собой фрагмент компьютерного кода, содержимое
элемента отображается в браузере моноширинным шрифтом.
Не существует формального способа указать язык разметки компьютерного кода.
Для подсветки синтаксиса с помощью скрипта можно добавить элементу класс с
префиксом language- .
<pre><code class="language-css">p {
font-size: 14px;
}</code></pre>
HTML
18. Элемент <var>
Элемент <var> представляет переменную. Это может быть фактическая
переменная в математическом выражении или контексте программирования,
идентификатор, представляющий константу, символ, идентифицирующий
физическую величину, параметр функции, или просто термин, используемый в
тексте. Содержимое элемента отображается в браузере курсивом.
<p>Затем он повернулся к доске и взял мел. Подумав несколько минут, он

написал <var>E</var> = <var>m</var> <var>c</var><sup>2</sup>. Учитель
выглядел довольным.</p>
HTML
Для математики, в частности для чего-либо, кроме простейших выражений,
больше подходит MathML . Тем не менее, элемент <var> по-прежнему может
использоваться для ссылки на конкретные переменные, которые затем
упоминаются в выражениях MathML .
<<figure>
<math>
<mi>a</mi>
<mo>=</mo>
<msqrt>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mi>+</mi>
<msup>
<mi>c</mi>
<mn>2</mn>
</msup>
</msqrt>
</math>
<figcaption>
Использование теоремы Пифагора для нахождения гипотенузы <var>a</var>
треугольника с гранями <var>b</var> и <var>c</var>
</figcaption>
</figure>>
HTML
19. Элемент <samp>
Элемент <samp> представляет пример вывода из другой программы или
устройства. В браузере отображается моноширинным шрифтом.
<p>Компьютер сказал, что <samp>во втором лотке слишком много сыра</samp>, но

я не знал, что это значит.</p>
HTML
20. Элемент <kbd>
Элемент <kbd> представляет пользовательский ввод (обычно ввод с клавиатуры,
хотя он также может использоваться для представления другого ввода, такого как
голосовые команды). В браузере отображается моноширинным шрифтом.
Когда элемент <kbd> вложен в элемент <samp> , он представляет вводимые
данные в том виде, в каком они были отражены системой.
Когда элемент <kbd> содержит элемент <samp> , он представляет вводимые
данные, основанные на выходных данных системы.
Когда элемент <kbd> вложен в другой элемент <kbd> , он представляет текущую
клавишу или другую единицу ввода в соответствии с механизмом ввода.
<p>Чтобы заставить Джорджа съесть яблоко, нажмите
<kbd><kbd>Shift</kbd>+<kbd>F3</kbd></kbd></p>
HTML
21. Элементы <sub> и <sup>
Элемент <sub> представляет нижний индекс, а элемент <sup> представляет
верхний индекс.
Эти элементы должны использоваться только для обозначения типографских
условных обозначений с конкретными значениями, а не для типографского
представления ради презентации. Как правило, эти элементы следует
использовать только в том случае, если их отсутствие изменит смысл
содержимого.
Элемент <sub> может использоваться внутри элемента <var> для переменных,

у которых есть индексы.
<p>Координаты <var>i</var>-той точки (<var>x<sub><var>i</var></sub></var>,

<var>y<sub><var>i</var></sub></var>). Например, 10-я точка имеет координаты
(<var>x<sub>10</sub></var>, <var>y<sub>10</sub></var>).</p>
HTML
22. Элемент <i>
Элемент <i> представляет справочные выделения отдельных слов и фрагментов
текста. Обычно используется для выделения терминов, кратких формулировок,
определений и правил в учебных и научных изданиях, фраз из иностранных
языков и т.д. В браузере отображается курсивом. Для обозначения новых
терминов или слов, которые объясняются в дальнейшем тексте, следует
использовать элемент <dfn> .
Термины на языках, отличных от основного текста, должны быть снабжены
атрибутом lang .
<p>"<i lang="fr">Je ne sais quoi</i>" – это слишком размыто.</p>
HTML
23. Элемент <b>
Элемент <b> выделяет ключевые слова, не отмечая их как важные. Это могут
быть ключевые слова в аннотации документа, названия продуктов в обзоре и т.д.
<p>Вы входите в маленькую комнату. Твой <b>меч</b> светится ярче.

<b>Крыса</b> несется мимо угловой стены.</p>
HTML
Элемент <b> следует использовать в качестве крайней меры, если другой
элемент не является более подходящим. В частности, заголовки должны
использовать элементы от <h1> до <h6> , для акцентов в тексте нужно
использовать элемент <em> , важность должна быть обозначена
элементом <strong> , а текст, отмеченный или выделенный, должен
использовать элемент <mark> .
24. Элемент <u>
Элемент <u> представляет отрывок текста с невыраженной, хотя и явно
отображаемой нетекстовой аннотацией, такой как пометка текста как правильного
имени в китайском тексте или маркировка текста как опечатка. В браузере
выделяется подчеркиванием, в связи с чем рекомендуется избегать
использования элемента <u> там, где его можно спутать с гиперссылкой.
25. Элемент <mark>
Для тега доступны глобальные атрибуты.
Элемент <mark> представляет собой фрагмент текста в одном документе,
помеченный или выделенный для справочных целей, таких как:
o привлечение внимания к определенной части цитаты;
o выделение части цитируемого текста, которая изначально не была
выделена;
o выделение частей документа, которые соответствуют какой-либо строке
поиска.
<p>У меня также есть <mark>котята</mark>, которые посещают меня в эти дни.
Они действительно милые. Я думаю, что им нравится мой сад! Может быть, я
должен взять себе одного <mark>котенка</mark>.</p>
HTML
Содержимое элемента <mark> в браузере имеет фон желтого цвета. Это
отображение по умолчанию можно изменить, задав определенные css-стили для
элемента.
26. Элемент <bdi>
Элемент <bdi> представляет фрагмент текста, который должен быть изолирован
от остального текста для двунаправленного форматирования текста. Используется
для текстов, написанных одновременно на языках, читающихся слева направо и
справа налево.
<ul>
<li>Пользователь <bdi>jcranmer</bdi>: 12 записей.
<li>Пользователь <bdi>hober</bdi>: 5 записей.
<li>Пользователь <bdi>‫<إيان‬/bdi>: 3 записи.
</ul>
HTML
27. Элемент <bdo>
Элемент <bdo> позволяет явно управлять форматированием направленности
текста для своих дочерних элементов. Для этого необходимо задать
атрибут dir со значением ltr , чтобы переопределить направление слева
направо, и со значением rtl , чтобы переопределить направление справа
налево.
28. Элемент <span>
Элемент <span> сам по себе ничего не значит, но может быть полезен при
использовании вместе с глобальными атрибутами,
например, class , lang или dir . Он представляет свои дочерние элементы.
В этом примере фрагмент кода размечается с использованием элементов span и
атрибутов class , чтобы его ключевые слова и идентификаторы можно было
кодировать цветом из CSS:
<pre>
<code class="lang-c">
<span class="keyword">for</span> (<span class="ident">j</span> = 0; <span
class="ident">j</span> < 256; <span class="ident">j</span>++) {
<span class="ident">i_t3</span> = (<span class="ident">i_t3</span> &
0x1ffff) | (<span class="ident">j</span> << 17);
<span class="ident">i_t6</span> = (((((((<span class="ident">i_t3</span>
>> 3) ^ <span class="ident">i_t3</span>) >> 1) ^ <span
class="ident">i_t3</span>) >> 8) ^ <span class="ident">i_t3</span>) >> 5) &
0xff;
<span class="keyword">if</span> (<span class="ident">i_t6</span> == <span
class="ident">i_t1</span>)
<span class="keyword">break</span>;
}</code>
</pre>
HTML
29. Элемент <br>
Категории контента: потоковое содержимое, текстовое содержимое.
Элемент <br> представляет разрыв строки. Элементы <br> должны
использоваться только для разрывов строк, которые фактически являются частью
содержимого, как в стихах или адресах, например:
<p>P. Sherman<br>
42 Wallaby Way<br>
Sydney</p>
HTML
Элементы <br> не должны использоваться для разделения тематических групп в
абзаце, приведенный ниже пример является неверным:
<p>
<label>Имя: <input name="name"></label><br>
<label>Адрес: <input name="address"></label>
</p>
HTML
30. Элемент <wbr>
Элемент <wbr> представляет возможность разрыва длинной строки, чтобы текст
можно было переносить в удобочитаемом виде.
<pre>...
Heading heading = Helm.HeadingFactory(HeadingCoordinates[1],
<wbr>HeadingCoordinates[2], <wbr>HeadingCoordinates[3],
<wbr>HeadingCoordinates[4]);
Course course = Helm.CourseFactory(Heading,
<wbr>Maps.MapFactoryFromHeading(heading),
<wbr>Speeds.GetMaximumSpeed().ConvertToWarp());
...</pre>
HTML
По материалам Text-level semantics

Опубликовано: 22 мая 20200 Comments
HTML-элементы для редактирования документа

 1. Элемент <ins>
 2. Элемент <del>
 3. Атрибуты, общие для элементов <ins> и <del>
1. Элемент <ins>
атрибут cite , указывающий ссылку на источник цитаты или дополнительную
информацию о редактировании, и datetime , определяющий дату и
(необязательно) время изменения.
Элемент <ins> представляет собой добавления к документу, например, одного
абзаца:
<aside>
<ins>
<p>Я люблю фрукты.</p>
</ins>
</aside>
HTML
<<aside>
<ins datetime="2005-03-16 00:00Z">
<p>Я люблю фрукты.</p>
</ins>
<ins datetime="2005-03-16 00:00Z">
Яблоки <em>вкусные</em>.
</ins>
<ins datetime="2007-12-19 00:00Z">
Как и груши.
</ins>
</aside>>
HTML
2. Элемент <del>
атрибут cite , указывающий ссылку на источник цитаты или дополнительную
информацию о редактировании, и datetime , определяющий дату и
(необязательно) время изменения.
Элемент <del> представляет собой удаление из документа.
<h1>Список дел</h1>
<ul>
<li>Разгрузить посудомоечную машину</li>
<li><del datetime="2009-10-11T01:25-07:00">Посмотреть лекции Уолтера
Левина</del></li>
<li><del datetime="2009-10-10T23:38-07:00">Скачать больше
треков</del></li>
<li>Купить принтер</li>
</ul>
HTML
3. Атрибуты, общие для элементов <ins> и <del>
Атрибут cite может использоваться для ссылки на документ, который объясняет
изменение. Когда этот документ длинный, например, протокол собрания, авторам
рекомендуется включать фрагмент, указывающий на конкретную часть этого
документа, в которой обсуждаются изменения.
Атрибут datetime может использоваться для указания времени и даты
изменения. Если присутствует, атрибут datetime должен быть допустимой
строкой даты с необязательным временем.
По материалам Edits
1.12. HTML5-аудио
Опубликовано: 7 августа 2014Обновлено: 31 декабря 201979 Comments
HTML5-аудио предоставляет улучшенные возможности работы с аудио контентом.

До недавнего времени единственным способом добавления звуковых файлов на
веб-страницы было интегрирование фонового звука с помощью тега <bgsound> ,
который проигрывался во время просмотра пользователем страницы без
возможности выключения.
Благодаря добавлению в спецификацию HTML5 нового элемента <audio> ,
появилась возможность добавлять аудио содержимое со встроенным
программным интерфейсом без привлечения подключаемых модулей.
Как добавить HTML5-аудио на веб-страницу
 1. Элемент <audio>
 2. Аудио кодеки
 3. Альтернативные медиа-ресурсы <source>
 4. Добавление субтитров и заголовков <track>
 5. Стилизованный пример аудио плеера
1. Элемент <audio>
Поддержка браузерами
IE: 9.0
Firefox: 3.5 базовая поддержка, 15.0 — полная
Chrome: 3.0
Safari: 3.1
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.1
Chrome for Android: 44
HTML5-элемент <audio> используется для внедрения звукового контента в веб-
страницы. В общем виде HTML-разметка имеет следующий вид:
<audio src="name.ogg" controls></audio>
HTML
Атрибут controls добавляет отображение браузерами интерфейса управления

аудио плеера — кнопки воспроизведения, паузы, громкости.
РИС. 1. ВНЕШНИЙ
ВИД АУДИО ПЛЕЕРА В РАЗНЫХ БРАУЗЕРАХ
В настоящий момент не существует аудио формата, который бы работал во всех

браузерах, поэтому для обеспечения доступности контента максимально широкой
аудитории рекомендуется включать несколько источников звука, представленных
с использованием атрибута src элемента <source> . Одновременно можно
добавить резервный контент для браузеров, которые не поддерживают
элемент <audio> .
<audio controls>
<source src="name.ogg" type="audio/ogg">
<source src="name.mp3" type="audio/mpeg">
<a href="sounds/name.mp3">Скачать name.mp3</a>
</audio>
HTML
ТАБЛИЦА 1. АТРИБУТЫ ТЕГА <AUDIO
autoplay Автоматическое воспроизведение аудио файла сразу же после загрузки страницы.
Указывает браузеру, что нужно отобразить базовые элементы управления

controls воспроизведением (начинать и останавливать воспроизведение, переходить в
другое место записи, регулировать громкость).
loop Циклическое воспроизведение аудио файла.
muted Выключает звук при воспроизведении аудио файла.
Атрибут, отвечающий за предварительную загрузку аудио контента. Не является

обязательным, некоторые браузеры игнорируют его. Возможные значения:
auto — браузер загружает аудио файл полностью, чтобы он был доступен, когда
preload пользователь начнет его воспроизведение.
metadata — браузер загружает первую небольшую часть аудио файла, чтобы
определить его основные характеристики.
none — отсутствие автоматической загрузки аудио файла.
src Содержит абсолютный или относительный URL-адрес аудио файла.
2. Аудио кодеки
Аудио кодек (декодер) представляет собой программу для преобразования
цифровых данных в формат звукового файла или звукового потока. Популярными
аудио форматами являются следующие:
MP3 — самый популярный аудио формат, использующий сжатие с потерями и

позволяющий уменьшить размер файла в несколько раз. В силу лицензионных
отчислений не поддерживается Firefox и Opera.
AAC (Advanced Audio Codec) — закрытый кодек, аналог MP3, но по сравнению с
последним, поддерживает более высокое качество звука при сходном размере
файла.
Ogg Vorbis — бесплатный формат с открытым кодом, поддерживается в Firefox,
Opera и Chrome. Обеспечивает хорошее качество звука, но недостаточно широко
поддерживается аппаратными проигрывателями.
3. Альтернативные медиа-ресурсы
Элемент <source> используется для добавления нескольких медиа-ресурсов
для <audio> и <video> . Указывает на альтернативные видео/аудио файлы,
которые браузер может выбрать из предложенных на основании поддерживаемого
им типа носителя или кодека.
ТАБЛИЦА 2. АТРИБУТЫ ТЕГА <SOURC
media Определяет тип медиа-устройства (т.е. для каких устройств оптимизирован файл).
src Содержит абсолютный или относительный URL-адрес медиафайла.
type Определяет MIME-тип медиафайла.
4. Добавление субтитров и заголовков

Элемент <track> используется в качестве дочернего
элемента <audio> и <video> . Добавляет текстовую дорожку для субтитров,
заголовков медиафайлов или другой текстовой информации, которая должна
быть видна во время воспроизведения аудио или видеофайла.
ТАБЛИЦА 3. АТРИБУТЫ ТЕГА <TRACK
Указывает, что данная дорожка воспроизводится по умолчанию. Только один

default
элемент <track> может содержать данный атрибут.
Указывает тип текстовой дорожки, по умолчанию выводятся субтитры

( subtitles ). Принимаемые значения:
captions — перевод диалогов и звуковых эффектов, отображаемый в виде текст
поверх видео (для глухих пользователей).
chapters — добавляет названия глав в виде списка для навигации по
медиафайлу.
kind
descriptions — добавляет звуковое описание происходящего в видео (для
слепых пользователей).
metadata — метаданные, используемые скриптами, не отображаются для
пользователей.
subtitles — текстовое дублирование звуковой дорожки видео, отображается в
виде субтитров к видео.
label Добавляет название дорожки. Если этот атрибут не задан, браузер применит
значение по умолчанию.
src Содержит абсолютный или относительный URL-адрес данных текстовой дорожки.
srclang Язык воспроизводимой дорожки.
5. Стилизованный пример аудио плеера

С помощью css-стилей можно придать аудио плееру необычный вид.
Воспроизведение управляется с помощью небольшого скрипта (используется
библиотека jQuery), звук появляется при наведении на пластинку.
1.13. HTML5-видео
Опубликовано: 8 августа 2014Обновлено: 26 ноября 202093 Comments
Раньше, если вы хотели добавить видео на веб-страницу, вам приходилось

использовать элемент <object> , представляющий собой универсальный
контейнер для внешних объектов. Подобные приложения были в малой степени
интерактивными и слабо взаимодействовали с окружающими их элементами на
веб-странице.
Второй подход заключался в использовании подключаемого модуля браузера,
например Silverlight или Flash. И хотя технология Flash позволяла использовать
готовый видеоплеер или создавать собственный, но её использование порождало
большое нагромождение HTML-разметки, а видеофайлы нужно было кодировать в
требуемый формат.
HTML5-видео — новый стандарт для размещения мультимедийных файлов в сети
с оригинальным программным интерфейсом без привлечения подключаемых
модулей. С помощью элемента <video> появилась возможность добавлять
видеосодержимое на веб-страницы, а также стилизовать внешний вид
видеоплеера при помощи css-стилей.
РИС. 1. ВНЕШНИЙ ВИД ВИДЕОПЛЕЕРА В ОСНОВНЫХ БРАУЗЕРАХ
Как добавить HTML5-видео на веб-страницу
 1. Элемент <video>
 2. Встраиваемый интерактивный контент <embed>
 3. Видеокодеки
 4. Видеоконтейнеры
 5. Альтернативные медиа-ресурсы <source>
 6. Добавление субтитров и заголовков <track>
 7. Пример: размещаем видео на сайте
 8. Видеоконвертеры
1. Элемент <video>
Поддержка браузерами
IE: 9.0, атрибут muted — с 10.0

Edge: 12.0
Firefox: 3.5
Chrome: 4.0, атрибут muted — с 30.0
Safari: 4.0, атрибут muted — с 5.0
Opera: 11.5
iOS Safari: 3.2
Android Browser: 2.3
Chrome for Android: 44
В простом варианте HTML-разметка для размещения видеофайла на странице
имеет следующий вид:
<video src="video.ogv" controls></video>
HTML
Атрибут controls отвечает за появление элементов управления видеоплеером.
Вы можете добавить изображение с помощью атрибута poster , которое браузер
будет использовать, пока загружается видео или пока пользователь не нажмет на
кнопку воспроизведения, а также задать высоту и ширину видео.
Как и в случае с аудиофайлами, рекомендуется перечислять в <source> все
форматы, начиная с более предпочтительного. Также нужно указывать MIME-тип
для каждого видеофайла.
<video controls width="400" height="300">

<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
<object data="video.swf" type="application/x-shockwave-flash">
<param name="movie" value="video.swf">
</object>
</video>
HTML
ТАБЛИЦА 1. АТРИБУТЫ ТЕГА <VIDEO

autoplay Автоматическое воспроизведение видеоофайла сразу же после загрузки страницы.
controls Указывает браузеру, что нужно отобразить базовые элементы управления

воспроизведением (воспроизведение, пауза, громкость).
height Задает высоту окна для отображения видеоданных, возможные значения: px или %
loop Циклическое воспроизведение видеофайла.
muted Выключает звук при воспроизведении видеофайла.
URL файла изображения, которое будет отображаться во время загрузки видеофайл

poster или до тех пор, пока пользователь не нажмет на кнопку PLAY. Если атрибут не
задан, то будет отображаться первый кадр видеофайла.
preload Атрибут, отвечающий за предварительную загрузку видеоконтента. Не является

обязательным, некоторые браузеры игнорируют его. Возможные значения:
auto — браузер загружает видеофайл полностью, чтобы он был доступен, когда
пользователь начнет его воспроизведение.
metadata — браузер загружает первую небольшую часть видеофайла, чтобы
определить его основные характеристики.
none — отсутствие автоматической загрузки видеофайла.
src Содержит абсолютный или относительный URL-адрес видеофайла.
Задает ширину окна для отображения видеоданных, возможные

width
значения: px или %
2. Встраиваемый интерактивный контент

Элемент <embed> определяет контейнер для внешнего приложения или
интерактивного содержимого (другими словами, плагина). Большинство
браузеров поддерживало данный элемент на протяжении долгого времени. Тем
не менее, данный тег не был включен в спецификацию HTML4, его добавили в
спецификацию HTML5. С помощью <embed> на веб-страницы можно добавлять не
только видеофайлы, но и векторные изображения в формате swf :
<embed src="movie.mov" type="video/quicktime" width="640" height="480">

<embed src="helloworld.swf">
HTML
ТАБЛИЦА 2. АТРИБУТЫ ТЕГА <EMBED

height Определяет высоту встраиваемого контента в px или % .
type Определяет MIME-тип встраиваемого файла.
width Определяет ширину встраиваемого контента в px или % .
3. Видеокодеки
При просмотре видео проигрыватель должен его декодировать. Одни
проигрыватели используют программное декодирование видеопотока, другие
используют аппаратное декодирование.
Важно! Поскольку каждый браузер поддерживает определенный кодек, поэтому,

чтобы обеспечить воспроизведение видео-контента во всех браузерах, видео-
файл нужно размещать в нескольких форматах.
H.264 — высококачественный кодек от фирмы MPEG, делится на профили для
поддержки как устройств с минимальными возможностями, так и устройств
высокого разрешения.
Ogg Theora — открытый бесплатный стандарт для видео, качество и
производительность несколько ниже стандарта H.264.
VP8 — открытый бесплатный кодек, сходный по качеству с H.264. Поддерживается
в Firefox, Chrome и Opera.
4. Видеоконтейнеры
РИС. 2.
ВИДЕОКОНТЕЙНЕР
Любой видеофайл является файловым контейнером, в котором хранятся другие
файлы. Аудио- и видеодорожки объединяются для воспроизведения видеоролика.
Метаданные содержат информацию о данном видеоролике — изображение
обложки, субтитры и пр. К популярным форматам видеоконтейнеров относятся
следующие:
Ogg (.ogv, .oga, .ogx, .ogg) — формат-контейнер с открытым исходным кодом для

видеокодека Theora и аудио Vorbis. Работает в Firefox, Chrome и Opera.
MIME-тип: video/ogg .
MPEG 4 (.mp4) — формат-контейнер для видеокодека H.264 и аудиокодека AAC.
Работает в Safari и Chrome. Кодирует видео, в том числе высокой четкости, для
полного спектра устройств, таких как iPhone, iPod и iPad.
MIME-тип: video/mp4 .
WebM (.webm) — формат-контейнер с открытым исходным кодом для видеокодека
VP8 от Google и аудиокодека Ogg Vorbis. Работает в Firefox, Chrome, Opera и Adobe
Flash Player.
MIME-тип: video/webm .
Audio Video Interleave (.avi) — формат предназначен для записи звука и
движущихся изображений, соответствует спецификации RIFF.
MIME-тип: video/vnd.avi, video/avi, video/msvideo, video/x-msvideo .
Matroska (.mkv) — популярный видеоконтейнер, может содержать видео в
формате H.264, VP8 или Theora.
MIME-тип: video/x-matroska, audio/x-matroska .
На данный момент браузеры поддерживают три основных видео формата:
Формат Видеокодек Аудиокодек
.mp4 H.264 AAC
.ogg/.ogv Theora Vorbis
.webm VP8 Vorbis
Видео в формате .avi на сайте средствами HTML5 не воспроизводится.
Поэтому его необходимо перекодировать в эти три формата с соответствующими
видео и аудиокодеками для вывода на сайте. Для этого можно использовать
видеоконвертеры, указанные на странице ниже.
5. Альтернативные медиа-ресурсы
Элемент <source> используется для указания нескольких медиа-ресурсов
для <audio> и <video> . Добавляет альтернативные видео/аудио файлы,
которые браузер может выбрать из предложенных на основании поддерживаемого
им типа носителя или кодека.
ТАБЛИЦА 3. АТРИБУТЫ ТЕГА <SOURCE

media Определяет тип медиа-устройства (т.е. для каких устройств оптимизирован файл).
type Определяет MIME-тип медиафайла.
6. Добавление субтитров и заголовков

Элемент <track> используется в качестве дочернего
элемента <audio> и <video> . Добавляет текстовую дорожку для субтитров,
заголовков медиафайлов или другой текстовой информации, которая должна
быть видна во время воспроизведения медиа-ресурса.
ТАБЛИЦА 4. АТРИБУТЫ ТЕГА <TRACK

Указывает, что данная дорожка воспроизводится по умолчанию. Только один
default
элемент <track> может содержать данный атрибут.
Указывает тип текстовой дорожки, по умолчанию выводятся субтитры

( subtitles ). Принимаемые значения:
captions — перевод диалогов и звуковых эффектов, отображаемый в виде текста
поверх видео (для глухих пользователей).
chapters — добавляет названия глав в виде списка для навигации по медиафайлу
kind descriptions — добавляет звуковое описание происходящего в видео (для
невидящих пользователей).
metadata — метаданные, используемые скриптами, не отображаются для
пользователей.
subtitles — текстовое дублирование звуковой дорожки видео, отображается в
виде субтитров к видео.
label Добавляет название дорожки. Если этот атрибут не задан, браузер применит
значение по умолчанию.
src Содержит абсолютный или относительный URL-адрес аудио- или видеофайла.
srclang Язык воспроизводимой дорожки.
7. Пример: размещаем видео на сайте

Размещаем код для вставки видео на сайт с помощью HTML5-разметки, используя
атрибуты для задания видео требуемых параметров:
<video controls width="710" height="538"

poster="/examples/media/martynko.png" preload="none">
<source src="/examples/media/martynko.mp4" type="video/mp4">
</video>
HTML
Если вы хотите выровнять видеоплеер на странице, нужно обернуть
элемент <video> в контейнер <div> с присвоенным классом, для которого
задаются ширина и высота, соответствующие размерам вашего видео. Далее, с
помощью css-свойств можно задать отступы, выравнивание на странице и т.д.
8. Видеоконвертеры
Movavi — позволяет конвертировать видео и аудио в необходимый вам формат.
Сохраняет медиафайлы для проигрывания на мобильных устройствах. «Умные»
готовые профили позволяют добиваться максимального качества.
ONLINE-CONVERT — бесплатный онлайн-конвертер, позволяющий конвертировать

любые медиа-файлы из одного формата в другой.
Firefogg — модуль расширения для Firefox, может создавать
видеофайлы Theora и WebM. Работает непосредственно в браузере, но вся работа
выполняется локально без обращения к веб-серверу.
CloudConvert — онлайн-конвертер файлов. Поддерживает практически любой
формат аудио, видео, документов, электронных книг, архивов, изображений,
электронных таблиц или презентаций.
1.14. Необязательные теги HTML5-
разметки
Опубликовано: 28 августа 2014Обновлено: 24 февраля 20209 Comments
В спецификации HTML5 некоторые правила разметки были ослаблены. В

частности, использование элементов <html> , <head> и <body> уже не
является обязательным для разметки HTML5. Тем не менее браузер все равно
считает, что они существуют, в чем можно убедиться, просмотрев разметку веб-
страницы в Mоzilla Firebug или в Google Chrome Inspector.
Эти элементы всегда «подразумеваются», но если они будут использоваться в
таблице CSS-стилей или в JavaScript-сценариях, то их надо прописывать в явном
виде.
Также разрешается не использовать закрывающую обратную косую черту в

элементах без содержимого, их список можно увидеть в
нижеприведенной таблице.
1. Элемент <html>
Начальный тег <html> может быть опущен, если сразу за тегом не идет
комментарий. Закрывающий тег </html> также может быть опущен, если перед
ним нет комментария.
<!DOCTYPE HTML>
<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
HTML
2. Элемент <head>
Начальный тег <head> может быть опущен, если элемент <head> пуст, или если
сразу после него идет другой HTML-элемент.
Закрывающий тег </head> может быть опущен, если он не следует сразу за
пробелом или за комментарием.
<!DOCTYPE HTML>
<body>
</body>
HTML
3. Элемент <body>
Начальный тег <body> может быть опущен, если элемент пуст, или если первое,
что внутри элемента не является пробелом или комментарием, за исключением
случаев, когда первое, что идет за тегом <body> являются
элементы <meta> , <link> , <script> или <style> .
Закрывающий тег </body> может быть опущен, если перед ним нет
комментария.
<!DOCTYPE HTML>
HTML
4. Элемент <li>
Закрывающий тег </li> может быть опущен, если элемент <li> сразу следует
за другим элементом <li> , или если больше нет содержания в элементе, в
который вложен тег.
5. Элементы <dt> и <dd>
Закрывающий тег </dt> может быть опущен, если элемент <dt> следует сразу
за еще одним элементом <dt> или <dd> .
Закрывающий тег </dd> может быть опущен, если элемент <dd> следует сразу
за еще одним элементом <dd> или <dt> , или если больше нет содержания в
элементе, в который вложен тег.
6. Элемент <p>
Закрывающий тег </p> может быть опущен, если <p> следует сразу за любым
из перечисленных элементов:
address, article, aside, blockquote, dir, div, dl, fieldset,
footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, menu,
nav, ol, p, pre, section, table, ul , или если больше нет содержания в
элементе, в который вложен тег <p> , или родительским элементом не является
тег <a> .
7. Элементы <rt> и <rp>
Закрывающий тег </rt> может быть опущен, если элемент <rt> следует сразу
за еще одним элементом <rt> или <rp> , или если больше нет содержания в
Закрывающий тег </rp> может быть опущен, если элемент <rp> следует сразу
за еще одним <rp> или <rt> элементом, или если больше нет содержания в
8. Элементы <optgroup> и <option>
Закрывающий тег </optgroup> может быть опущен, если
элемент <optgroup> следует сразу за еще одним элементом <optgroup> , или
если нет больше содержания в родительском элементе.
Закрывающий тег </option> может быть опущен, если
элемент <option> следует сразу за еще одним элементом <option> , или если
он идет сразу после <optgroup> , или если нет больше содержания в
родительском элементе.
9. Элемент <colgroup>
Начальный тег элемента <colgroup> может быть опущен, за
элементом <colgroup> сразу идет элемент <col> , и если перед элементом
непосредственно не предшествует другой элемент <colgroup> , закрывающий
тег которого был опущен. (Он не может быть опущен, если элемент пустой.)
10. Элементы <thead>, <tbody>, <tfoot>, <td>, <tr>
Закрывающий тег </thead> может быть опущен, если элемент <thead> следует
сразу за <tbody> или <tfoot> .
Открывающий тег <tbody> может быть опущен, если за ним сразу идет
элемент <tr> , и если перед элементом непосредственно не предшествует
другой <tbody> , <thead> , или <tfoot> , закрывающий тег которого был
опущен. (Он не может быть опущен, если элемент является пустым.)
Закрывающий тег </tbody> может быть опущен, если после
элемента <tbody> сразу следует <tbody> или <tfoot> , или если больше нет
содержания в родительском элементе.
Закрывающий тег </tfoot> может быть опущен, если элемент <tfoot> следует
сразу же за <tbody> , или если больше нет содержания в родительском
элементе.
Закрывающий тег </tr> может быть опущен, если элемент <tr> следует сразу
же за еще одним элементом <tr> , или если больше нет содержания в
родительском элементе.
Закрывающий тег </td> может быть опущен, если элемент <td> следует сразу
же за еще одним элементом <td> или <th> , или, если нет больше содержания
в родительском элементе.
Закрывающий тег </th> может быть опущен, если элемент <th> следует сразу
же за <td> или <th> , или, если больше нет содержания в родительском
элементе.
<table>
<caption>37547 TEE Electric Powered Rail Car Train Functions (Abbreviated)
<colgroup><col><col><col>
<thead>
<tr><th>Function<th>Control Unit<th>Central Station
<tbody>
<tr><td>Headlight<td>✔<td>✔
<tr><td>Interior Lights<td>✔<td>✔
<tr><td>Electric locomotive operating sounds<td>✔<td>✔
<tr><td>Engineer's cab lighting<td><td>✔
<tr><td>Station Announcements - Swiss<td><td>✔
</table>
HTML
ТАБЛИЦА 1. НЕОБЯЗАТЕЛЬНЫЕ И ЗАПРЕЩЕННЫЕ ТЕГИ В СПЕЦИФИКАЦИИ HTML
Тег Открывающий тег Закрывающий тег Пустой тег

area Запрещен Разрешен
base Запрещен Разрешен
body Необязательный Необязательный
br Запрещен Разрешен
col Запрещен Разрешен
colgroup Необязательный
dd Необязательный
dt Необязательный
head Необязательный Необязательный
hr Запрещен Разрешен
html Необязательный Необязательный
img Запрещен Разрешен
input Запрещен Разрешен
li Необязательный
link Запрещен Разрешен
meta Запрещен Разрешен
option Необязательный
p Необязательный
param Запрещен Разрешен
tbody Необязательный Необязательный
td Необязательный
tfoot Необязательный
th Необязательный
thead Необязательный
tr Необязательный
1.15. HTML5-формы
Опубликовано: 5 мая 2015Обновлено: 22 декабря 2020109 Comments
HTML-формы являются элементами управления, которые применяются для сбора

информации от посетителей веб-сайта.
Веб-формы состоят из набора текстовых полей, кнопок, списков и других
элементов управления, которые активизируются щелчком мыши. Технически
формы передают данные от пользователя удаленному серверу.
Для получения и обработки данных форм используются языки веб-
программирования, такие как PHP, Perl.
До появления HTML5 веб-формы представляли собой набор нескольких
элементов <input type="text"> , <input type="password"> ,
завершающихся кнопкой <input type="submit"> . Для стилизации форм в
разных браузерах приходилось прилагать немало усилий. Кроме того, формы
требовали применения JavaScript для проверки введенных данных, а также были
лишены специфических типов полей ввода для указания повседневной
информации типа дат, адресов электронной почты и URL-адресов.
HTML5-формы решили большинство этих распространенных проблем благодаря
наличию новых атрибутов, предоставив возможность изменять внешний вид
элементов форм за счет CSS3.
РИС. 1. УЛУЧШЕННЫЕ ВЕБ-ФОРМЫ С ПОМОЩЬЮ HTML5

Создание HTML5-формы
 1. Элемент <form>
 2. Группировка элементов формы <fieldset>
 3. Создание полей формы <input>
 4. Текстовые поля ввода <textarea>
 5. Раскрывающийся список <select>
 6. Надписи к полям формы <label>
 7. Кнопки <button>
 8. Флажки и переключатели в формах
1. Элемент <form>
Основу любой формы составляет элемент <form>...</form> . Он не
предусматривает ввод данных, так как является контейнером, удерживая вместе
все элементы управления формы – поля. Атрибуты этого элемента содержат
информацию, общую для всех полей формы, поэтому в одну форму нужно
включать поля, объединенные логически.
ТАБЛИЦА 1. АТРИБУТЫ ЭЛЕМЕНТА <FORM
Атрибут Значение / описание

Значение атрибута представляет собой разделенный пробелами список кодировок
accept-
символов, которые будут использоваться для отправки формы, например, <form
charset
accept-charset="ISO-8859-1"> .
Обязательный атрибут, который указывает url обработчика формы на сервере,

которому передаются данные. Представляет из себя файл (например, action.php
в котором описано, что нужно делать с данными формы. Если значение атрибута не
будет указано, то после перезагрузки страницы элементы формы примут значения п
умолчанию.
action В случае, если вся работа будет выполняться на стороне клиента сценариями
JavaScript, то для атрибута action можно указать значение # .
Также можно сделать так, чтобы заполненная посетителем форма приходила вам на
почту. Для этого нужно внести следующую запись:
<form action="mailto:адрес вашей электронной почты"
enctype="text/plain"></form>
Отвечает за запоминание введенных в текстовое поле значений и автоподстановку и

при последующем вводе:
autocomplete on — означает, что поле не защищено, и его значение можно сохранять и извлекат
off — отключает автозаполнение для полей форм.
enctype Используется для указания MIME-типа данных, отправляемых вместе с формой,

например, enctype="multipart/form-data" . Указывается только в
случае method="post" .
application/x-www-form-urlencoded — тип содержимого по умолчанию,
указывает на то, что передаваемые данные представляют список URL-кодированны
переменных формы. Символы пробела (ASCII 32) будут закодированы как + , а
специальный символ, например, такой как ! будет закодирован шестнадцатирично
форме как %21 .
multipart/form-data — используется для отправки форм, содержащих файлы,
не-ASCII данные и бинарные данные, состоит из нескольких частей, каждая из
которых представляет содержимое отдельного элемента формы.
text/plain — указывает на то, что передается обычный (не html) текст.
Задает способ передачи данных формы.

Метод get передает данные на сервер через адресную строку браузера. При
формировании запроса к серверу все переменные и их значения формируют
последовательность вида www.anysite.ru/form.php?var1=1&var2=2 . Имена
значения переменных присоединяются к адресу сервера после знака ? и
разделяются между собой знаком & . Все специальные символы и буквы, отличные
от латинских, кодируются в формате %nn , пробел заменяется на + . Этот метод
method
нужно использовать, если вы не передаете больших объемов информации. Если
вместе с формой предполагается отправка какого-либо файла, этот метод не
подойдет.
Метод post применяется для пересылки данных больших объемов, а также
конфиденциальной информации и паролей. Данные, отправляемые с помощью этого
метода, не видны в заголовке URL, так как они содержатся в теле сообщения.
<form action="action.php" enctype="multipart/form-data"
method="post"></form>
Задает имя формы, которое будет использоваться для доступа к элементам формы

name
через сценарии, например, name="opros" .
novalidate Отключает проверку в кнопке для отправки формы. Атрибут используется без
указания значения
Указывает окно, в которое будет направлена информация:
_blank — новое окно
_self — тот же фрейм
target
_parent — родительский фрейм (если он существует, если нет — то в текущий)
_top — окно верхнего уровня по отношению к данному фрейму. Если вызов
происходит не из дочернего фрейма, то в тот же фрейм.
2. Группировка элементов формы
Элемент <fieldset>...</fieldset> предназначен для группировки элементов,
связанных друг с другом, разделяя таким образом форму на логические
фрагменты.
Каждой группе элементов можно присвоить название с помощью
элемента <legend> , который идет сразу за открывающим тегом
элемента <fieldset> . Название группы проявляется слева в верхней
границе <fieldset> . Например, если в элементе <fieldset> хранится
контактная информация:
<form>
<fieldset>
<legend>Контактная информация</legend>
<p><label for="name">Имя <em>*</em></label><input type="text"
id="name"></p>
<p><label for="email">E-mail</label><input type="email" id="email"></p>
</fieldset>
<p><input type="submit" value="Отправить"></p>
</form>
HTML
РИС. 2. ГРУППИРОВКА ЭЛЕМЕНТОВ ФОРМЫ С ПОМОЩЬЮ <FIELDSET>
ТАБЛИЦА 2. АТРИБУТЫ ЭЛЕМЕНТА <FIELDSET

Если атрибут присутствует, то группа связанных элементов формы, находящихся внутри
контейнера <fieldset> , отключены для заполнения и редактирования. Используется
disabled
для ограничения доступа к некоторым полям формы, содержащих ранее введенные
данные. Атрибут используется без указания значения — <fieldset disabled> .
Значение атрибута должно быть равно атрибуту id элемента <form> в этом же

form документе. Указывает на одну или несколько форм, к которым принадлежит данная групп
элементов. На данный момент атрибут не поддерживается ни одним браузером.
Определяет имя, которое будет использоваться для ссылки на элементы в JavaScript, или
name для ссылки на данные формы после заполнения и отправки формы. Является аналогом
атрибута id .
3. Создание полей формы

Элемент <input> создает большинство полей формы. Атрибуты элемента
отличаются в зависимости от типа поля, для создания которого используется этот
элемент.
С помощью css-стилей можно изменить размер шрифта, тип шрифта, цвет и
другие свойства текста, а также добавить границы, цвет фона и фоновое
изображение. Ширина поля задается свойством width .
ТАБЛИЦА 3. АТРИБУТЫ ЭЛЕМЕНТА <INPUT

Определяет тип файла, разрешенных для отправки на сервер. Указывается только
для <input type="file"> . Возможные значения:
file_extension — разрешает загрузку файлов с указанным расширением,
например, accept=".gif" , accept=".pdf" , accept=".doc"
accept
audio/* — разрешает загрузку аудиофайлов
video/* — разрешает загрузку видеофайлов
image/* — разрешает загрузку изображений
media_type — указывает на медиа-тип загружаемых файлов.
Определяет альтернативный текст для изображений, указывается только
alt
для <input type="image"> .
Отвечает за запоминание введенных в текстовое поле значений и автоподстановк

их при последующем вводе:
autocomplete on — означает, что поле не защищено, и его значение можно сохранять и
извлекать,
off — отключает автозаполнение для полей форм.
autofocus Позволяет сделать так, чтобы в загружаемой форме то или иное поле ввода уже
имело фокус (было выбрано), являясь готовым к вводу значения.
Атрибут проверяет, установлен ли флажок по умолчанию при загрузке страницы
checked
для полей типа type="checkbox" и type="radio" .
disabled Отключает возможность редактирования и копирования содержимого поля.
Значение атрибута должно быть равно атрибуту id элемента <form> в этом же

form документе. Определяет одну или несколько форм, которым принадлежит данное
поле формы.
Задает url файла, который будет обрабатывать введенные в поля данные при
отправке формы. Задается только для полей
formaction
типа type="submit" и type="image" . Атрибут переопределяет значение
атрибута action самой формы.
formenctype Определяет, как будут кодироваться данные полей формы при отправке на сервер
Переопределяет значение атрибута enctype формы. Задается только для полей
типа type="submit" и type="image" . Варианты:
application/x-www-form-urlencoded — значение по умолчанию. Все
символы кодируются перед отправкой (пробелы заменяются на символ + ,
специальные символы преобразуются в значения ASCII HEX)
multipart/form-data — символы не кодируются
text/plain — пробелы заменяются на символ + , а специальные символы не
кодируются.
Атрибут определяет метод, который браузер будет использовать для отправки
данных формы на сервер. Задается только для полей
типа type="submit" и type="image" . Переопределяет значение
атрибута method формы. Варианты:
formmethod get — значение по умолчанию. Данные из формы (пара имя/значение)
добавляются в url-адрес и отправляются на сервер: URL?
имя=значение&имя=значение
post — данные формы отправляются в виде http-запроса.
Определяет, что данные полей формы не должны проверяться при отправке

formnovalidate формы. Переопределяет значение атрибута novalidate формы. Можно
использовать без указания значения атрибута.
Определяет, где выводить ответ, полученный после отправки формы. Задается
только для полей типа type="submit" и type="image" . Переопределяет
значение атрибута target формы.
_blank — загружает ответ в новое окно/вкладку
formtarget
_self — загружает ответ в то же окно (значение по умолчанию)
_parent – загружает ответ в родительский фрейм
_top – загружает ответ во весь экран
framename – загружает ответ во фрейм с указанным именем.
Значение атрибута содержит количество пикселей без указания единицы
измерения. Устанавливает высоту поля формы типа type="image" ,
height
например, <input type="image" src="img_submit.gif" height="50">
Рекомендуется одновременно устанавливать как высоту, так и ширину поля.
Является ссылкой на элемент <datalist> , содержит его id .Позволяет

list предоставить пользователю несколько вариантов на выбор, когда он начинает
вводить значение в соответствующем поле.
Позволяет ограничить допустимый ввод числовых данных максимальным
значением, значение атрибута может содержать целое или дробное число.
max Рекомендуется использовать этот атрибут вместе с атрибутом min . Работает со
следующими типами полей: number , range , date , datetime , datetime-
local , month , time и week .
maxlength Атрибут задает максимальное количество символов, вводимых в поле. Значение п

умолчанию 524288 символов.
min Позволяет ограничить допустимый ввод числовых данных минимальным

значением.
Позволяет пользователю ввести несколько значений атрибутов, разделяя их
multiple запятой. Применяется в отношении файлов и адресов электронной почты.
Указывается без значения атрибута.
Определяет имя, которое будет использоваться для доступа к элементу <form> ,

name
примеру, в таблицах стилей css. Является аналогом атрибута id .
Позволяет определять с помощью регулярного выражения синтаксис данных,
ввод которых должен быть разрешен в определенном поле.
Например, pattern="[a-z]{3}-[0-9]{3}" — квадратные скобки
pattern
устанавливают диапазон допустимых символов, в данном случае — любые
строчные буквы, число в фигурных скобках указывает, что нужны три строчные
буквы, после которых следует тире, далее — три цифры в диапазоне от 0 до 9.
placeholder Содержит текст, который отображается в поле ввода до заполнения (чаще всего
это подсказка).
readonly Не позволяет пользователю изменять значения элементов формы, выделение и

копирование текста при этом доступно. Указывается без значения атрибута.
Выводит сообщение о том, что данное поле является обязательным для
required заполнения. Если пользователь попытается отправить форму, не введя в это поле
требуемое значение, то на экране отобразится предупреждающее сообщение.
Указывается без значения атрибута.
Задает видимую ширину поля в символах. Значение по умолчанию — 20. Работае
size со следующими типами
полей: text , search , tel , url , email и password .
Задает url изображения, используемого в качестве кнопки отправки данных

src
формы. Указывается только для поля <input type="image"> .
Используется для элементов, предполагающих ввод числовых значений, указывае

step величину увеличения или уменьшения значений в процессе регулировки
диапазона (шаг).
type button — создает кнопку.
checkbox — превращает поле ввода во флажок, который можно установить или

очистить, например,
У меня есть автомобиль
color — генерирует палитры цветов в поддерживающих браузерах, давая

пользователям возможность выбирать значения цветов в шестнадцатеричном
формате.
date — позволяет вводить дату в формате дд.мм.гггг.

День рождения:
datetime-local — позволяет вводить дату и время, разделенные прописной

английской буквой Т по шаблону дд.мм.гггг чч:мм.
День рождения — день и время:
email — браузеры, поддерживающие данный атрибут, будут ожидать, что

пользователь введет данные, соответствующие синтаксису адресов электронной
почты.
E-mail:
file — позволяет загружать файлы с компьютера пользователя.

Выберите файл:
hidden — скрывает элемент управления, который не отображается браузером и
не дает пользователю изменять значения по умолчанию.
image — создает кнопку, позволяя вместо текста на кнопке вставить

изображение.
month — позволяет пользователю вводить год и номер месяца по шаблону гггг-

мм.
number — предназначено для ввода целочисленных значений. Его

атрибуты min , max и step задают верхний, нижний пределы и шаг между
значениями соответственно. Эти атрибуты предполагаются у всех элементов,
имеющих численные показатели. Их значения по умолчанию зависят от типа
элемента.
Укажите количество (от 1 до 5):
password — создает текстовые поля в форме, при этом вводимые пользователе

символы заменяются на звездочки, маркеры, либо другие, установленные
браузером значки.
Введите пароль:
radio — создает переключатель — элемент управления в виде небольшого

кружка, который можно включить или выключить.
Вегетарианец:
range — позволит создать такой элемент интерфейса, как ползунок, min / max —
позволят установить диапазон выбора
reset — создает кнопку, которая очищает поля формы от введенных

пользователем данных.
Reset
search — обозначает поле поиска, по умолчанию поле ввода имеет

прямоугольную форму.
Поиск:
submit — создает стандартную кнопку, активизируемую щелчком мыши.

Кнопка собирает информацию с формы и отправляет ее для обработки.
Отправить
text — создает текстовые поля в форме, выводя однострочное текстовое поле

для ввода текста.
time — позволяет вводить время в 24-часовом формате по шаблону чч:мм. В

поддерживающих браузерах оно отображается как элемент управления в виде
числового поля ввода со значением, изменяемым с помощью мыши, и допускает
ввод только значений времени.
Укажите время:
url — поле предназначено для указания URL-адресов.

Главная страница:
week — соответствующий инструмент-указатель позволяет пользователю

выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг
В зависимости от года число недель может быть 52 или 53.
Укажите неделю:
value Определяет текст, отображаемый на кнопке, в поле или связанный текст. Не

указывается для полей типа file.
width Значение атрибута содержит количество пикселей. Позволяет задать ширину

полей формы.
4. Текстовые поля ввода
Элемент <textarea>...</textarea> используется вместо элемента <input
type="text"> , когда нужно создать большие текстовые поля. Текст,
отображаемый как исходное значение, помещается внутрь.
Размеры поля устанавливаются при помощи атрибутов cols – размеры по
горизонтали, rows – размеры по вертикали. Высоту поля можно задать
свойством height . Все размеры считаются исходя из размера одного символа
моноширинного шрифта.
ТАБЛИЦА 4. АТРИБУТЫ ЭЛЕМЕНТА <TEXTAREA

autofocus Устанавливает фокус на нужном начальном текстовом поле автоматически.
cols Устанавливает ширину через количество символов. Если пользователь вводит больше
текста, появляется полоса прокрутки.
disabled Отключает возможность редактирования и копирования содержимого поля.
Значение атрибута должно быть равно значению атрибута id элемента <form> в

form этом же документе. Определяет одну или несколько форм, которым принадлежит
данное текстовое поле.
maxlength Значение атрибута задает максимальное число символов для ввода в поле.
name Задает имя текстового поля.
placeholder Определяет короткую текстовую подсказку, которая описывает ожидаемое вводимое

значение.
readonly Отключает возможность редактирования содержимого поля.
required Выводит сообщение о том, что данное поле является обязательным для заполнения.
rows Указывает число, которое означает, сколько строк должно отображаться в текстовой
области.
Определяет, должен ли текст сохранять переносы строк при отправке формы.
wrap Значение hard сохраняет перенос, а значение soft не сохраняет. Если использует
значение hard , то должно указываться значение атрибута cols .
5. Раскрывающийся список
Списки дают возможность расположить большое количество пунктов компактно.
Раскрывающиеся списки создаются при помощи
элемента <select>...</select> . Они позволяют выбрать одно или несколько
значений из предложенного множества. По умолчанию в поле списка
отображается его первый элемент.
Для добавления в список пунктов используются
элементы <option>...</option> , которые располагаются внутри <select> .
Для систематизации списков применяется элемент <optgroup>...</optgroup> ,
который создает заголовки в списках.
Для списков возможно изменить размер шрифта, тип шрифта, цвет и другие
свойства текста, а также добавить границы, цвет фона и фоновое изображение.
ТАБЛИЦА 5. АТРИБУТЫ ЭЛЕМЕНТА <SELECT

autofocus Устанавливает автоматический фокус на элементе при загрузке страницы.
disabled Отключает раскрывающийся список.
form Определяет форму, которой принадлежит данный список. В качестве значения атрибута
указывается идентификатор формы.
Дает возможность выбора одного или нескольких пунктов, для этого при выборе нужно
multiple
нажать и удерживать нажатой клавишу Ctrl .
name Определяет имя для выпадающего списка. Значение атрибута содержит название,
отражающее тематику списка.
required Выводит сообщение о том, что пользователь должен выбрать значение из

раскрывающегося списка перед отправкой формы.
Задает количество одновременно видимых на экране элементов списка. Если количество
size элементов списка превышает установленное количество, появляется полоса прокрутки.
Значение атрибута задается целым положительным числом.
ТАБЛИЦА 6. АТРИБУТЫ ЭЛЕМЕНТА <OPTION

disabled Делает недоступным для выбора элемент списка.
label Задает укороченную версию для элемента, которая будет отражаться в выпадающем
списке. Значение атрибута содержит текст, описывающий соответствующий пункт
выпадающего списка.
selected Отображает выбранный элемент списка по умолчанию при загрузке страницы браузером.
value Указывает значение, которое будет отправлено на сервер при отправке формы.
ТАБЛИЦА 7. АТРИБУТЫ ЭЛЕМЕНТА <OPTGROUP

disabled Отключает данную группу элементов списка для выбора.
Задает заголовок для группы элементов выпадающего списка. Значение атрибута содержи
label текст, недоступный для выбора, который будет располагаться над соответствующими
пунктами списка. Текст выделяется в браузере жирным начертанием.
6. Надписи к полям формы
Надписи к элементам формы создаются с помощью
элемента <label>...</label> . Существует два способа группировки надписи и
поля. Если поле находится внутри элемента <label> , то атрибут for указывать
не нужно.


<label for="comments">Когда вы последний раз летали на самолете?</label>
<textarea id="comments"></textarea>


<p><label>Кошка<input id="cat" type="checkbox"></label></p>
HTML
ТАБЛИЦА 8. АТРИБУТЫ ЭЛЕМЕНТА <LABEL
Атрибу
Значение / описание
т
Определяет, к какому полю формы привязан данный элемент. Можно создавать поясняющи
for надписи к следующим элементам формы: <input> , <textarea> , <select> . Значение
атрибута содержит идентификатор поля формы.
7. Кнопки
Элемент <button>...</button> создает кликабельные кнопки. В отличие от
кнопок, созданных <input> ( <input type="submit"></input> , <input
type="image"> , <input type="reset"> , <input type="button"> ), внутрь
элемента <button> можно поместить контент — текст или изображение.
Для корректного отображения элемента <button> разными браузерами нужно
указывать атрибут type , например, <button type="submit"></button> .
Кнопки позволяют пользователям передавать данные в форму, очищать
содержимое формы или предпринимать какие-либо другие действия. Можно
создавать границы, изменять фон и выравнивать текст на кнопке.
ТАБЛИЦА 9. АТРИБУТЫ ЭЛЕМЕНТА <BUTTON

autofocus Устанавливает фокус на кнопке при загрузке страницы.
disabled Отключает кнопку, делая ее некликабельной.
form Указывает на одну или несколько форм, которым принадлежит данная кнопка.
Значение атрибута — идентификатор соответствующей формы.
Значение атрибута содержит url-адрес обработчика данных формы, отправляемых
formaction при нажатии на кнопку. Только для кнопки типа type="submit" .
Переопределяет значение атрибута action , указанного для элемента <form> .
Задает тип кодировки данных формы перед отправкой на сервер при нажатии на
кнопки типа type="submit" . Переопределяет значение атрибута enctype ,
указанного для элемента <form> . Возможные значения:
application/x-www-form-urlencoded — значение по умолчанию. Все
formenctype
символы перед отправкой будут закодированы.
multipart/form-data — символы не кодируются. Используется в случае,
когда с помощью формы загружаются файлы.
text/plain — символы не кодируются, а пробелы заменяются на символ + .
Атрибут определяет метод, который браузер будет использовать для отправки

формы. Переопределяет значение атрибута method , указанного для
элемента <form> . Указывается только для кнопок типа type="submit" .
Возможные значения:
get — данные из формы (пара имя/значение) добавляются в url-адрес и
formmethod
отправляются на сервер. Данный способ имеет ограничения по размеру
отправляемых данных и не подходит для отправки паролей и конфиденциальной
информации.
post — данные из формы добавляются в виде http-запроса. Метод является бол
надежным и безопасным, чем get и не имеет ограничений по размеру.
Атрибут задает, что данные формы не должны проверяться при отправке.

formnovalidate
Указывается только для кнопок типа type="submit" .
formtarget Атрибут задает, в каком окне выводить результат после отправки формы.
Указывается только для кнопок типа type="submit" . Переопределяет значени
атрибута target , указанного для элемента <form> .
_blank — загружает ответ в новое окно/вкладку
_self — загружает ответ в то же окно (значение по умолчанию)
_parent — загружает ответ в родительский фрейм
_top — загружает ответ во весь экран
framename — загружает ответ во фрейм с указанным именем.
Задает имя кнопки, значение атрибута — текст. Используется для ссылки на

name данные формы, после того как форма была отправлена, или для ссылки на данную
кнопку (кнопки) в JavaScript.
Определяет тип кнопки. Возможные значения:
button — кликабельная кнопка
type
reset — кнопка сброса, возвращает первоначальное значение
submit — кнопка для отправки данных формы.
value Задает значение по умолчанию, отправляемое при нажатии на кнопку.
8. Флажки и переключатели в формах

Флажки в формах задаются с помощью конструкции <input type="checkbox"> ,
а переключатель — при помощи <input type="radio"> .
Флажков, в отличие от переключателей, в одной форме может быть установлено
несколько. Если для флажков указан атрибут checked , то при загрузке станицы
на соответствующих полях формы флажки уже будут установлены.
Элемент <label> применяется при реализации выбора с помощью
переключателей и флажков. Можно выбрать нужный пункт, просто щелкая
кнопкой мыши на тексте, связанном с ним. Для этого нужно
поместить <input> внутрь элемента <label> .
Красивая форма для сайта

Создание HTML форм
Поле поиска для сайта. Идеи для оформления

Селекторы псевдоклассов и псевдоэлементов HTML5 форм

HTML5BOOK

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML5BOOK

Загружено:

Авторское право:

Доступные форматы

HTML5 B O O K

1.1. Основы HTML

Основы HTML содержат основные правила языка HTML, описание структуры

Процесс интерпретации (парсинг) начинается прежде, чем веб-страница

<!DOCTYPE html>

ТАБЛИЦА 1. АТРИБУТ ЭЛЕМЕНТА <HTML

Атрибут Описание, принимаемое значение

1.2. Элемент <head>

Обязательным элементом раздела <head> является <title> . Текст,

Для элемента доступны глобальные атрибуты.

Необязательным элементом раздела <head> является элемент <meta> . С его

<meta name="description" content="Описание содержимого страницы">

<meta name="description" lang="ru" content="Описание содержимого страницы">

<meta name="robots" content="index, follow">

<meta name="robots" content="index, nofollow">

<meta name="robots" content="noindex, nofollow">

<meta http-equiv="refresh" content="0; url=http://yandex.ru/">

ТАБЛИЦА 2. АТРИБУТЫ ЭЛЕМЕНТА <META

Атрибут Описание, принимаемое значение

Содержит произвольный текст, который определяет значение, ассоциируемое с

Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков).

name Ассоциируется со значением, содержащемся в атрибуте content . Не должен

Внутри этого элемента задаются стили, которые используются на странице. Для

Для элемента доступны атрибуты, приведенные в таблице ниже, а

ТАБЛИЦА 3. АТРИБУТЫ ЭЛЕМЕНТА <STYLE

<p style="color: #666666; background-color: #ef4444; padding: 20px;">

o через директиву @import url

<link rel="stylesheet" href="style.css" type="text/css">

ТАБЛИЦА 4. АТРИБУТЫ ЭЛЕМЕНТА <LINK

Атрибут Описание, принимаемое значение

hreflang Определяет язык текста в документе, на который идет ссылка.

Генерируемая случайным образом на сервере строковая переменная, которая

rel Атрибут определяет отношения между текущим документом и документом, на

Элемент <script> позволяет присоединять к документу различные сценарии.

ТАБЛИЦА 5. АТРИБУТЫ ЭЛЕМЕНТА <SCRIPT

charset Определяет кодировку символов

Определяет, будет ли использоваться CORS при загрузке внешних скриптов (с

defer Интерпретация сценариев откладывается до окончания отображения документа на

type Используются для объявления языка сценария, использованного при составлении

ТАБЛИЦА 5. АТРИБУТЫ ЭЛЕМЕН

Атрибут Описание, принимаемое значение

onbeforeprint Событие, срабатывающее перед отправкой страницы на печать.

Событие срабатывает, когда посетитель инициировал переход на другую страниц

onmessage Событие происходит, когда сообщение получено через источник события.

onpagehide Событие происходит, когда пользователь покидает страницу посредством навига

onpageshow Событие происходит, когда пользователь переходит на веб-страницу, после собы

onunload Событие срабатывает если страница не загрузилась по каким-либо причинам, либ

HTML-теги — основа языка HTML. Теги используются для разграничения начала и

Все HTML-элементы делятся на пять типов:

Полный список HTML-элементов

<!DOCTYPE> Объявляет тип документа и предоставляет основную информацию для браузера —

<a> Создаёт гипертекстовые ссылки.

Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с

<address> Задает контактные данные автора/владельца документа или статьи. Отображается в

<aside> Представляет контент страницы, который имеет косвенное отношение к основному

<audio> Загружает звуковой контент на веб-страницу.

<bdi> Изолирует отрывок текста, написанный на языке, в котором чтение текста

Отображает текст в направлении, указанном в атрибуте dir , переопределяя

<body> Представляет тело документа (содержимое, не относящееся к метаданным

<br> Перенос текста на новую строку.

<caption> Добавляет подпись к таблице. Вставляется сразу после тега <table> .

<cite> Используется для указания источника цитирования. Отображается курсивом.

Представляет фрагмент программного кода, отображается шрифтом

<col> Выбирает для форматирования один или несколько столбцов таблицы, не