Элемент разделения контента HTML ( ) является универсальным контейнером для потокового контента. Он не влияет на контент или макет до тех пор, пока не будет стилизован с помощью CSS.
Интерактивный пример
Являясь «чистым» контейнером, элемент , по существу, не представляет ничего. Между тем, он используется для группировки контента, что позволяет легко его стилизовать, используя атрибуты class или id , помечать раздел документа, написанный на разных языках (используя атрибут lang ), и так далее.
Категории контента
Потоковый контент, явный контент.
Допустимое содержимое
Потоковый контент или (в WHATWG HTML), если родительским является элемент : один или несколько элементов , сопровождаемых одним или более элементами , в ряде случаев смешанных с элементами и .
Пропуск тегов
Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.
Допустимые родители
Любой элемент, который разрешает потоковый контент в качестве содержимого.. Или (в WHATWG HTML): элемент .
Допустимые ARIA-роли
Любые
DOM-интерфейс
HTMLDivElement
Атрибуты
К этому элементу применимы глобальные атрибуты.
Примечание: Атрибут align устарел и вышел из употребления; не используйте его больше. Вместо этого, вам следует использовать свойства CSS или методы, такие как CSS Grid или CSS Flexbox для выравнивания и изменения положения элементов на странице.
Примечание
Элемент следует использовать только в том случае, если никакой другой семантический элемент (такой как или ) не подходит.
Примеры
Простой пример
div>p>Любой тип контента. Например, <p>, <table>. Все что угодно!p>div>
Результат будет выглядеть так:
Стилизованный пример
Этот пример создаёт прямоугольник с тенью, применяя стили к с помощью CSS. Заметьте, что использование атрибута class на элементе даёт применение стилей «shadowbox» (в дословном переводе означает «теневая коробка») к элементу.
HTML
divclass="shadowbox">p>Вот очень интересная заметка в прекрасном прямоугольнике с тенью.p>div>
Некоторые сайты на 99% состоят из этого элемента. Универсальный строительный блок без семантического значения.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
Алёна Батицкая ,
Светлана Коробцева
Обновлено 8 сентября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Элемент группирует или оборачивает другие элементы и семантически ничего не значит. Сам по себе без стилей ничего из себя не представляет — пользователь увидит пустое место на экране.
Можно представить этот тег как универсальную коробку. В неё можно положить что угодно или не класть ничего и просто оформить как нужно.
Пример
Скопировать ссылку «Пример» Скопировано
В этом примере абзац текста обёрнут в , которому заданы внутренние отступы и фоновый цвет:
Мы поместили текст в <div>,а сам контейнер покрасили в оранжевый.divclass="container">p> Мы поместили текст в code><div>code>, а сам контейнер покрасили в оранжевый. p>div>
Чтобы сделать что-нибудь полезное, надо обратиться к такому диву и добавить каких-нибудь стилей, обычно с помощью атрибута class , например: class = «my — block» в HTML и .my — block в CSS. Можно задать ширину и отцентрировать всё содержимое. Или можно задать ему какие-нибудь наследуемые стили, вроде color : tomato или font — size : 20px , и тогда эти стили применятся ко всему содержимому этого дива.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Тег парный, его всегда нужно закрывать < / div>.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� У блочные стили по умолчанию ��
�� Важно помнить, что без содержимого и стилей не видно на экране. По умолчанию он растянется на всю ширину родителя, но не будет иметь высоты, если только у него нет внутренних отступов. Положите внутрь контент или задайте стили, чтобы блок расправился по высоте.
�� Понять, как выглядит , несложно — это всегда прямоугольник (или в частном случае квадрат), но начинающие верстальщики умудряются неслабо накосячить с этим тегом. Я постоянно вижу ошибки в структуре вложенности блоков друг в друга.
�� Если провести аналогию между HTML-кодом сайта и человеком, то тег — это всё тело. Например, у нас есть , который обозначает руку. Логично, что внутри него должны быть , внутри них . Но некоторые умудряются сделать вложенным в и потом подвинуть его рядом, чтобы выглядело, будто «ноготь» находится на «пальце». А на самом деле он откуда-то извне прилетел вообще — отдельно лежит «ноготь» и отдельно рядом «палец». Не надо так, соблюдайте структуру ����
�� — самый простой и самый крутой тег во всём HTML: нет стилей — нет проблем. Если сильно извратиться, то можно написать целый сайт на одних дивах. Разве что ссылки и формы делать не всегда удобно. Даже доступность можно накрутить поверх дивов с помощью ARIA-атрибутов и кучи JS.
Но лучше не имитировать встроенные в HTML теги. Во-первых, это очень сложно. Браузеры делают много полезной магии, особенно с интерактивными элементами. Во-вторых, важно понимать, что некоторые из них могут принести неочевидную пользу для сайта: быстрее загрузка, понятнее поисковикам, доступнее скринридерам, лучше в режимах для чтения и так далее.
�� Начинающие разработчики часто заболевают болезнью под названием диватоз — всегда и везде используют . На самом деле в HTML большое количество специальных тегов для разных нужд.
Например, для статей существует тег , а для дополнительной информации тег . Они ведут себя и выглядят как . Это тоже прямоугольники, в которые можно вкладывать другие блоки. Разница между ними в смысловой нагрузке.
Браузеру проще понимать, какой контент важен, когда HTML-разметка написана правильно, с использованием семантических тегов.
Что такое div в HTML5?
HTML тег
используется для создания блоков на сайте. Эти блоки могут отвечать за любые объекты на сайте: шапка, новость, футер, какая-либо панель и так далее. Все эти блоки можно с легкостью подстроить под свои нужды при помощи CSS. Требует закрывающий тег
.
Если использовать тег сам по себе без использования стилей, то вы не заметите никаких изменений в документе.
align — указывает каким образом будет расположен текст и все содержимое в блоке;
class — добавляет класс к объекту для добавления стилей к нему;
id — указывается идентификатор объекта, по которому можно обращаться к объекту;
title — добавляет подсказку при наведении и удержании мыши на любую точку блока.
Это обычный блок на сайте. Здесь есть теги - курсир, жирный шрифт и так далее. Также здесь могут быть другие блоки:
Какой-то текст здесь.
Это обычный блок на сайте. Здесь есть теги — курсир, жирный шрифт и так далее. Также здесь могут быть другие блоки:
Контейнер для чего угодно. Тег
Тег определяет раздел или секцию в HTML-документе. Это контейнер, который используется для группировки других элементов, таких как текст, изображения или другие теги, в разделы или блоки.
Заголовок секции
Какое-нибудь содержимое секции
Примеры использования
Группировка элементов формы:
Создание панели навигации:
Если вы используете слишком много тегов для обёртывания содержимого, код может стать громоздким и трудночитаемым. В этом случае лучше использовать семантические теги или .
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Как добавить подпись в HTML. Тег
Описание изображения
Устаревший атрибут align — выравнивание подписи относительно элемента .
Тег может использоваться только внутри элемента .
Валидный HTML требует, чтобы тег находился после элемента или других медиа-элементов внутри . Однако это необязательное правило, и подпись может располагаться перед медиа-элементом или даже внутри него.
6 октября 2023
Метаданные HTML-страницы. Тег
Тег содержит метаданные о документе HTML. Он может включать такую информацию, как имя автора, название документа, ключевые слова и набор символов.
Атрибуты тега :
charset — кодировка символов в документе.
name — имя метаданных.
content — значение метаданных.
http-equiv — HTTP-заголовок для значения атрибута content .
Атрибут charset должен быть первым атрибутом в теге , а name и http-equiv нельзя использовать вместе.
4 октября 2023
Просто кнопка. Тег
Тег создаёт кликабельную кнопку, которая может запускать действия или события на веб-странице. Например, отправку или перезагрузку формы, запуск функции, открытие нового окна или добавление товара в корзину.
Атрибуты тега :
name — имя кнопки.
type — тип кнопки, по умолчанию — submit . Атрибут type необходим, если указан атрибут value .
value — значение, которое будет отправлено на сервер при нажатии на кнопку.
disabled — указывает, что кнопка должна быть отключена.
form — одна или несколько форм, к которым принадлежит кнопка.
formaction — URL-адрес файла, который будет обрабатывать ввод при нажатии кнопки.
formenctype — указывает, как данные формы должны быть закодированы при отправке на сервер.
formmethod — метод HTTP, используемый при отправке данных формы.
formnovalidate — устанавливает, что данные формы не должны проверяться при отправке на сервер.
formtarget — указывает, где отображать ответ после отправки формы.
4 октября 2023
Независимый контент. Тег
Тег в HTML используется для выделения содержимого, которое является независимым и самодостаточным. Это означает, что такой контент может быть переиспользоваться в разных местах без потери смысла.
Заголовок статьи
Текст статьи.
Тегом размечают статьи в блогах, сообщения на форумах и другие материалы, которые имеют смысл и ценность, даже если они прочитаны вне контекста, в котором были созданы.
Не используйте для группировки элементов, которые не являются самостоятельными материалами, например, для списка продуктов или новостей.
3 октября 2023
Как встроить страницу через
Тег позволяет встраивать контент (например, веб-страницы, видео) прямо в ваш документ HTML.
Простейший пример использования :
Атрибут src задаёт URL-адрес страницы, которую вы хотите встроить.
Атрибуты width и height — ширина и высота фрейма (можно задавать как в пикселях, так и в процентах).
3 октября 2023
Выпадающий список. Тег
Тег используется для создания выпадающего списка. Этот тег содержит список опций, которые пользователь может выбрать. Когда пользователь выбирает опцию, выбранное значение отправляется на сервер или обрабатывается на клиентской стороне.
Все опции списка должны быть обёрнуты в тег .
Атрибуты тега :
autocomplete — подсказка для функции автозаполнения формы;
disabled — делает элемент неактивным;
form — связывает список с формой;
multiple — позволяет выбрать несколько опций;
name — задает имя элемента, которое будет отправляться на сервер;
required — делает элемент обязательным для заполнения;
size — задает количество строк в списке.
1 октября 2023
Встроенные CSS-стили для страницы с тегом
Тег используется для определения стилей для HTML-документов. Он является важным компонентом CSS, которые позволяют разработчикам создавать визуально привлекательные веб-страницы, определяя различные стили, такие как цвета, шрифты и макеты.
body
Добро пожаловать на мой сайт!
Атрибуты тега :
type — MIME-тип таблицы стилей.
media — типы носителей, для которы будет использоваться стиль.
29 сентября 2023
Изображение в HTML. Тег
Элемент используется для вставки изображений на веб-страницы.
У нет закрывающего тега. Он поддерживает изображения в различных форматах — например, JPEG, PNG, WebP, GIF, SVG.
Существуют определенные правила или стандарты использования тега , которые рекомендуются для большинства случаев в веб-разработке. Несмотря на то что конкретные требования могут варьироваться в зависимости от проекта, ниже приведены атрибуты и практики, которые часто рекомендуются к использованию.
