Ещё раз о section

[ifooly]

Всем доброго дня? Вечера? Ночи?

 

Не раз видел вот такое, да и сам так верстаю: 

<section id="block">   <div class="conteiner">     <h1>Тра-ля-ля</h1>   </div></section>

#block {   width: 100%;}.conteiner {   margin: 0 auto;   width: 1000px;}

И при построении дерева документа выбивает untitled section. Собственно, возникает резонный вопрос:"может делать всё с точностью да наоборот":

<div id="block">   <section class="conteiner">      <h1>j;j;jl</h1>   </section></div>

Тогда, вроде, все должны быть  довольны. Вот как-то так. Только правильно ли это?

[npofopr]

И при построении дерева документа выбивает untitled section

А что это такое?

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

[Libiros]

 

 

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

Это из спецификации.

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

 

Исходя из спецификации, ты верстаешь неправильно.

[Zverushka]

Конечно неверно. Секшин это осмысленный элемент. Где в ля-ля-ля осмысленность? Секшин - это как большая глава книги или раздел газеты (экстраполируем этот опыт на сайт). Например. в качестве него может выступать большая секция сайта с блоком последних отзывов или горячих новостей или ряда статей на разные тематики - тематика культуры, политики итп. И да - тег меняет outline (оглавление) сайта. В идеале внутри секшина должен идти соотвествующий для него заголовок. например, Новости культуры.

[ifooly]

Я так понял, второй вариант правильный. Так и думалось, просто с толку сбило, видел на многих сайтах, причём многие из них были забугорной природы. Всем спасибо за просвещение.

[Zverushka]

Там неясно какой правильный - все зависит от контекста. Могут быть оба неправильны и оба правильны.

[ifooly]

Там неясно какой правильный - все зависит от контекста. Могут быть оба неправильны и оба правильны.

Окей, тогда остановимся подробнее. Блок с id=" block", просто блок, тянущийся на ширину всей страницы, внутри него блок .conteiner, в котором будет располагаться контент, отцентрированный по середине страницы. Т.е. #block используется только для оформления, весь контент содержится в .conteiner.  

[Zverushka]

Пока section совсем не нужен - из хтмл5 тегов можно поставить тег main (по идее это тег для основного содержимого) вместо .containter или #block

Edited December 7, 2013 by Zverushka

[Libiros]

Там неясно какой правильный - все зависит от контекста. Могут быть оба неправильны и оба правильны.

Я бы сказал иначе...

 

Там ясно, что первый вариант неправильный.

А второй вариант зависит от ситуации.

 

Тег section группирует осмысленный контент.

Для неосмысленного можно использовать figure. Может быть, даже не нужен будет figcaption.

 

Но именно для группировки.

[Zverushka]

Почему это первый неправильный? Ведь внутри него все тот же контент, как и во втором случае - ничего не изменилось.

[Libiros]

Почему это первый неправильный? Ведь внутри него все тот же контент, как и во втором случае - ничего не изменилось.

Я напомню, это был первый вариант

 

<section id="block">

<div class="conteiner">

<h1>Тра-ля-ля</h1>

</div>

</section>

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

[SelenIT]

<div> по определению не влияет и не может влиять на document outline (и вообще на семантику), поэтому для outliner-а оба варианта эквивалентны. В обоих случаях h1 рассматривается как заголовок секции. А "Untitled Section", скорее всего, генерируется где-то выше (возможно — для body, если у него нет главного заголовка, не обернутого ни в какой section/article/etc.).

 

Другое дело, что сама outline находится под риском удаления из спецификации, и многие анализаторы по-прежнему строят логическую структуру страницы по старинке, по иерархии заголовков h1/h2/.../hn. Кроме того, поскольку любой заголовок неявно начинает новую секцию, а для section теперь (в версии HTML5.1) заголовок обязателен, встает резонный вопрос, а зачем тогда, собственно, нужен сам section...

[Zverushka]

Кстати, что-то я ничего не понимаю.

<section>  <h2>About me</h2>  </section> 

выдает неименованую секцию - почему? http://gsnedders.html5.org/outliner/

 

 

Другое дело, что сама outline находится под риском удаления из спецификации, и многие анализаторы по-прежнему строят логическую структуру страницы по старинке, по иерархии заголовков h1/h2/.../hn. Кроме того, поскольку любой заголовок неявно начинает новую секцию, а для section теперь (в версии HTML5.1) заголовок обязателен, встает резонный вопрос, а зачем тогда, собственно, нужен сам section... 

Боже какая путаница. Видимо изначально затачивалось под новый стиль, когда каждой статье и секции задавал h1 заголовок, потом h2-h3 - тогда оутлайн был прозрачным. Теперь этот стиль решили не использовать и в итоге с оутлайн документа пошла путаница.

Edited December 7, 2013 by Zverushka

[SelenIT]

Нужно, чтобы внутри секшина был заголовок сразу

 

Кому нужно? Пруфлинк в студию

 

 

 

выдает неименованую секцию - почему?

 

А такое

<h1>This is the root section</h1><section>  <h2>About me</h2>  </section> 

не выдает

[Zverushka]

Кому нужно? Пруфлинк в студию

Бес попутал, все время считала, что не нужно. Мне говорят нужно - иду проверяю  - а там антитлед секшин. Ну думаю, и правда обертка все портит ... В общем ошиблась дважды... 

 

Не знаю почему. Мне выдает.

  <h2>About me</h2>  

1. About me

<section>  <h2>About me</h2>  </section>

1.Untitled Section1.1 About me

То есть отсуствие h1 на странице ошибка? А если в дизайне он не нарисован - по идее тег надо все равно вставить и скрыть его?

Edited December 7, 2013 by Zverushka

[SelenIT]

ошиблась дважды

В программах это называется четной ошибкой и ошибкой не является

 

изначально затачивалось под новый стиль, когда каждой статье и секции задавал h1 заголовок

Путаницы не было только в старом добром HTML 4, где вложенность секций однозначно определялась уровнем заголовка. В HTML5 с самого начала, с введения сразу трех механизмов — sectioning content'а, sectioning root-ов и неявного создания секций заголовками — стало ясно, что ясно будет нескоро. Вероятно, поэтому эта outline до сих пор и под риском.

[sergik74]

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

Как пример иерархии видел вот так: 

Секция - контейнер-роу-спан(блок)

Для роботов соотвественно секции расставлял по id и в css просто порядок id выше нужным ставил...

Я правда...самоучка ))) Мож чо не так делал?))) 

[SelenIT]

Секция — логическая группировка по смыслу. Если контейнер-роу-что-то, то это, скорее всего, визуальная группировка, т.е. div.

[Ludwig Voltman]

А вот чего до сих пор не понял:

обязателен ли для структурных элементов заголовок? В примерах везде его вставляют. А вот если его нет?

Пример из макета - новостная лента:

<section class="news"><h1>Новости</h1><article><time>11.11.12</time><a>Сегодня что-то там случилось</a></article><article><time>11.11.12</time><a>Сегодня что-то там случилось</a></article><article><time>11.11.12</time><a>Сегодня что-то там случилось</a></article></section>

Как тут быть? Так что ли извращаться?

<article><time>11.11.12</time><a><h1>Сегодня что-то там случилось</h1></a></article>

Или ну его нафиг этот заголовок?

Edited December 11, 2013 by Ludwig Voltman

[Zverushka]

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

Edited December 11, 2013 by Zverushka