Как использовать секционные элементы HTML5

[@GreatRash]

Об это всём (и не только) года полтора назад уже написали html-доктора (http://html5doctor.com/).

[@aka_maestro]

согласен)
по моему для новичков и тех, кто не видел ранее, будет полезно.
толково же написано

[@Seldon]

Будет полезно погуглить (с) Ваш копетан.

[@ingumsky]

Мой первый (и пока единственный) топик на Хабре тоже является переводом. Я хотел оформить его как топик-перевод, но так и нашёл, как это делается. Пришлось просто в первом абзаце написать о том, что это перевод, и дать ссылку на оригинал :(

[@Akuma]

Не знал про элемент main и раньше оборачивал главный контент в section. Это было сильно неправильно?
И на сколько верно использовать aside для сайдбара сайта? Как на хабре справа, например.

За статью перевод статьи спасибо. Хоть и писали об этом раньше, но написана статья очень удобочитаемо и понятно.

[@sergeykuzin144]

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

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

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

P.S. Спасибо за отзыв…

[@Akuma]

Во что посоветуете оборачивать сайдбар? В section?

[@sergeykuzin144]

я бы, во-первых, обернул его в <nav>, а затем в <div> для расположения в нужном месте макета.

[@Seldon]

В nav я все-таки оборачивал бы меню, а в сайд баре много всего постороннего. div вполне себе ок для сайд бара, хотя если у вас в сайдбаре например выводятся последние твитты к текущей статье или что-то подобное — aside отлично подойдет.

[@Kuzzy]

Для меню таки есть свой элемент <menu>, а навигационные ссылки в сайдабере отлично подходят для <nav>

[@ingumsky]

Насколько мне известно, элемент <menu> предназначен не для навигационного меню.

[@Seldon]

Элемента menu не существует в html5, как писали ниже он только его выход планируется только в 2016 году и совсем не для ссылок или навигации по сайту

[@E_STRICT]

Не знал про элемент main и раньше оборачивал главный контент в section. Это было сильно неправильно?

А его и не было раньше. Он появился относительно не давно.

[@pepelsbey]

Вы только что придумали слово «секционные», на самом деле — это «структурные элементы». См. презентацию «Вёрстка со смыслом», там было много терминологии.

[@Envek]

Почему-то не упомянут элемент <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>

Поисковики оценят все эти подсказки

[@Seldon]

Поисковики уже давно забили на всю эту «ересь»(прошу правильно воспринять контекст использования этого слова), правильно верстая вы делаете сайт удобным для всяких ридеров и программ которые работают с контентом, в том ичсле и для программ предназначенных для людей с ограниченными возможностями

[@Seldon]

htmlbook.ru/html/menu вы не в курсе что menu не вошел в спецификацию html5?
Лишь бы кода нагородить…

[@milar]

Но все же больше поисковики оценят метаданные schema.org, нежели семантику тегов.

[@victimofbrainlessness]

www.creativebloq.com/html5/truth-about-structuring-html5-page-9122842

альтернативный взгляд на новые элементы, аргументация почему 99% интернетов использует их неправильно и почему можно забыть про все эти новшества

[@dom1n1k]

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

[@ollejah]

Солидарен. Мною про <main> тоже как-то было упущено…

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

Что это?

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

…

и т.д. и т.п.

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

Всем желаю в н и м а т е л ь н о с т и.

[@evgabd]

эх, только «по всюду» не вписать :)

[@evgabd]

ну просто высший пилотаж! :)

[@Stac]

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 мои.

[@Leony]

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

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