Html справочник тегов: Справочник по HTML | htmlbook.ru
Содержание
Тег | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Тег <input> является одним из разносторонних
элементов формы и позволяет создавать разные элементы интерфейса и обеспечить
взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей
и флажков. Хотя элемент <input> не требуется
помещать внутрь контейнера <form>, определяющего
форму, но если введенные пользователем данные должны быть отправлены на сервер,
где их обрабатывает серверная программа, то указывать <form> обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских
приложений, например, скриптов на языке JavaScript.
Основной атрибут тега <input>, определяющий
вид элемента — type. Он позволяет задавать
следующие элементы формы: текстовое поле (text),
поле с паролем (password), переключатель (radio),
флажок (checkbox), скрытое поле (hidden),
кнопка (button), кнопка для отправки формы (submit),
кнопка для очистки формы (reset), поле для отправки
файла (file) и кнопка с изображением (image).
Для каждого элемента существует свой список атрибутов, которые определяют его
вид и характеристики. Кроме того, в HTML5 добавлено еще более десятка новых элементов.
Синтаксис
HTML |
|
XHTML |
|
Атрибуты
- accept
- Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
- accesskey
- Переход к элементу с помощью комбинации клавиш.
- align
- Определяет выравнивание изображения.
- alt
- Альтернативный текст для кнопки с изображением.
- autocomplete
- Включает или отключает автозаполнение.
- autofocus
- Устанавливает фокус в поле формы.
- border
- Толщина рамки вокруг изображения.
- checked
- Предварительно активированный переключатель или флажок.
- disabled
- Блокирует доступ и изменение элемента.
- form
- Связывает поле с формой по её идентификатору.
- formaction
- Определяет адрес обработчика формы.
- formenctype
- Устанавливает способ кодирования данных формы при их отправке на сервер.
- formmethod
- Сообщает браузеру каким методом следует передавать данные формы на сервер.
- formnovalidate
- Отменяет встроенную проверку данных на корректность.
- formtarget
- Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.
- list
- Указывает на список вариантов, которые можно выбирать при вводе текста.
- max
- Верхнее значение для ввода числа или даты.
- maxlength
- Максимальное количество символов разрешенных в тексте.
- min
- Нижнее значение для ввода числа или даты.
- multiple
- Позволяет загрузить несколько файлов одновременно.
- name
- Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
- pattern
- Устанавливает шаблон ввода.
- placeholder
- Выводит подсказывающий текст.
- readonly
- Устанавливает, что поле не может изменяться пользователем.
- required
- Обязательное для заполнения поле.
- size
- Ширина текстового поля.
- src
- Адрес графического файла для поля с изображением.
- step
- Шаг приращения для числовых полей.
- tabindex
- Определяет порядок перехода между элементами с помощью клавиши Tab.
- type
- Сообщает браузеру, к какому типу относится элемент формы.
- value
- Значение элемента.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Не требуется.
Пример
HTML5IECrOpSaFx6
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег INPUT</title>
</head>
<body>
<form name="test" method="post" action="input1.php">
<p><b>Ваше имя:</b><br>
<input type="text" size="40">
</p>
<p><b>Каким браузером в основном пользуетесь:</b><Br>
<input type="radio" name="browser" value="ie"> Internet Explorer<Br>
<input type="radio" name="browser" value="opera"> Opera<Br>
<input type="radio" name="browser" value="firefox"> Firefox<Br>
</p>
<p>Комментарий<Br>
<textarea name="comment" cols="40" rows="3"></textarea></p>
<p><input type="submit" value="Отправить">
<input type="reset" value="Очистить"></p>
</form>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Вид элементов формы в браузере
Тег | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Элемент <div> является блочным элементом и
предназначен для выделения фрагмента документа с целью изменения вида содержимого.
Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый
раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для
тега добавить атрибут class или id с именем селектора.
Как и при использовании других блочных элементов, содержимое тега <div> всегда начинается с новой строки. После него также добавляется перенос строки.
Синтаксис
<div>...</div>
Атрибуты
- align
- Задает выравнивание содержимого тега <div>.
- title
- Добавляет всплывающую подсказку к содержимому.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Обязателен.
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег DIV</title>
<style type="text/css">
.block1 {
width: 200px;
background: #ccc;
padding: 5px;
padding-right: 20px;
border: solid 1px black;
float: left;
}
.block2 {
width: 200px;
background: #fc0;
padding: 5px;
border: solid 1px black;
float: left;
position: relative;
top: 40px;
left: -70px;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
dolore magna aliguam erat volutpat. </div>
<div>Ut wisis enim ad minim veniam, quis nostrud
exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat.</div>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Вид блоков, оформленных с помощью стилей
Тег | Описание |
---|---|
<!DOCTYPE> | Определяет тип документа |
<html> | Определяет HTML-документ |
<head> | Определяет сведения о документе |
<title> | Определяет заголовок документа |
<body> | Определяет тело документа |
<h2> to <h6> | Определяет заголовки HTML |
<p> | Определяет абзац |
<br> | Вставка одного разрыва строки |
<hr> | Определяет тематическое изменение содержания |
<!—. ..—> | Определяет комментарий |
Тег | Описание |
<acronym> | Не поддерживается в HTML5. Использовать <abbr> Вместо. Определяет акроним |
<abbr> | Определяет аббревиатуру или акроним |
<address> | Определяет контактные данные автора/владельца документа/статьи |
<b> | Определяет полужирный текст |
<bdi> | Изолирует часть текста, которая может быть отформатирована в другом направлении от другого текста за его пределами |
<bdo> | Переопределяет текущее направление текста |
<big> | Не поддерживается в HTML5. Вместо этого используйте CSS. Определяет большой текст |
<blockquote> | Определяет раздел, который цитируется из другого источника |
<center> | Не поддерживается в HTML5. Вместо этого используйте CSS. Определяет центрированный текст |
<cite> | Определяет название работы |
<code> | Определяет часть кода компьютера |
<del> | Определяет текст, который был удален из документа |
<dfn> | Представляет определяющий экземпляр термина |
<em> | Определяет подчеркнутый текст |
<font> | Не поддерживается в HTML5. Вместо этого используйте CSS. Определяет шрифт, цвет и размер текста |
<i> | Определяет часть текста в альтернативный голос или настроение |
<ins> | Определяет текст, вставленный в документ |
<kbd> | Определяет ввод с клавиатуры |
<mark> | Определяет выделенный/выделенный текст |
<meter> | Определяет скалярное измерение в пределах известного диапазона (датчика) |
<pre> | Определяет предварительно отформатированный текст |
<progress> | Представляет ход выполнения задачи |
<q> | Определяет краткое предложение |
<rp> | Определяет, что отображать в обозревателях, не поддерживающих аннотации Ruby |
<rt> | Определяет объяснение/произношение символов (для восточно-азиатских типографии) |
<ruby> | Определяет аннотацию Ruby (для восточно-азиатских типографий) |
<s> | Определяет текст, который больше не является правильным |
<samp> | Определяет выборку выходных данных из компьютерной программы |
<small> | Определяет меньший текст |
<strike> | Не поддерживается в HTML5. Использовать <del> or <s> Вместо. Определяет текст зачеркивания |
<strong> | Определяет важный текст |
<sub> | Определяет текст с подстрочным текстом |
<sup> | Определяет текст с надписью |
<template> | Определяет шаблон |
<time> | Определяет дату и время |
<tt> | Не поддерживается в HTML5. Вместо этого используйте CSS. Определяет телетайп текст |
<u> | Определяет текст, который должен быть стилистически отличается от обычного текста |
<var> | Определяет переменную |
<wbr> | Определяет возможный разрыв строки |
Тег | Описание |
<form> | Определяет HTML-форму для ввода данных пользователем |
<input> | Определяет элемент управления вводом |
<textarea> | Определяет многострочный элемент управления вводом (область текста) |
<button> | Определяет нажатую кнопку |
<select> | Определяет раскрывающийся список |
<optgroup> | Определяет группу связанных параметров в раскрывающемся списке |
<option> | Определяет параметр в раскрывающемся списке |
<label> | Определяет метку для <input> Элемента |
<fieldset> | группирует связанные элементы в форме |
<legend> | Определяет заголовок для <fieldset> Элемента |
<datalist> | Задает список предварительно заданных параметров для элементов управления вводом |
<output> | Определяет результат вычисления |
Тег | Описание |
<frame> | Не поддерживается в HTML5. Определяет окно (фрейм) в фрейме |
<frameset> | Не поддерживается в HTML5. Определяет набор фреймов |
<noframes> | Не поддерживается в HTML5. Определяет альтернативное содержимое для пользователей, которые не поддерживают рамки |
<iframe> | Определяет встроенный фрейм |
Тег | Описание |
<img> | Определяет изображение |
<map> | Определяет изображение на стороне клиента-карты |
<area> | Определяет область внутри изображения-карты |
<canvas> | Используется для рисования графики, на лету, с помощью сценариев (обычно JavaScript) |
<figcaption> | Определяет заголовок для <figure> Элемента |
<figure> | Указывает автономное содержимое |
<picture> | Определяет контейнер для нескольких ресурсов изображения |
<svg> | Определяет контейнер для графики SVG |
Тег | Описание |
<audio> | Определяет звуковое содержимое |
<source> | Определяет несколько мультимедийных ресурсов для элементов мультимедиа (<video>, <audio> И <picture>) |
<track> | Определяет текстовые дорожки для элементов мультимедиа (<video> И <audio>) |
<video> | Определяет видео или фильм |
Тег | Описание |
<a> | Определяет гиперссылку |
<link> | Определяет связь между документом и внешним ресурсом (наиболее используемым для связывания с таблицами стилей) |
<nav> | Определяет навигационные ссылки |
Тег | Описание |
<ul> | Определяет неупорядоченный список |
<ol> | Определяет упорядоченный список |
<li> | Определяет элемент списка |
<dir> | Не поддерживается в HTML5. Использовать <ul> Вместо. Определяет список каталогов |
<dl> | Определяет список описания |
<dt> | Определяет термин/имя в списке описания |
<dd> | Определяет описание термина/имени в списке описания |
<menu> | Определяет список/меню команд |
<menuitem> | Определяет команду/пункт меню, который пользователь может вызвать из всплывающего меню |
Тег | Описание |
<table> | Определяет таблицу |
<caption> | Определяет заголовок таблицы |
<th> | Определяет ячейку заголовка в таблице |
<tr> | Определяет строку в таблице |
<td> | Определяет ячейку в таблице |
<thead> | Группирует содержимое заголовка в таблице |
<tbody> | Группирует содержимое тела в таблице |
<tfoot> | Группирует содержимое нижнего колонтитула в таблице |
<col> | Задает свойства столбца для каждого столбца в <colgroup> Элемента |
<colgroup> | Задает группу из одного или нескольких столбцов в таблице для форматирования |
Тег | Описание |
<style> | Определяет сведения о стиле для документа |
<div> | Определяет раздел в документе |
<span> | Определяет раздел в документе |
<header> | Определяет заголовок документа или раздела |
<footer> | Определяет нижний колонтитул для документа или раздела |
<main> | Указывает основное содержимое документа |
<section> | Определяет раздел в документе |
<article> | Определяет статью |
<aside> | Определяет содержание в стороне от содержимого страницы |
<details> | Определяет дополнительные сведения, которые пользователь может просматривать или скрывать |
<dialog> | Определяет диалоговое окно или окно |
<summary> | Определяет видимый заголовок для <details> Элемента |
<data> | Связывает данное содержимое с машинно-читаемым переводом |
Тег | Описание |
<head> | Определяет сведения о документе |
<meta> | Определяет метаданные HTML-документа |
<base> | Указывает базовый URL-адрес/цель для всех относительных URL-адресов в документе |
<basefont> | Не поддерживается в HTML5. Вместо этого используйте CSS. Задает цвет, размер и шрифт по умолчанию для всего текста в документе |
Тег | Описание |
<script> | Определяет сценарий на стороне клиента |
<noscript> | Определяет альтернативное содержимое для пользователей, которые не поддерживают сценарии на стороне клиента |
<applet> | Не поддерживается в HTML5. Использовать <embed> или <object> Вместо. Определяет встроенный апплет |
<embed> | Определяет контейнер для внешнего (не HTML) приложения |
<object> | Определяет внедренный объект |
<param> | Определяет параметр для объекта |
Тег a
Пример
Ссылку на html5css.ru:
<a href=»https://html5css.ru»>Visit html5css.ru!</a>
Подробнее примеры ниже.
Определение и использование
Тег <a> определяет гиперссылку, которая используется для связи с одной страницы на другую.
Наиболее важным атрибутом элемента <a> является атрибут href, указывающий назначение ссылки.
По умолчанию ссылки будут выглядеть следующим образом во всех браузерах:
- Непосещаемая ссылка подчеркнута и синяя
- Посещаемая ссылка подчеркнута и пурпурная
- Активная ссылка подчеркнута и красная
Поддержка браузера
Элемент | |||||
---|---|---|---|---|---|
<a> | Да | Да | Да | Да | Да |
Советы и примечания
Совет:Следующие атрибуты: Загрузка, hreflang, мультимедиа, rel, Target и Type не могут присутствовать, если атрибут href не присутствует.
Совет:Связанная страница обычно отображается в текущем окне обозревателя, если не указан другой целевой объект.
Совет:Используйте CSS для стиля ссылок: CSS ссылка на учебник
и CSS кнопки учебник
Различия между HTML 4,01 и HTML5
В HTML 4,01 тег < a > может быть либо гиперссылкой, либо якорем. В HTML5 тег <a> всегда является гиперссылкой, но если он не имеет атрибута href, он является только местозаполнителем для гиперссылки.
HTML5 имеет некоторые новые атрибуты, и некоторые атрибуты HTML 4,01 больше не поддерживаются.
Атрибуты
= Новинка в HTML5.
Атрибут | Значение | Описание |
---|---|---|
charset | char_encoding | Не поддерживается в HTML5. Задает набор символов связанного документа |
coords | coordinates | Не поддерживается в HTML5. Задает координаты ссылки |
download | filename | Указывает, что целевой объект будет загружен, когда пользователь щелкнет гиперссылку |
href | URL | Указывает URL-адрес страницы, на которую переходит ссылка |
hreflang | language_code | Указывает язык связанного документа |
media | media_query | Указывает, какие носители/устройства оптимизированы для связанного документа |
name | section_name | Не поддерживается в HTML5. Использовать глобальный id attribute instead. Задает имя привязки |
ping | list_of_URLs | Указывает список URL-адресов, разделенных пробелами, к которым, после ссылки, запросы POST с телом ping будут отправляться браузером (в фоновом режиме). Обычно используется для отслеживания. |
rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag | Указывает связь между текущим документом и связанным документом |
rev | text | Не поддерживается в HTML5. Указывает связь между связанным документом и текущим документом |
shape | default rect circle poly | Не поддерживается в HTML5. Задает форму ссылки |
target | _blank _parent _self _top framename | Указывает, где открыть связанный документ |
type | media_type | Указывает тип носителя связанного документа |
Глобальные атрибуты
Тег <a> также поддерживает Глобальные атрибуты в HTML.
Атрибуты события
Тег <a> также поддерживает Атрибуты событий в HTML.
Тег button
Пример
Нажатая кнопка помечается следующим образом:
<button type=»button»>Нажмите меня!</button>
Определение и использование
Тег <button> определяет нажатую кнопку.
Внутри элемента <button> можно поместить содержимое, например текст или изображения. Это различие между этим элементом и кнопками, созданными с помощью элемента <input>.
Совет: Всегда указывайте атрибут Type для элемента < Button >. Различные обозреватели используют различные типы по умолчанию для элемента <button>.
Совет: Кнопки часто стилизованы под CSS:
Поддержка браузера
Элемент | |||||
---|---|---|---|---|---|
<button> | Да | Да | Да | Да | Да |
Советы и примечания
Примечание: При использовании элемента <button> в HTML-форме различные обозреватели могут отправлять различные значения.
Использовать <input> для создания кнопок в форме HTML.
Совет: Посетите наш CSS кнопки учебник чтобы узнать, как стиль кнопок с CSS.
Различия между HTML 4,01 и HTML5
HTML5 имеет следующие новые атрибуты: автофокусировка, форма, формактион, форменктипе, форммесод, formnovalidate и формтаржет.
Атрибуты
= Новые в HTML5.
Атрибут | Значение | Описание |
---|---|---|
autofocus | autofocus | Указывает, что кнопка должна автоматически получать фокус при загрузке страницы |
disabled | disabled | Указывает, что кнопка должна быть отключена |
form | form_id | Указывает одну или несколько форм, к которым принадлежит кнопка |
formaction | URL | Указывает, куда отправлять данные формы при отправке формы. Только для type=»submit» |
formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | Задает способ кодирования данных формы перед отправкой на сервер. Только для type=»submit» |
formmethod | get post | Указывает способ отправки данных формы (используемый метод HTTP). Только для type=»submit» |
formnovalidate | formnovalidate | Указывает, что данные формы не должны проверяться при отправке. Только для type=»submit» |
formtarget | _blank _self _parent _top framename | Указывает, где отображать ответ после отправки формы. Только для type=»submit» |
name | name | Задает имя кнопки |
type | button reset submit | Указывает тип кнопки |
value | text | Задает начальное значение для кнопки |
Глобальные атрибуты
Тег <button> также поддерживает Глобальные атрибуты в HTML.
Атрибуты события
Тег <button> также поддерживает Атрибуты событий в HTML.
Похожие страницы
HTML DOM Ссылки: Кнопку Object
CSS Учебник: Styling Кнопки
Параметры CSS по умолчанию
Нет.
Тег | Краткое описание |
---|---|
<!—…—> | Комментарий. Подробнее |
<!DOCTYPE> | Определяет тип документа. Подробнее |
<a> | Ссылка, гиперссылка, якорь. Подробнее |
<abbr> | Определяет текст как аббревиатуру. Подробнее |
<address> | Контактная информация автора или владельца документа. Подробнее |
<area> | Определяет область на карте-изображении |
<article> | Статья |
<aside> | Контент в стороне (содержимое не является основным на странице по смыслу) |
<audio> | Позволяет вставить воспроизводимый аудио файл. Подробнее |
<b> | Полужирный текст. Подробнее |
<base> | Задает базовый URL или атрибут target для относительных ссылок в документе. Подробнее |
<bdi> | Область, где написание текста может имееть другое направления. Подробнее |
<bdo> | Устанавливает направление написания текста. В отличии от <bdi> направление указывается физическое направление Подробнее |
<blockquote> | Цитата. Подробнее |
<body> | Указывает область body документа. Подробнее |
<br> | Перенос строки. Подробнее |
<button> | Кликабельная кнопка. Подробнее |
<canvas> | Используется для рисовании графики с помощью скриптов |
<caption> | Подпись таблицы. Подробнее |
<cite> | Сноска на название материала. Подробнее |
<code> | Используется для вставки компьютерного кода в текстовом виде. Подробнее |
<col> | Задает характеристики колонок в таблице. Подробнее |
<colgroup> | Определяет группу из одной или более колонок таблицы для форматирования. Подробнее |
<datalist> | Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле. Подробнее |
<dd> | Определяет описание термина из тега <dt> в списке терминов <dl>. Подробнее |
<del> | Текст, который удален в новой версии документа. Подробнее |
<details> | Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть. Подробнее |
<dfn> | Указывает, что содержимое является термином. Подробнее |
<dialog> | Определяет диалоговое окно или интерактивный элемент |
<div> | Блочный элемент — один из основных элементов верстки. Подробнее |
<dl> | Определяет список определений. Подробнее |
<dt> | Название термина в списке определений <dl>. Подробнее |
<em> | выделенный по смыслу текст (обычно, текст выделенный курсивом). Подробнее |
<embed> | Контейнер для внешнего приложения |
<fieldset> | Группа связанных элементов в форме. Подробнее |
<figcaption> | Заголовок для <figure> элемента |
<figure> | Определяет автономную группу из нескольких элементов (например картинка с подписью) |
<footer> | Нижний колонтитул |
<form> | Определяет форму пользовательского ввода. Подробнее |
<h2> — <h6> | Заголовки HTML разного уровня: <h2>, <h3>, <h4>, <h5>, <h5>, <h6>. Подробнее |
<head> | Указывает область head документа. Подробнее |
<header> | Блок заголовка |
<hr> | Горизонтальная линия — тематический разделитель. Подробнее |
<html> | Корневой элемент. Сообщает браузеру, что данный документ является HTML документом. Подробнее |
<i> | Выделяет текст курсивом. Подробнее |
<iframe> | Определяет встроенный фрейм |
<img> | Изображение, картинка. Подробнее |
<input> | Поле для ввода, элемент формы. Подробнее |
<ins> | Текст, который был добавлен в новой версии документа. Подробнее |
<kbd> | Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом. Подробнее |
<label> | Метка для поля ввода. Обычно содержит подпись поля. Подробнее |
<legend> | Заголовок элементов <fieldset>. Подробнее |
<li> | Элемент списка. Подробнее |
<link> | Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS). Подробнее |
<main> | Основной контент |
<map> | Контейнер для <area>. Определяет пользовательскую карту на изображении |
<mark> | Выделенный текст (обычно с помощью подсветки фона). Подробнее |
<menu> | Контейнер для списка пунктов меню |
<menuitem> | Определяет элементы, которые пользователь может вызвать из контекстного меню |
<meta> | Используется для определения мета-данных документа. Подробнее |
<meter> | Измеритель значений в заданном диапазоне |
<nav> | Контейнер для навигационных элементов |
<noscript> | Альтернативный контент для пользователей, отключивших скрипты |
<object> | Определяет встроенный объект |
<ol> | Определяет нумерованный список. Подробнее |
<optgroup> | Определяет группу связанных вариантов в выпадающем списке. Дает название группы. Подробнее |
<option> | Параметр (вариант выбора) в выпадающем списке. Подробнее |
<output> | Результат вычислений. Подробнее |
<p> | Абзац. Подробнее |
<param> | Задает параметры для встроенных объектов |
<picture> | Контейнер для нескольких изображений |
<pre> | Предварительно отформатированный текст. Подробнее |
<progress> | Индикатор выполнения (прогресса) |
<q> | Цитата в тексте. Подробнее |
<rp> | Альтернативный текст, если браузер не поддерживает тег <ruby>. Подробнее |
<rt> | Аннотация к содержимому тега <ruby>. Подробнее |
<ruby> | Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов). Подробнее |
<s> | Перечеркнутый текст. Подробнее |
<samp> | Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом). Подробнее |
<script> | Определяет скрипт или подключение скрипта из внешнего ресурса. Подробнее |
<section> | Раздел |
<select> | Определяет выпадающий список или список с множественным выбором. Подробнее |
<small> | Текст шрифтом меньшего размера. Подробнее |
<source> | Определяет ресурс для тегов <video>, <audio> и <picture>. Подробнее |
<span> | Строчный элемент. Подробнее |
<strong> | Текст, выделенный по значению. Обычно отображается полужирным. Подробнее |
<style> | Определяет контейнер для определения CSS стилей документа. Подробнее |
<sub> | Отображает текст в виде нижнего индекса. Подробнее |
<summary> | Заголовок внутри тега <details>. Подробнее |
<sup> | Отображает текст в виде верхнего индекса. Подробнее |
<table> | Определяет таблицу. Подробнее |
<tbody> | Определяет область контента в таблице. Подробнее |
<td> | Ячейка в таблице <table>. Подробнее |
<textarea> | Многострочное поле для ввода. Подробнее |
<tfoot> | Определяет группу строк в нижней части таблицы <table> — нижний колонтитул. Подробнее |
<th> | Ячейка — заголовок в таблице <table>. Подробнее |
<thead> | Определяет группу строк в верхней части таблицы <table> — верхний колонтитул. Подробнее |
<time> | Дата и/или время. Подробнее |
<title> | Заголовок HTML документа. Подробнее |
<tr> | Определяет строку в таблице. Подробнее |
<track> | Определяет текстовую дорожку для тегов <video> и <audio> Подробнее |
<ul> | Определяет маркированный список. Подробнее |
<var> | Используется для обозначения содержимого тега как переменной. Подробнее |
<video> | Позволяет вставить воспроизводимое видео. Подробнее |
<wbr> | Место, где допускается перенос строки. Подробнее |
Тег | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|---|
<acronym> | Не поддерживается в HTML5. Определяет акроним. Используйте вместо данного элемента <abbr>. | Да | Да | Да | Да | Да | Да |
<abbr> | Определяет аббревиатуру или акроним. Маркировка сокращений является полезной информацией для браузеров, систем перевода и поисковиков. | Да | Да | Да | Да | Да | Да |
<address> | Определяет контактную информацию (автор / владелец) документа или статьи. | Да | Да | Да | Да | Да | Да |
<b> | Определяет жирное начертание текста. | Да | Да | Да | Да | Да | Да |
<bdi> | Изолирует фрагмент текста, который отформатирован в другом направлении, то есть позволяет браузерам корректно обрабатывать двунаправленный текст. Этот элемент полезно использовать при отображении текста с разной направленностью. | Да | Да | Да | Да | Нет | Нет |
<bdo> | Используется для переопределения текущего направления текста (устанавливает направление вывода текста и преимущественно предназначен для использования с языками, где чтение происходит справа налево, например — арабский). | Да | Да | Да | Да | Да | Да |
<big> | Не поддерживается в HTML5. Шрифт, который отображается большего размера. Используйте CSS вместо данного элемента. | Да | Да | Да | Да | Да | Да |
<blockquote> | Определяет блочную цитату (длинная цитата внутри документа). Текст внутри этого тега отображается как выровненный блок с отступами слева и справа | Да | Да | Да | Да | Да | Да |
<center> | Не поддерживается в HTML5. Определяет текст, который выровнен по центру. Используйте CSS вместо данного элемента. | Да | Да | Да | Да | Да | Да |
<cite> | Предназначен для выделения названия произведений (по умолчанию — курсивом). | Да | Да | Да | Да | Да | Да |
<code> | Предназначен для выделения части компьютерного кода (по умолчанию представлен моноширинным шрифтом). | Да | Да | Да | Да | Да | Да |
<del> | Перечёркнутый (удалённый) текст | Да | Да | Да | Да | Да | Да |
<dfn> | Используется, когда в документе упоминается новый термин или слово (первое и поясняемое употребление). По умолчанию, оно выделяется курсивом. | Да | Да | Да | Да | Да | Да |
<em> | Экспрессивно-эмоциональное выделение текста | Да | Да | Да | Да | Да | Да |
<font> | Не поддерживается в HTML5. Определяет цвет, размер и шрифт для текста. Используйте CSS вместо данного элемента. | Да | Да | Да | Да | Да | Да |
<i> | Курсивное начертание текста | Да | Да | Да | Да | Да | Да |
<ins> | Подчёркнутый текст, вставленный в документ. | Да | Да | Да | Да | Да | Да |
<kbd> | Вводимые пользователем нажатия клавиш или текст, набираемый на клавиатуре. | Да | Да | Да | Да | Да | Да |
<mark> | Выделенный/подсвеченный текст. | 6.0 | 4.0 | 11.1 | 5.0 | 9.0 | 12.0 |
<meter> | Предназначен для отображения скалярной величины в заданном диапазоне, или же для графического представления дробного числа. Для использования данного тега должно быть известно максимальное значение. | 8.0 | 6.0 | 11.0 | 6.0 | Нет | 13.0 |
<pre> | Определяет предварительно отформатированный текст, т.е. текст, который был помещён внутрь тега отобразится со шрифтом фиксированной ширины, и сохранит как пробелы, так и разрывы строк | Да | Да | Да | Да | Да | Да |
<progress> | Предоставляет обратную связь, сообщая о состоянии текущего процесса, отображает какая часть задачи выполнена. | 8.0 | 16.0 | 11.0 | 6.0 | 10.0 | 12.0 |
<q> | Используется для выделения коротких цитат (строчная цитата). | Да | Да | Да | Да | Да | Да |
<rp> | Определяет, что отображать браузеру, который не поддерживает тег <ruby> | 5.0 | 38.0 | 15.0 | 5.0 | 5.5 | 12.0 |
<rt> | Помещает полезный текст фуриганы в составе элемента <ruby> | 5.0 | 38.0 | 15.0 | 5.0 | 5.5 | 12.0 |
<ruby> | Используются для добавления фуриган (фонетические подсказки в японском языке, их также называют — руби или ёмигана). | 5.0 | 38.0 | 15.0 | 5.0 | 5.5 | 12.0 |
<s> | Определяет текст, который больше не является правильным или актуальным. | Да | Да | Да | Да | Да | Да |
<samp> | Результат вывода компьютерной программы или скрипта. | Да | Да | Да | Да | Да | Да |
<small> | Шрифт, который отображается меньшим размером(мелкий/юридический шрифт). | Да | Да | Да | Да | Да | Да |
<strike> | Не поддерживается в HTML5. Отображает перечеркнутый текст. Используйте вместо данного элемента тег <del> или тег <s> | Да | Да | Да | Да | Да | Да |
<strong> | Текст, которому придают особое значение (важный текст). | Да | Да | Да | Да | Да | Да |
<sub> | Текст с нижним индексом. | Да | Да | Да | Да | Да | Да |
<sup> | Текст с верхним индексом. | Да | Да | Да | Да | Да | Да |
<time> | Тег временной разметки (семантическая разметка). | 6.0 | 4.0 | 11.1 | 5.0 | 9.0 | 12.0 |
<tt> | Не поддерживается в HTML5. Отображает шрифт моноширинным текстом. Используйте CSS вместо данного элемента. | Да | Да | Да | Да | Да | Да |
<u> | Содержит в себе текст, который должен стилистически отличаться от обычного текста, например слова с орфографическими ошибками или текст на другом языке. | Да | Да | Да | Да | Да | Да |
<var> | Математические/переменные величины. | Да | Да | Да | Да | Да | 12.0 |
<wbr> | Предоставляет возможность указать браузеру, что при необходимости в этом месте можно сделать перенос строки (например, слишком длинное слово или URL). | 1.0 | 3.0 | 11.7 | 4.0 | Нет | Да |
Тег | Описание | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Определяет вид документа | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет документ HTML | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<заголовок> | Содержит метаданные / информацию для документа | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<название> | Определяет заголовок документа | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<тело> | Определяет тело документа | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
до |
Определяет заголовки HTML | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Определяет параграф | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Вставляет одинарный разрыв строки | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<час> | Определяет тематическое изменение содержания | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет комментарий | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Тег | Описание | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<аббревиатура> | Не поддерживается в HTML5. Вместо этого используйте . Определяет аббревиатуру |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет аббревиатуру или акроним | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<адрес> | Определяет контактную информацию автора / владельца документа / статьи | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет полужирный текст | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Изолирует часть текста, которая может быть отформатирована в другом направлении. из другого текста вне его | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Заменяет текущее направление текста | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<большой> | Не поддерживается в HTML5.Вместо этого используйте CSS. Определяет большой текст |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Определяет раздел, цитируемый из другого источника | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<центр> | Не поддерживается в HTML5. Вместо этого используйте CSS. Определяет центрированный текст |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет название работы | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<код> | Определяет часть компьютерного кода | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Определяет текст, который был удален из документа | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет термин, который будет определен в содержимом | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет выделенный текст | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Не поддерживается в HTML5.Вместо этого используйте CSS. Определяет шрифт, цвет и размер текста |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет часть текста альтернативным голосом или настроением | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет текст, который был вставлен в документ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<КБД> | Определяет ввод с клавиатуры | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<марка> | Определяет выделенный / выделенный текст | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<метр> | Определяет скалярное измерение в известном диапазоне (датчик) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Определяет предварительно отформатированный текст | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<ход выполнения> | Представляет ход выполнения задачи | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Определяет короткое предложение | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет, что показывать в браузерах, не поддерживающих рубиновые аннотации. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет объяснение / произношение символов (для восточноазиатских типографика) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<рубин> | Определяет рубиновую аннотацию (для восточноазиатской типографики) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Определяет текст, который больше не является правильным | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет пример вывода компьютерной программы | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<маленький> | Определяет меньший текст | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<удар> | Не поддерживается в HTML5.Вместо этого используйте Определяет зачеркнутый текст |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет важный текст | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет текст с нижним индексом | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет надстрочный текст | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<шаблон> | Определяет контейнер для содержимого, которое должно быть скрыто при загрузке страницы. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<время> | Определяет конкретное время (или дату и время) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Не поддерживается в HTML5.Вместо этого используйте CSS. Определяет текст телетайпа |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет текст, который не артикулирован и имеет стиль, отличный от обычного. текст | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет переменную | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Определяет возможный разрыв строки | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Тег | Описание | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<форма> | Определяет HTML-форму для пользовательского ввода | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<вход> | Определяет элемент управления вводом | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет элемент управления многострочным вводом (текстовая область) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<кнопка> | Определяет кнопку, на которую можно нажать | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<выбрать> | Определяет раскрывающийся список | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет группу связанных опций в раскрывающемся списке | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<опция> | Определяет вариант в раскрывающемся списке | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<метка> | Определяет метку для элемента | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Группирует связанные элементы в форме | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<легенда> | Определяет заголовок для элемента | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<специалист по данным> | Определяет список предопределенных параметров для элементов управления вводом | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<выход> | Определяет результат расчета | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Тег | Описание | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет изображение | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<карта> | Определяет карту изображения на стороне клиента | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<зона | Определяет область внутри карты изображения | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<холст> | Используется для рисования графики «на лету» с помощью сценариев (обычно JavaScript). | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Определяет заголовок для элемента | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<рисунок> | Определяет автономное содержимое | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<картинка> | Определяет контейнер для нескольких ресурсов изображений | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет контейнер для графики SVG | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Тег | Описание | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Определяет неупорядоченный список | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Определяет упорядоченный список | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Определяет элемент списка | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Не поддерживается в HTML5.Вместо этого используйте
Определяет список каталогов |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Определяет список описаний | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Определяет термин / имя в списке описаний | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Определяет описание термина / имени в списке описаний | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Тег | Описание | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<таблица> | Определяет таблицу | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<заголовок> | Определяет заголовок таблицы | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет ячейку заголовка в таблице | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет строку в таблице | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Определяет ячейку в таблице | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Группирует содержимое заголовка в таблице |
<тело> |
Группирует содержимое тела в таблицу |
<фут> |
Группирует содержимое нижнего колонтитула в таблице |
|
Задает свойства столбца для каждого столбца в элементе |
|
Определяет группу из одного или нескольких столбцов в таблице для форматирования. |
Тег |
Описание |
<стиль> |
Определяет информацию о стиле для документа |
|
Определяет раздел в документе |
|
Определяет раздел в документе |
<заголовок> |
Определяет заголовок документа или раздела |
<нижний колонтитул> |
Определяет нижний колонтитул для документа или раздела |
<основной> |
Определяет основное содержание документа |
<раздел> |
Определяет раздел в документе |
<статья> |
Определяет артикул |
<сторона> |
Определяет содержимое помимо содержимого страницы |
<подробности> |
Определяет дополнительные сведения, которые пользователь может просматривать или скрывать. |
<диалог> |
Определяет диалоговое окно или окно |
<резюме> |
Определяет видимый заголовок для элемента |
<данные> |
Добавляет машиночитаемый
перевод заданного содержания |
Тег |
Описание |
<заголовок> |
Определяет информацию о документе |
<мета |
Определяет метаданные о документе HTML |
<база> |
Определяет базовый URL-адрес / цель для всех относительных URL-адресов в документе. |
<баз. |
Не поддерживается в HTML5.Вместо этого используйте CSS. |
Задает цвет, размер и шрифт по умолчанию для всего текста в документе. Тег |
Описание |
<скрипт> |
Определяет клиентский сценарий |
|
Определяет альтернативный контент для пользователей, которые не поддерживают
клиентские скрипты |
<приложение> |
Не поддерживается в HTML5.Вместо этого используйте |
<вставка> |
Определяет контейнер для внешнего (не HTML) приложения |
<объект> |
Определяет встроенный объект |
<параметр> |
Определяет параметр для объекта |
|
Элементы HTML
Элемент HTML определяется начальным тегом, некоторым содержимым и конечный тег.
HTML-элементы
Элемент HTML - это все, от начального тега до конечного тега:
Примеры некоторых элементов HTML:
Моя Первый заголовок
Мой первый абзац.
Начальный тег | Содержание элемента | Конечный тег |
---|---|---|
|
Моя первая заголовок | |
|
Мой первый абзац. | |
|
нет | нет |
Примечание. Некоторые элементы HTML не имеют содержимого (например,
элемент). Эти элементы называются пустыми элементами. Пустые элементы не имеют закрывающего тега!
Вложенные элементы HTML
HTML-элементов могут быть вложенными (это означает, что элементы могут содержать другие элементы).
Все документы HTML состоят из вложенных элементов HTML.
Следующий пример содержит четыре элемента HTML (
,
,
и
):
Пример
Мой первый заголовок
Мой первый абзац.
Объяснение примера
Элемент
является корневым элементом
и он определяет весь HTML-документ.
Он имеет начальный тег
и конечный тег
.
Тогда внутри элемента
есть
a
элемент:
Мой первый заголовок
Мой первый абзац.
Элемент
определяет
тело документа.
Он имеет начальный тег
и конечный тег
.
Затем внутри элемента
есть
два других элемента:
и
:
Мой первый заголовок
Мой первый абзац
Элемент
определяет заголовок.
Он имеет начальный тег
и конечный тег
:
Мой первый заголовок
Элемент
определяет абзац.
Он имеет начальный тег
и конечный тег
Мой первый абзац.
Никогда не пропускайте конечный тег
Некоторые элементы HTML будут отображаться правильно, даже если вы забудете конечный тег:
Однако никогда не полагайтесь на это! Если вы забудете конечный тег, могут возникнуть непредвиденные результаты и ошибки!
Пустые элементы HTML
HTML-элементов без содержимого называются пустыми элементами.
Тег
определяет разрыв строки и
это пустой элемент без закрывающего тега:
HTML без учета регистра
Теги HTML не чувствительны к регистру:
означает то же, что и
.
Стандарт HTML не требует тегов в нижнем регистре, но W3C рекомендует строчных букв в HTML, а требует строчных букв для более строгих типов документов, таких как XHTML.
В W3Schools мы всегда используем имена тегов в нижнем регистре.
Ссылка на тег HTML
Справочник теговW3Schools содержит дополнительную информацию об этих тегах и их атрибутах.
Тег | Описание |
---|---|
Определяет корень HTML-документа | |
<тело> | Определяет тело документа |
до |
Определяет заголовки HTML |
: HTML-документ / корневой элемент - HTML: язык разметки гипертекста
Элемент HTML
представляет корень (элемент верхнего уровня) HTML-документа, поэтому он также называется корневым элементом . Все остальные элементы должны быть потомками этого элемента.
Категории контента | Нет. |
---|---|
Разрешенное содержание | Один элемент , за которым следует один элемент . |
Отсутствие тега | Начальный тег может быть опущен, если первое, что находится внутри элемента , не является комментарием. Конечный тег может быть опущен, если за элементом сразу не следует комментарий. |
Допущенные родители | Нет. Это корневой элемент документа. |
Неявная роль ARIA | Нет соответствующей роли |
Разрешенные роли ARIA | Нет роль разрешено |
Интерфейс DOM | HTMLHtmlElement |
Этот элемент включает глобальные атрибуты.
-
манифест
Это устаревший API, работа которого больше не гарантируется. - Задает URI манифеста ресурса, указывающего ресурсы, которые следует кэшировать локально. Подробнее см. Использование кеша приложения.
-
версия
Это устаревший API, работа которого больше не гарантируется. - Задает версию определения типа документа HTML, которая управляет текущим документом. Этот атрибут не нужен, потому что он избыточен с информацией о версии в объявлении типа документа.
-
xmlns
- Задает пространство имен XML документа. Значение по умолчанию -
"http://www.w3.org/1999/xhtml"
. Это требуется в документах, анализируемых с помощью анализаторов XML, и необязательно в текстовых / html-документах.
...
...
Предоставление атрибута lang
действительного языкового тега IETF в элементе
поможет технологии чтения с экрана определить правильный язык для объявления.Идентификационный языковой тег должен описывать язык, используемый в большей части содержимого страницы. Без него программы чтения с экрана обычно по умолчанию используют язык, установленный операционной системой, что может вызвать неправильное произношение.
Включение действительного объявления lang
в элемент
также гарантирует, что важные метаданные, содержащиеся в
страницы, такие как
страницы, также будут правильно объявлены.
Таблицы BCD загружаются только в браузере
- Элемент верхнего уровня MathML:
- Элемент верхнего уровня SVG:
: элемент Content Division - HTML: язык разметки гипертекста
Элемент HTML Content Division (
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.
В качестве «чистого» контейнера элемент
class
или id
, помечая раздел документа как написанный на другом языке (используя атрибут lang
) и т. Д.Этот элемент включает глобальные атрибуты.
Примечание: Атрибут align
устарел; больше не используйте его. Вместо этого вы должны использовать свойства или методы CSS, такие как CSS Grid или CSS Flexbox, для выравнивания и позиционирования
- Элемент следует использовать только тогда, когда никакой другой семантический элемент (например,
или) не подходит.
Простой пример
Здесь любой контент. Такой как & lt; p & gt ;, & lt; table & gt ;. Вы называете это!
Результат выглядит так:
Пример стиля
В этом примере создается затененный блок путем применения стиля к
с использованием CSS. Обратите внимание на использование атрибутаclass
вдля применения стиля с именем«shadowbox»
к элементу.HTML
Вот очень интересная заметка, отображаемая в прекрасный затененный ящик.
CSS
.shadowbox { ширина: 15em; граница: 1px solid # 333; box-shadow: 8px 8px 5px # 444; отступ: 8px 12px; фоновое изображение: линейный градиент (180 градусов, #fff, #ddd 40%, #ccc); }
Результат
Таблицы BCD загружаются только в браузере
: Элемент Generic Section - HTML: Язык разметки гипертекста
Элемент HTML
представляет собой общий автономный раздел документа, который не имеет более конкретного семантического элемента для его представления.Разделы всегда должны иметь заголовок, за очень редкими исключениями. Категории контента Поток содержимого, разделение содержимого, осязаемое содержимое. Разрешенное содержание Содержание потока. Отсутствие тега Нет, и начальный, и конечный тег являются обязательными. Допущенные родители Любой элемент, который принимает потоковое содержимое. Обратите внимание, что элемент
не должен быть потомком элементаНеявная роль ARIA область
, если элемент имеет доступное имя, в противном случае нет соответствующей ролиРазрешенные роли ARIA предупреждение
,alerttdialog
,приложение
,баннер
,дополнительный
,contentinfo
,диалог
,документ
,канал
,журнал
,основное поле
навигация
,нет
,примечание
,презентация
,поиск
,статус
,панель вкладок
Интерфейс DOM HTMLElement
Как упоминалось выше,
- это общий элемент секционирования, и его следует использовать только в том случае, если нет более конкретного элемента для его представления.Например, меню навигации должно быть заключено в элемент , но список результатов поиска или отображение карты и его элементы управления не имеют конкретных элементов и могут быть помещены внутри
.Также рассмотрим следующие случаи:
- Если содержимое элемента представляет собой автономную атомарную единицу контента, которая имеет смысл синдицировать как отдельную часть (например, сообщение в блоге, комментарий в блоге или газетная статья), то элемент
будет лучше выбор. - Если содержимое представляет собой полезную косвенную информацию, которая работает вместе с основным содержимым, но не является непосредственно его частью (например, связанные ссылки или биография автора), используйте
. - Если содержимое представляет собой основную область содержимого документа, используйте
. - Если вы используете элемент только как оболочку стиля, используйте . Практическое правило состоит в том, что
<раздел>
должен логически появляться в структуре документа.Повторюсь, каждый
должен быть идентифицирован, как правило, путем включения заголовка ( -
element) в качестве дочернего элемента
, где это возможно. Ниже приведены примеры того, где вы можете увидеть<раздел>
без заголовка.Простой пример использования
До
Заголовок
Куча классного контента
После
<раздел>
Заголовок
Куча классного контента
Использование раздела без заголовка
Обстоятельства, при которых вы можете увидеть
, используемое без заголовка, обычно встречаются в разделах веб-приложения / пользовательского интерфейса, а не в традиционных структурах документа.В документе не имеет смысла иметь отдельный раздел содержимого без заголовка, описывающего его содержимое. Такие заголовки полезны для всех читателей, но особенно полезны для пользователей вспомогательных технологий, таких как программы чтения с экрана, а также они хороши для SEO. Рассмотрим, однако, вторичный механизм навигации. Если глобальная навигация уже заключена в элемент
Или как насчет какой-то панели кнопок для управления вашим приложением? Заголовок не обязательно нужен, но это все же отдельный раздел документа:
<раздел>
Разделы без заголовков не отображаются в структуре документа.Если вы действительно хотите принудительно включить такой HTML-блок в структуру документа, но никак не повлиять на визуальный вывод, вы можете включить заголовок, но скрыть его:
<раздел>
Элементы управления
Обязательно используйте вспомогательные технологии и CSS, удобный для чтения с экрана, чтобы скрыть это, например:
.скрытый { позиция: абсолютная; верх: -9999 пикселей; слева: -9999 пикселей; }
В зависимости от содержания, включение заголовка также может быть полезно для SEO, так что это вариант, который стоит рассмотреть.
Таблицы BCD загружаются только в браузере
- Другие элементы, связанные с разделами:
,
,,
,
< h3>
,,
,
,
,
,,
- Использование разделов и контуров HTML
- ARIA: роль региона
- Почему вы должны выбрать статью HTML5 поверх раздела, Брюс Лоусон
.
- Другие элементы, связанные с разделами:
- Если содержимое элемента представляет собой автономную атомарную единицу контента, которая имеет смысл синдицировать как отдельную часть (например, сообщение в блоге, комментарий в блоге или газетная статья), то элемент