8 полезных HTML-тегов, которые лучше использовать вместо <div>

RedDeveloper
05.04.2022 17:01
8 полезных HTML-тегов, которые лучше использовать вместо <div>

Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой ситуации. Однако чем больше я узнавал о доступности и читаемости кода, тем больше понимал, насколько проблематичен этот универсальный подход.

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

Итак, если вы не должны использовать div для всех разделов, что еще можно сделать?

1. <main>

Тег main сообщает браузеру, что эта часть вашего кода содержит основное содержимое страницы. Вы должны использовать его только один раз на странице. Элемент main помогает пользователям, использующим клавиатурные команды, и может подсказать программам чтения экрана, где расположено ключевое содержимое.

Пример применения тега <main>
Пример применения тега <main>

2. <article>

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

Пример применения тега <article>
Пример применения тега <article>

3. <nav>

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

Пример применения тега <nav>
Пример применения тега <nav>

4. <section>

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

Пример применения тега <section>
Пример применения тега <section>

5. <aside>

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

Пример применения тега <aside>
Пример применения тега <aside>

6. <header>

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

Пример применения тега <header>
Пример применения тега <header>

7. <footer>

Тег footer используется для определения нижнего раздела страницы. Здесь размещается контактная информация, информация об авторских правах, а также ссылки на социальные сети и т.д.

Пример применения тега <footer>
Пример применения тега <footer>

8. <figure>

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

Пример применения тега <figure>
Пример применения тега <figure>

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

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?

20.08.2023 18:21

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

20.08.2023 17:46

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox

19.08.2023 18:39

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

19.08.2023 17:22

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!

Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️

18.08.2023 20:33

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

Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL

14.08.2023 14:49

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.