Являются ли новые элементы HTML5, такие как <section> и <article> бессмысленными?

Ответ 1

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

Ответ 2

Прочитайте эту статью, так как он указывает на различные преимущества, такие как:

Существует несколько преимуществ использования эти элементы. При использовании в соединение с элементами заголовка (h1 - h6), все они обеспечивают способ для разметки вложенных разделов под уровнями уровня выше шести уровней возможно с предыдущими версиями HTML.

и

Определяя назначение разделов на странице с использованием специального секционирования элементы, вспомогательные технологии могут помочь пользователю более легко ориентироваться страница. Например, они могут легко пропустить раздел навигации или быстро перейти от одной статьи к затем без необходимости для авторов предоставить пропущенные ссылки. Авторы также выгоды, поскольку заменяют многие из divs в документе с одним из несколько различных элементов могут помочь сделать исходный код более ясным и проще для автора.

Ответ 3

HTML5 стиль CSS также несколько легче читать:

div#header
div#content .article
div#content .article h1
div#content .article h1+h2
div#footer

против

header
section#content
section#content article
section#content article hgroup h1
section#content article hgroup h2
footer

(не используя расширенный селектор)

И поскольку keyboardP намекает на цитату, проще ориентироваться на странице для не-человеческих vistors. Он добавляет семантику. Но я согласен с вами, что иногда бывает сложно определить, какой элемент использовать section, article или старый добрый div. ИМО, это делает семантику менее сильной. Но давайте посмотрим, что произойдет.

Ответ 4

Все о семантике!

Но я согласен с вами в том, что некоторым людям эти новые теги могут казаться бессмысленными. Часто задаваемый вопрос заключается в том, почему эти конкретные теги, а не какие-либо другие, были выбраны, особенно, поскольку некоторые из тегов очень специфичны для блога (статья, раздел и т.д.), Но не содержат других широко используемых имен, таких как продукт или контент. Как вы можете видеть в комментариях ниже, это горячо обсуждаемая тема!

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

<nav>
 <ul>
  <li><a href="">Nav item 1</a></li>
  <li><a href="">Nav item 2</a></li>
 </ul>
</nav>
<div>
 <ul>
  <li><a href="">List item 1</a><li>
  <li><a href="">List item 1</a></li>
 <ul>
</div>

и в вашем CSS:

ul { list-style: bullet }
nav ul { list-style: none; }

Ответ 5

ok, который звучит более продуктивно и легко читается:

 <div id="nav">list of links</div>
 <div id=header> 
 <div id=section>content is good
 </div>
 </div>
 <div id=footer>copyright</div>

против

  <nav>list of links</nav>
  <header>
  <section>content is good</section>
  </header> 
   <footer>copyright</footer>

Было бы гораздо проще просканировать раздел, заголовок и диалог в середине DIV junkyard. Это также улучшает доступность для слепых, поскольку ясно сообщит читателю, что это такое. То же самое с тегом статьи. Кроме того, он улучшает структуру и обеспечивает большее значение для тегов.

Некоторые веб-браузеры не поддерживают стилизацию CSS на неизвестных элементах и ​​мне, что невероятно близоруко.

Ответ 6

Я думаю, что большая неудача семантических разделов HTML, например, заключается в том, что код для работы в реальном мире включает в себя несколько операторов, чтобы справиться с фактическими браузерами, которые используются реальными людьми. Приведенные выше примеры не являются реальными и, во всяком случае, для чтения кода html5 вам нужно вспомнить, что нижний колонтитул является своего рода div. Просто называть его div и давать ему описательный идентификатор, кажется мне намного яснее, даже если мы забудем о нескольких заявлениях, которые вам действительно понадобятся (действительно, вы это сделаете. В течение нескольких лет). Вот идея. Создайте атрибуты идентификаторов семантического div, такие как "title=" и т.д. - пусть современные браузеры и экранные программы используют эту информацию для идентификации разделов, асид и т.д., И код будет более чистым. Не прекращайте вызов div div, потому что вы не можете установить новые браузеры для всей планеты.

<div id ="footer" class="someclass someotherclass" semantic="footer">You, the screen
readers and all browsers know this is a div</div>

Ответ 7

Разрешение области заголовка является основным преимуществом <section> и <article>. См. http://diveintohtml5.info/semantics.html#header-element.

Вкратце: в HTML5 гораздо проще выделить схему вашего документа (что полезно для чтения с экрана), не беспокоясь о том, следует ли использовать <h2> или <h3> или что-то еще (что становится очень сложным, когда вы включаете компоненты в разных местах на разных страницах).

Они не могли сделать это с помощью <div> s, потому что есть миллиарды веб-страниц, которые уже использовали <div> и заголовки, без необходимости предполагать область охвата.

По общему признанию, для этой цели было бы достаточно <section> и <hgroup>.

Ответ 8

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