Семантичная разметка на странице

236

28 апреля 2017, 17:21

Делаю сейчас дизайн для сайта и никак не могу определиться с нужными тегами

<section class="articles"> 
  <article> 
    <header><!--Заголовок и вспомогательная информация ввиде даты публикации и просмотров--></header> 
    <div><!--Картинка публикации и текст публикации--></div> 
    <footer><!--Теги, ссылки--></footer> 
  </article> 
  <!--... и так далее --> 
</section>

Меня в данной ситуации смущает тег div - т.к он ассемантичен. Что подставить вместо него не понимаю. Нужна помощь!

Answer 1

Если на месте дива будет только текст и изображения, то див ставить и не нужно. Можно сделать так как предлагают сами W3C:

<article>
  <header>
   <h1>The Very First Rule of Life</h1>
   <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
  </header>
  <p>If there's a microphone anywhere near you, assume it's hot and
  sending whatever you're saying to the world. Seriously.</p>
  <p>...</p>
  <footer>
   <a href="?comments=1">Show comments...</a>
  </footer>
</article>

Если есть другие элементы, также можно подсмотреть в спецификации. Article может быть внутри article, так же можно использовать section:

<article>
 <header>
  <h1>The Very First Rule of Life</h1>
  <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <section>
  <h1>Comments</h1>
  <article>
   <footer>
    <p>Posted by: George Washington</p>
    <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>
   </footer>
   <p>Yeah! Especially when talking about your lobbyist friends!</p>
  </article>
  <article>
   <footer>
    <p>Posted by: George Hammond</p>
    <p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p>
   </footer>
   <p>Hey, you have the same first name as me.</p>
  </article>
 </section>
</article>