Когда я только начинал работать с HTML, разметка часто превращалась в своеобразный «div суп». Независимо от задачи, будь то создание раздела контента, боковой панели или колонок текста, div был универсальным решением. Однако, такой подход, хоть и работает технически, лишен семантической ясности.
Почему важна семантика?
Семантическая верстка делает HTML-код более понятным и структурированным, улучшает SEO и упрощает поддержку кода. Вместо того чтобы использовать div для всего, стоит прибегнуть к новым элементам HTML5, которые придают разметке смысловое значение.
Мнение W3C
По данным W3C, элемент div не имеет собственного семантического значения и должен использоваться только в крайнем случае. Использование семантически правильных элементов улучшает доступность контента и облегчает его поддержку.
Основные элементы HTML5
Элемент main
Элемент main предназначен для основного контента страницы. Он используется только один раз на странице и помогает улучшить доступность контента через клавиатурные сочетания и корректное отображение на мобильных устройствах.
<main>
<h1>Заголовок</h1>
<p>Основной текст</p>
</main>Элемент section
Элемент section используется для группировки контента по теме. Он может включать в себя собственные заголовки и подзаголовки и может встречаться на странице несколько раз.
<main>
<section>
<h1>Заголовок 1</h1>
<p>Текст первого раздела</p>
</section>
<section>
<h1>Заголовок 2</h1>
<p>Текст второго раздела</p>
</section>
</main>Элемент aside
Элемент aside содержит контент, косвенно связанный с основным содержимым страницы, и часто используется для боковых панелей.
<main>
<section>
<h1>Заголовок 1</h1>
<p>Текст первого раздела</p>
</section>
<section>
<h1>Заголовок 2</h1>
<p>Текст второго раздела</p>
<aside>
<p>Косвенный текст 1</p>
<p>Косвенный текст 2</p>
<p>Косвенный текст 3</p>
</aside>
</section>
</main>Элемент article
Элемент article используется для контента, который может существовать автономно, например, статьи или посты в блоге.
<main>
<article>
<h1>Заголовок статьи</h1>
<p>Текст статьи</p>
</article>
</main>Элемент blockquote
Элемент blockquote применяется для цитирования текста из внешних источников, часто в сочетании с элементом cite для указания источника.
<main>
<blockquote>"Внешняя цитата"</blockquote>
<cite>Автор цитаты</cite>
</main>Элемент nav
Элемент nav представляет собой раздел навигации, включающий основное меню страницы или приложения.
<nav>
<ul>
<li>Пункт меню 1</li>
<li>Пункт меню 2</li>
</ul>
</nav>Элемент footer
Элемент footer определяет подвал страницы, содержащий контактную информацию, копирайты и ссылки на социальные сети.
<footer>
<p>Копирайт</p>
<a href="https://facebook.com/somename">Ссылка на Facebook</a>
<a href="https://vk.com/somename">Ссылка на VK</a>
</footer>Заключение
Мы рассмотрели основные семантические элементы HTML5, которые можно использовать вместо div, чтобы сделать вашу разметку более понятной и структурированной. Использование таких элементов поможет не только улучшить SEO, но и сделать ваш код более доступным и удобным для дальнейшей поддержки.
