Css div: : базовый блочный элемент — HTML

DIV должен уйти: улучшаем HTML / Хабр

Во многих домах есть комната, существующая только потому, что вокруг неё возвели четыре стены, и теперь ей нужно какое-то предназначение. В результате такие «комнаты-заглушки» используются чаще, чем все остальные комнаты дома, хоть изначально они для этого и не предназначались. Их универсальность и уникальность позволяют нам часто их изменять, не ограничиваться их целью и ощущать свободу их планировки.

Тег div во многом напоминает такие комнаты. Он является чистым листом. Он подходит для любого потока, позволяет управлять своими функциями, и может становиться всем, что мы пожелаем. Целые веб-сайты могут создаваться (и создаются) почти исключительно на одних div. Загуглите «single div designs», и вы найдёте бесчисленное множество дизайнеров, демонстрирующих свои навыки владения CSS, превращая один div в любую форму, которая им понадобится.

Иногда это вселяет трепет, но этой статье я хочу сказать, что нам следует двигаться дальше, к миру без div с именами классов или ID.

В мир уникальных элементов HTML. Семантического HTML. Нам нужно сосредоточиться на основах.

После прочтения твита Хамона Холмгрена я создал проект со скучным названием Custom HTML Tags. В этом твите он говорит, что не стоит использовать div с именами классов для создания HTML-компонентов, а вместо этого применять специализированные теги HTML.

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

Задайтесь вопросом: сколько имён классов я назначил div-ам за свою жизнь? Когда вы ищете эти компоненты в своём HTML, то вы ищете сам div или имена классов?

Я изучил эти вопросы в своём проекте, превратившемся в мысленный эксперимент, и выяснил, что не только могу создать целую веб-страницу совершенно без использования div, но и могу уменьшить размер сайта, стилизовать всё при помощи правильного конвейера сборки и собрать самый маленький проект за всю свою жизнь.

anubisthejackle/custom-html-tags — этот проект в первую очередь является мысленным экспериментом. Скорее всего, он ещё очень сырой.

Я не специалист по доступности для людей с ограниченными возможностями, и не хочу им притворяться. Моя цель заключалась в создании этого проекта, а решать проблемы доступности я буду по мере их возникновения. Я связался со всеми специалистами по доступности, которых смог найти в Twitter, попросил их изучить страницу и дать свои рекомендации.

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

Я не дизайнер, и я не хотел тратить много времени на CSS, поэтому выбрал для этого проекта Tailwind CSS. Однако я не стал добавлять классы в HTML, потому что намеревался разделить концепции. Я воспользовался apply в таблице стилей, чтобы применить стили Tailwind непосредственно к специализированному HTML, при необходимости добавляя любые нужные мне специализированные CSS.

Как ни странно, мне показалось, что такой способ использования Tailwind демонстрирует его истинный потенциал. Мы сосредоточились на том, что встраиваемые классы являются эквивалентом встраиваемых стилей, и совершенно забыли про функцию apply.

Благодаря правильному конвейеру сборки мне удалось уменьшить размер таблицы стилей, оставив в нём только самое необходимое для работы страницы. То же самое относится и к JavaScript, а также к HTML. Все они миниатюризированы, что ускоряет загрузку страницы.

Можно ли реализовать то же самое на основе своих стилей, а не Tailwind? Разумеется. Tailwind необязателен, но в этом проекте я не хотел много думать над CSS, поэтому нашёл простое в настройке и использовании решение. Если вкратце, то он просто работает.

В этом проекте JavaScript использовался только для добавления доступности. До момента внесения обновлений для улучшения доступности специализированные теги HTML просто были эквивалентны стандартным конфигурациям div браузера, и это вполне работало. Но базовые теги HTML содержат аспекты, которые большинство разработчиков не учитывает: параметры ARIA по умолчанию.

Без них инструменты обеспечения доступности не знают, как работать с тегами, и от них не надо этого ожидать. Тем не менее, несложно создать специализированные элементы в JavaScript и назначить им необходимые атрибуты ARIA.

Сам по себе проект никогда не был рассчитан на практическое использование. Это был доведённый до крайности мысленный эксперимент для демонстрации того, насколько далеко мы можем зайти. Идея заключалась в том, что если мы можем дойти до такого большого масштаба, то нет никаких препятствий для реализации этого принципа в более мелких и сфокусированных масштабах.

Именно это я и выяснил. После освоения основ такую систему можно реализовать не полном масштабе, но и в относительно простой форме. Нет никаких причин не использовать специализированные теги HTML для отдельных компонентов в продакшн-проекте.

Если вкратце, то не существует абсолютно никаких причин для

обязательного использования div в своих проектах.

Так зачем его использовать?

---

На правах рекламы

Серверы с бесплатной панелью управления VestaCP или HestiaCP для максимально удобного и быстрого размещения сайта. Любой параметр сервера (CPU, RAM, NVMe) можно увеличить в любой момент в пару кликов через удобную панель управления собственной разработки.

Подписывайтесь на наш чат в Telegram.

Элемент div | Yocton

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

Элемент <div>, как правило, не имеет особого семантического значения, а просто представляет собой разделение и обычно используется для группировки и инкапсуляции различных элементов в документе HTML и разделения их на группы контента. Таким образом, каждый элемент <div> лучше всего описывается его содержимым.

<div>
    <p>Привет! Это абзац.</p>
</div>

Элемент div обычно является блочным элементом, т.е он разделяет документ HTML на блоки и занимает максимальную ширину страницы. По умолчанию браузеры используют следующее CSS правило:

div {
    display: block;
}

Консорциумом World Wide Web (W3C) рекомендует использовать элемент div, если другие элементы не подходят. Применение более подходящих элементов вместо элемента div улучшает код и упрощает его обслуживание. Например, сообщение в блоге правильно выделять с помощью <article>, главы — с помощью <section>, навигационных средств страницы — с использованием <nav>, а группы элементов управления формы — с помощью <fieldset>.

Элементы

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

Общепринятой практикой является размещение внутри одного <div> нескольких других <div>. Обычно такие элементы называют «вложенными». Они позволяют дополнительно делить элементы на подразделы или помогать разработчикам со стилизацией с помощью CSS. Элемент <div class = "outer-div"> используется для группировки двух элементов <div class = "inner-div">, каждый из которых содержит элемент <p>.

<div>
    <div>
        <p>Это абзац</p>
    </div>
    <div>
        <p>Это другой абзац</p>
    </div>
</div>

Это даст следующий результат (стили CSS добавлены для наглядности):

Это абзац

Это другой абзац

При использовании вложенных элементов вы должны помнить, что есть строчные (или встроенные — inline) и блочные (block) элементы.

Блочные элементы в фоновом режиме добавляют разрыв строки, т.е. другие вложенные элементы автоматически отображаются в следующей строке, строчные элементы по умолчанию располагаются рядом друг за другом. Избегайте глубокой вложенности <div>. Глубокая и часто используемая вложенность контейнеров демонстрируют плохой стиль кодирования. Закругленные углы и некоторые подобные функции часто создают такой HTML-код. Для большинства браузеров последнего поколения есть CSS3-аналоги. Постарайтесь использовать как можно меньше HTML-элементов для увеличения отношения контента к тегам и уменьшения загрузки страницы, что приведет к лучшему ранжированию в поисковых системах. Элемент div должен быть вложен не глубже 6 слоев.

Width — Tailwind CSS

Основное использование

Фиксированная ширина

Используйте w-{number} или w-px , чтобы задать элементу фиксированную ширину.

w-96

w-80

w-64

w-48

w-40

w-32

w-24

<дел>
<дел>
<дел>
<дел>
<дел>
 

​Ширина в процентах

Используйте w-{fraction} или w-full , чтобы задать ширину элемента в процентах.

w-1/2

w-1/2

w-2/5

w-3/5

w-1/3

w-2/3

w-1/4

w-3/4

w-1/5

w-4/5

w-1/6

w-5/6

w-полный

 

  
ш-1/2
  
ш-1/2

<дел>
  
w-2/5
  
ш-3/5