Div html: Блочная вёрстка | htmlbook.ru

Блочная вёрстка | htmlbook.ru

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

Первоначально слои ввела компания Netscape, включив в свой браузер поддержку тега <layer>. Этот тег позволял прятать/показывать текущее содержимое, устанавливать положение относительно окна браузера, накладывать один слой поверх других и загружать данные в содержимое слоя из файла. Все эти параметры легко менялись с помощью JavaScript и это расширяло возможности по созданию действительно динамического контента на странице. Несмотря на столь впечатляющий набор возможностей, тег <layer> не был включён в спецификацию HTML и остался лишь расширением браузера Netscape.

Однако необходимость в указанных возможностях уже назрела, и в конце 1996 года синтаксис для работы со слоями был разработан и одобрен в рабочем проекте консорциума «CSS Positioning (CSS-P)». Основная нагрузка ложилась на стили, с их помощью можно управлять видом любого элемента, в том числе менять значения динамически через JavaScript. К сожалению, объектные модели браузеров для доступа к элементам различались, поэтому приходилось писать достаточно сложный код, который бы учитывал эти особенности.

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

• Если наблюдаются небольшие различия в отображении одного сайта в разных браузерах, то на эти отличия закрывают глаза. Попросту говоря, никак не исправляют. Посетители в любом случае не будут попиксельно сравнивать сайт в разных браузерах. Здесь следует сделать оговорку, что сайт в любом случае должен отображаться корректно и без ошибок.
• Если у сайта имеются существенные различия при его показе в одном и другом браузере, то для их устранения применяют хаки.

Хак — это набор приемов, когда определённому браузеру «подсовывают» код, который понимается только этим браузером, а остальными игнорируется.

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

Есть и другой, перспективный путь — придерживаться спецификации CSS. Несмотря на то, что браузеры не в полной мере сами её поддерживают, они прогрессируют именно в направлении полной поддержки различных спецификаций (HTML, CSS, DOM). Таким образом, получается, что будущие версии браузеров будут унифицированы и один и тот же сайт станут отображать корректно.

Снова вернемся к слоям. Понятно, что они непосредственно связаны со стилями. Раз так, то не получается ли, что каждый элемент HTML-кода, к которому добавляются стили, является слоем? В каком-то смысле так и есть. Однако это внесло бы изрядную путаницу, если вместо «таблица» или «абзац» мы бы говорили «слой». Поэтому договоримся относить этот термин только к тегам <div>.

В HTML4 и XHTML слой — это элемент веб-страницы, созданный с помощью тега <div>, к которому применяется стилевое оформление.

Таким образом, выражение «блочная вёрстка» или вёрстка с помощью слоёв заключается в конструктивном использовании тегов <div> и стилей. При этом придерживаются следующих принципов.

Разделение содержимого и оформления

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

Активное применение тега <div>

При блочной вёрстке существенное значение уделяется универсальному тегу <div>, который выполняет множество функций. Фактически это основа, на которую «навешиваются» стили, превращая её то в игрушку, то в зверушку. Совершенно не значит, что применяется только один этот тег, нужно ведь и рисунки вставлять и оформлять текст. Но при вёрстке с помощью слоёв тег <div> является кирпичиком вёрстки, её базовым фундаментом.

Благодаря этому тегу HTML-код распадается на ряд чётких наглядных блоков, код при этом получается более компактным, чем при табличной вёрстке, к тому же поисковые системы его лучше индексируют.

Таблицы применяются только для представления табличных данных

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

Подведу итоги. В HTML4 и XHTML слой это базовый элемент вёрстки веб-страниц, при которой активно применяются стили и придерживаются спецификаций HTML и CSS. При таком подходе важная роль уделяется тегу <div>, с которым у большинства людей и ассоциируются слои. В каком-то смысле это является верным, поэтому договоримся в дальнейшем употреблять термин «слой» к тегу <div> для которого указан стилевой идентификатор или класс. Таким образом, выражение «слой с именем content» подразумевает, что используется тег <div> или <div >.

В HTML5 добавлено несколько новых тегов разметки для обозначения разных типовых блоков страницы. К примеру, <header> и <footer> используются для создания «шапки» и «подвала», <nav> для навигации, <aside> для боковой панели. Включение в спецификацию HTML подобных элементов призвано снизить доминирование тега <div> и придать больше смысла разметке. Поэтому в вёрстке на HTML5 активно применяется термин «элемент», под которым подразумевается соответствующий тег и элемент который он создаёт.

Изложенные выше принципы блочной вёрстки при этом сохраняются за исключением того момента, что <div> в некоторых случаях заменяется более осмысленными тегами.

: Элемент разделения контента — HTML

Элемент разделения контента HTML (<div>) является универсальным контейнером для потокового контента. Он не влияет на контент или макет до тех пор, пока не будет стилизован с помощью CSS.

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Являясь «чистым» контейнером, элемент <div>, по существу, не представляет ничего. Между тем, он используется для группировки контента, что позволяет легко его стилизовать, используя атрибуты class или id, помечать раздел документа, написанный на разных языках (используя атрибут lang), и так далее.

К этому элементу применимы глобальные атрибуты.

Примечание: Атрибут align устарел и вышел из употребления; не используйте его больше. Вместо этого, вам следует использовать свойства CSS или методы, такие как CSS Grid или CSS Flexbox для выравнивания и изменения положения элементов <div> на странице.

• Элемент <div> следует использовать только в том случае, если никакой другой семантический элемент (такой как <article>
  или <nav>) не подходит.

Простой пример

<div>
  <p>Любой тип контента. Например,
  &lt;p&gt;, &lt;table&gt;. Все что угодно!</p>
</div> 

Результат будет выглядеть так:

Стилизованный пример

Этот пример создаёт прямоугольник с тенью, применяя стили к  <div> с помощью CSS. Заметьте, что использование атрибута class на элементе <div> даёт применение стилей "shadowbox" (в дословном переводе означает «теневая коробка») к элементу.

HTML

<div>
  <p>Вот очень интересная заметка в прекрасном прямоугольнике с тенью.</p>
</div>

CSS

.shadowbox {
  width: 15em;
  border: 1px solid #333;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}

Результат

BCD tables only load in the browser

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

Значение и применение

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

Обращаю Ваше внимание на то, что элементы <div> и <span> сами по себе не оказывают никакого влияния на другие элементы страницы.

Тег <div> определяет любой отдельный блок содержимого и предназначен для деления веб-страницы на фрагменты. Вы можете объединить любой набор логически связанных элементов в единственном блоке <div>.

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

Прочитать о разметке страницы в HTML 5 вы можете в следующей статье учебника: «Теги разметки страницы».

В отличии от блочного элемента <div> тег <span> является строчным и применяется к внутренним (inline) элементам страницы, то есть к словам, фразам, которые находятся в пределах абзаца или небольшого фрагмента текста, оглавления и тому подобное.

Тег <span> вы можете использовать для таких задач как:

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

Поддержка браузерами

Атрибуты

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Теги <div> и <span></title>
	</head>
	<body>
		<div style = "color:green">
			<p>Абзацы мы объединили тегом &amplt;div&ampgt;, а это <span style = "color:red">слово</span> мы заключили тегом &amplt;span&ampgt;.</p>
			<p>С помощью встроенной таблицы стилей мы выделили это слово красным цветом, а блок текста получил зеленый цвет.</p>
		</div>
		<div style = "background-color:khaki">
			<p>Обратите внимание, что тег &amplt;div&ampgt; является блочным и это означает, что его содержимое всегда будет начинаться с новой строки, при этом элемент занимает всю доступную ширину.</p>
			<p>Этот блок тоже содержит два абзаца. С помощью встроенной таблицы стилей мы указали для всего блока цвет заднего фона - khaki, а для этога <span style = "background-color:orangered">слова</span> orangeRed (мы заключили его в тег &amplt;span&ampgt;).</p>
		</div>
	</body>
</html>

В этом примере мы:

• Блочными элементами <div> создали два блока, содержащие по два абзаца текста внутри (элементы <p>).
• Для первого блока с помощью встроенной таблицы стилей мы указали, что все элементы получат цвет текста зеленый, а одно слово, которое мы поместили внутри тега <span> красный.
• Для второго блока с помощью встроенной таблицы стилей мы указали, что весь блок получит цвет заднего фона хаки, а одно слово, которое мы поместили внутри тега <span> оранжево-красный.

Результат нашего примера:

Отличия HTML 4.01 от HTML 5

Значение CSS по умолчанию

div {
display: block;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

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

Элемент поддерживает «атрибуты событий».

div, span и display — Основы HTML, CSS и веб-дизайна

В этом уроке мы познакомимся с принципами, по которым элементы выводятся на страницу и получают определённый размер.

display

У элементов есть свойство display. Оно задаёт то, как элемент выводится на экран.

Здесь к слову display можно относиться как к глаголу: to display — показывать, выводить на экран.

See the Pen Block and inline by Hexlet (@hexlet) on CodePen.

• display: block начинается с новой строки и занимает всю ширину
• display: inline начинается в любом месте и занимает столько ширины, сколько нужно для помещения содержания

Всего у этого свойства 20 возможных значений, но прямо сейчас остальные не так важны.

Браузер обычно применяет базовые стили по умолчанию ко многим элементам. Например, элемент p по умолчанию имеет display: block.

Разные браузеры могут задавать разные стили по умолчанию, и иногда эти стили могут отличаться. Поэтому одна и та же страница может выглядеть по-разному в разных браузерах. Это в основном касается размеров и отступов. Для решения этой проблемы существуют так называемые CSS Reset — наборы CSS-стилей, которые «сбрасывают» браузерные стили.

Вот пример таких reset-стилей.

div & span

Элемент p имеет семантическое значение. Он определяет абзац текста.

Такой элемент не стоит использовать там, где это по смыслу не имеет значения. Например, не стоит помещать в p меню с кнопками для навигации по сайту.

Два самых используемых элемента — div и span — не имеют семантического значения. Они нужны исключительно для структуры и стилей.

• div — это блочный (block-level) элемент, у него свойство display: block.
• span — это строчный (inline-level) элемент, у него свойство display: inline.

Конечно, вы можете изменить эти свойства в своём CSS, но лучше так не делать. В целом, лучше не менять базовые свойства у типов элементов, а добавлять классы по необходимости.

div обычно используется для определения какого-то крупного блока на странице. А span — для небольшого элемента на строке.

<div>
  <p>
    После Второй мировой войны <span>Нью-Йорк</span> стал одним из неоспоримых мировых городов-лидеров.
  </p>

  <p>
    Строительство штаб-квартиры ООН в Нью-Йорке символизировало уникальное политическое значение города.
  </p>
</div>

Блочная модель

Каждый элемент на странице — прямоугольник. Это, пожалуй, самое важное утверждение в вёрстке веб-страниц. В примере в начале этого урока это можно заметить: мы задали параграфам фоновый цвет, и стало видно: каждый параграф — это прямоугольник.

У каждого прямоугольника есть несколько свойств, влияющих на размер:

• width, height — ширина и высота элемента
• padding — отступ внутри элемента (расстояние от содержания до границы прямоугольника)
• border — толщина границы (обводки)
• margin — отступ снаружи элемента (расстояние от границы прямоугольника до соседних элементов)

Давайте сделаем элемент, в котором явно видно все эти части:

See the Pen Div Box by Hexlet (@hexlet) on CodePen.

Мы использовали значение inline-block у свойства display. Это в какой-то степени комбинация inline и block. Элемент не занимает всю ширину и может находится на одной строке с другими элементами. При этом у него можно задать параметры, свойственные block: конкретную ширину и высоту.

Сколько же места требуется всему элементу? Нужно сложить показатели:

• Высота: высота элемента + внутренний отступ + толщина границы + внешний отступ (height + padding + border + margin) — 70 + 10 + 8 + 15 = 103px.
• Ширина: ширина элемента + внутренний отступ + толщина границы + внешний отступ (width + padding + border + margin) — 100 + 10 + 0 + 15 = 125.

Границы и отступы можно задать свои для каждой из сторон:

#box2 {
  width: 100px;
  height: 70px;
  border-top: 8px solid #001f3f;
  margin-left: 15px;
  margin-top: 5px;
  padding-left: 10px;
  padding-top: 10px;
}

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

• задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
• расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
• изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.

Об обучении на Хекслете

HTML тег

Тег <div> — пустой контейнер, который определяет разделение или раздел. Он не влияет на контент или макет и используется для группировки HTML-элементов, которые должны быть написаны с помощью CSS или с помощью скриптов.

Тег <div> является блочным элементом, поэтому разрыв строки помещается до и после него.

Вы можете поместить любой элемент HTML в тег <div>, включая другой тег <div>.

Для применения стилей внутри параграфа используется тег <span>.

Синтакс

Тег <div> — парный, состоит из двух частей, открывающего (<div>) и закрывающего (</div>) тегов.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Использование тега &lt;div&gt;</title>
  </head>
  <body>
    <h2> Тег &lt;div&gt; </h2>
    <div>
      <p> Мы использовали тег &lt;div&gt;, чтобы сгруппировать два параграфа и добавить фон к тексту, а для того, чтобы изменить цвет <span> этого слова</span> мы использовали тег &lt;span&gt;.</p>
      <p> Обратите внимание, что тег &lt;div&gt; является блочным элементом, до и после него добавляется разрыв строки.</p>
    </div>
  </body>
</html>

Результат¶

Расположение блоков <div>¶

При верстке HTML страниц с помощью слоев тег <div> является ее базовым фундаментом, так как именно этот тег определяет многочисленные структурные блоки веб-страницы.

Для корректного отображения блоков на странице необходимо их правильно расположить. Различают несколько способов расположения блоков в зависимости от целей и контента страницы. Давайте рассмотрим несколько из них.

Флексбокс

Спецификация CSS Flexible Box успешно пришла на замену верстке float-ами. Flexbox позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами и многое другое.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .flex-container {
      display: flex;
      align-items: center; 
      width: 90%;
      height: 300px;
      background-color: #1c87c9;
      }
      .flex-container > div {
      width: 25%;
      padding: 5px 0;
      margin: 5px;
      background-color: lightgrey;
      text-align: center;
      font-size: 35px;
      }
    </style>
  </head>
  <body>
    <div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

Результат¶

CSS свойство float

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

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок страницы</title>
    <style>
      .content {
      overflow: auto;
      border: 3px solid #666666;
      }
      .content div {
      padding: 10px;
      }
      .content a {
      color: darkblue;
      }
      .blue {
      float: right;
      width: 45%;
      background: #1c87c9;
      }
      .green {
      float: left;
      width: 35%;
      background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div>
      <div>
        <p>Параграф в блоке div.</p>
        <a href="#">Гиперссылка в теге div.</a>
        <ul>
          <li>Элемент списка 1</li>
          <li>Элемент списка 2</li>
        </ul>
      </div>
      <div>
        <p>Параграф в блоке div.</p>
        <ol>
          <li>Элемент списка 1</li>
          <li>Элемент списка 1</li>
        </ol>
      </div>
    </div>
  </body>
</html>

Результат¶

Отрицательные отступы

Использование отрицательных отступов (negative margins) открывает широкие возможности и позволяет сделать верстку более универсальной.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
    <style>
      .content div {
      padding: 2%;
      }
      .content a {
      color: darkblue;
      }
      .main-content {
      width: 30%;
      margin-left: 32%;
      }
      .blue {
      width: 25%;
      margin-top: -10%;
      background: #1c87c9;
      }
      .green {
      width: 20%;
      margin: -35% auto auto 70%;
      background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div>
      <div>
        <a href="#">Гиперссылка в теге div.</a>
      </div>
      <div>
        <p>Параграф в теге div.</p>
        <a href="#">Гиперссылка в теге div.</a>
        <ul>
          <li>Элемент списка 1</li>
          <li>Элемент списка 2</li>
        </ul>
      </div>
      <div>
        <p>Параграф в теге div.</p>
        <ol>
          <li>Элемент списка 1</li>
          <li>Элемент списка 2</li>
        </ol>
      </div>
    </div>
  </body>
</html>

Результат¶

Позиционирование Relative + absolute positioning

Комбинация разных типов позиционирования для вложенных элементов — один из удобных и практичных приемов верстки. Если для родительского элемента задать position: relative, а для дочернего position: absolute, то произойдёт смена системы координат и положение дочернего элемента при этом указывается относительно его родителя.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .content { position: relative; height: 400px; border: 1px solid #666666;}
      .content div { position: absolute; width: 35%; padding: 10px; }
      .blue { right: 20px; bottom: 0; background: #1c87c9; }
      .green { top: 10px; left: 15px; background: #8ebf42; }
    </style>
  </head>
  <body>
    <div>
      <div>
        <p>Параграф в теге div.</p>
      </div>
      <div>
        <p>Параграф в теге div.</p>
      </div>
    </div>
  </body>
</html>

Результат¶

position: relative не влияет на позиционирование элементов в нормальном потоке, если вы не добавляете смещения.

Атрибуты¶

Тег <div> поддерживает глобальные атрибуты и атрибуты событий.

Как добавить стиль к тегу <div> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <div>:

Цвет текста внутри тега <div>:

Стили форматирования текста для тега <div>:

Другие свойства для тега <div>:

улучшаем HTML / Блог компании VDSina.ru / Хабр

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

Тег 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»? (Пожалуйста, объясните на примерах)

Нормально так,

Возможно, это не самый лучший вопрос, но я новичок в программировании (мне 12 лет) Я думаю, что я в значительной степени спустился с HTML и CSS, и я переехал в JavaScript. Но я не понимаю, что они делают. Не могли бы вы мне это объяснить? 🙂 спасибо

<div>
  <p>Any kind of content here. Such as &lt;p&gt;, &lt;table&gt;. You name it!</p>
</div>

 div {
  // change default styling here
  color: red;
 }

<div>content</div>

  

  
 Здесь любой контент. Такие как
  & lt; p & gt ;, & lt; table & gt ;. Вы называете это! 
  

  

  
 Вот очень интересная заметка, отображаемая в
  прекрасный затененный ящик. 
  

  .shadowbox {
  ширина: 15em;
  граница: 1px solid # 333;
  box-shadow: 8px 8px 5px # 444;
  отступ: 8px 12px;
  фоновое изображение: линейный градиент (180 градусов, #fff, #ddd 40%, #ccc);
}