Html справочник тегов: Справочник по HTML | htmlbook.ru

Содержание

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+4.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Тег <input> является одним из разносторонних
элементов формы и позволяет создавать разные элементы интерфейса и обеспечить
взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей
и флажков. Хотя элемент <input> не требуется
помещать внутрь контейнера <form>, определяющего
форму, но если введенные пользователем данные должны быть отправлены на сервер,
где их обрабатывает серверная программа, то указывать <form> обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских
приложений, например, скриптов на языке JavaScript.

Основной атрибут тега <input>, определяющий
вид элемента — type. Он позволяет задавать
следующие элементы формы: текстовое поле (text),
поле с паролем (password), переключатель (radio),
флажок (checkbox), скрытое поле (hidden),
кнопка (button), кнопка для отправки формы (submit),
кнопка для очистки формы (reset), поле для отправки
файла (file) и кнопка с изображением (image).
Для каждого элемента существует свой список атрибутов, которые определяют его
вид и характеристики. Кроме того, в HTML5 добавлено еще более десятка новых элементов.

Синтаксис

HTML
<input атрибуты>
XHTML
<input атрибуты />

Атрибуты

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 ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+4.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.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. Вид блоков, оформленных с помощью стилей

HTML теги по категориям

= Новое в HTML5.

ТегОписание
<!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.

АтрибутЗначениеОписание
charsetchar_encodingНе поддерживается в HTML5.
Задает набор символов связанного документа
coordscoordinatesНе поддерживается в HTML5.
Задает координаты ссылки
downloadfilenameУказывает, что целевой объект будет загружен, когда пользователь щелкнет гиперссылку
hrefURLУказывает URL-адрес страницы, на которую переходит ссылка
hreflanglanguage_codeУказывает язык связанного документа
mediamedia_queryУказывает, какие носители/устройства оптимизированы для связанного документа
namesection_nameНе поддерживается в HTML5. Использовать глобальный
id attribute instead.
Задает имя привязки
pinglist_of_URLsУказывает список URL-адресов, разделенных пробелами, к которым, после ссылки, запросы POST с телом ping будут отправляться браузером (в фоновом режиме). Обычно используется для отслеживания.
relalternate
author
bookmark
external
help
license
next
nofollow
noreferrer
noopener
prev
search
tag
Указывает связь между текущим документом и связанным документом
revtextНе поддерживается в HTML5.
Указывает связь между связанным документом и текущим документом
shapedefault
rect
circle
poly
Не поддерживается в HTML5.
Задает форму ссылки
target_blank
_parent
_self
_top
framename
Указывает, где открыть связанный документ
typemedia_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.

АтрибутЗначениеОписание
autofocusautofocusУказывает, что кнопка должна автоматически получать фокус при загрузке страницы
disableddisabledУказывает, что кнопка должна быть отключена
formform_idУказывает одну или несколько форм, к которым принадлежит кнопка
formactionURLУказывает, куда отправлять данные формы при отправке формы. Только для type=»submit»
formenctypeapplication/x-www-form-urlencoded
multipart/form-data
text/plain
Задает способ кодирования данных формы перед отправкой на сервер. Только для type=»submit»
formmethodget
post
Указывает способ отправки данных формы (используемый метод HTTP). Только для type=»submit»
formnovalidateformnovalidateУказывает, что данные формы не должны проверяться при отправке. Только для type=»submit»
formtarget_blank
_self
_parent
_top
framename
Указывает, где отображать ответ после отправки формы. Только для type=»submit»
namenameЗадает имя кнопки
typebutton
reset
submit
Указывает тип кнопки
valuetextЗадает начальное значение для кнопки

Глобальные атрибуты

Тег <button> также поддерживает Глобальные атрибуты в HTML.


Атрибуты события

Тег <button> также поддерживает Атрибуты событий в HTML.


Похожие страницы

HTML DOM Ссылки: Кнопку Object

CSS Учебник: Styling Кнопки


Параметры CSS по умолчанию

Нет.

Список HTML тегов на одной странице. Справочник по тегам HTML5











































































































ТегКраткое описание
<!—…—>Комментарий. Подробнее
<!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>Место, где допускается перенос строки. Подробнее

Теги по категориям | справочник HTML

ТегОписаниеChromeFirefoxOperaSafariIExplorerEdge
<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.04.011.15.09.012.0
<meter>Предназначен для отображения скалярной величины в заданном диапазоне, или же для графического представления дробного числа. Для использования данного тега должно быть известно максимальное значение.8.06.011.06.0Нет13.0
<pre>Определяет предварительно отформатированный текст, т.е. текст, который был помещён внутрь тега отобразится со шрифтом фиксированной ширины, и сохранит как пробелы, так и разрывы строкДаДаДаДаДаДа
<progress>Предоставляет обратную связь, сообщая о состоянии текущего процесса, отображает какая часть задачи выполнена.8.016.011.06.010.012.0
<q>Используется для выделения коротких цитат (строчная цитата).ДаДаДаДаДаДа
<rp>Определяет, что отображать браузеру, который не поддерживает тег <ruby>5.038.015.05.05.512.0
<rt>Помещает полезный текст фуриганы в составе элемента <ruby>5.038.015.05.05.512.0
<ruby>Используются для добавления фуриган (фонетические подсказки в японском языке, их также называют — руби или ёмигана).5.038.015.05.05.512.0
<s>Определяет текст, который больше не является правильным или актуальным.ДаДаДаДаДаДа
<samp>Результат вывода компьютерной программы или скрипта.ДаДаДаДаДаДа
<small>Шрифт, который отображается меньшим размером(мелкий/юридический шрифт).ДаДаДаДаДаДа
<strike>Не поддерживается в HTML5.
Отображает перечеркнутый текст. Используйте вместо данного элемента тег <del> или тег <s>
ДаДаДаДаДаДа
<strong>Текст, которому придают особое значение (важный текст).ДаДаДаДаДаДа
<sub>Текст с нижним индексом.ДаДаДаДаДаДа
<sup>Текст с верхним индексом.ДаДаДаДаДаДа
<time>Тег временной разметки (семантическая разметка).6.04.011.15.09.012.0
<tt>Не поддерживается в HTML5.
Отображает шрифт моноширинным текстом. Используйте CSS вместо данного элемента.
ДаДаДаДаДаДа
<u>Содержит в себе текст, который должен стилистически отличаться от обычного текста, например слова с орфографическими ошибками или текст на другом языке.ДаДаДаДаДаДа
<var>Математические/переменные величины.ДаДаДаДаДа12.0
<wbr>Предоставляет возможность указать браузеру, что при необходимости в этом месте можно сделать перенос строки (например, слишком длинное слово или URL).1.03.011.74.0НетДа

HTML Ссылка

Тег Описание
Определяет комментарий
Определяет вид документа
Определяет гиперссылку
Определяет аббревиатуру или акроним
<аббревиатура> Не поддерживается в HTML5. Вместо этого используйте .
Определяет аббревиатуру
<адрес> Определяет контактную информацию автора / владельца документа
<приложение> Не поддерживается в HTML5. Вместо этого используйте или .
Определяет встроенный апплет
<зона Определяет область внутри карты изображения
<статья> Определяет артикул
<сторона> Определяет содержимое помимо содержимого страницы
<аудио> Определяет встроенный звуковой контент
Определяет полужирный текст
<база> Определяет базовый URL-адрес / цель для всех относительных URL-адресов в документе.
<баз. Не поддерживается в HTML5.Вместо этого используйте CSS.
Задает цвет, размер и шрифт по умолчанию для всего текста в документе.
Изолирует часть текста, которая может быть отформатирована в другом направлении.
из другого текста вне его
Заменяет текущее направление текста
<большой> Не поддерживается в HTML5. Вместо этого используйте CSS.
Определяет большой текст
Определяет раздел, цитируемый из другого источника
<тело> Определяет тело документа
Определяет одинарный разрыв строки
<кнопка> Определяет кнопку, на которую можно нажать
<холст> Используется для рисования графики «на лету» с помощью сценариев (обычно JavaScript).
<заголовок> Определяет заголовок таблицы
<центр> Не поддерживается в HTML5.Вместо этого используйте CSS.
Определяет центрированный текст
Определяет название работы
<код> Определяет часть компьютерного кода
Задает свойства столбца для каждого столбца в элементе

Определяет группу из одного или нескольких столбцов в таблице для форматирования.
<данные> Добавляет машиночитаемый
перевод заданного содержания
<специалист по данным> Определяет список предопределенных параметров для элементов управления вводом
Определяет описание / значение термина в списке описаний
Определяет текст, который был удален из документа
<подробности> Определяет дополнительные сведения, которые пользователь может просматривать или скрывать.
Определяет термин, который будет определен в содержимом
<диалог> Определяет диалоговое окно или окно
Не поддерживается в HTML5.Вместо этого используйте

    .
    Определяет список каталогов
Определяет раздел в документе
Определяет список описаний
Определяет термин / имя в списке описаний
Определяет выделенный текст
<вставка> Определяет контейнер для внешнего приложения
Группирует связанные элементы в форме
Определяет заголовок для элемента

<рисунок> Определяет автономное содержимое
Не поддерживается в HTML5.Вместо этого используйте CSS.
Определяет шрифт, цвет и размер текста
<нижний колонтитул> Определяет нижний колонтитул для документа или раздела
<форма> Определяет HTML-форму для пользовательского ввода
<рамка> Не поддерживается в HTML5.
Определяет окно (фрейм) в наборе фреймов
<набор кадров> Не поддерживается в HTML5.
Определяет набор фреймов

до

Определяет заголовки HTML
<заголовок> Содержит метаданные / информацию для документа
<заголовок> Определяет заголовок документа или раздела
<час> Определяет тематическое изменение содержания
Определяет корень HTML-документа
Определяет часть текста альтернативным голосом или настроением
<кадр> Определяет встроенный фрейм
Определяет изображение
<вход> Определяет элемент управления вводом
Определяет текст, который был вставлен в документ
<КБД> Определяет ввод с клавиатуры
<метка> Определяет метку для элемента
<легенда> Определяет заголовок для элемента

  • Определяет элемент списка
    <ссылка> Определяет связь между документом и внешним ресурсом (большинство
    используется для ссылки на таблицы стилей)
    <основной> Определяет основное содержание документа
    <карта> Определяет карту изображения
    <марка> Определяет выделенный / выделенный текст
    <мета Определяет метаданные о документе HTML
    <метр> Определяет скалярное измерение в известном диапазоне (датчик)
    Определяет навигационные ссылки
    </td><td> Не поддерживается в HTML5.<br /> Определяет альтернативный контент для пользователей, которые не поддерживают фреймы</td></tr><tr><td> <noscript></td><td> Определяет альтернативный контент для пользователей, которые не поддерживают<br /> клиентские скрипты</td></tr><tr><td> <объект></td><td> Определяет контейнер для внешнего приложения</td></tr><tr><td><ol></td><td> Определяет упорядоченный список</td></tr><tr><td><optgroup></td><td> Определяет группу связанных опций в раскрывающемся списке</td></tr><tr><td> <опция></td><td> Определяет вариант в раскрывающемся списке</td></tr><tr><td> <выход></td><td> Определяет результат расчета</td></tr><tr><td></td><td> Определяет параграф</td></tr><tr><td> <параметр></td><td> Определяет параметр для объекта</td></tr><tr><td> <картинка></td><td> Определяет контейнер для нескольких ресурсов изображений</td></tr><tr><td><pre> </td> <td> Определяет предварительно отформатированный текст </td> </tr> <tr> <td> <ход выполнения> </td> <td> Представляет ход выполнения задачи </td> </tr> <tr> <td> <q> </td> <td> Определяет короткое предложение </td> </tr> <tr> <td> <rp> </td> <td> Определяет, что показывать в браузерах, не поддерживающих рубиновые аннотации. </td> </tr> <tr> <td> <rt> </td> <td> Определяет объяснение / произношение символов (для восточноазиатских типографика) </td> </tr> <tr> <td> <рубин> </td> <td> Определяет рубиновую аннотацию (для восточноазиатской типографики) </td> </tr> <tr> <td> <s> </td> <td> Определяет текст, который больше не является правильным </td> </tr> <tr> <td> <samp> </td> <td> Определяет пример вывода компьютерной программы </td> </tr> <tr> <td> <скрипт> </td> <td> Определяет клиентский сценарий </td> </tr> <tr> <td> <раздел> </td> <td> Определяет раздел в документе </td> </tr> <tr> <td> <выбрать> </td> <td> Определяет раскрывающийся список </td> </tr> <tr> <td> <маленький> </td> <td> Определяет меньший текст </td> </tr> <tr> <td> <источник> </td> <td> Определяет несколько медиаресурсов для медиаэлементов (<video> и <audio>) </td> </tr> <tr> <td> <span> </td> <td> Определяет раздел в документе </td> </tr> <tr> <td> <удар> </td> <td> Не поддерживается в HTML5.Вместо этого используйте <del> или <s>. <br/> Определяет зачеркнутый текст </td> </tr> <tr> <td> <strong> </td> <td> Определяет важный текст </td> </tr> <tr> <td> <стиль> </td> <td> Определяет информацию о стиле для документа </td> </tr> <tr> <td> <sub> </td> <td> Определяет текст с нижним индексом </td> </tr> <tr> <td> <резюме> </td> <td> Определяет видимый заголовок для элемента <details> </td> </tr> <tr> <td> <sup> </td> <td> Определяет надстрочный текст </td> </tr> <tr> <td> <svg> </td> <td> Определяет контейнер для графики SVG </td> </tr> <tr> <td> <таблица> </td> <td> Определяет таблицу </td> </tr> <tr> <td> <тело> </td> <td> Группирует содержимое тела в таблицу </td> </tr> <tr> <td> <td> </td> <td> Определяет ячейку в таблице </td> </tr> <tr> <td> <шаблон> </td> <td> Определяет контейнер для содержимого, которое должно быть скрыто при загрузке страницы. </td> </tr> <tr> <td> <textarea> </td> <td> Определяет элемент управления многострочным вводом (текстовая область) </td> </tr> <tr> <td> <фут> </td> <td> Группирует содержимое нижнего колонтитула в таблице </td> </tr> <tr> <td> <th> </td> <td> Определяет ячейку заголовка в таблице </td> </tr> <tr> <td> <thead> </td> <td> Группирует содержимое заголовка в таблице </td> </tr> <tr> <td> <время> </td> <td> Определяет конкретное время (или дату и время) </td> </tr> <tr> <td> <название> </td> <td> Определяет заголовок документа </td> </tr> <tr> <td> <tr> </td> <td> Определяет строку в таблице </td> </tr> <tr> <td> <трек> </td> <td> Определяет текстовые дорожки для мультимедийных элементов (<video> и <audio>) </td> </tr> <tr> <td> <tt> </td> <td> Не поддерживается в HTML5.Вместо этого используйте CSS. <br/> Определяет текст телетайпа </td> </tr> <tr> <td> <u> </td> <td> Определяет текст, который не артикулирован и имеет стиль, отличный от обычного. текст </td> </tr> <tr> <td> <ul> </td> <td> Определяет неупорядоченный список </td> </tr> <tr> <td> <var> </td> <td> Определяет переменную </td> </tr> <tr> <td> <видео> </td> <td> Определяет встроенный видеоконтент </td> </tr> <tr> <td> <wbr> </td> <td> Определяет возможный разрыв строки </td> </tr> </table> <table> <h2><span class="ez-toc-section" id="%D0%A1%D1%81%D1%8B%D0%BB%D0%BA%D0%B0_%D0%BD%D0%B0_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82_HTML_-_%D0%BF%D0%BE_%D0%BA%D0%B0%D1%82%D0%B5%D0%B3%D0%BE%D1%80%D0%B8%D0%B8"></span> Ссылка на элемент HTML - по категории <span class="ez-toc-section-end"></span></h2> <tr> <th> Тег </th> <th> Описание </th> </tr> <tr> <td> <! DOCTYPE> </td> <td> Определяет вид документа </td> </tr> <tr> <td> <html> </td> <td> Определяет документ HTML </td> </tr> <tr> <td> <заголовок> </td> <td> Содержит метаданные / информацию для документа </td> </tr> <tr> <td> <название> </td> <td> Определяет заголовок документа </td> </tr> <tr> <td> <тело> </td> <td> Определяет тело документа </td> </tr> <tr> <td> <h2><span class="ez-toc-section" id="%D0%B4%D0%BE-2"></span> до <span class="ez-toc-section-end"></span></h2><h6> </h6></td> <td> Определяет заголовки HTML </td> </tr> <tr> <td> <p> </td> <td> Определяет параграф </td> </tr> <tr> <td> <br> </td> <td> Вставляет одинарный разрыв строки </td> </tr> <tr> <td> <час> </td> <td> Определяет тематическое изменение содержания </td> </tr> <tr> <td> <! -...--> </td> <td> Определяет комментарий </td> </tr> <tr> <th> Тег </th> <th> Описание </th> </tr> <tr> <td> <аббревиатура> </td> <td> Не поддерживается в HTML5. Вместо этого используйте <abbr>. <br/> Определяет аббревиатуру </td> </tr> <tr> <td> <abbr> </td> <td> Определяет аббревиатуру или акроним </td> </tr> <tr> <td> <адрес> </td> <td> Определяет контактную информацию автора / владельца документа / статьи </td> </tr> <tr> <td> <b> </td> <td> Определяет полужирный текст </td> </tr> <tr> <td> <bdi> </td> <td> Изолирует часть текста, которая может быть отформатирована в другом направлении. из другого текста вне его </td> </tr> <tr> <td> <bdo> </td> <td> Заменяет текущее направление текста </td> </tr> <tr> <td> <большой> </td> <td> Не поддерживается в HTML5.Вместо этого используйте CSS. <br/> Определяет большой текст </td> </tr> <tr> <td> <blockquote> </td> <td> Определяет раздел, цитируемый из другого источника </td> </tr> <tr> <td> <центр> </td> <td> Не поддерживается в HTML5. Вместо этого используйте CSS. <br/> Определяет центрированный текст </td> </tr> <tr> <td> <cite> </td> <td> Определяет название работы </td> </tr> <tr> <td> <код> </td> <td> Определяет часть компьютерного кода </td> </tr> <tr> <td> <del> </td> <td> Определяет текст, который был удален из документа </td> </tr> <tr> <td> <dfn> </td> <td> Определяет термин, который будет определен в содержимом </td> </tr> <tr> <td> <em> </td> <td> Определяет выделенный текст </td> </tr> <tr> <td> <font> </td> <td> Не поддерживается в HTML5.Вместо этого используйте CSS. <br/> Определяет шрифт, цвет и размер текста </td> </tr> <tr> <td> <i> </td> <td> Определяет часть текста альтернативным голосом или настроением </td> </tr> <tr> <td> <ins> </td> <td> Определяет текст, который был вставлен в документ </td> </tr> <tr> <td> <КБД> </td> <td> Определяет ввод с клавиатуры </td> </tr> <tr> <td> <марка> </td> <td> Определяет выделенный / выделенный текст </td> </tr> <tr> <td> <метр> </td> <td> Определяет скалярное измерение в известном диапазоне (датчик) </td> </tr> <tr> <td> <pre> </td> <td> Определяет предварительно отформатированный текст </td> </tr> <tr> <td> <ход выполнения> </td> <td> Представляет ход выполнения задачи </td> </tr> <tr> <td> <q> </td> <td> Определяет короткое предложение </td> </tr> <tr> <td> <rp> </td> <td> Определяет, что показывать в браузерах, не поддерживающих рубиновые аннотации. </td> </tr> <tr> <td> <rt> </td> <td> Определяет объяснение / произношение символов (для восточноазиатских типографика) </td> </tr> <tr> <td> <рубин> </td> <td> Определяет рубиновую аннотацию (для восточноазиатской типографики) </td> </tr> <tr> <td> <s> </td> <td> Определяет текст, который больше не является правильным </td> </tr> <tr> <td> <samp> </td> <td> Определяет пример вывода компьютерной программы </td> </tr> <tr> <td> <маленький> </td> <td> Определяет меньший текст </td> </tr> <tr> <td> <удар> </td> <td> Не поддерживается в HTML5.Вместо этого используйте <del> или <s>. <br/> Определяет зачеркнутый текст </td> </tr> <tr> <td> <strong> </td> <td> Определяет важный текст </td> </tr> <tr> <td> <sub> </td> <td> Определяет текст с нижним индексом </td> </tr> <tr> <td> <sup> </td> <td> Определяет надстрочный текст </td> </tr> <tr> <td> <шаблон> </td> <td> Определяет контейнер для содержимого, которое должно быть скрыто при загрузке страницы. </td> </tr> <tr> <td> <время> </td> <td> Определяет конкретное время (или дату и время) </td> </tr> <tr> <td> <tt> </td> <td> Не поддерживается в HTML5.Вместо этого используйте CSS. <br/> Определяет текст телетайпа </td> </tr> <tr> <td> <u> </td> <td> Определяет текст, который не артикулирован и имеет стиль, отличный от обычного. текст </td> </tr> <tr> <td> <var> </td> <td> Определяет переменную </td> </tr> <tr> <td> <wbr> </td> <td> Определяет возможный разрыв строки </td> </tr> <tr> <th> Тег </th> <th> Описание </th> </tr> <tr> <td> <форма> </td> <td> Определяет HTML-форму для пользовательского ввода </td> </tr> <tr> <td> <вход> </td> <td> Определяет элемент управления вводом </td> </tr> <tr> <td> <textarea> </td> <td> Определяет элемент управления многострочным вводом (текстовая область) </td> </tr> <tr> <td> <кнопка> </td> <td> Определяет кнопку, на которую можно нажать </td> </tr> <tr> <td> <выбрать> </td> <td> Определяет раскрывающийся список </td> </tr> <tr> <td> <optgroup> </td> <td> Определяет группу связанных опций в раскрывающемся списке </td> </tr> <tr> <td> <опция> </td> <td> Определяет вариант в раскрывающемся списке </td> </tr> <tr> <td> <метка> </td> <td> Определяет метку для элемента <input> </td> </tr> <tr> <td> <fieldset> </td> <td> Группирует связанные элементы в форме </td> </tr> <tr> <td> <легенда> </td> <td> Определяет заголовок для элемента <fieldset> </td> </tr> <tr> <td> <специалист по данным> </td> <td> Определяет список предопределенных параметров для элементов управления вводом </td> </tr> <tr> <td> <выход> </td> <td> Определяет результат расчета </td> </tr> <tr> <th> Тег </th> <th> Описание </th> </tr> <tr> <td> <img> </td> <td> Определяет изображение </td> </tr> <tr> <td> <карта> </td> <td> Определяет карту изображения на стороне клиента </td> </tr> <tr> <td> <зона </td> <td> Определяет область внутри карты изображения </td> </tr> <tr> <td> <холст> </td> <td> Используется для рисования графики «на лету» с помощью сценариев (обычно JavaScript). </td> </tr> <tr> <td> <figcaption> </td> <td> Определяет заголовок для элемента <figure> </td> </tr> <tr> <td> <рисунок> </td> <td> Определяет автономное содержимое </td> </tr> <tr> <td> <картинка> </td> <td> Определяет контейнер для нескольких ресурсов изображений </td> </tr> <tr> <td> <svg> </td> <td> Определяет контейнер для графики SVG </td> </tr> <tr> <th> Тег </th> <th> Описание </th> </tr> <tr> <td> <ul> </td> <td> Определяет неупорядоченный список </td> </tr> <tr> <td> <ol> </td> <td> Определяет упорядоченный список </td> </tr> <tr> <td> <li> </td> <td> Определяет элемент списка </td> </tr> <tr> <td> <dir> </td> <td> Не поддерживается в HTML5.Вместо этого используйте <ul>. <br/> Определяет список каталогов </td> </tr> <tr> <td> <dl> </td> <td> Определяет список описаний </td> </tr> <tr> <td> <dt> </td> <td> Определяет термин / имя в списке описаний </td> </tr> <tr> <td> <dd> </td> <td> Определяет описание термина / имени в списке описаний </td> </tr> <tr> <th> Тег </th> <th> Описание </th> </tr> <tr> <td> <таблица> </td> <td> Определяет таблицу </td> </tr> <tr> <td> <заголовок> </td> <td> Определяет заголовок таблицы </td> </tr> <tr> <td> <th> </td> <td> Определяет ячейку заголовка в таблице </td> </tr> <tr> <td> <tr> </td> <td> Определяет строку в таблице </td> </tr> <tr> <td> <td> </td> <td> Определяет ячейку в таблице </td> </tr> <tr> <td> <thead> </td> <td> Группирует содержимое заголовка в таблице </td> </tr> <tr> <td> <тело> </td> <td> Группирует содержимое тела в таблицу </td> </tr> <tr> <td> <фут> </td> <td> Группирует содержимое нижнего колонтитула в таблице </td> </tr> <tr> <td> <col> </td> <td> Задает свойства столбца для каждого столбца в элементе <colgroup> </td> </tr> <tr> <td> <colgroup> </td> <td> Определяет группу из одного или нескольких столбцов в таблице для форматирования. </td> </tr> <tr> <th> Тег </th> <th> Описание </th> </tr> <tr> <td> <стиль> </td> <td> Определяет информацию о стиле для документа </td> </tr> <tr> <td> <div> </td> <td> Определяет раздел в документе </td> </tr> <tr> <td> <span> </td> <td> Определяет раздел в документе </td> </tr> <tr> <td> <заголовок> </td> <td> Определяет заголовок документа или раздела </td> </tr> <tr> <td> <нижний колонтитул> </td> <td> Определяет нижний колонтитул для документа или раздела </td> </tr> <tr> <td> <основной> </td> <td> Определяет основное содержание документа </td> </tr> <tr> <td> <раздел> </td> <td> Определяет раздел в документе </td> </tr> <tr> <td> <статья> </td> <td> Определяет артикул </td> </tr> <tr> <td> <сторона> </td> <td> Определяет содержимое помимо содержимого страницы </td> </tr> <tr> <td> <подробности> </td> <td> Определяет дополнительные сведения, которые пользователь может просматривать или скрывать. </td> </tr> <tr> <td> <диалог> </td> <td> Определяет диалоговое окно или окно </td> </tr> <tr> <td> <резюме> </td> <td> Определяет видимый заголовок для элемента <details> </td> </tr> <tr> <td> <данные> </td> <td> Добавляет машиночитаемый перевод заданного содержания </td> </tr> <tr> <th> Тег </th> <th> Описание </th> </tr> <tr> <td> <заголовок> </td> <td> Определяет информацию о документе </td> </tr> <tr> <td> <мета </td> <td> Определяет метаданные о документе HTML </td> </tr> <tr> <td> <база> </td> <td> Определяет базовый URL-адрес / цель для всех относительных URL-адресов в документе. </td> </tr> <tr> <td> <баз. </td> <td> Не поддерживается в HTML5.Вместо этого используйте CSS. <br/> Задает цвет, размер и шрифт по умолчанию для всего текста в документе. </td> </tr> <tr> <th> Тег </th> <th> Описание </th> </tr> <tr> <td> <скрипт> </td> <td> Определяет клиентский сценарий </td> </tr> <tr> <td> <noscript> </td> <td> Определяет альтернативный контент для пользователей, которые не поддерживают клиентские скрипты </td> </tr> <tr> <td> <приложение> </td> <td> Не поддерживается в HTML5.Вместо этого используйте <embed> или <object>. <br/> Определяет встроенный апплет </td> </tr> <tr> <td> <вставка> </td> <td> Определяет контейнер для внешнего (не HTML) приложения </td> </tr> <tr> <td> <объект> </td> <td> Определяет встроенный объект </td> </tr> <tr> <td> <параметр> </td> <td> Определяет параметр для объекта </td> </tr> </table> <h2><span class="ez-toc-section" id="%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%8B_HTML"></span> Элементы HTML <span class="ez-toc-section-end"></span></h2> <hr/> <p> Элемент HTML определяется начальным тегом, некоторым содержимым и конечный тег.</p> <hr/> <h3><span class="ez-toc-section" id="HTML-%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%8B"></span> HTML-элементы <span class="ez-toc-section-end"></span></h3> <p> Элемент HTML <strong> </strong> - это все, от начального тега до конечного тега: </p> <p> <tagname> Здесь идет контент ... </tagname> </p> <p> Примеры некоторых элементов HTML: </p> <p> <h2><span class="ez-toc-section" id="%D0%9C%D0%BE%D1%8F_%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B9_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA"></span> Моя Первый заголовок <span class="ez-toc-section-end"></span></h2> </p> <p> <p> Мой первый абзац. </p> </p> <table> <tr> <th> Начальный тег </th> <th> Содержание элемента </th> <th> Конечный тег </th> </tr> <tr> <td> <h2> </h2></td> <td> Моя первая заголовок </td> <td> </h2> </td> </tr> <tr> <td> <p> </td> <td> Мой первый абзац.</td> <td> </p> </td> </tr> <tr> <td> <br> </td> <td> <em> нет </em> </td> <td> <em> нет </em> </td> </tr> </table> <p> <strong> Примечание. </strong> Некоторые элементы HTML не имеют содержимого (например, <br> элемент). Эти элементы называются пустыми элементами. Пустые элементы не имеют закрывающего тега! </p> <hr/> <h3><span class="ez-toc-section" id="%D0%92%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%BD%D1%8B%D0%B5_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%8B_HTML"></span> Вложенные элементы HTML <span class="ez-toc-section-end"></span></h3> <p> HTML-элементов могут быть вложенными (это означает, что элементы могут содержать другие элементы). </p> <p> Все документы HTML состоят из вложенных элементов HTML.</p> <p> Следующий пример содержит четыре элемента HTML (<code> <html> </code>, <code> <body> </code>, <code> <h2> </h2></code> и <code> <p> </code>): </p> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-3"></span> Пример <span class="ez-toc-section-end"></span></h4> <br/> <p> <h2><span class="ez-toc-section" id="%D0%9C%D0%BE%D0%B9_%D0%BF%D0%B5%D1%80%D0%B2%D1%8B%D0%B9_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA"></span> Мой первый заголовок <span class="ez-toc-section-end"></span></h2> <br/> <p> Мой первый абзац. </p> </p> <p> <script defer src="https://jumper.su/wp-content/cache/autoptimize/js/autoptimize_c2eddd3bb4f6b370580402e88c0d0641.js"></script></body> <br/> </html> </p> Попробуй сам " <h4><span class="ez-toc-section" id="%D0%9E%D0%B1%D1%8A%D1%8F%D1%81%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D0%B0"></span> Объяснение примера <span class="ez-toc-section-end"></span></h4> <p> Элемент <code> <html> </code> является корневым элементом и он определяет весь HTML-документ.</p> <p> Он имеет начальный тег <code> <html> </code> и конечный тег <code> </html> </code>. </p> <p> Тогда внутри элемента <code> <html> </code> есть a <code> <body> </code> элемент: </p> <p> <h2><span class="ez-toc-section" id="%D0%9C%D0%BE%D0%B9_%D0%BF%D0%B5%D1%80%D0%B2%D1%8B%D0%B9_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA-2"></span> Мой первый заголовок <span class="ez-toc-section-end"></span></h2> <br/> <p> Мой первый абзац. </p> </p> <p> </body> </p> <p> Элемент <code> <body> </code> определяет тело документа. </p> <p> Он имеет начальный тег <code> <body> </code> и конечный тег <code> </body> </code>.</p> <p> Затем внутри элемента <code> <body> </code> есть два других элемента: <code> <h2> </h2></code> и <code> <p> </code>: </p> <p> <h2><span class="ez-toc-section" id="%D0%9C%D0%BE%D0%B9_%D0%BF%D0%B5%D1%80%D0%B2%D1%8B%D0%B9_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA-3"></span> Мой первый заголовок <span class="ez-toc-section-end"></span></h2> <br/> <p> Мой первый абзац </p> </p> <p> Элемент <code> <h2> </h2></code> определяет заголовок. </p> <p> Он имеет начальный тег <code> <h2> </h2></code> и конечный тег <code> </h2> </code>: </p> <p> <h2><span class="ez-toc-section" id="%D0%9C%D0%BE%D0%B9_%D0%BF%D0%B5%D1%80%D0%B2%D1%8B%D0%B9_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA-4"></span> Мой первый заголовок <span class="ez-toc-section-end"></span></h2> </p> <p> Элемент <code> <p> </code> определяет абзац.</p> <p> Он имеет начальный тег <code> <p> </code> и конечный тег <code> </p> </code>: </p> <p> <p> Мой первый абзац. </p> </p> <hr/> <hr/> <h3><span class="ez-toc-section" id="%D0%9D%D0%B8%D0%BA%D0%BE%D0%B3%D0%B4%D0%B0_%D0%BD%D0%B5_%D0%BF%D1%80%D0%BE%D0%BF%D1%83%D1%81%D0%BA%D0%B0%D0%B9%D1%82%D0%B5_%D0%BA%D0%BE%D0%BD%D0%B5%D1%87%D0%BD%D1%8B%D0%B9_%D1%82%D0%B5%D0%B3"></span> Никогда не пропускайте конечный тег <span class="ez-toc-section-end"></span></h3> <p> Некоторые элементы HTML будут отображаться правильно, даже если вы забудете конечный тег: </p> <p> <strong> Однако никогда не полагайтесь на это! Если вы забудете конечный тег, могут возникнуть непредвиденные результаты и ошибки! </strong> </p> <hr/> <h3><span class="ez-toc-section" id="%D0%9F%D1%83%D1%81%D1%82%D1%8B%D0%B5_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%8B_HTML"></span> Пустые элементы HTML <span class="ez-toc-section-end"></span></h3> <p> HTML-элементов без содержимого называются пустыми элементами.</p> <p> Тег <code> <br> </code> определяет разрыв строки и это пустой элемент без закрывающего тега: </p> <hr/> <h3><span class="ez-toc-section" id="HTML_%D0%B1%D0%B5%D0%B7_%D1%83%D1%87%D0%B5%D1%82%D0%B0_%D1%80%D0%B5%D0%B3%D0%B8%D1%81%D1%82%D1%80%D0%B0"></span> HTML без учета регистра <span class="ez-toc-section-end"></span></h3> Теги <p> HTML не чувствительны к регистру: <code> <P> </code> означает то же, что и <code> <p> </code>. </p> <p> Стандарт HTML не требует тегов в нижнем регистре, но W3C <b> рекомендует </b> строчных букв в HTML, а <b> требует </b> строчных букв для более строгих типов документов, таких как XHTML. </p> <p> В W3Schools мы всегда используем имена тегов в нижнем регистре.</p> <hr/> <h3><span class="ez-toc-section" id="%D0%A1%D1%81%D1%8B%D0%BB%D0%BA%D0%B0_%D0%BD%D0%B0_%D1%82%D0%B5%D0%B3_HTML"></span> Ссылка на тег HTML <span class="ez-toc-section-end"></span></h3> Справочник тегов <p> W3Schools содержит дополнительную информацию об этих тегах и их атрибутах. </p> <table> <tr> <th> Тег </th> <th> Описание </th> </tr> <tr> <td> <html> </td> <td> Определяет корень HTML-документа </td> </tr> <tr> <td> <тело> </td> <td> Определяет тело документа </td> </tr> <tr> <td> <h2><span class="ez-toc-section" id="%D0%B4%D0%BE-3"></span> до <span class="ez-toc-section-end"></span></h2><h6> </h6></td> <td> Определяет заголовки HTML </td> </tr> </table> <br/> <br/> <table> <h2><span class="ez-toc-section" id="%D0%A1%D0%BF%D1%80%D0%B0%D0%B2%D0%BE%D1%87%D0%BD%D0%B8%D0%BA_%D0%BF%D0%BE_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D0%BC_HTML_-_HTML_%D1%8F%D0%B7%D1%8B%D0%BA_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%82%D0%BA%D0%B8_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0"></span> Справочник по элементам HTML - HTML: язык разметки гипертекста <span class="ez-toc-section-end"></span></h2> <tr> <td> <code> <a> </code> </td> <td> <strong> HTML <code> <a> </code> элемент </strong> (или <em> элемент привязки </em>) с его атрибутом <code> href </code>, создает гиперссылку на веб-страницы, файлы, адреса электронной почты, местоположения на той же странице или что-либо еще, что URL может адрес.</td> </tr> <tr> <td> <code> <abbr> </code> </td> <td> Элемент <strong> HTML Abbreviation </strong> (<strong> <code> <abbr> </code> </strong>) представляет собой аббревиатуру или акроним; необязательный атрибут <code> title </code> может предоставить расширение или описание сокращения. </td> </tr> <tr> <td> <code> <b> </code> </td> <td> Элемент <strong> HTML «Привлечь внимание» (<code></code>) </strong> используется для привлечения внимания читателя к содержимому элемента, которому в противном случае не придается особого значения.</td> </tr> <tr> <td> <code> <bdi> </code> </td> <td> Элемент HTML <strong> Bidirectional Isolate </strong> (<strong> <code> <bdi> </code> </strong>) сообщает двунаправленному алгоритму браузера обрабатывать содержащийся в нем текст изолированно от окружающего его текста. </td> </tr> <tr> <td> <code> <bdo> </code> </td> <td> Элемент <strong> HTML Bidirectional Text Override элемент </strong> (<strong> <code> <bdo> </code> </strong>) отменяет текущую направленность текста, поэтому текст внутри отображается в другом направлении.</td> </tr> <tr> <td> <code> <br> </code> </td> <td> Элемент <strong> HTML <code> <br> </code> </strong> создает разрыв строки в тексте (возврат каретки). Это полезно для написания стихотворения или обращения, где разделение строк имеет большое значение. </td> </tr> <tr> <td> <code> <cite> </code> </td> <td> Элемент <strong> HTML Citation </strong> (<strong> <code> <cite> </code> </strong>) используется для описания ссылки на цитируемое творческое произведение и должен включать название этого произведения.</td> </tr> <tr> <td> <code> <код> </code> </td> <td> Элемент <strong> HTML <code> <code> </code> </strong> отображает свое содержимое в стиле, предназначенном для обозначения того, что текст является коротким фрагментом компьютерного кода. </td> </tr> <tr> <td> <code> <данные> </code> </td> <td> Элемент <strong> HTML <code> <data> </code> </strong> связывает заданный фрагмент контента с машиночитаемым переводом. Если содержимое связано со временем или датой, необходимо использовать элемент <code> time </code>.</td> </tr> <tr> <td> <code> <dfn> </code> </td> <td> Элемент определения HTML <strong> </strong> (<code> <strong> <dfn> <dfn> </dfn> </strong> </code>) используется для обозначения термина, определяемого в контексте фразы или предложения определения. </td> </tr> <tr> <td> <code> <em> </code> </td> <td> Элемент <strong> HTML <code> <em> </code> </strong> отмечает текст, в котором выделено ударение. Элемент <code> <em> </code> может быть вложенным, причем каждый уровень вложенности указывает на большую степень выделения.</td> </tr> <tr> <td> <code> <i> </code> </td> <td> Элемент идиоматического текста HTML <strong> (<code> <i> </code>) </strong> представляет собой диапазон текста, который по какой-то причине отличается от обычного текста, например, идиоматический текст, технические термины, таксономические обозначения и другие. </td> </tr> <tr> <td> <code> <кбд> </code> </td> <td> Элемент <strong> HTML Keyboard Input </strong> (<strong> <code> <kbd> </code> </strong>) представляет собой диапазон встроенного текста, обозначающего текстовый ввод пользователя с клавиатуры, голосового ввода или любого другого устройства ввода текста.</td> </tr> <tr> <td> <code> <марка> </code> </td> <td> Элемент <strong> HTML Mark Text </strong> (<strong> <code> <mark> </code> </strong>) представляет текст, который обозначен <strong>, отмеченным как </strong>, или <strong>, выделенным как </strong>, для справки или в целях обозначения, из-за релевантности или важности отмеченного отрывка во включающем контексте. </td> </tr> <tr> <td> <code> <q> </code> </td> <td> Элемент <strong> HTML <code> <q> </code> </strong> указывает, что заключенный текст является короткой встроенной цитатой.Большинство современных браузеров реализуют это, заключая текст в кавычки. </td> </tr> <tr> <td> <code> <rb> </code> </td> <td> Элемент <strong> HTML Ruby Base (<code> <rb> </code>) </strong> используется для разграничения основного текстового компонента аннотации <code> ruby ​​</code>, то есть текста, который аннотируется. </td> </tr> <tr> <td> <code> <rp> </code> </td> <td> Элемент </strong> резервной скобки HTML Ruby (<code> <rp> </code>) </strong> используется для предоставления резервных скобок для браузеров, которые не поддерживают отображение рубиновых аннотаций с использованием элемента <code> ruby ​​</code>.</td> </tr> <tr> <td> <code> <rt> </code> </td> <td> Элемент <strong> HTML Ruby Text (<code> <rt> </code>) </strong> определяет компонент рубинового текста рубиновой аннотации, которая используется для предоставления информации о произношении, переводе или транслитерации для восточноазиатской типографии. Элемент <code> <rt> </code> всегда должен содержаться в элементе <code> ruby ​​</code>. </td> </tr> <tr> <td> <code> <rtc> </code> </td> <td> Контейнер <strong> HTML Ruby Text (<code> <rtc> </code>) элемент </strong> охватывает семантические аннотации символов, представленных в элементе ruby ​​из <code> rb </code>, используемых внутри элемента <code> ruby ​​</code>.Элементы <code> rb </code> могут иметь как произношения (<code> rt </code>), так и семантические (<code> rtc </code>) аннотации. </td> </tr> <tr> <td> <code> <рубин> </code> </td> <td> Элемент <strong> HTML <code> <ruby> </code> </strong> представляет небольшие аннотации, которые отображаются выше, ниже или рядом с основным текстом, обычно используются для отображения произношения восточноазиатских символов. Его также можно использовать для аннотирования других типов текста, но это менее распространено. </td> </tr> <tr> <td> <code> <s> </code> </td> <td> Элемент <strong> HTML <code> <s> </code> </strong> отображает текст с зачеркиванием или сквозной линией.Используйте элемент <code> <s> </code> для представления вещей, которые больше не актуальны или более не точны. Однако <code> <s> </code> не подходит для обозначения редактирования документа; для этого используйте элементы <code> del </code> и <code> ins </code> соответственно. </td> </tr> <tr> <td> <code> <samp> </code> </td> <td> Образец HTML-элемента <strong> </strong> (<strong> <code> <samp> </code> </strong>) используется для включения встроенного текста, который представляет собой образец (или цитируемый) вывод компьютерной программы.</td> </tr> <tr> <td> <code> <маленький> </code> </td> <td> Элемент <strong> HTML <code> <small> </code> </strong> <strong> </strong> представляет собой боковые комментарии и мелкий шрифт, например текст об авторских правах и юридический текст, независимо от его стилизованного представления. По умолчанию текст внутри него отображается на один размер меньше, например, от <code> small </code> до <code> x-small </code>. </td> </tr> <tr> <td> <code> <span> </code> </td> <td> Элемент <strong> HTML <code> <span> </code> </strong> - это общий встроенный контейнер для фразового содержания, который по своей сути ничего не представляет.Его можно использовать для группировки элементов в целях стилизации (с использованием атрибутов <code> class </code> или <code> id </code>) или потому, что они имеют общие значения атрибутов, например <code> lang </code>. </td> </tr> <tr> <td> <code> <strong> </code> </td> <td> HTML <strong> Элемент сильной важности </strong> (<strong> <code> <strong> </code> </strong>) указывает на то, что его содержание имеет большое значение, серьезность или срочность. Браузеры обычно отображают содержимое жирным шрифтом. </td> </tr> <tr> <td> <code> <sub> </code> </td> <td> Элемент HTML <strong> Subscript </strong> (<strong> <code> <sub> </code> </strong>) определяет встроенный текст, который должен отображаться как нижний индекс исключительно по типографским причинам.</td> </tr> <tr> <td> <code> <sup> </code> </td> <td> Элемент <strong> HTML с надстрочным индексом </strong> (<strong> <code> <sup> </code> </strong>) определяет встроенный текст, который должен отображаться как надстрочный индекс исключительно по типографским причинам. </td> </tr> <tr> <td> <code> <время> </code> </td> <td> Элемент HTML <strong> <code> <time> </code> </strong> представляет определенный период времени. </td> </tr> <tr> <td> <code> <u> </code> </td> <td> <strong> HTML </strong> <strong> Элемент неартикулированной аннотации </strong> (<strong> <code> <u> </code> </strong>) представляет собой диапазон встроенного текста, который должен отображаться таким образом, чтобы указать, что он имеет нетекстовую аннотацию.</td> </tr> <tr> <td> <code> <var> </code> </td> <td> HTML <strong> Элемент переменной </strong> (<strong> <code> <var> </code> </strong>) представляет имя переменной в математическом выражении или контексте программирования. </td> </tr> <tr> <td> <code> <wbr> </code> </td> <td> Элемент <strong> HTML <code> <wbr> </code> </strong> представляет возможность разрыва слова - позицию в тексте, где браузер может по желанию разорвать строку, хотя в противном случае его правила разрыва строки не создавали бы разрыв в этом месте.</td> </tr> </table> <h2><span class="ez-toc-section" id="_HTML-%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82_%D0%BA%D0%BE%D1%80%D0%BD%D0%B5%D0%B2%D0%BE%D0%B9_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82_-_HTML_%D1%8F%D0%B7%D1%8B%D0%BA_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%82%D0%BA%D0%B8_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0"></span>: HTML-документ / корневой элемент - HTML: язык разметки гипертекста <span class="ez-toc-section-end"></span></h2> <p> Элемент <strong> HTML <code> <html> </code> </strong> представляет корень (элемент верхнего уровня) HTML-документа, поэтому он также называется корневым элементом <em> </em>. Все остальные элементы должны быть потомками этого элемента. </p> <table> <tbody> <tr> <th scope="row"> Категории контента </th> <td> Нет. </td> </tr> <tr> <th scope="row"> Разрешенное содержание </th> <td> Один элемент <code> <head> </code>, за которым следует один элемент <code> <body> </code>.</td> </tr> <tr> <th scope="row"> Отсутствие тега </th> <td> Начальный тег может быть опущен, если первое, что находится внутри элемента <code> <html> </code>, не является комментарием. <br/> Конечный тег может быть опущен, если за элементом <code> <html> </code> сразу не следует комментарий. </td> </tr> <tr> <th scope="row"> Допущенные родители </th> <td> Нет. Это корневой элемент документа. </td> </tr> <tr> <th scope="row"> Неявная роль ARIA </th> <td> Нет соответствующей роли </td> </tr> <tr> <th scope="row"> Разрешенные роли ARIA </th> <td> Нет <code> роль </code> разрешено </td> </tr> <tr> <th scope="row"> Интерфейс DOM </th> <td> <code> HTMLHtmlElement </code> </td> </tr> </tbody> </table> <p> Этот элемент включает глобальные атрибуты.</p> <dl> <dt> <strong> <code> манифест </code> </strong> Это устаревший API, работа которого больше не гарантируется. </dt> <dd> Задает URI манифеста ресурса, указывающего ресурсы, которые следует кэшировать локально. Подробнее см. Использование кеша приложения. </dd> <dt> <strong> <code> версия </code> </strong> Это устаревший API, работа которого больше не гарантируется. </dt> <dd> Задает версию определения типа документа HTML, которая управляет текущим документом. Этот атрибут не нужен, потому что он избыточен с информацией о версии в объявлении типа документа.</dd> <dt> <strong> <code> xmlns </code> </strong> </dt> <dd> Задает пространство имен XML документа. Значение по умолчанию - <code> "http://www.w3.org/1999/xhtml" </code>. Это требуется в документах, анализируемых с помощью анализаторов XML, и необязательно в текстовых / html-документах. </dd> </dl> <pre> <code> <! DOCTYPE html> <html lang = "ru"> <head> ... </head> <body> ... </body> </html> </code> </pre><p> Предоставление атрибута <code> lang </code> действительного языкового тега IETF в элементе <code><html> </code> поможет технологии чтения с экрана определить правильный язык для объявления.Идентификационный языковой тег должен описывать язык, используемый в большей части содержимого страницы. Без него программы чтения с экрана обычно по умолчанию используют язык, установленный операционной системой, что может вызвать неправильное произношение.</p><p> Включение действительного объявления <code> lang </code> в элемент <code><html> </code> также гарантирует, что важные метаданные, содержащиеся в <code><head> </code> страницы, такие как <code><title> </code> страницы, также будут правильно объявлены.</p><p> Таблицы BCD загружаются только в браузере</p><ul><li> Элемент верхнего уровня MathML: <code> <math> </code></li><li> Элемент верхнего уровня SVG: <code> <svg> </code></li></ul><h2><span class="ez-toc-section" id="_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82_Content_Division_-_HTML_%D1%8F%D0%B7%D1%8B%D0%BA_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%82%D0%BA%D0%B8_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0"></span>: элемент Content Division - HTML: язык разметки гипертекста <span class="ez-toc-section-end"></span></h2><p> Элемент <strong> HTML Content Division </strong> (<strong> <code></p><div> </code> </strong>) является универсальным контейнером для потокового содержимого. Он не влияет на контент или макет, пока не будет каким-либо образом стилизован с использованием CSS (например,грамм. к нему напрямую применяется стиль или к его родительскому элементу применяется какая-то модель макета, такая как Flexbox).</p><p> Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.</p><p> В качестве «чистого» контейнера элемент <code></p><div> </code> по своей сути ничего не представляет. Вместо этого он используется для группировки контента, чтобы его можно было легко стилизовать с помощью атрибутов <code> class </code> или <code> id </code>, помечая раздел документа как написанный на другом языке (используя атрибут <code> lang </code>) и т. Д.</p><p> Этот элемент включает глобальные атрибуты.</p><p> <strong> Примечание: </strong> Атрибут <code> align </code> устарел; больше не используйте его. Вместо этого вы должны использовать свойства или методы CSS, такие как CSS Grid или CSS Flexbox, для выравнивания и позиционирования <code></p><div> </code> элементов на странице.</p><ul><li> Элемент <code><div> </code> следует использовать только тогда, когда никакой другой семантический элемент (например, <code></p><article> </code> или <code></p><nav> </code>) не подходит.</li></ul><h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%BE%D1%81%D1%82%D0%BE%D0%B9_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80"></span> Простой пример <span class="ez-toc-section-end"></span></h4><pre> <code> <div> <p> Здесь любой контент. Такой как & lt; p & gt ;, & lt; table & gt ;. Вы называете это! </p> </div> </code> </pre><p> Результат выглядит так:</p><h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80_%D1%81%D1%82%D0%B8%D0%BB%D1%8F"></span> Пример стиля <span class="ez-toc-section-end"></span></h4><p> В этом примере создается затененный блок путем применения стиля к <code></p><div> </code> с использованием CSS. Обратите внимание на использование атрибута <code> class </code> в <code></p><div> </code> для применения стиля с именем <code> «shadowbox» </code> к элементу.</p><h5><span class="ez-toc-section" id="HTML"></span> HTML <span class="ez-toc-section-end"></span></h5><pre> <code> <div> <p> Вот очень интересная заметка, отображаемая в прекрасный затененный ящик. </p> </div> </code> </pre><h5><span class="ez-toc-section" id="CSS"></span> CSS <span class="ez-toc-section-end"></span></h5><pre> <code> .shadowbox { ширина: 15em; граница: 1px solid # 333; box-shadow: 8px 8px 5px # 444; отступ: 8px 12px; фоновое изображение: линейный градиент (180 градусов, #fff, #ddd 40%, #ccc); } </code> </pre><h5><span class="ez-toc-section" id="%D0%A0%D0%B5%D0%B7%D1%83%D0%BB%D1%8C%D1%82%D0%B0%D1%82"></span> Результат <span class="ez-toc-section-end"></span></h5><p> Таблицы BCD загружаются только в браузере</p><h2><span class="ez-toc-section" id="_%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82_Generic_Section_-_HTML_%D0%AF%D0%B7%D1%8B%D0%BA_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%82%D0%BA%D0%B8_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0"></span>: Элемент Generic Section - HTML: Язык разметки гипертекста <span class="ez-toc-section-end"></span></h2><p> Элемент <strong> HTML <code></p><section> </code> </strong> представляет собой общий автономный раздел документа, который не имеет более конкретного семантического элемента для его представления.Разделы всегда должны иметь заголовок, за очень редкими исключениями.</p><table><tbody><tr><th scope="row"> Категории контента</th><td> Поток содержимого, разделение содержимого, осязаемое содержимое.</td></tr><tr><th scope="row"> Разрешенное содержание</th><td> Содержание потока.</td></tr><tr><th scope="row"> Отсутствие тега</th><td> Нет, и начальный, и конечный тег являются обязательными.</td></tr><tr><th scope="row"> Допущенные родители</th><td> Любой элемент, который принимает потоковое содержимое. Обратите внимание, что элемент <code></p><section> </code> не должен быть потомком элемента <code></p> <address> </code>.</td></tr><tr><th scope="row"> Неявная роль ARIA</th><td> <code> область </code>, если элемент имеет доступное имя, в противном случае нет соответствующей роли</td></tr><tr><th scope="row"> Разрешенные роли ARIA</th><td> <code> предупреждение </code>, <code> alerttdialog </code>, <code> приложение </code>, <code> баннер </code>, <code> дополнительный </code>, <code> contentinfo </code>, <code> диалог </code>, <code> документ </code>, <code> канал </code>, <code> журнал </code>,</p><p> основное поле <code> <code> <code> <code> <code> <code> навигация </code>, <code> нет </code>, <code> примечание </code>, <code> презентация </code>, <code> поиск </code>, <code> статус </code>, <code> панель вкладок </code></td></tr><tr><th scope="row"> Интерфейс DOM</th><td> <code> HTMLElement </code></td></tr></tbody></table><p> Как упоминалось выше, <code></p><section> </code> - это общий элемент секционирования, и его следует использовать только в том случае, если нет более конкретного элемента для его представления.Например, меню навигации должно быть заключено в элемент <code></p><nav> </code>, но список результатов поиска или отображение карты и его элементы управления не имеют конкретных элементов и могут быть помещены внутри <code></p><section> </code> .</p><p> Также рассмотрим следующие случаи:</p><ul><li> Если содержимое элемента представляет собой автономную атомарную единицу контента, которая имеет смысл синдицировать как отдельную часть (например, сообщение в блоге, комментарий в блоге или газетная статья), то элемент <code><br /><article> </code> будет лучше выбор.</li><li> Если содержимое представляет собой полезную косвенную информацию, которая работает вместе с основным содержимым, но не является непосредственно его частью (например, связанные ссылки или биография автора), используйте <code><br /><aside> </code>.</li><li> Если содержимое представляет собой основную область содержимого документа, используйте <code><main> </code>.</li><li> Если вы используете элемент только как оболочку стиля, используйте <code><div> </code>. Практическое правило состоит в том, что <code> <раздел> </code> должен логически появляться в структуре документа.</li></ul><p> Повторюсь, каждый <code></p><section> </code> должен быть идентифицирован, как правило, путем включения заголовка (<code></p><h2></h2><p></code> - <code></p><h6></h6><p></code> element) в качестве дочернего элемента <code></p><section> </code>, где это возможно. Ниже приведены примеры того, где вы можете увидеть <code> <раздел> </code> без заголовка.</p><h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%BE%D1%81%D1%82%D0%BE%D0%B9_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80_%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F"></span> Простой пример использования <span class="ez-toc-section-end"></span></h4><h5><span class="ez-toc-section" id="%D0%94%D0%BE"></span> До <span class="ez-toc-section-end"></span></h5><pre> <code> <div> <h3><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA"></span> Заголовок <span class="ez-toc-section-end"></span></h3> <p> Куча классного контента </p> </div> </code> </pre><h5><span class="ez-toc-section" id="%D0%9F%D0%BE%D1%81%D0%BB%D0%B5"></span> После <span class="ez-toc-section-end"></span></h5><pre> <code> <раздел> <h3><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA-2"></span> Заголовок <span class="ez-toc-section-end"></span></h3> <p> Куча классного контента </p> </section> </code> </pre><h4><span class="ez-toc-section" id="%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%80%D0%B0%D0%B7%D0%B4%D0%B5%D0%BB%D0%B0_%D0%B1%D0%B5%D0%B7_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B0"></span> Использование раздела без заголовка <span class="ez-toc-section-end"></span></h4><p> Обстоятельства, при которых вы можете увидеть <code></p><section> </code>, используемое без заголовка, обычно встречаются в разделах веб-приложения / пользовательского интерфейса, а не в традиционных структурах документа.В документе не имеет смысла иметь отдельный раздел содержимого без заголовка, описывающего его содержимое. Такие заголовки полезны для всех читателей, но особенно полезны для пользователей вспомогательных технологий, таких как программы чтения с экрана, а также они хороши для SEO.</p><p> Рассмотрим, однако, вторичный механизм навигации. Если глобальная навигация уже заключена в элемент <code></p><nav> </code>, вы, вероятно, можете заключить предыдущее / следующее меню в <code></p><section> </code>:</p><pre> <code> <раздел> <a href="#"> Предыдущая статья </a> <a href="#"> Следующая статья </a> </section> </code> </pre><p> Или как насчет какой-то панели кнопок для управления вашим приложением? Заголовок не обязательно нужен, но это все же отдельный раздел документа:</p><pre> <code> <раздел> <button> Ответить </button> <button> Ответить всем </button> <button> Вперед </button> <button> Удалить </button> </section> </code> </pre><p> Разделы без заголовков не отображаются в структуре документа.Если вы действительно хотите принудительно включить такой HTML-блок в структуру документа, но никак не повлиять на визуальный вывод, вы можете включить заголовок, но скрыть его:</p><pre> <code> <раздел> <h3><span class="ez-toc-section" id="%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%8B_%D1%83%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F"></span> Элементы управления <span class="ez-toc-section-end"></span></h3> <button> Ответить </button> <button> Ответить всем </button> <button> Вперед </button> <button> Удалить </button> </section> </code> </pre><p> Обязательно используйте вспомогательные технологии и CSS, удобный для чтения с экрана, чтобы скрыть это, например:</p><pre> <code>.скрытый { позиция: абсолютная; верх: -9999 пикселей; слева: -9999 пикселей; } </code> </pre><p> В зависимости от содержания, включение заголовка также может быть полезно для SEO, так что это вариант, который стоит рассмотреть.</p><p> Таблицы BCD загружаются только в браузере</p><ul><li> Другие элементы, связанные с разделами: <code><body> </code>, <code><br /><nav> </code>, <code></p><article> </code>, <code></p><aside> </code>, <code></p><h2></h2><p></code>, <code> < h3> </code>, <code></p><h4></h4><p></code>, <code></p><h5></h5><p></code>, <code></p><h5></h5><p></code>, <code></p><h6></h6><p></code>, <code></p><hgroup> </code>, <code></p><header> </code>, <code></p><footer> </code>, <code></p> <address> </code></li><li> Использование разделов и контуров HTML</li><li> ARIA: роль региона</li><li> Почему вы должны выбрать статью HTML5 поверх раздела, Брюс Лоусон</li></ul><p>.</p><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/html-spravochnik-tegov-spravochnik-po-html-htmlbook-ru.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://jumper.su/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required="required" /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required="required" /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='923' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div><nav class="navigation post-navigation" aria-label="Записи"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://jumper.su/raznoe/si-dvumernyj-massiv-dinamicheskij-dinamicheskoe-vydelenie-pamyati-dinamicheskie-massivy.html" rel="prev"><span class="screen-reader-text">Previous Post</span><span class="nav-title">Си двумерный массив динамический: Динамическое выделение памяти, динамические массивы</span></a></div><div class="nav-next"><a href="https://jumper.su/raznoe/tablicza-marshrutizaczii-marshrutizacziya-ciscotips.html" rel="next"><span class="screen-reader-text">Next Post</span><span class="nav-title">Таблица маршрутизации: Маршрутизация | CiscoTips</span></a></div></div></nav></article></div></div><div class="col-md-4 col-lg-4"><aside id="secondary" class="widget-area"><section id="categories-2" class="widget widget_categories"><h2 class="widget-title">Рубрики</h2><ul><li class="cat-item cat-item-6"><a href="https://jumper.su/category/wordpress">Wordpress</a></li><li class="cat-item cat-item-1"><a href="https://jumper.su/category/bez-rubriki">Без рубрики</a></li><li class="cat-item cat-item-7"><a href="https://jumper.su/category/verstka">Верстка</a></li><li class="cat-item cat-item-5"><a href="https://jumper.su/category/dizajn">Дизайн</a></li><li class="cat-item cat-item-4"><a href="https://jumper.su/category/dlya-nachinayushhih">Для начинающих</a></li><li class="cat-item cat-item-10"><a href="https://jumper.su/category/obuchenie">Обучение</a></li><li class="cat-item cat-item-9"><a href="https://jumper.su/category/primery">Примеры</a></li><li class="cat-item cat-item-3"><a href="https://jumper.su/category/raznoe">Разное</a></li><li class="cat-item cat-item-8"><a href="https://jumper.su/category/shablon">Шаблон</a></li></ul></section></aside></div></div></main></div><section itemtype='https://schema.org/WPFooter' itemscope='itemscope' role='contentinfo' class="fansee-business-footer-wrapper"><div class="container-fluid px-md-5"><footer class="fansee-business-footer-wrapper-inner footer-widget"><div class="footer-widget-wrapper"></div><div class="footer-widget-wrapper"></div><div class="footer-widget-wrapper"></div><div class="footer-widget-wrapper"></div></footer></div><div class="fansee-business-copyright"><div class="container-fluid"><div class="fansee-business-copyright-inner"><div class="fansee-business-copy-right"><div class="pr-0"> 2024 © Все права защищены.</div></div><div class="fansee-business-social-menu"><ul class="fansee-business-demo-social-menu"><li><a href="#" target="_blank"></a></li><li><a href="#" target="_blank"></a></li><li><a href="#" target="_blank"></a></li><li><a href="#" target="_blank"></a></li></ul></div></div></div></div></section><div class="fansee-business-stt scroll-to-top"> <i class="fa fa-arrow-up"></i></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://jumper.su/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- noptimize --> <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> <!-- /noptimize --></body></html>