section элемент представляет родовую часть документа или заявления. Секция, в этом контексте, является тематической группировкой содержания, как правило с заголовком.
Примерами секций были бы главы, различные tabbed страницы в tabbed диалоговом окне или пронумерованные разделы тезиса. Домашняя страница веб-сайта могла быть расколота на секции для введения, сообщений печати и контактной информации.
Авторы поощрены использовать article элемент вместо section элемент, когда имело бы смысл объединять содержание в консорциум элемента.
section элемент не родовой контейнерный элемент. Когда элемент необходим только для того, чтобы разработать цели или как удобство для scripting, авторы поощрены использовать div элемент вместо этого. Общее правило состоит в том чтоsection элемент соответствующий, только если содержание элемента было бы перечислено явно в схеме документа.
В следующем примере мы видим статью (часть большей Веб-страницы) о яблоках, содержа две коротких секции.
<article> <hgroup> <h1>Apples</h1> <h2>Tasty, delicious fruit!</h2> </hgroup> <p>The apple is the pomaceous fruit of the apple tree.</p> <section> <h1>Red Delicious</h1> <p>These bright red apples are the most common found in many supermarkets.</p> </section> <section> <h1>Granny Smith</h1> <p>These juicy, green apples make a great filling for apple pies.</p> </section> </article>
Заметьте как использование section средства, которые может использовать автор h1 элементы повсюду, не имея необходимость волноваться о том, является ли особая секция на высшем уровне, втором уровне, третьем уровне, и так далее.
Вот программа окончания с двумя секциями, один для списка людей, получающих высшее образование, и один для описания церемонии.
<!DOCTYPE Html>
<Html
><Head
><Title
>Graduation Ceremony Summer 2022</Title
></Head
><Body
><H1
>Graduation</H1
><Section
><H1
>Ceremony</H1
><P
>Opening Procession</P
><P
>Speech by Validactorian</P
><P
>Speech by Class President</P
><P
>Presentation of Diplomas</P
><P
>Closing Speech by Headmaster</P
></Section
><Section
><H1
>Graduates</H1
><Ul
><Li
>Molly Carpenter</Li
><Li
>Anastasia Luccio</Li
><Li
>Ebenezar McCoy</Li
><Li
>Karrin Murphy</Li
><Li
>Thomas Raith</Li
><Li
>Susan Rodriguez</Li
></Ul
></Section
></Body
></Html>
В этом примере книжный автор повысил некоторые секции как главы и некоторых как приложения, и использует CSS, чтобы разработать заголовки в этих двух классах секции по-другому. Целая книга обернута в article элемент как часть еще большего документа, содержащего другие книги.
<article>
<style>
section { border: double medium; margin: 2em; }
section.chapter h1 { font: 2em Roboto, Helvetica Neue, sans-serif; }
section.appendix h1 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; }
</style>
<header>
<hgroup>
<h1>My Book</h1>
<h2>A sample with not much content</h2>
</hgroup>
<p><small>Published by Dummy Publicorp Ltd.</small></p>
</header>
<section>
<h1>My First Chapter</h1>
<p>This is the first of my chapters. It doesn't say much.</p>
<p>But it has two paragraphs!</p>
</section>
<section>
<h1>It Continutes: The Second Chapter</h1>
<p>Bla dee bla, dee bla dee bla. Boom.</p>
</section>
<section>
<h1>Chapter Three: A Further Example</h1>
<p>It's not like a battle between brightness and earthtones would go
unnoticed.</p>
<p>But it might ruin my story.</p>
</section>
<section>
<h1>Appendix A: Overview of Examples</h1>
<p>These are demonstrations.</p>
</section>
<section>
<h1>Appendix B: Some Closing Remarks</h1>
<p>Hopefully this long example shows that you <em>can</em> style
sections, so long as they are used to indicate actual sections.</p>
</section>
</article>
