~ 4 мин

Семантическое руководство по HTML - 10 альтернатив использования div

167

10/8/2021

В этом руководстве мы предоставим 10 альтернатив использованию элемента div в HTML, чтобы помочь вам создавать более чистый, структурированный и расширяемый код

Вадим Пашаев

Инженер, веб-разработчик, путешественник

Перейти в профиль

Семантическое руководство по HTML - 10 альтернатив использования div | PXSTUDIO

Как выглядит Ваш HTML-макет, наверное как-то так:

<body>
	<div class="header" id="site-header">
		<div class="site-nav">
			<ul>
				<li><a href="/">Главная</a></li>
				<li><a href="/">О нас</a></li>
				<li><a href="/">Контакты</a></li>
			</ul>
		</div>
	</div>
	<div class="content-wrap">
		<div class="intro">Это сайт, состоящий из одних div-ов</div>
	</div>
	<div class="container"></div>
</body>

Большинство из нас используют элемент <div> по умолчанию, потому что это самый быстрый способ создания макета HTML. Возникает соблазн убрать лишнюю HTML-разметку и сосредоточиться на CSS и JavaScript.

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

Проблемы с использованием только тегов div

Использование div само по себе не является проблемой! Он выполняет свою функцию и нет причин не использовать его.

Но использование только div-ов в вашем проекте может вызвать недопонимание, как минимум у других участников проекта.

Проблемы с читаемостью

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

Расшифровка макета может занять гораздо больше времени, чем необходимо, что уменьшит вашу производительность. Просто попытка выяснить, где находится закрывающий тег </div> для определенного блока кода, может быть утомительной.

Проблемы доступности

Соблюдение строгих правил - это не только цвет, контраст и субтитры. По оценкам Всемирной организации здравоохранения who.int, 285 миллионов человек во всем мире страдают нарушениями зрения: 39 миллионов - слепые и 246 миллионов - слабовидящие.

Это еще одна причина, по которой важно, чтобы ваш HTML-код был как можно более доступным. А это значит, что вы должны писать семантический код.

Программам чтения с экрана обязательно нужен контекст, чтобы правильно читать веб-страницу вслух. Для программы чтения с экрана такие элементы, как <div> и <span>, ничего не значат. Семантические блоки, такие как <form> и <button>, легче анализировать.

Проблемы согласованности

Когда вы знаете, чего ожидать от работы над проектом в команде, вы станете намного эффективнее. Кроме того, в вашем коде будет меньше ошибок. Установка стандарта для использования семантического HTML имеет смысл, потому что любому, кто возьмется за проект, будет легче понять макет.

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

Проблемы SEO

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

Что такое семантический HTML?

Наиболее четкое определение семантического HTML, которое я нашел, гласит:

Семантический элемент четко описывает его значение как для браузера, так и для разработчика.

Для справки

Использование семантического HTML похоже на разницу между указанием на объект в небе и словами: «Смотри, объект!» или "Смотри, самолет!"

Подобно тому, как описание объектов реального мира упрощает повседневное общение, семантический HTML упрощает чтение кода.

Фактически, использование семантического HTML отмечено как часть стандарта HTML5:

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

Для справки

Например, что проще сканировать:

<div class="quote" id="twain-quote">
"Get your facts first, then you can distort them as you please." – Mark Twain
</div>

или

<blockquote>
"Get your facts first, then you can distort them as you please." – Mark Twain
</blockquote>

Во втором примере вы можете увидеть элемент <blockquote>, который сразу понимается как текст, который необходимо отобразить в формате цитаты.

Использование альтернатив div может потребовать больше размышлений, но это дополнительное планирование с семантическим HTML того стоит.

Альтернативы <div> в HTML

Поговорим о некоторых наиболее распространенных альтернативах div. Скорее всего, вы уже видели эти элементы раньше, но здесь мы подробно расскажем, для чего они нужны и как их использовать.

Элемент <nav>

<nav>
	<ul>
        <li><a href="/">Home</a></li>
        <li><a href="/">About</a></li>
        <li><a href="/">Contact</a></li>
	</ul>
</nav>

Элемент nav - это именно то, на что он похож. Этот элемент используется для обозначения набора навигационных ссылок.

Как упоминалось ранее, это также позволяет программам чтения с экрана решать, отображать ли этот тип контента изначально или нет. Элемент nav лучше всего использовать для основного блока навигационных ссылок в документе.

Элемент <main>

<main>
	<h1>Заголовок 1</h1>
	<h2>Заголовок 2</h2>
	<p>
            Стоит отметить, что принцип восприятия стабилизирует департамент маркетинга и продаж, не считаясь с затратами.
            Медийный канал нетривиален. Перераспределение бюджета, не меняя концепции, изложенной выше, подсознательно
            притягивает культурный традиционный канал. Как предсказывают футурологи рейтинг программирует ролевой диктат
            потребителя.
        </p>
</main>

Подобно <nav>, элемент <main> используется так, как он звучит (снова работает семантика). Этот элемент обертывает блоки кода, которые определяют основное содержимое страницы или документа. Основной элемент будет находиться между открывающим и закрывающим тегами <body>.

Элемент <section>

<section>
<h1>Лучший бутерброд на свете</h1>
<p>Лучший бутерброд - баранина, салат и помидор, а баранина вкусная и нежирная. Это так задорно, мне это нравится.
</p>
</section>

Элемент <section> - отличный пример использования альтернативы div для разделения содержимого.

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

Элемент <header>

<header>
<img src="/" id="logo">
</header>

Элемент <header> отличается от элемента <head> тем, что вы можете использовать его несколько раз в документе.

Например, вы можете использовать один набор элементов <header> для размещения логотипа, а другой набор для описания заголовка для определенной части контента, например статьи (подробнее об этом позже).

Элемент <footer>

<footer>
<p>© 2021 Все права защищены. Не воровать.</p>
<p>Связаться: <a href="mailto:jiffy@jiffysites.com">Email Jiffy!</a></p>
</footer>

Как и в случае с элементом <header>, вы можете использовать элементы <footer> в любом месте вашего HTML-документа.

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

Менее распространенные альтернативы <div>

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

Элемент <aside>

<p>Мое любимое телешоу всех времен - Маппет-шоу. Это мило, весело и блестяще.</p>
<aside>
<h3>Маппет-шоу</h3>
<p>Маппет-шоу было создано Джимом Хенсоном и транслировалось с 1976 по 1981 год.</p>
</aside>

В кино или театре aside известен как драматический прием, в котором персонаж обращается к аудитории отдельно от основного диалога.

Именно так мы можем использовать элемент <aside> в нашем HTML. Мы делаем обозначения, относящиеся к содержанию, но которые мы хотим сохранить отдельно. Мы также можем использовать его на боковой панели.

Элемент <code>

<p>Вы можете использовать это для такого фрагмента кода, как:
<code class="gray-code">const muppetFrog = 'Kermit'</code>, который отличается от остального текста.
</p>

В тех случаях, когда мы хотим отличить фрагмент кода от обычного текста, элемент <code> очень удобен.

Элемент <article>

<article class="all-muppets">
<h1>Куклы</h1>
<article class="kermit">
<p>Кермит - лидер кукол.</p>
</article>
<article class="fozzy">
<p>Фоззи - стоячий медведь.</p>
</article>
<article class="piggy">
<p>Не связывайся с мисс Пигги.</p>
</article>

Элемент <article> - это еще один элемент, который используется для различения типов контента в макете.

<article> должен быть автономным содержанием, отдельным от основного содержания. Использование этого элемента также упрощает стилизацию с помощью CSS, делая содержимое статьи явно отличным от другого содержимого на странице.

Элемент <blockquote>

Элемент <blockquote> - еще один простой элемент, используемый так же, как он звучит: для отделения цитаты от другого текста, как было показано ранее.

Элемент <mark>

<p>Это предложение о лучшем Маппете, который когда-либо был <mark>Королевская креветка Пепе</mark>.</p>

Элемент <mark> - это не только идеальный способ выделить блок текста, но и легко понять, когда вы встретите его в документе.

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

Заключение

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

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

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

Оригинал: https://www.freecodecamp.org/news/semantic-html-alternatives-to-using-divs/