Вы здесь: Главная > HTML > Структура документа: разделение на части

Структура документа: разделение на части

Опубликовано автором Просмотры: 11

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

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

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

Статьи и разделы

Элемент article может использоваться для разметки отдельного раздела содержимого.

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

Элемент section представляет более общий раздел и может использоваться для разделения статьи или, например, для представления глав.

<article>
    <section id="intro">
        <p>[Введение]</p>
    </section>
    <section id="main_content">
        <p>[Содержание]</p>
    </section>
    <section id="related">
        <ul>
            <li><a href="that.html">Эта статья по теме</a></li>
            <li><a href="this.html">Та статья по теме</a></li>
        </ul>
    </section>
</article>

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

Спецификации HTML5 предполагают, что вы можете использовать h1 элементы в начале каждого раздела, которые станут подзаголовком всего, что предшествует этому разделу.

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

Однако это обеспечивает обратную совместимость, и любые пользовательские программы (включая программы чтения с экрана), которые этого не понимают, не будут применять должным образом структурированные уровни заголовков.

Мы рекомендуем придерживаться уровней заголовков, которые вы использовали бы, если бы не использовали разделы (такие как h1, за которым следует h2 и т.д., независимо от разделения). Это ничего не нарушает и не уменьшает значения или семантики.

Верхние и нижние колонтитулы

Теги header и footer могут предоставить дополнительные специализированные разделы, описывающие сами себя:

<body>
<article>
    <header>
        <h1>Альтернативно..</h1>
        <p>[Введение]</p>
    </header>
    <section id="main_content">
        <p>[Содержание]</p>
    </section>
    <footer>
        <p>[Примечания]</p>
    </footer>
</article>
<footer>
    <p>[Нарушение авторских прав]</p>
</footer>
</body>

Тег footer — это нижний колонтитул раздела, в котором он содержится. Итак, в приведённом выше примере первый footer — это нижний колонтитул статьи, а второй footer — нижний колонтитул страницы.

Примечания

Тег aside может использоваться для представления контента, связанного с окружающим его контентом. Подумайте о выдвижных кавычках или фрагментах связанной информации в статье:

<section id="main_content">
    <h1>Тиксалл</h1>
    <p>[Всё о Тиксалл]</p>
    <aside>
        <h2>Тиксалльский обелиск</h2>
        <p>[Короткая заметка о Тиксалльском обелиске]</p>
    </aside>
    <p>[Может быть, немного подробнее о Тиксалл]</p>
</section>

Раз уж мы остановились на этой структуре, рассмотрим, как включить в неё рисунки. Для этого есть два тега.

<figure>
    <img src="obelisk.jpg">
    <figcaption> Тиксалльский обелиск </figcaption>
</figure>

Обратите внимание, что элементу img не нужен атрибут alt, если есть figcaption (“подпись к рисунку”).

Навигация

Наконец, есть тег nav, используемый для разметки группы навигационных ссылок.

<nav id="main_nav">
    <ul>
        <li><a href="/tutorials/">Учебные пособия</a></li>
        <li><a href="/techniques/">Методы</a></li>
        <li><a href="/examples/">Примеры</a></li>
        <li><a href="/references/">Ссылки</a></li>
    </ul>
</nav>

Это также можно использовать для навигации по странице.

<a href="#overthere">

Но это не обязательно для каждой группы ссылок. Оно предназначено для основных групп. Например, авторское право, авторская ссылка и контактная ссылка могли бы удобно располагаться сами по себе в элементе footer.

Если вы хотите придать стиль этим новым элементам HTML5, вы столкнётесь с проблемой в старых браузерах, в первую очередь Internet Explorer версий 8 и более ранних, которые не понимают эти теги.

Однако вам на помощь может прийти HTML5Shiv; небольшой фрагмент JavaScript, встроенный в ваш head элемент, который обучает браузеры и держит их в руках, чтобы вы могли использовать новые теги HTML5 и стилизовать их с помощью CSS по своему усмотрению.

Вам решать, хотите ли вы использовать выдумку JavaScript или придерживаться старого безопасного (и, опять же, совершенно верного), но семантически более бедного подхода к заголовкам и разделам. Этот сайт, наряду со многими другими, выбирает первое. Потому что красота HTML5 почти перевешивает уродство взлома.

Страницы в тему:

Добавить комментарий