<div> - один из наиболее часто используемых HTML-тегов. Это позволяет четко определить структуру веб-страницы. Давайте подробно рассмотрим, что такое div и как его использовать.
Что такое в HTML
В настоящее время все современные веб-сайты представляют собой четко определенные и организованные веб-страницы. Чтобы обеспечить лучшую читаемость и согласованность, они делят веб-страницу на множество разделов; следовательно, тег был назван <div>.
Каждый из этих разделов содержит связанные компоненты пользовательского интерфейса. В этом нам поможет HTML-тег <div>
По определению, тег <div> - это тег-контейнер на уровне блока, используемый для разделения веб-страницы на множество более мелких частей для группировки логически связанных элементов пользовательского интерфейса. Этот многоцелевой тег занимает более высокое место в списке самых популярных тегов HTML.
Давайте быстро взглянем на пример HTML-документа, в котором есть один <div>:
<div>
<h3> Personal Details </h3>
<br/>
<label for="fullName">Full Name:</label>
<input type="text" id = "fullName" name="fullName"/>
<br/>
<label for="emailAddress">Email Address:</label>
<input type="email" id="emailAddress" name="emailAddress"/>
<br/>
</div>
Здесь элемент <div> группирует все остальные теги HTML, связанные с личными данными пользователя.
Техническое объяснение
По определению <div> - это общая вкладка-контейнер, что означает, что она может содержать другие теги HTML.
Поскольку по умолчанию это блочный элемент, он перемещается в следующую строку и занимает всю горизонтальную ширину своего родительского элемента HTML.
Обычное использование
Теперь давайте обсудим, где мы можем использовать тег <div> в HTML-документе:
- Вы можете использовать теги
<div> для создания современных макетах с двумя или тремя столбцами
- Когда нам нужно применить одни и те же стили CSS к группе элементов, расположенных рядом
- Сгруппировать связанные элементы для лучшего управления документооборотом
Избегайте чрезмерного использования в HTML
Не менее важно проявлять осторожность при принятии решения об использовании тега <div> и не злоупотреблять им.
Например, многие разработчики используют тег <div> для создания разделов на веб-странице. Современный HTML предлагает для этого более подходящий тег <section>.
Чрезмерное использование тега <div> широко известно как Divitis. Как это определяет вики - «Практика создания кода веб-страницы с множеством элементов div вместо значимых семантических элементов HTML».
Таким образом, вам не следует использовать <div> там, где вы можете заменить его более подходящими тегами, такими как <section>, <article>, <nav>, <aside>, <header>, <footer>, которые были введены в HTML5.
Практическое правило - используйте HTML-тег <div> только тогда, когда нет альтернативы. Это помогает браузеру и поисковым системам лучше понимать содержание вашей веб-страницы.
Скачайте мою
бесплатную электронную книгу чтобы подготовиться к собеседованию или
начните учить Full-Stack JavaScript с нуля
В настоящее время все современные веб-сайты представляют собой четко определенные и организованные веб-страницы. Чтобы обеспечить лучшую читаемость и согласованность, они делят веб-страницу на множество разделов; следовательно, тег был назван <div>.
Каждый из этих разделов содержит связанные компоненты пользовательского интерфейса. В этом нам поможет HTML-тег <div>
По определению, тег <div> - это тег-контейнер на уровне блока, используемый для разделения веб-страницы на множество более мелких частей для группировки логически связанных элементов пользовательского интерфейса. Этот многоцелевой тег занимает более высокое место в списке самых популярных тегов HTML.
Давайте быстро взглянем на пример HTML-документа, в котором есть один <div>:
<div>
<h3> Personal Details </h3>
<br/>
<label for="fullName">Full Name:</label>
<input type="text" id = "fullName" name="fullName"/>
<br/>
<label for="emailAddress">Email Address:</label>
<input type="email" id="emailAddress" name="emailAddress"/>
<br/>
</div>
Здесь элемент <div> группирует все остальные теги HTML, связанные с личными данными пользователя.
Техническое объяснение
По определению <div> - это общая вкладка-контейнер, что означает, что она может содержать другие теги HTML.
Поскольку по умолчанию это блочный элемент, он перемещается в следующую строку и занимает всю горизонтальную ширину своего родительского элемента HTML.
Обычное использование
Теперь давайте обсудим, где мы можем использовать тег <div> в HTML-документе:
- Вы можете использовать теги
<div>для создания современных макетах с двумя или тремя столбцами - Когда нам нужно применить одни и те же стили CSS к группе элементов, расположенных рядом
- Сгруппировать связанные элементы для лучшего управления документооборотом
Избегайте чрезмерного использования в HTML
Не менее важно проявлять осторожность при принятии решения об использовании тега <div> и не злоупотреблять им.
Например, многие разработчики используют тег <div> для создания разделов на веб-странице. Современный HTML предлагает для этого более подходящий тег <section>.
Чрезмерное использование тега <div> широко известно как Divitis. Как это определяет вики - «Практика создания кода веб-страницы с множеством элементов div вместо значимых семантических элементов HTML».
Таким образом, вам не следует использовать <div> там, где вы можете заменить его более подходящими тегами, такими как <section>, <article>, <nav>, <aside>, <header>, <footer>, которые были введены в HTML5.
Практическое правило - используйте HTML-тег <div> только тогда, когда нет альтернативы. Это помогает браузеру и поисковым системам лучше понимать содержание вашей веб-страницы.
Скачайте мою
бесплатную электронную книгу чтобы подготовиться к собеседованию или
начните учить Full-Stack JavaScript с нуля
Не менее важно проявлять осторожность при принятии решения об использовании тега <div> и не злоупотреблять им.
Например, многие разработчики используют тег <div> для создания разделов на веб-странице. Современный HTML предлагает для этого более подходящий тег <section>.
Чрезмерное использование тега <div> широко известно как Divitis. Как это определяет вики - «Практика создания кода веб-страницы с множеством элементов div вместо значимых семантических элементов HTML».
Таким образом, вам не следует использовать <div> там, где вы можете заменить его более подходящими тегами, такими как <section>, <article>, <nav>, <aside>, <header>, <footer>, которые были введены в HTML5.
Практическое правило - используйте HTML-тег <div> только тогда, когда нет альтернативы. Это помогает браузеру и поисковым системам лучше понимать содержание вашей веб-страницы.
Скачайте мою бесплатную электронную книгу чтобы подготовиться к собеседованию или начните учить Full-Stack JavaScript с нуля