Семантическая структура для HTML5 страницы. Семантика в HTML5

Семантическая структура для HTML5 страницы. Семантика в HTML5

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

 

Семантическая структура для HTML5 страницы

В этой статье мы будем постепенно создавать html страницу, и оформлять ее семантическими HTML5 тегами.

Семантическая структура для HTML5 страницы

Рисунок — Семантическая структура для HTML5 страницы.

 

DOCTYPE и meta теги в заголовке страницы

Начнем со стандартного шаблона HTML5 документа, и добавим теги meta в head:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Заголовок страницы</title>
    <meta name="keywords" content="Ключевые слова, и, фразы, через, запятую">
    <meta name="description" content="Описание контента страницы, 1-2 предложения.">
</head>
<body>

Я добавил тег <meta name="keywords" content=""> который отвечает за ключевые слова. И тег <meta name="description" content=""> который отвечает за описание страницы. Для SEO оптимизации эти теги обязательны. Также обязательно корректное заполнение тега <title>. Title страницы должен быть уникальным для всего сайта, и содержать в названии всю суть страницы для которой он указан.

Пойдем дальше. В HTML5 появились новые теги, которые используются для того чтобы делать семантическую разметку документа. Это теги header, nav, main, article, aside, footer и т.д. По отображению они работают также как и обычные <div> теги, то есть это блочные элементы. Но если <div> не имеет семантической нагрузки, то header, nav, main и другие — уже нужно использовать только осмысленно.

 

Заголовок страницы

Шапка страницы оформляется в тег header. Заметьте что заголовок страницы пишем тегом h1.

<!-- Header страницы -->
    <header>
            <h1>Site title</h1>
    </header>

Если у нас есть еще и слоган рядом с заголовком, то помещаем его в p, div или span.

<!-- Header страницы -->
    <header>
            <h1>Site title</h1>
            <p>site slogan</p>
    </header>

Замечание по поводу тега H1

Следует заметить что в HTML5 тег H1 используется для указания заголовка контейнера в котором он находится (это может быть header, section, article и т.д.)

До появления HTML5 тегов семантика была несколько другой и отличалась. Так в HTML4 на странице мог быть только один заголовок H1! Как правило это был заголовок статьи или заголовок страницы (например если это страница рубрики на которой отображаются несколько статей.) H2 использовался для подзаголовков, или для разделов главной статьи. H3 для под разделов и так далее.

 

Навигация на странице

Оформление главной навигации по сайту должно заключаться в тег nav. Также следует помнить что хорошей практикой считается оформлять навигацию элементами списка.

<!-- Главная Навигация по сайту -->
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Contacts</a></li>
        </ul>
    </nav>

 

Контент на странице

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

<!-- Основное содержимое страниц -->
<main>
        
...основной контент страницы...

</main>

 

Оформление статьи

Тег article — служит для обертки статей. В общем этот тег содержит в себе блок контента, который может быть вынут из контекста страницы, и использован отдельно в другом месте. Это может быть статья (полный тескт статьи или превью), пост на форуме, и т.п.

На примере ниже я показал оформление статьи в контексте, внутри тега main. У статьи задан блок header с заголовком статьи. Дата публикации статьи задана специальным тегом time, который отображается как обычный inline элемент. У тега time есть специальный аттрибут в котором время публикации должно быть задано в машинном формате. Это может быть только дата datetime="2015-09-30" или с указанием часов минут и секунд datetime="2015-09-30T15:25:55". Параметр pubdate указывает что статья была и опубликована в то же время что и написана. Если это новость, то может быть такое что время новости одно, а время публикации другое, для этого необходимо указать два раза тег time, и поставить pubdate только в том теге где указано время публикации.

<main>
...
<!-- Статья -->
    <article>

        <!-- Шапка статьи если в шапке у нас больше чем заголовок -->
        <header>
        
            <!-- Заголовок статьи -->
            <h1>Article title</h1>
            
            <!-- Дата публикации статьи  -->
            <time datetime="2015-09-30T15:25:55" pubdate>30 Сентября</time>
            
        </header>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?</p>

        <!-- Подзаголовок страницы -->
        <h2>Article sub-title</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?</p>
        
        <footer>
            <a href="#">Читать далее</a>
            <a href="#">Комментарии</a>
        </footer>

    </article>
...
</main>

Из примера выше видна что внутри статьи были использованы теги header и footer чтобы выделить заголовок и нижний колонтитул статьи.

 

Сайдбар или колонка с виджетами

Для каждого отдельного элемента сайдбара используем блок aside. Внутри него заголовок оформляем тегом h1. Так колонка с сайдбаром может выглядеть следующим образом:

<!-- Сайдбар -->
<div class="sidebar">

        <!-- Виджет в сайдбаре -->
        <aside>
            <h1>Widget title</h1>
            ...
        </aside>

        <!-- Виджет в сайдбаре -->
        <aside>
            <h1>Последние записи</h1>
            ...
        </aside>


        <!-- Виджет в сайдбаре -->
        <aside>
            <h1>Популярные комментарии</h1>
            ...
        </aside>
        
</div>

 

Тег section

Тег section — используется для представления группы или секции тематически связанного контента.Его использование похоже на article с главным отличием в том что допускается отсутствие смысла содержимого внутри элемента <section> вне контекста самой страницы. Рекомендуется использовать теги (<h1> – <h6>) для обозначения темы секции.

В качестве примера можно привести статью, которую вы сейчас читаете, можно было бы каждый параграф обернуть в тег <section>. Например тегом section можно выделять блоки контента на лендинге. Звучит похоже на определение div элемента, который часто используется как контейнер для контента. Разница в том что div не имеет семантического значения, и он не говорит не о чем про контент находящийся внутри него. Тег section, наоборот используется чтобы четко показать что контент внутри него связан по смыслу. Вы можете заменить некоторые свои div теги на section, но всегда отвечайте себе на вопрос: «Этот контент связан между собой или нет?»

Пример использования тега section в списке с перечислением городов:

<h1>An Event Apart</h1>

<section>

    <header>
        <h2>Cities</h2>
    </header>
    <p>Join us in these cities in 2010.</p>
    
    <section>
        <header>
            <h3>Seattle</h3>
        </header>
        <p>Follow the yellow brick road.</p>
    </section>

    <section>
        <header>
            <h3>Boston</h3>
        </header>
        <p>That's Beantown to its friends.</p>
    </section>

    <section>
        <header>
            <h3>Minneapolis</h3>
        </header>
        <p>It's so <em>nice</em>.</p>
    </section>

</section>

<small>Accommodation not provided.</small>

 

Подвал сайта — Footer

Подвал сайта оформляется тегом <footer>

<!-- Подвал сайта -->
<footer>
        <p class="copyright">© 2015 Rightblog.ru Copyright</p>
</footer>

 

Заключение

Для проверки структуры страницы можно использовать инструмент HTML5 outliner. Он показывает структуру страницы блокам и заголовкам.

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

В продолжение темы можно изучить другие новые HTML5 теги. А также микро форматы для оформления и структуризации данных, например такие как schema.org

 

Важное замечание по использованию HTML5 тегов. В спецификации не указаны жесткие правила по использованию семантических тегов, указаны лишь рекомендации п их использованию. Если вы не понимаете или не знаете где и какой HTML5 тег использовать, лучше используйте div — чтобы не навредить и не нарушить структуру документа.

 

Статьи и материалы по теме:
http://html5forwebdesigners.com/semantics/
http://habrahabr.ru/post/214407/
http://www.adobe.com/devnet/archive/dreamweaver/articles/understanding-html5-semantics.html
http://www.smashingmagazine.com/2011/11/html5-semantics/
http://blogs.msdn.com/b/jennifer/archive/2011/08/01/html5-part-1-semantic-markup-and-page-layout.aspx
http://www.w3schools.com/html/html5_semantic_elements.asp

  • pantsarny

    hgroup deprecated
    Шапка страницы оформляется в тег head. — вы хотели сказать header

    • Спасибо), точно опечатка. Поправил.

      • ademaro

        Про вам указали. Его убрали из спецификации, не надо учить плохому)

        • Точно, спасибо, как-то упустил этот момент. Уже убрал.

  • Не советую следовать рекомендациям этой статьи, т.к. они противоречат рекомендациям в спецификации. Теги header и footer не означают хидер и футер страницы (это заголовок и «подвал» блока, их может быть несколько, у футера страницы может быть свой тег header и т.п.), тег article, не смотря на кажущуюся простоту названия, не предназначен для статей — это базовый контентный блок, что-то в духе . С тегом другая проблема, он не поддерживается в ie (другие теги работают с 9-ки).

    Лучше почитать краткие материалы вот тут:
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main

    • Приветствую!)
      Про article — указано что он походит не только для статей.

      Тогда имеются несколько вопросов:

      — Как выделить шапку и подвал на странице? Просто дивами?
      — Про тег main. Разве html5shim не решает эту проблему? Кстати надо добавить про него блок в статье.
      — определение и примеры для тега footer от W3C http://www.w3.org/TR/html5/sections.html#the-footer-element

      • pantsarny

        Шапка и подвал — header[role=banner], footer[role=contentinfo]. Внутри article, section, etc… header и footer будут являться частью этого семантического блока.
        Решает, main[role=main].

        • Спасибо за ответ, возьму на заметку.

  • с aside бред какой то написан

    • Попрошу обосновать свою позицию.

      • попрошу не менять комменты, а оставлять в том виде, в котором пишите. а «обоснует» спецификация хтмл

        • https://www.w3.org/wiki/HTML/Elements/aside

          Example of contents

          – pull quotes

          – sidebars

          – advertising

          – groups of nav elements

          • как ответили вам ниже 4х годичная давность инфы… http://www.w3schools.com/html/html5_semantic_elements.asp — поновее будет

          • приводя в пример w3schools вы думаете, что приводите в пример спецификацию?

          • я думал когда же капитан умник задаст мне подобный вопрос

          • да, я бесспорно глупее вас :) и явно куда менее вежлив :) но неужели такой умный комментатор не снизойдёт ответить на мой глупый вопрос?

          • спецификация на ц3

          • про глупость я не говорил, спецификация на w3, а я привел пример новой, альтернативной спецификации, ну и вы сами знаете, наверное, что ведутся споры, где правильнее спека

          • действительно, про глупость вы не говорили, вы просто назвали меня «капитаном умником» :) про альтернативную спецификацию я действительно знаю, она называется WHATWG HTML Living Standard, и действительно ведутся определённые споры с w3.org, правда не очень понятно, почему вы упоминаете w3schools в качестве спеки :) она является… третьей?

  • почитайте спецификацию, что ли :)
    div#sidebar>aside*3 — это нечто странное, по меньшей мере.

    • http://dev.w3.org/html5/spec-preview/the-aside-element.html
      Опять же)

      div#sidebar — с этим можно поспорить, согласен. Можно просто div.sidebar . Тут надо смотреть на конкретную страницу и требования к ней (например #sidebar будет выводится через lazy load).
      По aside*3 — ссылка выше на спецификацию, там и примеры можно посмотреть.

      Единственное чего не хватает — я не описал пример использования aside внутри тега article например, когда с помощью aside мы офомляем текст который обособлен по смыслу от статью. Дополню статью на эту тему.

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

      • ну ладно )

        1. по приведенной вами ссылке — черновик 2012 года, соседняя статья там про тег hgroup, которого уже пару лет как нет (именно оттуда он и появился в этой вашей новой статье (и потом был убран, типа, опечатка), видимо, у вас не было другой ссылки (той, что именно на спецификацию, а не на этот черновик))

        2. в заблуждение вводите вы подобными статьями, ибо в указанной выше структуре использовали div#sidebar (семантики в этом, кстати, нуль).
        более корректная структура сайдбара: aside>div*n, а по спецификации, так и вовсе: aside>article*n (если там интерактивные виджеты).

        • С hgroup уже давно разобрались выше. Вы еще год его вспоминать будете)

          По aside — я смотрю не только спецификацию, но и примеры. В темах Automatic для WordPress сайдбар реализован именно так (посмотрите дефолтные темы в WP), собственно там и посмотрел такое решение.

          Перед написанием статьи я пересмотрел два десятка десятков источников, и примеры с практическим применением. И только потом уже опубликовал именно такое решение. Пришлите ссылку где в спецификации есть пример чтобы было реализовано так как вы говорите. Без проблем, обновлю этот пункт в статье. Просто пока и доки и практические примеры используют именно такое решение. (aside>article*n — тоже имеет смысл, можно и так писать)

          • Хоть я полностью согласен по поводу использования с вами, а не с комментирующими, я бы не советовал приводить в качестве аргумента вёрстку какой-либо компании :) Действительно, она соответствует слову спецификации по использованию какого-то тега на данном этапе, но это не значит что так будет (было) всегда.

          • Да, спасибо, вы правы. Лучше ссылаться на документацию.

  • Fktrctq

    Здравствуйте! Подскажите? Если страница выстроена следующим образом: article — заголовок — немного текста — пост — пост — пост — постраничная навигация — основной текст — /article

    можно ли так размещать текст вокруг постов? можно ли туда размещать постраничную навигацию? следует ли навигацию обернуть тегом section?

    • Я бы в article поставил только название и основной текст страницы.

      Если все же внутри article есть необходимость представить несколько постов (связанные посты, смотрите также) можно обернуть их в section или даже aside.

      Постраничная навигация между заголовком и основным текстом — звучит немного странно. Но если уж так, то можно обернуть ее в section.

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