Когда использовать элемент SECTION?


8

Я немного смущен новым элементом HTML5 <section>. Как правильно его использовать?
Рассмотрим эту схему:

<article>
  <header>
    <h2>Title</h2>
    <p>Spiffy tagline</p>
  </header>
  <section>
    <p>My content! BLA BLA BLA YADDA YADDA</p>
    <p>Some more content!</b>
  </section>
</article>

Имеет ли это смысл?
Что если бы у меня были небольшие статьи, только с заголовком и кратким текстом? Было бы (семантически, по спецификации и т. Д.) Опустить section?

Ответы:


2

Если вам не нужны разделы (есть небольшие статьи), вы можете просто использовать пустую <article>сущность вокруг вашего контента. А когда вы этого не сделаете, раздел может обернуть подзаголовки и абзацы в этих разделах.

Ознакомьтесь со спецификациями раздела html5 .

Пример:

<header>
  <h1>Blog Posts</h1>
</header>
<article>
  <header>
    <h1>Article Header</h1>
    <h2>My Awesome Stuff!</h2>
  </header>
  <p>My content! BLA BLA BLA YADDA YADDA</p>
  <p>Some more content!</b>
</article>
<article>
  <header>
    <h1>Article 2 Header</h1>
    <h2>More of My Awesome Stuff!</h2>
  </header>
  <section>
    <header>
      <h1>Getting started</h1>
    </header>
    <p>Getting started text</p>
  </section>
  <section>
    <header>
      <h1>Now you're underway</h1>
    </header>
    <p>Underway text</p>
  </section>
  <section>
    <header>
      <h1>Wrapping up</h1>
    </header>
    <p>Wrapping up text</p>
  </section>
</article>

4

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


+1 спасибо за статью о семантических элементах. Легко читается.
Саиф Бечан
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.