В вёрстке есть очень удобный HTML-тег — <div>. С его помощью обозначают блок, который не оформлен сам по себе, но может задавать оформление и структурировать веб-страницу.
Встречается мнение, что вёрстка на блоках <div> устарела. Рассказываем, в чём причина и когда это действительно так.
Зачем нужен <div>
Изначальная задача этого тега — собрать в кучу разные другие теги, чтобы получилось что-то единое, с чем можно работать как с одним объектом. Этот тег появился в стандарте HTML3 в 1995 году, и на тот момент это было мощным решением: верстальщики получили возможность применять стили сразу к группе тегов.
Ещё этим тегом решилась другая проблема — табличная вёрстка. Раньше люди верстали всё на таблицах, потому что по-другому реализовать нарисованный дизайн просто не получалось. Всё рассовывалось по ячейкам таблиц, таблицы вкладывались друг в друга, и поддерживать такое было сложно.
С появлением <div> все перешли на блочную вёрстку, которая работает так:
- Верстальщик создаёт блок на странице и наполняет его содержимым.
- В стилях он прописывает, как этот блок выглядит и как ведёт себя по отношению к другим — например отталкивает, отступает, заставляет перенестись на новую строку и т. д.
- Блоки можно вкладывать друг в друга сколько угодно раз, причём для каждого блока-контейнера можно задавать свои стили и поведение.
В итоге получилось то же самое, что с табличной вёрсткой, но уже на блоках. Главный плюс в том, что блоки гораздо более автономны, чем ячейки таблицы, поэтому такой подход сейчас считается основным для вёрстки.
Пример вёрстки на <div>
Часто код оборачивают в блоки для того, чтобы браузер или настройки стилей сами разместили элементы по своим местам. Вот как это выглядит на примере нашего проекта про портфолио фотографа — там мы оборачиваем в <div> каждый элемент, чтобы они автоматически разместились по сетке:
<div class="name">Михаил Максимов</div>
<div class="email"><a href="mailto:mikhail.maximov@ya.ru">mikhail.maximov@ya.ru</a></div>
<div class="tg"><a href="https://t.me/thecodemedia">Телеграм</a></div>
А вот пример пустых блоков, которые потом наполнятся жизнью в скрипте — взяли из проекта с игрой Quatro:
<!DOCTYPE html>
<html lang="ru" >
<head>
<meta charset="UTF-8">
<title>Игра Quarto</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- подключаем нормализатор стилей, чтобы игра везде выглядела одинаково -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<!-- подключаем свой файл со стилями -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- блок с доской -->
<section><div id="board"></div></section>
<!-- блок для оповещения, которое появится в конце игры -->
<div id="alert"></div>
<!-- основной скрипт игры -->
<script src="script.js"></script>
</body>
</html>
В чём проблема
Проблема в том, что иногда таких блоков становится слишком много и в них можно запутаться. Многие ругают вёрстку на <div> из-за подобного кода:
<div id="main">
<div id="second" class="stop">
<div id="best" class="active">
<div class="active-initial">
<div id="thecode" class="media">
<p>
Привет, это журнал «Код»!
</p>
</div>
</div>
</div>
</div>
</div>Технически в этом нет ничего плохого, но с ходу разобраться в таком сложно.
Вторая проблема связана с семантикой — в HTML5 появилось много новых тегов, которые работают так же, как <div>, но упрощают понимание структуры. Также новые теги помогают слабовидящим пользоваться сайтом с помощью скринридеров — специальных программ, которые озвучивают всё, что есть на странице. Чтобы им было проще, используют не <div>, а другие теги.
Пример неадаптированного кода:
<div class="header">
<h1>Привет, это журнал «Код»</h1>
<div class="navigation">
<a href="#">Это как</a>
<a href="#">Это баг</a>
<a href="#">Что как</a>
</div>
</div>
<div class="main">
<div class="article">
<div class="title">
<h1>Что такое HTML</h1>
</div>
<div class="section">
<p>
HTML — основа всего, что происходит внутри вашего браузера. Если вы знаете HTML, то можете сами создавать сайты, красиво оформлять статьи и документы в интернете и даже устроиться на работу веб-разработчиком. Давайте копнём.
</p>
</div>
</div>
</div>
<div class="footer">
<div class="section">
<h2>Напишите нам</h2>
<div class="adress" id="email">
<a href="thecode@thecode.media">thecode@thecode.media</a>
</div>
</div>
</div>А вот адаптированная версия с учётом семантики. Внешне всё будет выглядеть точно так же, но поисковым роботам и специальным программам для чтения с экрана будет гораздо проще понять, что на странице к чему относится:
<header>
<h1>Привет, это журнал «Код»</h1>
<nav>
<a href="#">Это как</a>
<a href="#">Это баг</a>
<a href="#">Что как</a>
</nav>
</header>
<main>
<article>
<header>
<h1>Что такое HTML</h1>
</header>
<section>
<p>
HTML — основа всего, что происходит внутри вашего браузера. Если вы знаете HTML, то можете сами создавать сайты, красиво оформлять статьи и документы в интернете и даже устроиться на работу веб-разработчиком. Давайте копнём.
</p>
</section>
</article>
</main>
<footer>
<section>
<h2>Напишите нам</h2>
<address property="email">
<a href="thecode@thecode.media">thecode@thecode.media</a>
</address>
</section>
</footer>И всё-таки, как правильно?
Если вам нужно быстро собрать прототип страницы, чтобы убедиться в том, что всё работает, — верстайте как угодно, это всё черновой проект, который потом переделывать во что-то нормальное. Но помните, что нет ничего более постоянного, чем временное, — если черновой проект работает, вы его, скорее всего, так и понесёте миру.
Если вы делаете сайт со сложной вёрсткой, где всё удобнее заверстать дивами, — делайте. Главное, чтобы вы сами не запутались в блоках, а браузер в любом случае покажет всё правильно.
А вот если у вас есть SEO-задача по продвижению сайта или вы делаете сайт, которым будет удобно пользоваться слабовидящим людям, тогда лучше использовать семантику и теги HTML5 вместо стандартных <div> в каждом разделе.
Что дальше
В следующий раз поговорим о скринридерах — как они помогают слабовидящим пользоваться сайтами и как новые теги на это влияют. Подпишитесь, чтобы не пропустить новые статьи.
