Следует ли вообще использовать семантическую разметку HTML 5 для стилизации?

Question

Я должен признать, что семантическая разметка HTML5 смущает меня. Я говорю об этих тегах, в частности:

<header>
<nav>
<section>
<article>
<aside>
<footer>

Использование семантических элементов предоставляет агенту UA информацию, которую он обычно не может получить от <div>, но если они будут использоваться вместе с тегами <div> или вы можете / должны напрямую стилизовать семантическую разметку ?

Другими словами, каков правильный подход?

Это:

<div id="content">
    <section>
        <h1>Lorem ipsum></h1>
        <p>Text</p>
    </section>
</div>

Или это:

<section id="content">
    <h1>Lorem ipsum></h1>
    <p>Text</p>
</section>

Answer 1

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

Конечно, теги div по-прежнему полезны, когда нет подходящего семантического тега.

Answer 2

Я считаю, что ваш первый пример семантически верен, если в этом теге div будет больше тегов section.

Тег div подразумевает раздел страницы, предназначенный для контента, а затем тег section, похожий на сообщения.

Answer 3

Первый пример более безопасен в использовании.

<section>
  <h1>Lorem ipsum></h1>
  <p>Text</p>
</section>

- это содержимое.

Чтобы стилизовать этот контент, вы можете поместить его в контейнернапример.div со стилем хук (класс) и применить стиль к нему.

Answer 4

Поскольку новые теги не всегда распознаются браузерами, даже в качестве кандидатов на стилизацию, использование div с class безопаснее. Вы также можете использовать div с class, как и раньше, и вы ничего не потеряете ни сейчас, ни в обозримом будущем. Ни одна программа не заботится о «семантике» новых тегов.