Как именно работает семантика тегов HTML5 <header>, <section>и <footer>? - PullRequest
Новая
       38

Как именно работает семантика тегов HTML5 <header>, <section>и <footer>?

4 голосов
/ 26 сентября 2010

Я немного озадачен тем, как я должен использовать теги HTML5 <header>, <section> и <footer>.В настоящее время я не могу понять, использовать ли их так: 

<section id="example_section">
    <header>
        <h1>Example Section</h1>
        <p>etc</p>
    </header>

    <p>Content para 1</p>
    <p>Content para 2</p>
    <p>Content para 3</p>

    <footer>
        Wasn't that swell?
    </footer>
</section>

Или вот так: 

<header>
    <h1>Example Section</h1>
    <p>etc</p>
</header>

<section id="example_section">
    <p>Content para 1</p>
    <p>Content para 2</p>
    <p>Content para 3</p>
</section>

<footer>
    Wasn't that swell?
</footer>

Или идти на компромисс, например: 

<section id="example_section_wrapper">
    <header>
        <h1>Example Section</h1>
        <p>etc</p>
    </header>
    <section id="example_section">
        <p>Content para 1</p>
        <p>Content para 2</p>
        <p>Content para 3</p>
    </section>
    <footer>
        Wasn't that swell?
    </footer>
</section>

Я включил идентификаторы, чтобы показать предполагаемое значение разделов.Я понимаю, что они не нужны.Какой метод правильный?

Ответы [ 4 ]

7 голосов
/ 26 сентября 2010

Все верны в одном смысле, но это лучше, чем в любом другом 

<section id="example_section_wrapper">
    <header>
        <h1>Example Section</h1>
        <p>etc</p>
    </header>
    <section id="example_section">
        <p>Content para 1</p>
        <p>Content para 2</p>
        <p>Content para 3</p>
    </section>
    <footer>
        Wasn't that swell?
    </footer>
</section>

Пара лучших примеров и ссылок

1 голос
/ 26 марта 2013

Раздел может содержать раздел, но лучше общий контейнер - это фактически статья. Вместо этого: 

<section id="example_section_wrapper">
    <header>
        <h1>Example Section</h1>
        <p>etc</p>
    </header>
    <section id="example_section">
        <p>Content para 1</p>
        <p>Content para 2</p>
        <p>Content para 3</p>
    </section>
    <footer>
        Wasn't that swell?
    </footer>
</section>

Возможно, вы захотите использовать это: 

<article>
    <header>
        <h1>Example Section</h1>
        <p>etc</p>
    </header>
    <section id="example_section">
        <p>Content para 1</p>
        <p>Content para 2</p>
        <p>Content para 3</p>
    </section>
    <footer>
        Wasn't that swell?
    </footer>
</article>

Таким образом, вполне естественно иметь различные разделы в одной статье.

0 голосов
/ 28 сентября 2010

Все они могут иметь смысл, но первый, в общем, самый правильный.

Предполагая, что весь фрагмент представляет собой реальный раздел (контент по той же теме), имеет смысл иметьверхний и нижний колонтитулы внутри самого раздела.Также разделу нужен заголовок (h1-6, по крайней мере, один. Возможно, с hgroup, если их больше одного), и он отсутствует в вашем втором и третьем примере.

0 голосов
/ 26 сентября 2010

Сами теги довольно абстрактные, прямо сейчас. Вы можете использовать их любым из описанных выше способов, но ваш третий вариант является наиболее правильным.

...