HTML 5: использование тега <header>или class = "header" - PullRequest
0 голосов
/ 12 декабря 2018

С HTML 5 введены новые семантические теги, которые включают верхний и нижний колонтитулы.Но я запутался, что я должен использовать и почему?Используйте тег заголовка напрямую или укажите class = "header". Какой из них лучше и почему?

Ответы [ 3 ]

0 голосов
/ 12 декабря 2018

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

<html>
<body>

<article>
  <header>
    <h1>Most important heading here</h1>
    <h3>Less important heading here</h3>
    <p>Some additional information here.</p>
  </header>
  <p>Lorem Ipsum dolor set amet....</p>
</article>

</body>
</html>
0 голосов
/ 12 декабря 2018

В определении CSS

Создание класса:

. означает класс

.header{
...........
}

HTML

<div class=header>
..........
<div>

, а тег заголовка

Это вызывает само имя element как body или любое

header{
.............
}

HTML

<header>
................
</header>
0 голосов
/ 12 декабря 2018

Используйте <header> и эти семантические теги.

Почему?Потому что они значимы, их легче читать.

Например, рассмотрим

<header id="article-header>
  ...
</header>

и

<div id="article-header" class="header">
  ...
</div>

Как видно, первое короче и легче для чтения.

Согласнона Входящий сейчас , семантические теги также лучше с точки зрения SEO.


Кроме того, этот и этот вопрос имеют интересные ответы


Редактировать:

Я цитирую это из MDN :

Некоторые из преимуществот написания семантической разметки следующие:

  1. Поисковые системы будут рассматривать его содержимое как важные ключевые слова, чтобы влиять на поисковый рейтинг страницы (см. SEO)
  2. Программы чтения с экрана могут использовать его в качестве указателячтобы помочь пользователям с нарушениями зрения перемещаться по странице
  3. Поиск блоков значимого кода значительно проще, чем поиск, хотя бесконечные div с семантическими или пространственными классами или без них
  4. Предлагает разработчику тип данных, который будет
  5. Семантическое именование зеркал proper именование элементов / компонентов

Кроме того, я где-то довольно давно читал, что семантические теги предназначены для определения контура документа, div s больше подходят для визуального секционированиякак стиль коробки (я не могу найти источник прямо сейчас).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...