Семантика в HTML5

[Vlad]

Бегло прочитал спецификацию HTML5 касательно семантики, и вот что скажу. Все наши дискуссии, размышления и споры на эту тему сводятся к двум банальным вещам:

1. Элементы надо использовать по их прямому назначению.

2. Роль некоторых тегов не определена чётко и позволяет некоторую трактовку (<aside> тот же).

[psywalker]

Бегло прочитал спецификацию HTML5 касательно семантики, и вот что скажу. Все наши дискуссии, размышления и споры на эту тему сводятся к двум банальным вещам:

1. Элементы надо использовать по их прямому назначению.

2. Роль некоторых тегов не определена чётко и позволяет некоторую трактовку (<aside> тот же).

Ну да, нащупываем почву так сказать, а как иначе, надо же с чего то начинать.

[Vlad]

Не точно выразился. Эти два постулата написаны в спецификации. Более о семантике ничего интересного нет.

[psywalker]

Не точно выразился. Эти два постулата написаны в спецификации. Более о семантике ничего интересного нет.

Ну и что...Я лично эти два пункта вообще не знаю, и мне хотелось бы понять, для чего и где используется тот или иной элемент. Т.е. я хочу так же понимать это, как понимаю, для чего нужен тег <span>, чтобы я знал, что делаю. Хочется побольше примеров, объяснений и прочего.

И вообще начинать всё равно нужно с этого, с азов.

[s0rr0w]

1. Элементы надо использовать по их прямому назначению.

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

[SelenIT]

s0rr0w, а как насчет пустых элементов типа <hr>?

[Vlad]

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

Содержимое то разное, поэтому и элементы тоже. Для табличных данных — таблицы, для списков — всякие <ol>, <ul>.

[swetlana]

в теории всё здорово ибо упоминаются такие конструкции, которые не вызывают ни малейших сомнений.

в реальности же даже насчёт меню бывают споры.

И насчёт форм, в которых иной раз крайне затруднительно обойтись без контейнера.

Или например: лента новостей. Для оформления более чем достаточно ряда ссылок, в каждой из которых будет заголовок, картинка, абзац текста. Но с точки зрения повышения семантичности нужно ли каждую из этих ссылок заворачивать в <li>? Или может двже в <article>?

[Serlutin]

Но с точки зрения повышения семантичности нужно ли каждую из этих ссылок заворачивать в <li>? Или может двже в <article>?

От того, что ссылка будет обвёрнута в <li> семантичности ей это не прибавит. Почему же все меню делают на списках? Всё очень просто, потому что это одно из самых логичных решений. Однако теперь с приходом HTML5, можно просто взять 5 ссылок и завернуть их в <nav>.

<article> же здесь не допустим. Он подразумевает под собой обособленный контент, со своим заголовком и содержанием. Кстати, тоже самое касается и <section>. Кстатик нужно использовать <div> или <section> нужно просто посмотреть на содержание. Если содержимое содержит заголовок значит <section>, если не содержит — <div>

[SelenIT]

<article> же здесь не допустим. Он подразумевает под собой обособленный контент, со своим заголовком и содержанием.

Уже спорное утверждение . Сказано ведь, что

в каждой из которых будет заголовок, картинка, абзац текста.

Заголовок и содержание налицо, в RSS-ридере такой анонс вполне уместен (в т.ч. для бота, собирающего "с миру по нитке" новости на опред. тему). Имхо, <article> годен.

И насчет обязательности заголовка в <article> не соглашусь. Есть, к примеру, множество стихотворений без названия, тем не менее вполне законченных, самостоятельных и обособленных логически

Если содержимое содержит заголовок значит <section>, если не содержит — <div>

Имхо, просто неверно. <section> — логический контейнер, создающий новый раздел в "document outline", div — чисто абстрактное выделение, не несущее смысла (обычно ради оформления). Если есть заголовок, новый раздел в "document outline" неявно создается автоматом, так что как раз в этом случае, если разобраться, разницы-то и нет . Но формально секция может быть и безымянной (тогда браузер должен "сам придумать" дефолтный заголовок).

[swetlana]

<article> же здесь не допустим.

прошу пояснить.

В начальных обучалках как раз списки статей приводят как классический пример применения <article>.

И, в принципе, я тоже нахожу это логичным.

[SelenIT]

...и долгожданный холивор разгорелся! =)))

[swetlana]

…

<section> — логический контейнер, создающий новый раздел в "document outline", div — чисто абстрактное выделение, не несущее смысла (обычно ради оформления).

…

а вот такой пример.

Тоже из реальной жизни, а не из абстрактных измышлений теоретиков.

Интернет-магазин. У него в шапе информация о состоянии корзины.

Это <div> или <section>? или ещё что?

[SelenIT]

Имхо: однозначно не article (корзина в отрыве от магазина бессмысленна) и тем более не nav . Но всё-таки отдельная от основного содержимого (списка/описания товаров) секция, так что не header и не footer (те секции не создают). Раз не часть основного содержимого, значит, не абстрактный section (и тем более не просто div с заголовком). Методом исключения из элементов-секций остается один aside. Корзина явно "tangentially related" к магазину и при этом "could be considered separate" от товаров — вроде, подходит. Итого, мой ответ — aside (причем верхнего уровня, для всей страницы). Рад буду выслушать возражения (эх, люблю холиворы "за семантику"...)

[Shift-Web]

#me Тихо угарает

Edited March 6, 2011 by Shift-Web

[swetlana]

…Корзина явно "tangentially related" к магазину…

да ну?

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

[SelenIT]

Ну так сама страничка магазина (а тем паче ее разметка) тоже является лишь частью функционала всего магазина, виртуальным аналогом витрины (если это список товаров) или прилавка (если подробная карточка товара). И витрина, и прилавок, и касса с кассиром, и склад с грузчиками напрямую относятся к магазину, но довольно касательно — друг к другу... разве нет?

[swetlana]

вообще, всё может быть.

Рассуждения насчёт aside для корзины выглядят достаточно логичными.

[Serlutin]

Уже спорное утверждение . Сказано ведь, что

в каждой из которых будет заголовок, картинка, абзац текста.

Заголовок и содержание налицо, в RSS-ридере такой анонс вполне уместен (в т.ч. для бота, собирающего "с миру по нитке" новости на опред. тему). Имхо, <article> годен.

И насчет обязательности заголовка в <article> не соглашусь. Есть, к примеру, множество стихотворений без названия, тем не менее вполне законченных, самостоятельных и обособленных логически

Упс, извиняюсь. Проглядел на счёт того, что заголовок есть. Я думал просто куча ссылок без всяких иллюстраций. Если есть заголовок, да и ещё картинка (это же можно ещё и <figure> и <figcaption> применить), то <article> логичнее всего.

Стихотворение - это немного другое. Ведь логически мы можем сделать заголовок <h1>Стихотворение</h1>. Хотя даже если и неделать, то да браузер сделает Untitled Article и это будет правильно. Однако, например использовать <section id="wrapper"> для обёртки всего сайта нельзя. Ведь тогда создастся Untitled Section, который например голосовому браузеру совсем не нужен.

Интернет-магазин. У него в шапе информация о состоянии корзины.

Тут надо, кстати, посмотреть, как это всё оформлено. В зависимости от того, насколько это всё объёмно, то можно и <section> вставить.

[s0rr0w]

s0rr0w, а как насчет пустых элементов типа <hr>?

А что не так? Логическим контейнером для отсутствия контента не может быть?

Да, признаю, что мое определение не суперточное и не отражает всех вариантов.

Элемент может выполнять разные функции

* Логический признак (наличие или отсутствие элемента тоже несет информацию)

* Параметризированный логический признак (наличие или отсутствие признака + содержимое различного характера)

* Контейнер для других элементов или контекста.

Содержимое то разное, поэтому и элементы тоже. Для табличных данных — таблицы, для списков — всякие <ol>, <ul>.

Не содержимое определяет логику, а сам элемент.

[SelenIT]

использовать <section id="wrapper"> для обёртки всего сайта нельзя.

Это да. Хотя бы потому, что секция корневого уровня уже есть — body, дублировать ее бессмысленно. Для общей обертки (если без нее совсем уж никак...) старый добрый <div> незаменим.

Не содержимое определяет логику, а сам элемент.

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

[s0rr0w]

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

Картинка как была картинкой, так и останется.

Ни один обрамляющий тег не изменит ее сути.

[Vlad]

Для обёртывания картинок есть <figure>.

[Shift-Web]

>> Для обёртывания картинок есть <figure>.

фуфло

http://www.google.com/support/webmasters/b...p;answer=178636

[swetlana]

Сударь, вы точно ничего не путаете?

По вашей ссылке статья на совершенно другую тему.