HTML 5.0

[Elendor]

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

HTML 5 позволит веб-мастерам рисовать двухмерные изображения средствами языка, эффективнее вставлять на страницы аудио- и видеоклипы. Кроме того, HTML 5 позволяет разработчикам хранить данные на стороне клиента.

Из новой версии языка предлагается убрать около 15 тегов.

Предыдущая версия языка, HTML 4, вышла десять лет назад, в декабре 1997 года. Работа над HTML 5 ведется с марта 2007 года.

[terminotor]

Нашел вот такую вот историю. http://ru.html5boilerplate.com/ Начинаю юзать. Кто нибудь уже это пробовал? Есть мысли?

[Igor.]

Извините если пишу не в том разделе, пока ещё плохо ориентируюсь на форуме

Прошу разъяснить следующий пример:

Сайт redthreaddesign.ru

Валидатор выдаёт ошибку "Document type does not allow element %1 here" в участке возле />

Правильно понял что это не соответствие с HTML 4.01 Transitional, указанным в начале страницы?

Если так, то зачем верстальщик сделал эту ошибку для валидации, намерено?

[milkeyway]

Приветствую!

Решил переделать интернет-магазин на html5,столкнулся с недопонимаем назначения некоторых новых тегов,ребят,не могли бы вот на примере(см.картинку) разъяснить:возьмем правую колонку("лидеры продаж","новинки" и т.п),эту всю колонку можно(или даже нужно) поместить в тег <aside> или отдельно блоки помещать в этот тег?Как быть с контентом(средняя колонка) там собственно выводятся товары(название товара+картинка+цена+небольшое описание)-помещать в тег <section> каждый товар или оставить все,как есть,т.е на дивах,без <section>?

Как правильно будет:

<nav>
<ul>
<li><a>......</a></li>
<li><a>......</a></li>
<li><a>......</a></li>
</ul>
</nav>

или так:

<nav>
  <div>
<ul>
<li><a>......</a></li>
<li><a>......</a></li>
<li><a>......</a></li>
</ul>
  </div>
</nav>

или и так,и так можно?

зы гуглил,но так и не уловил сути,т.к везде одинаковый текст(копипаст)

Edited April 10, 2012 by milkeyway

[SelenIT]

milkeyway, с этими элементами все поначалу путаются . Есть хорошая схема по их выбору. Я бы сказал, что каждый блок правой колонки — вполне себе aside, а каждый товар вполне достоин своей персональной article.

А div в nav сам по себе не нужен, но может очень выручить на переходный период, если нужна поддержка ископаемых IE (можно всё оформление по старинке навесить на него, не беспокоясь о всяких html5shiv-ах и т.п., а сам nav оставить исключительно для будущих семантических анализаторов).

[NeoXidizer]

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

<nav>
<a>......</a>
<a>......</a>
<a>......</a>
<a>......</a>
</nav>

<aside></aside> = sidebar = <div id="sidebar"></div> Сколько у вас боковых колонок, столько и элементов aside.

Контент посередине можно сделать таким образом

<article>
    <header>
        <h2><a>Название товара</a></h2>
        <small>Дополнительная информация, типа даты добавления(<time datetime="2010-12-08">Март 27, 2012</time>) или категорий, в которых входит товар</small>
    </header>
    <div class="entry">
        <p>Описание товара</p>
    </div>
</article>

не бойтесь использовать обычные <div class="something"></div>, если не уверены, можно ли его заменить html5 элементом. Такое решение нигде не запрещается.

а в самом <aside> блоки можно разделять между собой через <section>

[SelenIT]

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

Есть 4% смысла — старые IE

<aside></aside> = ... = <div id="sidebar"></div>

Неверно с точки зрения структуры документа (document outline) в HTML5. <aside> — это полноценная секция с заголовком, <div> — тупо оформительская обертка.

Контент посередине можно сделать таким образом

Можно и таким, но я исходил из того, что каждый товар в магазине — самостоятельная единица, достойная отдельной позиции в RSS новых поступлений и т.п. Т.е. отдельный <article>.

[NeoXidizer]

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

Есть 4% смысла — старые IE

html5shiv. Согласно русскому http://www.liveinternet.ru/: IE6(0.93%) + IE7(2.5%) + IE8(6.7%) = 10,13%, при этом IE6 остался лишь в коопоративной среде и буквально у единиц пользователей с домашним ПК

<aside></aside> = ... = <div id="sidebar"></div>

Неверно с точки зрения структуры документа (document outline) в HTML5. <aside> — это полноценная секция с заголовком, <div> — тупо оформительская обертка.

я имею ввиду, что aside заменяет собой <div>, отведенный под sidebar

Контент посередине можно сделать таким образом

Можно и таким, но я исходил из того, что каждый товар в магазине — самостоятельная единица, достойная отдельной позиции в RSS новых поступлений и т.п. Т.е. отдельный <article>.

я так и показал, на одной единице товара Edited April 10, 2012 by NeoXidizer

[SelenIT]

html5shiv

Старый добрый див прочнее

aside заменяет собой <div>

Не заменяет, у них разные назначения. Можно, конечно, навесить на <aside> еще и оформление, но вдруг в эту же правую колонку придется добавлять, например, еще один <nav> или какой-нибудь <figure>?

на одной единице товара

Мне казалось, milkeyway спрашивал про их список).

[milkeyway]

SelenIT,Благодарю за советы,придется с переводчиком изучить эту схему и если я правильно все понял,то теперь каждому товару,помещенному в <article> можно помещать название товара в заголовок первого уровня,даже несмотря на то,что их(h1)будет больше 1шт на странице?

upd пока писал сообщение,еще 4 новых появилось) NeoXidizer,так же благодарствую!

зы после ваших сообщений вроде что-то усвоил все же интересно узнать ваше мнение о заголовках,где-то вычитал про h1...,но у NeoXidizer в примере h2

Edited April 10, 2012 by milkeyway

[troll]

Неверно с точки зрения структуры документа (document outline) в HTML5. <aside> — это полноценная секция с заголовком, <div> — тупо оформительская обертка.

Интересная точка зрения. Но зачем тогда в спеке 2 nav'а завернуты в 1 aside?

<aside>
  <!-- this aside contains two sections that are tangentially related
  to the page, namely, links to other blogs, and links to blog posts
  from this blog -->
  <nav>
   <h1>My blogroll</h1>
   <ul>
    <li><a href="http://blog.example.com/">Example Blog</a>
   </ul>
  </nav>
  <nav>
   <h1>Archives</h1>
   <ol reversed>
    <li><a href="/last-post">My last post</a>
    <li><a href="/first-post">My first post</a>
   </ol>
  </nav>
</aside>

Разве не логичнее было бы написать

<aside>
  <nav>
   <h1>My blogroll</h1>
   <ul>
    <li><a href="http://blog.example.com/">Example Blog</a>
   </ul>
  </nav>
</aside>
<aside>
  <nav>
   <h1>Archives</h1>
   <ol reversed>
    <li><a href="/last-post">My last post</a>
    <li><a href="/first-post">My first post</a>
   </ol>
  </nav>
</aside>

Или хотя бы так

<aside>
  <h1>Links</h1>
  <nav>
   <h1>My blogroll</h1>
   <ul>
    <li><a href="http://blog.example.com/">Example Blog</a>
   </ul>
  </nav>
  <nav>
   <h1>Archives</h1>
   <ol reversed>
    <li><a href="/last-post">My last post</a>
    <li><a href="/first-post">My first post</a>
   </ol>
  </nav>
</aside>

[wildhind]

Как правильно будет:

<nav>
<ul>
<li><a>......</a></li>
<li><a>......</a></li>
<li><a>......</a></li>
</ul>
</nav>

или так:

<nav>
  <div>
<ul>
<li><a>......</a></li>
<li><a>......</a></li>
<li><a>......</a></li>
</ul>
  </div>
</nav>

или и так,и так можно?

Правильно так:

<nav>
<a>......</a>
<a>......</a>
<a>......</a>
</nav>

[NeoXidizer]

зачем повторять то, что уже сказали?

[SelenIT]

можно помещать название товара в заголовок первого уровня,даже несмотря на то,что их(h1)будет больше 1шт на странице?

Можно, но не требуется. В HTML5 все заголовки h1-h6 сами по себе равноправны, а их "вес" определяется уровнем вложенности секций. Но поисковики еще могут считать по-старому — единственный h1 главным и т.п. Поскольку для новых парсеров разницы нет, а для старых (у поисковиков) — может быть, вариант с кучей h2 считается надежнее.

Но зачем тогда в спеке 2 nav'а завернуты в 1 aside?

Однозачно не ради оформления . Ну вот так получилось в этом примере — один блок касательно относящейся к статье информации, состоящий из двух навигационных блоков. Что эта "побочная" секция оказалась без заголовка (outliner подпишет ее как "untitled section" или что-то вроде) — видимо, пример призван показать, что иногда такое может быть оправдано (хотя в целом спека советует такого избегать, но этот совет — не догма, всегда надо отталкиваться от здравого смысла). Ситуацию, когда нужно обернуть каждый <nav> в свой <aside> (оба блока — основная навигация, но при этом они несущественны для понимания основного контента?) представить себе можно, но сложно. А вообще есть мнение (причем не абы кого, а одного из авторов HTML5 Boilerplate и html5please.com!), что важность этих семантических нюансов и тонкостей как минимум несколько преувеличена.

Правильно так

Правильно, чтобы внутри <nav> были ссылки . Что эти ссылки окружает — вопрос третий, не связанный с семантикой <nav>, но, возможно, важный для чего-то совсем другого. Минимально достаточный код — правильное решение, но не единственное. Если в этом или похожем проекте уже есть отлаженная пуленепробиваемая менюшка на базе списка, или если один и тот же навигационный блок на одной странице является основной навигацией (<nav>), а на другой нет — не вижу существенных причин переделывать его в минималистский вариант в угоду "семантической чистоте".

[igor3310]

подскажите пожалуйста а как правильно табличную верстку перевести в html5

?

<table>

<tr>

<td>тут шапка</td>

</tr>

<tr>

<td>контент сайта</td>

<td>левый блок меню</td>

</tr>

<tr>

<td>тут футер</td>

</tr>

</table>

[wildhind]

Есть разные способы:

можно сделать copy/paste.

можно на странице со старой вёрсткой сменить доктайп.

а если надо, чтобы по-пацански, то тэгу table нужно добавить атрибут role="presentation"

[igor3310]

А как теги <header> <section> <nav> правильно проставлять ?

и что это за атрибут role="presentation"

[wildhind]

да, правильно.

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

Частая ошибка заключается в том, что используют например <header> для шапки сайта, и не дают ему класса, а в css оформляют просто тэг <header>. Когда же например появляется своя шапка у новостного блока, сами понимаете, что происходит: применяются стили шапки сайта и всё выглядит криво.

role="presentation" — это фактически легализация использования таблиц для раскладки элементов.

[igor3310]

Я в смысле имею ввиду в табличные теги мона вставлять теги html5 как на примере и потом верстку можно гдето проверить?

<table>

<header>

<tr>

<td>тут шапка</td>

</tr>

</header>

<tr>

<article><td>контент сайта</td></article>

<td>левый блок меню</td>

</tr>

<tr>

<td>тут футер</td>

</tr>

</table>

[SelenIT]

НЕЛЬЗЯ! В табличные теги можно вставлять только элементы таблиц. Что-то другое можно вставлять или внутрь <td>, или оставлять снаружи <table>.

Таблица — как котёнок: <table> — шкура, <tbody> — мягкие ткани, <tr> — брюшная полость, <td> — желудок. И только в желудок можно вкладывать разные вкусняшки. А когда живодёры пихают что попало таблице под шкуру или в брюшную полость мимо желудка — ей больно, и от боли она может вести себя непредсказуемо.

[igor3310]

А так можно получается?

А скажите пожалуйста - <asid> можно обвертывать вывод случайных товаров и вывод названия категорий ссылок ? а <article> обвертывать карточку товара?

<table>

<tr>

<td><header>тут шапка</header></td>

</tr>

<tr>

<td><article>контент сайта</article></td>

<td>левый блок меню</td>

</tr>

<tr>

<td>тут футер</td>

</tr>

</table>

[SelenIT]

А так можно получается?

Формально можно, но большого смысла нет. Новые логические теги служат для деления страницы на смысловые секции и построения "плана страницы" (document outline), а в ячейках таблицы они оказываются заперты в отдельные клетки и в общий план не попадают. И оказываются почти бесполезны для анализаторов на базе нового алгоритма.

А скажите пожалуйста - <aside> можно обвертывать вывод случайных товаров

Можно.

и вывод названия категорий ссылок ?

Надо смотреть по ситуации. Возможно, больше подойдет <nav>, а то и <header>.

а <article> обвертывать карточку товара?

Имхо, вполне.

[igor3310]

Спасибо - так это получается лучше всего переверстать с табличной наново и будет смысл новой разметки?

а еще вопросец - там написано что ДОКТАЙП надо на самой первой линии ставить а если у меня самая первая это подключение к БД?

Edited April 28, 2012 by igor3310

[SelenIT]

Спасибо - так это получается лучше всего переверстать с табличной наново и будет смысл новой разметки?

Получается так

а еще вопросец - там написано что ДОКТАЙП надо на самой первой линии ставить а если у меня самая первая это подключение к БД?

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

[igor3310]

а скажите для инет-магазина как лучше товар обарачивать например мона так: ?

<section class='main3'>

<p><a class='tt' href='tovar-%s'>%s</a></p>

<figure><img class='imb3' src='%s' /></figure>

<p class='ppp' >Цена: %s рублей</p>

</section>

тут еще интересно в какой тег завернуть ссылку (название товара) и цену(это для вывода товара в категории)?

И интересно как саму карточку товара (расширеное описание на отдельной странице) обернуть?

там заголовок (название товара) думаю в <hgroup> или лучше в <header>

картинку в <figure>

интересно во что цену и описание?

и все это вввобернуть в </section> bили <article>?

[DarkPrelat]

http://html5test.com/

Забейте. HTML5 уже стандарт. почитайте на сайте css-live.ru, там была статья "главная тайна хтмл5". Почитаете, поймете, что выбора между чем-то и чем-то(как раньше HTML и XHTML) уже нет.