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

Я должен признать, что семантическая разметка 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>
7
html markup semantics

5 ответов

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

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

5

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

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

1

вот хорошая статья об этой проблеме: http://www.nczonline.net/blog/2011/03/22/using-html5-semantic-elements-today/

По данным Zakas (Тантэк Челик на самом деле), это путь:

<section><div class="section">
   <!-- content -->
</div></section>

цитата из сообщения в блоге ниже относительно стиля:

для стилизации Tantek рекомендовал не пытаться стилизовать элемент HTML5 сам по себе, а скорее в стиле суррогата. Так что вместо это:

section {
    color: blue;
}

используйте этот:

.section {
    color: blue;
}
0

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

0

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

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

содержание.

для того, чтобы стиль этого контента вы можете обернуть его внутри контейнера, например. div с крючком стиля (класс) и применить стиль к нему.

0