Пользователь
0,0
рейтинг
3 марта 2014 в 11:43

Разработка → Как использовать секционные элементы HTML5 из песочницы

Один славный малый Matt West c туманного альбиона, промышляющий фрилансом и предпринимательством, предложил нашему вниманию пост: «Как использовать секционные элементы HTML5».
Ниже приводится его перевод.




HTML5 предлагает набор секционных элементов, используя которые в своей разметке вы добавляете смысловую или семантическую нагрузку своим страницам, тем самым позволяя компьютерным программам лучше понимать их содержание.
Прочитав этот пост, вы научитесь применять секционные элементы на ваших веб-сайтах. Я постараюсь объяснить, в каких случаях лучше использовать тот или иной элемент и когда лучше прибегнуть к старому доброму
.
Давайте начнем.


Элемент main


Элемент должен содержать главный контент вашей вебстраницы. Причем, все содержимое должно быть уникально на странице и не должно отображаться где-либо еще на сайте.
Повторяющийся на нескольких страницах контент (логотип, окно поиска, ссылки в футере и т.д.) не следует помещать внутри элемента .
Ниже приводится пример представления главного содержимого страницы.

<body> <header> <div id="logo">Журнал Rocking Stone</div> <nav>...</nav> </header> <main role="main"> <h1>Гитары</h1> <p>Величайшие гитары современности</p> <article> <h2>Gibson SG</h2> <p>...</p> </article> <article> <h2>Fender Telecaster</h2> <p>...</p> </article> </main> </body>


Примечание: Мы использовали атрибут роли ARIA role=”main”, здесь он указывает на важность этого элемента тем программам, которые еще не поддерживают элемент (например, некоторые скринридеры).

Можно использовать только один элемент
 на странице, который нельзя помещать внутри элементов , , ,  или .

Элемент article


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

<article> <header> <h1>Название статьи</h1> <p>Опубликовано: 13 февраля 2014</p> </header> <p> ... </p> </article>

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

<article> <header> <h1> Название статьи</h1> <p> Опубликовано: 13 февраля 2014</p> </header> <p>...</p> <p>...</p> <p>...</p> <section> <h2>Комментарии</h2> <article> <footer> <p>Автор: Джо Балок</p> </footer> <p>Это была интересная статья</p> </article> <article> <footer> <p> Автор: Кейси Брок</p> </footer> <p>Как ты связываешь это с мировым превосходством? </p> </article> </section> </article>

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

Элемент section


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

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

<article> <h1>Как использовать секционные элементы HTML5</h1> <p>...</p> <section> <h2>Элемент main</h2> <p>...</p> </section> <section> <h2>Элемент article </h2> <p>...</p> </section> <section> <h2>Элемент section</h2> <p>...</p> </section> ... </article>

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

Элемент nav


Элемент используется для разметки группы ссылок на внешние страницы или разделы внутри текущей страницы. Он хорошо подходит как для основной навигации по сайту, так и по оглавлению или постам.

<nav> <ul> <li><a href="#chapter-one">Глава первая</a> <li><a href="#chapter-two">Глава вторая</a> <li><a href="#chapter-three">Глава третья</a> </ul> </nav>

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

Элемент aside


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

<article> <header> <h1>Компания Google покупает Nest</h1> <p>Опубликовано: 13 января 2014</p> </header> <p>...</p> <p>...</p> <aside> <h1>Google (GOOG)</h1> <p>Компания Google была основана в 1998 году Ларри Пейджем и Сергеем Брином. Компания ...</p> </aside> </article>

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

Элемент header


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

<header> <h1>Компания Google покупает Nest</h1> <p>Опубликовано: 13 января 2014</p> </header>

В этом примере элемент
 содержит заголовок и дату публикации новостной статьи.

Элемент footer


Элемент используется для представления такой информации о разделе, как автор, авторские права, ссылки на связанные веб-страницы.

<footer> Copyright Matt West 2014 </footer>

Так же как
, элемент  связан с ближайшим секционным элементом.

Элемент address


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

<address> Контакты <a href="mailto:matt@example.com">Matt West</a> </address>

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

<article> <header> <h1>Компания Google покупает Nest</h1> <p>Опубликовано: 13 января 2014</p> </header> <p>...</p> <p>...</p> <footer> <address> Автор <a href="mailto:matt@example.com">Matt West</a> </address> <p>Copyright Matt West 2014</p> </footer> </article>


Заключение


В этом посте вы узнали как использовать секционные элементы HTML5 для разметки веб-страниц. Использование таких элементов имеет ряд преимуществ.
Одно из самых больших – это придание семантического значения определенным областям вашей веб-страницы, позволяющего компьютерным программам (скринридерам) идентифицировать ключевые элементы содержания и навигации.

Примечание: Пока еще не все скринридеры имеют поддержку семантических элементов. Чтобы обезопасить себя, вы можете продолжать использовать роли ARIA.
Использование секционных элементов также помогает разработчикам больше задумываться о структуре своих веб-страниц.
Хотя выбор секционного элемента и очевиден, но он порождает важные вопросы о назначении и цели контента, а также, помогает понять, а относится ли вообще содержимое к этой странице?
Это пример того, как веб-стандарты помогают не только улучшить качество разметки, но и качество веб-страницы в целом.
Сергей Кузин @sergeykuzin144
карма
8,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (37)

  • +6
    Об это всём (и не только) года полтора назад уже написали html-доктора (http://html5doctor.com/).
    • 0
      согласен)
      по моему для новичков и тех, кто не видел ранее, будет полезно.
      толково же написано
      • –4
        Будет полезно погуглить (с) Ваш копетан.
  • +4
    Всё-таки переводы не так оформляются, а как топик-переводы.
    • 0
      Мой первый (и пока единственный) топик на Хабре тоже является переводом. Я хотел оформить его как топик-перевод, но так и нашёл, как это делается. Пришлось просто в первом абзаце написать о том, что это перевод, и дать ссылку на оригинал :(
  • 0
    Не знал про элемент main и раньше оборачивал главный контент в section. Это было сильно неправильно?
    И на сколько верно использовать aside для сайдбара сайта? Как на хабре справа, например.

    За статью перевод статьи спасибо. Хоть и писали об этом раньше, но написана статья очень удобочитаемо и понятно.
    • 0
      Насколько я понял идею автора статьи, семантически оборачивать сайдбар в aside будет неверно, т.к. когда мы говорим о сайдбаре, мы имеем в виду физическое расположение блоков в макете страницы.

      Тут, наверное, вводит в заблуждение дословные перевод слова aside: «в стороне» от чего-либо.
      Элемент aside определяет смысловую нагрузку для содержащегося в нем контента.

      Главные потребители нашей семантики — это скринридеры, которые встретив в разметке элемент aside, знают как его обработать.

      P.S. Спасибо за отзыв…
      • –1
        Во что посоветуете оборачивать сайдбар? В section?
        • +1
          я бы, во-первых, обернул его в <nav>, а затем в <div> для расположения в нужном месте макета.
          • 0
            В nav я все-таки оборачивал бы меню, а в сайд баре много всего постороннего. div вполне себе ок для сайд бара, хотя если у вас в сайдбаре например выводятся последние твитты к текущей статье или что-то подобное — aside отлично подойдет.
            • 0
              Для меню таки есть свой элемент <menu>, а навигационные ссылки в сайдабере отлично подходят для <nav>
              • 0
                Насколько мне известно, элемент <menu> предназначен не для навигационного меню.
              • 0
                Элемента menu не существует в html5, как писали ниже он только его выход планируется только в 2016 году и совсем не для ссылок или навигации по сайту
                • НЛО прилетело и опубликовало эту надпись здесь
        • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Не знал про элемент main и раньше оборачивал главный контент в section. Это было сильно неправильно?
      А его и не было раньше. Он появился относительно не давно.
  • +2
    Вы только что придумали слово «секционные», на самом деле — это «структурные элементы». См. презентацию «Вёрстка со смыслом», там было много терминологии.
    • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Почему-то не упомянут элемент <menu>, блок с менюшкой можно переверстать так:
    <nav>
      <menu>
        <li><a href="#chapter-one">Глава первая</a>
        <li><a href="#chapter-two">Глава вторая</a>
        <li><a href="#chapter-three">Глава третья</a>
      </menu>
    </nav>
    

    Так же не упомянут элемент <time>, <header> тоже можно с ним переверстать как
    <header>
        <h1>Компания Google покупает Nest</h1>
        <p>Опубликовано: <time datetime="2014-01-13" pubdate="pubdate">13 января 2014</time></p>
    </header>
    

    Поисковики оценят все эти подсказки
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Поисковики уже давно забили на всю эту «ересь»(прошу правильно воспринять контекст использования этого слова), правильно верстая вы делаете сайт удобным для всяких ридеров и программ которые работают с контентом, в том ичсле и для программ предназначенных для людей с ограниченными возможностями
        • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      htmlbook.ru/html/menu вы не в курсе что menu не вошел в спецификацию html5?
      Лишь бы кода нагородить…
      • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      Но все же больше поисковики оценят метаданные schema.org, нежели семантику тегов.
  • +2
    www.creativebloq.com/html5/truth-about-structuring-html5-page-9122842

    альтернативный взгляд на новые элементы, аргументация почему 99% интернетов использует их неправильно и почему можно забыть про все эти новшества
    • 0
      Вот спасибо за ссылку, у меня бродили сходные мысли, но тут автор изложил системно и аргументированно.
  • 0
    Предлагаю к переводу вот эти две стати. Уж они то точно должны разложить все по полочкам.

    blog.paciellogroup.com/2013/10/using-html5-section-element/
    www.whatwg.org/specs/web-apps/current-work/multipage/sections.html
  • +2
    Солидарен. Мною про <main> тоже как-то было упущено…

    Оффтоп: граммарнаци негодуэ!

    Что это?

    так же
    не правильно
    на сколько
    на пример
    по всюду



    и т.д. и т.п.

    Я к тому, что это уже повсюду.
    Это, конечно же, ничего не изменит, просто выпустить пар.

    Всем желаю в н и м а т е л ь н о с т и.
    • НЛО прилетело и опубликовало эту надпись здесь
      • –1
        эх, только «по всюду» не вписать :)
        • НЛО прилетело и опубликовало эту надпись здесь
          • –1
            ну просто высший пилотаж! :)
            • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    article и section сурово ломают мозг.
    Каждая вторая статья на эту тему утверждает, что section объединяет article и другие элементы в нечто цельное, а каждая первая утверждает обратное, мол, section делит article или другие элементы на части.

    Отдельные авторы говорят о правомерности использования обоих подходов.

    Хуже всего, что этот плюрализм мнений как-бы намекает, что сами авторы этих элементов не вполне понимают их сути.

    Пример кода в wiki статье про article показывает несколько article вложенных в section.
    А пример кода в статье про section показывает… та-дам!… несколько section вложенных article.

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

    Зато ясно следующее:
    The <article> element represents an independent item section of content.

    The <section> element represents a generic section of a document or application.

    Выделения в цитатах из wiki W3C мои.
  • 0
    не для разметки почтового адреса

    Правильно: не для разметки, а для него самого. :) Пруф
    Т.е. внутри должен быть почтовый адрес, мыло, телефон, скайп и т.п. того, кто написал статью ниже.
    • НЛО прилетело и опубликовало эту надпись здесь

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.