~ 4 мин.
Большинство из нас используют элемент div по умолчанию, потому что это самый быстрый способ создания макета HTML. Возникает соблазн убрать лишнюю HTML-разметку и сосредоточиться на CSS и JavaScript. Несмотря на то, что полное построение страницы с использованием тегов div может облегчить работу. Это также может привести к проблемам в будущем.
Вадим Пашаев
12/12/2021
Как выглядит Ваш HTML-макет, наверное как-то так:
Большинство из нас используют элемент <div> по умолчанию, потому что это самый быстрый способ создания макета HTML. Возникает соблазн убрать лишнюю HTML-разметку и сосредоточиться на CSS и JavaScript.
Несмотря на то, что полное построение страницы с использованием тегов div может облегчить работу. Это также может привести к проблемам в будущем.
Использование div
само по себе не является проблемой! Он выполняет свою функцию и нет причин не использовать его.
Но использование только div
-ов в вашем проекте может вызвать недопонимание, как минимум у других участников проекта.
Если вы когда-либо смотрели на чужой или даже на свой собственный код через несколько месяцев после его написания, может быть сложно читать, если он заполнен исключительно элементами <div>
.
Расшифровка макета может занять гораздо больше времени, чем необходимо, что уменьшит вашу производительность. Просто попытка выяснить, где находится закрывающий тег </div>
для определенного блока кода, может быть утомительной.
Соблюдение строгих правил - это не только цвет, контраст и субтитры. По оценкам Всемирной организации здравоохранения who.int, 285 миллионов человек во всем мире страдают нарушениями зрения: 39 миллионов - слепые и 246 миллионов - слабовидящие.
Это еще одна причина, по которой важно, чтобы ваш HTML-код был как можно более доступным. А это значит, что вы должны писать семантический код.
Программам чтения с экрана обязательно нужен контекст, чтобы правильно читать веб-страницу вслух. Для программы чтения с экрана такие элементы, как <div>
и <span>
, ничего не значат. Семантические блоки, такие как <form>
и <button>
, легче анализировать.
Когда вы знаете, чего ожидать от работы над проектом в команде, вы станете намного эффективнее. Кроме того, в вашем коде будет меньше ошибок. Установка стандарта для использования семантического HTML имеет смысл, потому что любому, кто возьмется за проект, будет легче понять макет.
Кроме того, когда вы начнете применять или настраивать CSS для HTML-документа, вы обнаружите, что гораздо быстрее и проще находить определенные элементы, когда в макете использовался семантический HTML.
При использовании семантической разметки поисковые системы будут рассматривать ее содержимое как важные ключевые слова, влияющие на поисковый рейтинг страницы. Веб-документы MDN
Что такое семантический HTML?
Наиболее четкое определение семантического HTML, которое я нашел, гласит:
Семантический элемент четко описывает его значение как для браузера, так и для разработчика.
Использование семантического HTML похоже на разницу между указанием на объект в небе и словами: «Смотри, объект!» или "Смотри, самолет!"
Подобно тому, как описание объектов реального мира упрощает повседневное общение, семантический HTML упрощает чтение кода.
Фактически, использование семантического HTML отмечено как часть стандарта HTML5:
Авторам настоятельно рекомендуется рассматривать элемент div как крайний случай, когда никакой другой элемент не подходит. Использование более подходящих элементов вместо элемента
div
улучшает доступность для читателей и упрощает сопровождение для авторов.
Например, что проще сканировать:
или
Во втором примере вы можете увидеть элемент <blockquote>
, который сразу понимается как текст, который необходимо отобразить в формате цитаты.
Использование альтернатив div
может потребовать больше размышлений, но это дополнительное планирование с семантическим HTML того стоит.
Поговорим о некоторых наиболее распространенных альтернативах div
. Скорее всего, вы уже видели эти элементы раньше, но здесь мы подробно расскажем, для чего они нужны и как их использовать.
Элемент nav
- это именно то, на что он похож. Этот элемент используется для обозначения набора навигационных ссылок.
Как упоминалось ранее, это также позволяет программам чтения с экрана решать, отображать ли этот тип контента изначально или нет. Элемент nav
лучше всего использовать для основного блока навигационных ссылок в документе.
Подобно <nav>
, элемент <main>
используется так, как он звучит (снова работает семантика). Этот элемент обертывает блоки кода, которые определяют основное содержимое страницы или документа. Основной элемент будет находиться между открывающим и закрывающим тегами <body>
.
Элемент <section>
- отличный пример использования альтернативы div
для разделения содержимого.
В приведенном выше примере мы разделяем введение и вводный абзац на два раздела. Поиск и стилизация этих разделов в нашем CSS-документе будет намного быстрее, чем поиск класса <div>
.
Элемент <header>
отличается от элемента <head>
тем, что вы можете использовать его несколько раз в документе.
Например, вы можете использовать один набор элементов <header>
для размещения логотипа, а другой набор для описания заголовка для определенной части контента, например статьи (подробнее об этом позже).
Как и в случае с элементом <header>
, вы можете использовать элементы <footer>
в любом месте вашего HTML-документа.
Типичное использование <footer>
- для информации об авторских правах или авторе. Вы также можете использовать элемент нижнего колонтитула в качестве закрытия внутри элемента <section>
.
Есть также некоторые элементы, которые вы, возможно, не видели раньше или видели очень редко. Но они действительно пригодятся, и их изучение поможет сделать ваш код более читабельным.
В кино или театре aside
известен как драматический прием, в котором персонаж обращается к аудитории отдельно от основного диалога.
Именно так мы можем использовать элемент <aside>
в нашем HTML. Мы делаем обозначения, относящиеся к содержанию, но которые мы хотим сохранить отдельно. Мы также можем использовать его на боковой панели.
В тех случаях, когда мы хотим отличить фрагмент кода от обычного текста, элемент <code>
очень удобен.
Элемент <article>
- это еще один элемент, который используется для различения типов контента в макете.
<article>
должен быть автономным содержанием, отдельным от основного содержания. Использование этого элемента также упрощает стилизацию с помощью CSS, делая содержимое статьи явно отличным от другого содержимого на странице.
Элемент <blockquote>
- еще один простой элемент, используемый так же, как он звучит: для отделения цитаты от другого текста, как было показано ранее.
Элемент <mark>
- это не только идеальный способ выделить блок текста, но и легко понять, когда вы встретите его в документе.
Попробуйте использовать эти альтернативы div в своем собственном коде и посмотрите, насколько их легче читать.
Это только десять примеров альтернатив div
. Есть довольно много других семантических элементов, которые мы можем использовать в нашем HTML.
Вам не нужно использовать их все в одном документе, и вам не нужно беспокоиться о запоминании более 100 существующих элементов. У MDN есть удобная справочная страница, к которой вы можете обратиться, когда вам это нужно: справочник по элементам HTML.
Написание семантического HTML - это хорошая привычка, которую нужно освоить как можно раньше. Это хорошо для читабельности, SEO и не забывайте о миллионах людей с ослабленным зрением, которые оценят ваш продуманный код.
Оригинал: https://www.freecodecamp.org/news/semantic-html-alternatives-to-using-divs/