Как пользоваться тегом <main>

[PavelTkachev]

Хочу применять в сёрстке тег <main> и не могу понять как его применять правильно. Из описания я понял, что это тег для основного и уникального контента для данной страницы. Но как тогда его использовать с тегом <article>, ведь в нём данные контент должен также находиться?

 

Что-то на подобии:

<main>

<article>

<h1></h1>

<time></time>

</article>

</main>

 

Так?

 

И должен ли тег <h1> быть внутри <article>?

[DivMan]

main>section>article>aside

[Vessel]

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

 

 

Использую его как каркасный элемент для уникального содержания. Удобно.

[Switch74]

мне кажется обычный блок для контента

headernavmainfooter

что-то вроде этого например

[lexxcode]

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

[PavelTkachev]

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

 

То есть правильно для двухколоночной вёрстки

 

<header></header>

<nav></nav>

<section>

<main>

<h1></h1>

<article>

<time></time>

<menu></menu>

</article>

</main>

<aside></aside>

</section>

<footer></footer>

 

Где <menu></menu> - это навигация по документу.

 

Правильно, что <h1> не внутри <article>?

Edited November 14, 2014 by PavelTkachev

[DivMan]

Неправильно, двух колоночный макет должен выглядеть вот так (это моё мнение) 

<header></header> <nav></nav><main>    <section class="column-one">         <article>             <h1></h1>	     <aside></aside>	</article>	    </section>    <section class="column-two"> 	<article>	     <h1></h1>	     <aside></aside>	</article>	    </section> </main><footer></footer> 

[Sergik+]

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

со временем народ просто забьет на них когда поймет что кроме головняка никакого профита, я во избежаний

разночтений стараюсь по минимуму их использовать.

[PavelTkachev]

 

Неправильно, двух колоночный макет должен выглядеть вот так (это моё мнение) 

<header></header> <nav></nav><main>    <section class="column-one">         <article>             <h1></h1>	     <aside></aside>	</article>	    </section>    <section class="column-two"> 	<article>	     <h1></h1>	     <aside></aside>	</article>	    </section> </main><footer></footer> 

 

Но не будет уникальности в <main>, так как <aside> содержит одинаковые для всех страниц данные.

А зачем <section>?

[DivMan]

почему не будет уникальности, ведь я элемент main написал только 1 раз?

 

section делит сайт на разделы, в данном случае на колонки. 

[PavelTkachev]

Внутри тега <main> должен находится уникальный контент.

 

На два раздела уже разделено двумя <article>. Добавдение <section> что-то даёт?

[DivMan]

artcile не для разделов. 

Да объясните вы ему 

[lexxcode]

То есть правильно для двухколоночной вёрстки

main внутри section мне кажется вообще бредок

 

Но не будет уникальности в

, так как

содержит одинаковые для всех страниц данные. А зачем

?

aside это не обязательно сайдбар. Точнее это вообще скорее всего не сайдбар (если уж кому-то хочется в корень упороться сематикой-шмемантикой)

 

Я бы писал как-то так:

<header></header><nav>    <a href="page-1.html"></a>    <a href="page-2.html"></a>    <a href="page-3.html"></a></nav><main>    <h1></h1>    <p></p>    <p></p>    <p></p>    <h2></h2>    <p></p>    <p></p>    <p></p></main><div class="side">    <nav>        <a href="sub/page-1.html"></a>        <a href="sub/page-2.html"></a>        <a href="sub/page-3.html"></a>    </nav></div><footer>copy</footer>

Если же в сайдбаре находится информация привязанная к контенту, сноска или навигация по конкретному документу, то тогда это скорее всего aside

<header></header><nav>    <a href="page-1.html"></a>    <a href="page-2.html"></a>    <a href="page-3.html"></a></nav><main>    <div>        <h1 id="root-header"></h1>        <p></p>        <p></p>        <p></p>        <h2 id="sub-header"></h2>        <p></p>        <p></p>        <p></p>    </div>    <aside>        <nav>            <a href="#root-header"></a>            <a href="#sub-header"></a>        </nav>    </aside></main><footer>copy</footer>

А если по правде, то я не сильно заморачиваюсь семантикой-шмемантикой в принципе. Если мне нужен сайдбар, я применяю aside. Основную часть документа обхватываю в main. Статьи/комменты/посты отделяю в article. Целые разделы/главы если такие существуют в документе в принципе выделяю в section

 

Если статья имеет явно выраженную шапку и подвал, то как-то так это может выглядеть

<article>    <header>        <h1></h1>    </header>    <p></p>    <p></p>    <p></p>    <footer>        Autor Name | Public Date    </footer></article>

А если еще серьезнее подходить к проблеме, то скажем так... нынче контент лепят ну через такой "коаксиальный проход" что его вообще проблематично как-то внятно идентифицировать. Так что в определенный момент просто забиваешь на это все и просто пишешь так как тебе удобно. вот и все.

[PavelTkachev]

artcile не для разделов. 

Да объясните вы ему 

 

Не для них.

 

А как насчёт <main>? Внутри него должно быть уникальное содержимое.

 

То есть правильно для двухколоночной вёрстки

main внутри section мне кажется вообще бредок

 

 

 

Но не будет уникальности в

 

, так как

содержит одинаковые для всех страниц данные. А зачем

?

aside это не обязательно сайдбар. Точнее это вообще скорее всего не сайдбар (если уж кому-то хочется в корень упороться сематикой-шмемантикой)

 

Я бы писал как-то так:

<header></header><nav>    <a href="page-1.html"></a>    <a href="page-2.html"></a>    <a href="page-3.html"></a></nav><main>    <h1></h1>    <p></p>    <p></p>    <p></p>    <h2></h2>    <p></p>    <p></p>    <p></p></main><div class="side">    <nav>        <a href="sub/page-1.html"></a>        <a href="sub/page-2.html"></a>        <a href="sub/page-3.html"></a>    </nav></div><footer>copy</footer>

Если же в сайдбаре находится информация привязанная к контенту, сноска или навигация по конкретному документу, то тогда это скорее всего aside

<header></header><nav>    <a href="page-1.html"></a>    <a href="page-2.html"></a>    <a href="page-3.html"></a></nav><main>    <div>        <h1 id="root-header"></h1>        <p></p>        <p></p>        <p></p>        <h2 id="sub-header"></h2>        <p></p>        <p></p>        <p></p>    </div>    <aside>        <nav>            <a href="#root-header"></a>            <a href="#sub-header"></a>        </nav>    </aside></main><footer>copy</footer>

А если по правде, то я не сильно заморачиваюсь семантикой-шмемантикой в принципе. Если мне нужен сайдбар, я применяю aside. Основную часть документа обхватываю в main. Статьи/комменты/посты отделяю в article. Целые разделы/главы если такие существуют в документе в принципе выделяю в section

 

Если статья имеет явно выраженную шапку и подвал, то как-то так это может выглядеть

<article>    <header>        <h1></h1>    </header>    <p></p>    <p></p>    <p></p>    <footer>        Autor Name | Public Date    </footer></article>

А если еще серьезнее подходить к проблеме, то скажем так... нынче контент лепят ну через такой "коаксиальный проход" что его вообще проблематично как-то внятно идентифицировать. Так что в определенный момент просто забиваешь на это все и просто пишешь так как тебе удобно. вот и все.

 

 

Вопсрос не о том, как сейчас пишут. А о том, как писать в соответствии с назначениями тегов.

 

Цитирую описание с этого сайта:

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

 

Поэтому <aside> в <main> никак не помещается.

 

Вот у получилось у меня, что основная колонка в двухколоночной вёрстке - это <main>, а боковая панель - <aside>. Но надо же это всё поместить в какой-то общий контейнер. Согласен, что <section> - это плохой вариант. Для шапки есть <header>, для подвала - <footer>. А для центра что?

[Sergik+]

А зачем придумывать для main место ? Если вы считаете что некуда его тут воткнуть то и не используйте его,

я вот не понимаю куда его в большинстве лэндингов пихать.

[Switch74]

думаю в большинстве лэндингов он будет почти как body за исключением header и footer

[PavelTkachev]

Вот и я не понимаю, потому и спрашиваю. Он же есть, значит для чего-то нужен. Я вначале думал, что <main> - это как раз для центра сайта. А узнав о требованиях уникальности перестал понимать что использовать для центра сайта и зачем <main>. Подскажите, пожалуйста.

Напомню простую двухколоночную вёрстку описанной мною выше.

 

<header></header>

<nav></nav>

<section>

<main>

<h1></h1>

<article>

<time></time>

<menu></menu>

</article>

</main>

<aside></aside>

</section>

<footer></footer>

 

Что вместо <section>?

Должен ли быть <h1> внутри <article>?

[lexxcode]

Цитирую описание с этого сайта: Элемент

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

Эту цитату вообще непонятно откуда взяли, если честно. в спеке такого нету http://www.w3.org/TR/2012/WD-html-main-element-20121217/

точнее нечто подобное есть, но это относится к хедерам, футерам и прочему что относится к сайту вцелом, а не к документу конкретно

[PavelTkachev]

Просто если там и навигации не должно быть, что тогда я не понимаю чем он от <article> отличается?

 

 

<header></header>

<nav></nav>

<section>

<main>

<h1></h1>

<time></time>

</main>

<aside></aside>

<menu></menu>

</section>

<footer></footer>

[lexxcode]

Вот и я не понимаю, потому и спрашиваю. Он же есть, значит для чего-то нужен. Я вначале думал, что

- это как раз для центра сайта. А узнав о требованиях уникальности перестал понимать что использовать для центра сайта и зачем. Подскажите, пожалуйста.

 

 

Не знаешь что использовать - используй div

[Sergik+]

думаю в большинстве лэндингов он будет почти как body за исключением header и footer

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

Я вот внутри сектион пользуюсь дивами чтобы не было разночтений.

Edited November 14, 2014 by Sergik+

[Switch74]

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

[PavelTkachev]

 

Цитирую описание с этого сайта: Элемент

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

Эту цитату вообще непонятно откуда взяли, если честно. в спеке такого нету http://www.w3.org/TR/2012/WD-html-main-element-20121217/

точнее нечто подобное есть, но это относится к хедерам, футерам и прочему что относится к сайту вцелом, а не к документу конкретно

 

 

Спасибо за ссылку. Примеры, правда, там все одноколоночные.

 

И вроде как

<header></header>

<nav></nav>

<main>

<article>

<h1></h1>

<time></time>

</article>

<aside></aside>

<menu></menu>

</main>

<footer></footer>

 

Не противоречит тому, что я там прочитал.

[Sergik+]

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

Согласен полностью, все зависит от ситуации.

[PavelTkachev]

 

Вот и я не понимаю, потому и спрашиваю. Он же есть, значит для чего-то нужен. Я вначале думал, что

 

- это как раз для центра сайта. А узнав о требованиях уникальности перестал понимать что использовать для центра сайта и зачем. Подскажите, пожалуйста.

 

 

Не знаешь что использовать - используй div

 

 

 

<div> не имеет эстетического привкуса семантики.

[Sergik+]

 

 

Вот и я не понимаю, потому и спрашиваю. Он же есть, значит для чего-то нужен. Я вначале думал, что

 

- это как раз для центра сайта. А узнав о требованиях уникальности перестал понимать что использовать для центра сайта и зачем. Подскажите, пожалуйста.

 

 

Не знаешь что использовать - используй div

 

 

 

<div> не имеет эстетического привкуса семантики.

 

Есть и другое мнение что излишнее использование новых тегов это тоже не совсем хорошо.