HTML5 Семантика?

Question

[Romus1989]

Как по html5 выстроить данный блок ?

В особенности интересует применение блоков 'section" и "article".
Разные источники, утверждают по разному....
Вот мой примерный вариант. Что здесь не так ?

<section class="post-one">
 <header class="cat-title">House and Living</header>
 <article class="post-big">
  <div class="thumb"></div>
  <h1>The ‘Star Wars: The Force Awakens’ teaser is here!</h1>
  <span class="post-cat">Lifestyle</span>
  <time datetime="2014-10-11"> November 11, 2014</time>
  <p> opine, that it is plainly traceable to the first arrival of the Greenland whaling ships in London, more than two centuries ago. Because those whalemen did not then, and do not now, try out their oil at sea as the Southern ships have always done; but cutting up the fresh...</p>
  <a class="post-next" href="">Read more</a>
 </article>
 <article class="post-small">
  <div class="thumb"></div>
  <h1>For a minute or two she stood looking at the house,</h1>
  <time datetime="2014-09-03"> September 3, 2014 </time>
  <p>A likely story indeed! said the Pigeon in a tone of the deepest contempt. I’ve seen...</p>
 </article>
</section>

Answer 1

[Павел Елизарьев]

Когда появляются вопросы толкования тегов, я обращаюсь к источнику, в данном случае источником является стандарт от w3.org.

Согласно данному стандарту, существует тег main для представления основного контента. Данный тег может встречаться на страницу только один раз.

Тег article представляет самостоятельную законченную сущность. Тэг может быть вложенным, но тогда он должен отвечать основной тематике родительского тега.

Тэг header, в свою очередь, представляет вводную к тексту, вопреки пониманию верстальщиков о хедере и футере. В вашем случае этот элемент стоит применить к абзацам с превью справа.

Тэг aside служит для представления блока дополнительного контента, как например блок справа на примере.

Тэг nav используется для указания блоков навигации.

Тэг section используется для тематической группировки контента.

Я предлагаю Вам такую структуру, но возможны и варианты.

Главной ошибкой предложенной Вами семантики я вижу отсутствие выделения основной статьи тегами (Вы используете для этого классы).

Answer 2

[Сергей Протько]

www.w3.org/TR/wai-aria

но вообще...

div - любые блоки
section - любые блоки, которые объеденены в одну группу
article - любые блоки, которые образуют самодостаточный элемент, их может быть много на странице
aside - что-то второстепенное, не имеющего напрямую связи с основным контентом. Может быть и внутри artice и вообще как хотите.

В целом же считаю что WAI-ARIA и div норм.

Answer 3

[Romus1989]

Дело в том, что на странице таких блоков, как в примере 8 штук, с разными категориями и разным расположением статей.

Значит как я понял, делить эти блоки именно article ? а внутренний контент уже делиться на section и aside ?

<article class="one-big-post">  <!--- На странице будет несколько подобных блоков  с разным контентом и расположением элементов --->
 <header class="cat-title"> <!--- Каждый блок со своим названием категории --->
  <h1>Название Категории</h1>
 </header>
  <section>
    <img></img>
    <h1>Название поста</h1>
    <p>Пост</p>
    <a></a>
  </section>
   <aside>
     <nav>
        <section> <!--- Тут section т.к посты выводятся из одной категории --->
          <h1>Правый Пост</h1>
          <header>Текст</header>
        </section>
    </nav>
   </aside>
</article>