Вложенные теги <article>и <h1>? - PullRequest
Новая
       10

Вложенные теги <article>и <h1>?

8 голосов
/ 22 января 2011

Вопрос:

Какой из них является правильным способом вложения тегов <h1> и <article>, и каковы ваши причины?

Выбор A: 

<article>
    <h1>Some Title</h1>
    <p>Here's some text and whatnot.</p>
    <p>Here's another paragraph filled with other text and other whatnots.</p>
</article>

Вариант B: 

<div class="post">
    <h1>Here's a Really Awesome Title</h1>
    <article>
        <p>Here's a paragraph with text and whatnot.</p>
        <p>And here's another paragraph. I think this one is pretty awesome too.</p>
    </article>
</div>

Мнения кажутся смешанными по этому поводу, и я не на 100%, что является правильным ответом.

Ответы [ 6 ]

14 голосов
/ 22 января 2011

оба хороши

@ У Дэвида Дорварда отличный ответ, и я собирался комментировать, чтобы расширить его, но когда я понял, что мой комментарий становится слишком длинным, я решил просто добавить свой собственныйВместо этого ответьте.

Элементы h# семантически принадлежат их родителям.

Этот h1 является основным заголовком страницы 

<body>
  <h1>Some text</h1>
</body>

Хотя этот h1 является основным заголовком для статьи 

<body>
  <article>
    <h1>Some text</h1>
  </article>
</body>

Это позволяет нам расширять использование h# элементов значимым образом следующим образом: 

<body>
  <h1>Blag Tottle</h1>
  <article>
    <h1>Article 1 Title</h1>
    <p>Lorem ipsum etc</p>
  </article>
  <article>
    <h1>Article 2 Title</h1>
    <p>Lorem ipsum etc</p>
  </article>
</body>

Теперь вы можете захотеть разделить заголовок статьи еще раз, что является идеальным применением элемента header: 

<body>
  <h1>Blag Tottle</h1>
  <article>
    <header>
      <h1>Article 1 Title</h1>
      <span class="author">And not a mouse</span>
    </header>
    <p>Lorem ipsum etc</p>
  </article>
  <article>
    <header>
      <h1>Article 2 Title</h1>
      <span class="author">Somebody</span>
    </header>
    <p>Lorem ipsum etc</p>
  </article>
</body>
7 голосов
/ 22 января 2011

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

Первый элемент содержимого заголовка в элементе содержимого раздела представляет заголовок для этого раздела

- http://www.w3.org/TR/html5/sections.html#headings-and-sections

Вариант A лучше, если это заголовок для , чем article.

Вариант B лучше, если он является заголовком для всех статей, которые следуют за ним.

1 голос
/ 22 января 2011

Я использую первый вариант. Потому что среднее значение статьи составляет часть внешнего контента . Поэтому этот контент должен иметь заголовок.

0 голосов
/ 22 января 2011

Заголовки, которые говорят о статье (мета-заголовки) должны быть из <article>, заголовки, которые являются частью статьи (главы, например), должны быть в <article>.

Все это просто ИМХО.

0 голосов
/ 22 января 2011

Я бы сказал, что заголовок является частью статьи.

Насколько я могу судить, это действительно зависит от личного вкуса. Вы не получите правильный или неправильный ответ, если будете писать правильный HTML5.

0 голосов
/ 22 января 2011

Вариант А. Заголовки глав (которые тоже H1) являются частью вашей статьи.

...