Section или article?

Question

[IIIu6ko]

Как правильно писать структуру к примеру landing page?
header и footer понятно, а что с секциями, которые между ними? about, services, work и т.п.

<section>
  содержимое	
</section>

<article>
  содержимое	
</article>

<article>
  <section>содержимое</section>
  <section>содержимое</section>
</article>

И ещё вопрос про nav. На странице идет сначала блок навигации, потом main секции с h1, мб слайдером на фоне, ну в общем main секция. Как в этом случаи структуру писать? Есть какой-то правильный метод?
Что в данном случаи помещать в header? Тег nav внутри header? Уместно ли использовать тег main?

<!-- Я щас склоняюсь к такому варианту, но правильно ли это? Уместно ли в данном случаи обернуть "содержимое" в main? -->
<header>
  <nav></nav>
  Содержимое
</header>

<!-- Использовать ли main? -->
<header>
  <nav></nav>
  <main>Содержимое</main>
</header>

<!-- nav отдельно? -->
<nav></nav>
<header>
  <main>Содержимое</main>
</header>

Answer 1

[Сергей Горячев]

На лендинге лучше section.
Article больше подходит для области контента, например статей, новостей, материалов.

<header>...</header>
<section class="about">...</section>
<section class="work">...</section>
<section class="news">
   <h1>Наши новости</h1>
   <article>...</article>
   <article>...</article>
   <article>...</article>
</section>
<footer>...</footer>

Comments

[IIIu6ko]

Спасибо. А по поводу nav не подскажешь?

[Сергей Горячев]

Александр Шибков: Что конкретно?

[IIIu6ko]

Sergey Goryachev: Я обновил вопрос..

[Сергей Горячев]

Александр Шибков: Ни один из вариантов не будет правильным)

[IIIu6ko]

Sergey Goryachev: А как посоветуешь?

[Сергей Горячев]

Александр Шибков: Вообще, нужно видеть макет. Но думаю, что правильней будет так.

<section>
   <nav>
      <a href="#">Link</a>
      <a href="#">Link</a>
      <a href="#">Link</a>
   </nav>
   <header>...</header>
</section>

[Сергей Горячев]

Александр Шибков: header и footer - это не блок для ВСЕЙ шапки сайта. Почитай внимательно спецификацию с примерами.

[Сергей Горячев]

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

[IIIu6ko]

Sergey Goryachev:
Вот на данном макете подобный случай.


Разве у body не может быть тот же header и footer?

[Сергей Горячев]

Александр Шибков: На данном макете я вижу структуру именно такую.

<section class="green">
   <header>
      <a class="logo">
         <img src="" alt="">
      </a>
   </header>
   <nav>
      <a href="#">Link</a>
      <a href="#">Link</a>
      <a href="#">Link</a>
   </nav>
</section>

[Сергей Горячев]

Александр Шибков: header и nav для указания возможного role header и navigation соотвественно.

[IIIu6ko]

Кстати, как с логотипом быть? Его в nav?
Я щас в принципе понял, что надо вот так писать.

<header>
  <div id="logo"></div>
  <nav></nav>
</header>
<section>
  <main></main> <!-- Или лучше main не писать? -->
</section>

[Сергей Горячев]

Александр Шибков: я main использую также редко, обычно как обертку для article.

[IIIu6ko]

Sergey Goryachev: В смысле как обертку? main должен же один только на странице быть или даже на сайте.

[Сергей Горячев]

Александр Шибков: угу. На примере выше. Не section class news, а main class news. А внутри три article.

[IIIu6ko]

Sergey Goryachev: Дошло) main - это подобие section и article, только в нём пишется основное содержимое страницы. Ну и main нельзя писать внутри тех же section и article как я понял.
Спасибо, помог.

[IIIu6ko]

Sergey Goryachev: А на счёт header и footer внутри body я всё же походу прав был.
Смотри второй пример
spec.piraruco.com/html5/grouping-content.htm#the-m...

[IIIu6ko]

Sergey Goryachev: Хотя судя по тому примеру, надо писать вот так

<header></header>
	<main>
		<section></section>
		<section></section>
		<section></section>
	</main>
<footer></footer>

Answer 2

[Алексей Струков]

Лучше использовать div и не заморачиваться)

Comments

[Сергей Горячев]

Ужасный совет. Семантика сейчас не та вещь, на которую стоит забивать.

[Максим]

Sergey Goryachev: поддерживаю

[Сергей delphinpro]

Лучше i - он короче.

[Алексей Струков]

Sergey Goryachev Сергей: и зачем нужна семантика?) Каково практическое назначение?) Интересно услышать конкретные аргументы, а не мантры евангелистов, которые гуляют по статьям в интернете.

Вот выдержка из спецификации:

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. Each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.

Прошу обратить особое внимание на требование иметь заголовок внутри section (в общем это касается любого sectioning element)

Если везде вставлять этот section, то валидатор будет выдавать такую ошибку - Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.
Так-как не все разделы лендинга имеют заголовки, то и решение использовать section для этих целей не лучший вариант. Вся эта мишура типа article, section и т.д. была придумана для разбиения всяких текстовых документов и большинство лендингов/интернет-магазинов могут легко обойтись без такой "семантики".

Что такое section по-сути?
Это обычный div со вшитым role=region
Все это секционирование не поддердиватся ни одним браузером и реализовано только в валидаторах.

Короче, лучше уделяйте внимание SEO оптимизации сайта, чем заморачивайтесь решением надуманной проблемы. Поисковикам пофиг на всю эту семантику. Людям с ограниченными способностями можно создать отдельную версию сайта(WCAG 2.0, пункт 136 разрешает такой подход). Все прочее - от лукавого)

[Сергей Горячев]

Алексей Струков: Собственно, на вопрос "Зачем нужна семантика?" я отвечу возможно и шаблоном, но скажу то, что увидел на собственном опыте. Семантически правильные сайты растут намного лучше в поисковике Яндекса. Именно в Яндексе замечено. Больше аргументировать нечем мне.
Теперь, что касается section. Вопрос был про landing, как правило, каждая секция итак имеет заголовок, у меня они обычно h2. В связи с этим проблем не возникало. Я говорил, что в первую очередь нужно видеть макет, прежде чем давать какие-то четкие рекомендации. Заключение header в section не будет ошибкой, просто предупреждением. Но все равно, у меня практически всегда есть заголовок. Даже если идет структура - section>header, то logo имеет h2. Все очень индивидуально)