Блог на HTML5

16 June, 2009

XHTML/CSS, веб стандарты, Общие

Это было так просто, что я не удержался. Новые таги такие миленькие! ;-)

Доктайп и новые таги

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

  1. <!DOCTYPE html>

Класс, да? =)

В HTML5 ввели несколько структурных тагов, собственно, они — почти единственное, что можно использовать из нового стандарта прямо сейчас. Потому я просто немного переписал HTML для блога, чтобы он стал более понятным.
Самые приятные новые таги будут: <header>,<footer>,<nav>,<article> — говорят сами за себя.

<aside> — вторичный контент, то, что обычно в сайдбаре.

<section> — какой-то смысловой раздел документа.

Собственно переход

Все очень просто, если у меня в коде было:

  1. <!‐‐ BEGIN .hentry ‐‐>
  2. <div class=’hentry’>
  3. content
  4. </div>
  5. <!‐‐ END .hentry ‐‐>

То стало:

  1. <article class=’hentry’>
  2. content
  3. </article>

И комментарии вобщем излишни. Я и класс-то оставляю только ради микроформатов, но по-хорошему они должны будут понимать и сам таг article.
Таким же образом боковая колонка:

  1. <!‐‐ BEGIN .secondary ‐‐>
  2. <div class=’secondary’>
  3. боковая колонка
  4. </div>
  5. <!‐‐ END .secondary ‐‐>

превращается в:

  1. <aside>
  2. боковая колонка
  3. </aside>

И если все показать целиком:

Новые таги

Их же можно увидеть если сделать View Source на этой страничке сейчас.
Есть в этом какая-то красота :).

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

  1. <section role=”maincontent”>

А в CSS:

  1. section[role=maincontent] {
  2. bla:bla;
  3. }

Код почти читается.

Оговорки в использовании

IE по умолчанию не будет давать возможности стилизовать новые таги. Однако, с помощью джаваскрипта его можно заставить (возможно кто-то помнит, как это было с <acronym>):

  1. <!‐‐[if IE]>
  2. <script>
  3. document.createElement(‘header’);
  4. document.createElement(‘footer’);
  5. document.createElement(‘section’);
  6. document.createElement(‘aside’);
  7. document.createElement(‘nav’);
  8. document.createElement(‘article’);
  9. </script>
  10. <![endif]‐‐>

Это все новые таги, которые я использовал для блога.

Вторым нюансом является то, что эти элементы во всех браузерах по умолчанию будут инлайновыми. То есть вам придется написать в CSS что-то вроде:

  1. header, nav, article, footer,section {
  2. display:block;
  3. }

С этим можно жить.

Третий и последний нюанс. Некоторые браузеры (Camino, Firefox2) будут некорректно строить DOM c новыми тагами. Чтобы решить этот вопрос, по злой иронии, вам придется отсылать вашу HTML5 страничку с контент-тайпом application/xhtml+xml. Но я голосую за вариант: «Наплевать».

Сладкое

В HTML5 добавили таги <video> и <audio>:

  1. <video src=’xxx.yyy’ autoplay controls>
  2. <a href=”xxx.yyy”>Download this video (или другой альтернативный контент, если видео на загрузится)</a>
  3. </video>

Вот так выглядят сейчас дефолтовые проигрыватели видео в браузерах:

В Сафари, не очень красивые дефолтовые контролы

В Firefox 3.5b

Opera решила выпустить только одну версию своего браузера поддерживающую <video>. Потому чтобы увидеть видео в действии вам понадобится даунгрейдиться до 9.52. Спасибо @pepelsbey из Оперы за разъяснения ;)
Однако, вот так выглядит там проигрывание видео:

В Opera 9.52, на иконку «Пауза» я навел курсор.

Во всех браузерах контролы исчезают когда курсор не на видео.

Оценивать красоту пока бессмысленно, мы все просто играем с новым понятием. Но я решил что будет интересно посмотреть, как это выглядит сейчас. В любом случае с помощью несложного javascript можно создать свои собственные элементы управления, любого внешнего вида. В этом, собственно, и преимущество того, что видео доверили браузерам.

О том как использовать HTML5-видео уже сейчас читайте дальше.

Ссылки

Не стоит расстраиваться что HTML5 еще не стандарт, и получит статус «Proposed recommendation» лишь в 2022 году. Он уже частично поддерживается браузерами, и большие компании начинают с ним играться. Поиграйтесь и вы. ;)
На самом деле войдет в обиход гораздо раньше, не стоит пугаться 22го года.

Если с переходом на HTML5 что-то поломалось, я буду рад это услышать! Уж больно гладко все. Я даже прошел валидацию.
И, да, это все пока лишь эксперименты. Не для серьезного использования, конечно.

Но, с HTML5 снова стало приятно расставлять таги. Всё как в первый раз. :)

XHTML/CSS, веб стандарты, Общие

112 комментариев к “Блог на HTML5”

Кир | 1. 16 June, 2009

красавчик! :)
а с валидацией что на данный момент?..

Genn | 2. 16 June, 2009

<sarcasm />?

Ghost Bear | 3. 16 June, 2009

Интересный пост. В опере, вроде, все в порядке.

akella | 4. 16 June, 2009

@Кир: валидацию успешно прохожу и вот так ;)

И, кстати Кир, я восхищен вашим подходом к верстке.

@Ghost Bear: Спасибо!

хоть таг <sarcasm> и не ввели, зато есть <ruby>, ROR программистам понравится HTML5

Михаил | 5. 16 June, 2009

Ну так у нас css2 всё ещё в кандидатах ходит))

А вот что касается изначальной инлайновости новых структурных элементов — это бред какой-то. Внутри ведь по-любому будут элементы блочного уровня. Зачем… Нет, даже нафига так делать-то?..

cinic | 6. 17 June, 2009

А я не буду смотреть в другие браузеры, просматриваю в лисе. Просто я начну верстать обновлённый дизайн своего блога на html5. Akella, thnx за “пинок” ;)

akella | 7. 17 June, 2009

@Михаил: я сам удивлялся :) но, возможно причина в том, что эти таги просто не «заведены» в броузерах, а все «выдуманные» по дефолту инлайновые. Вот когда стандарт разовьется, им присвоят какие-то дефолтовые стили.

@cinic: Но все же нужно помнить что стандарт не завершен, и это все экспериментирование и игры :), А так: буду рад увидеть еще один сайт на HTML5 =)

Mike TUMS | 8. 17 June, 2009

Все равно боюсь 22го года…
Однако почитаем-с…

ptico | 9. 17 June, 2009

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

Евгений | 10. 17 June, 2009

>буду рад увидеть еще один сайт на HTML5
Полгода как там, правда из всех нововведений HTML5 пользуюсь только доктайпом и валидностью закрытых тегов <link />б <br /> (их WP вставляет, править его желания нет, а XHTML не моя религия).

pomidorchi | 11. 17 June, 2009

Класс!

Только в Safari Version 4.0 (5530.17) for MacOS у картинок в посте нет левого отступа.

pomidorchi | 12. 17 June, 2009

Упс!
Странно — отправил комментарий и отступ появился…

Сергей | 13. 17 June, 2009

Статья понравилась. Пишите ещё про ваши эксперименты с HTML5. =)

FruJo | 14. 17 June, 2009

Я вот буквально сегодня решил посмотреть проходят ли валидацию сайты разных производителей браузеров. И обалдел от доктайпа увиденного здесь: http://validator.w3.org/check?uri=http://www.apple.com/safari/

А потом зашел сюда и понял, что окончательно отстал :)) Просто я, лично, был на 100% уверен, что HTML5 в потенциальной яме (ну приблезительно как СSS3). Оказалось, что все намного лучше. Буду пытаться пользоваться. Большое спасибо.

P.S. Вот еще в РСС-ах нашел: http://html5gallery.com/ :)

Тим | 15. 17 June, 2009

Спасибо за интересную статью, но “таги” заставляет нервно передёрнуться

empty | 16. 17 June, 2009

Когда же стандарт станет таки стандартом… Ведь с ним всё становится так логично и понятно, эх. Спасибо за наглядную демонстрацию :)
PS. а css3 в полной мере никто не покажет?

DenisX | 17. 17 June, 2009

полная ерунда. это всё лишнее усложнение. тем более сейчас, когда это не стандарт и ие6 правит миром. увы, вероятно, 22 всё-таки придется подождать

Юрко | 18. 17 June, 2009

Так, мені незрозуміло. То то ти переінвентнув інтернет вчора, чи хто? Увесь той галас через якесь «відєо»? Вони років зо десять так і не домовились як встроїти нестандартний контент, а тепер що? Домовляться? Буде вам якийсь «відєо-жаст-фо-інтернет-експлорер» тег, що ви його вимушені будете хакати!

> Тим, щодо вашого транскрипто-нацизма. У слові середня літера читається як æ, тож у звичній для одних, як то англійців. манері воно буде майже через «а», але на зразок «тег», але у інших майже через «е», але на зразок «таг». Я вважаю, що якщо вас тіпає через літеру у вірнонаписаному слові, то вам треба нерви підлікувати, бо це ж не діло.

Юра, ти хоч і фігню пишеш, але не звертай уваги на коментарії не по суті. Щось розвелось багатенько російсько-мовних поборників незрозуміло звідки взятої транскрипції у якості єдиної вірної. Краще напиши щось цікаве вже нарешті, скільки можна? Ти можеш втратити читача!!!

Юрий | 19. 17 June, 2009

Похоже скрипты не помогают в ie . Смотрел в 6,7.
А вообще, очень классно, только еще года 2 как минимум пользоваться этим смысла нет, доля 6го, 7го ie очень велика. :(

akella | 20. 17 June, 2009

Это все прекрасно работает в ИЕ, так что не стоит по этому поводу беспокоиться.
Просто я там кавычку случайно поставил неправильную, и джаваскрипт поломался. Уже все ок. ;-)

CSS3 еще интереснее, может в каком-то посте их вместе совмещу, чтобы увидеть как все красиво будет через 10 лет )

Спасибо за линк FruJo!

@DenisX: а в чем усложнение? Что таги более понятные? или доктайп короче стал? =) И в ИЕ6 оно работает, и на сайте apple оно сейчас работает. Но если внимательно присмотреться, я все равно много раз оговорился что это эксперименты. ;)

Юрий | 21. 17 June, 2009

Теперь, действительно всё ОК. Спасибо! Будем внедрять ;)

cinic | 22. 17 June, 2009

Да я прекрасно понимаю что этот стандарт не завершён. НО экспериментировать надо! Поэтому, постараюсь поскорее ;)

Никита | 23. 17 June, 2009

Юрий, экспериментируй и дальше. Всё это помогает узнать больше о HTML5.

Очевидно, что коммерческие проекты сейчас трогать не надо. На сегодняшний день логика диктует верстать в HTML 4.01

Vitaly Harisov | 24. 17 June, 2009

type=’text/javascript’ можно везде убрать. И type=”text/css” тоже.

Михаил | 25. 17 June, 2009

А вот страница с комментариями валидацию не проходит, но глюк, насколько я понял, правится за минуту:

Line 488, Column 76: Bad value 100% for attribute cols on element textarea: Expected a digit but saw % instead.

…ment” cols=”100%” rows=”10″ tabindex=”5″>

akella | 26. 17 June, 2009

Спасибо Виталий и Михаил! Все поправил и поудалял, теперь еще чище :) Если бы не эти архивы блога за 5 лет, хед был бы еще красивее)

@Никита: согласен, все последние проекты сам верстаю в HTML 4.01 Strict

Сергій В. | 27. 17 June, 2009

Я теж думав, що htm5 це далеке майбутнє, а воно вже зовсім поруч. Дякую за статтю.

cr_ | 28. 17 June, 2009

низнаю, низнаю. я больше приверженец xhtml2, т.к. люблю более строгие правила и хороший код, а не tag soup, который как раз таки породил html4, ибо с xml такого быдлокодинга бы не прошло в массы.

странно что audio, video не внедряет IE, ибо изначально эта штука всё же нацелена на коммерцию, хотя политику умом IE врятли можно понять :)

насчёт стилей новых тегов — изначально браузер их не держит (поэтому у них нет вообще никаких стилей, кроме тегов audio, video) и они никак не описаны и чёрт его знает как DOM себя поведёт, если с ними манипулировать.

на сегодняшний момент гараздо оправдоней внедрение css3, нежели новые теги, которые по сути не так уж нужны

cr_ | 29. 17 June, 2009

кстати, с этим доктайпом IE переходит в quirks mode? если да, то не очень то хорошо..

Vitaly Harisov | 30. 17 June, 2009

Не переходит.

akella | 31. 17 June, 2009

с xml такого быдлокодинга бы не прошло в массы

Вот, я знаю что все это знают, но я должен это произнести. Если бы правила были такими строгими с самого начала, интернет наверное был бы другим, и не уверен что лучше для пользователей ;)
А xhtml вроде бы полумертв (судя по вниманию разработчиков браузеров к нему), да здравствует html5 =)

не Юрко | 32. 17 June, 2009

уж очень режет глаз ТАГ, даже сейчас пишу – “тег” не подчеркивается проверкой орфографии.

через жопу решение, уж извините, лучше 100% поддерживаемый xhtml нежели на 80 html5, потом какой нибудь заказчик на готовом проекте вытрахает весь моск.

Юрко | 33. 17 June, 2009

не Юрко, то мені уся така честь, що на честь мене назвалися? Отак! Якщо ріже очі, то не читайте. Людина зробила нормальну чоловічу транслітерацію, враховуючи транскрипцію. Я, хоч і вважаю, що автор цього блоґу неправий майжу в усьому, навіть цей пост ніякий, але до «таґа» ви даремно причепилися. Я й сам пишу «тег», але це не значить, що людина не може писати інакше.

Знайшли чим хизуватися — спелчекер. Людині, що вказує як писати слова, спелчекер не потрібен!

SelenIT | 34. 17 June, 2009

Юрий, поздравляю с апгрейдом блога и большое спасибо за наглядную демонстрацию работы с новыми экспериментальными тегами! И, если не ошибаюсь, насчет 2022-го народ уже успокоили — CR уже в следующем году?

не Юрко,

лучше 100% поддерживаемый xhtml нежели на 80 html5

Оно-то, может, и лучше, да вот только нет у XHTML 100%-й поддержки браузерами (IE вообще не поддерживает его родной медиа-тип). По факту HTML5 поддерживается лучше, т.к. сам стандарт писан с реальности (парсинг в реальных браузерах, уже сейчас работающие фичи типа autocomplete и т.п.). К тому же HTML5 полностью обратно совместим как с HTML4.01, так и с XHTML1.x, и в этом его сила :).

В общем, ура прогрессу и этому блогу! :)

voland | 35. 17 June, 2009

Классно, и главное это уже работает в Опере

Тормоз | 36. 18 June, 2009

В данный момент невалидно ;) Затея прикольная, но особого смысла нет. А с 2022 – это вообще хохма, конечно. Может быть уже человечества не будет. Планы о html-5 на 2022, надо же.

Кир | 37. 18 June, 2009

@akella:
> И, кстати Кир, я восхищен вашим подходом к верстке.

надеюсь, в хорошем смысле?.. :)

@all
http://www.whatwg.org/specs/web-apps/current-work/#html-vs-xhtml
“When a document is transmitted with an XML MIME type, such as application/xhtml+xml, then it is processed by an XML processor by Web browsers, and treated as an “XHTML5″ document.”

пускай xhtml 2 и на последнем издыхании. черновик, указанный выше, вполне вписывается в мои религиозные воззрения :) фиолетово, xhtml 2, xhtml 5 или boobs 9, лишь бы xml.

любителям нынешнего xhtml и “строгости стандартов” – многие из вас сервят страницы как application/xhtml+xml? грошь цена тому доктайпу, если по конкретному итогу всё равно получаем невалидную html 4 кашу из tag soup, которую к сожалению хавают браузеры.

cr_ | 38. 18 June, 2009

“грошь цена тому доктайпу, если по конкретному итогу всё равно получаем невалидную html 4”
это лишь отголоски html4, ибо изначально в sgml был ахтунг, оттуда всё и пошло, поехало ака “пишу как хочу”. а если делать всё по принципу xml, то как правило проблем не возникает.

akella | 39. 18 June, 2009

@Тормоз: Это wordpress что-то намудрил в комментариях с тагами, оно бы и в xhtml было невалидным, так что это нормально :) Но 2022 ждать не надо уже в следующем году у спецификации будет статус достаточный для нормального внедрения. 2022 формальность, к тому времени уже он никому не будет интересен.

@Кир: конечно в хорошем :) Вы в высшей степени аккуратны.

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

cr_ | 40. 18 June, 2009

дык никто не будет ждать 22 года, css2 вот до сих пор не стандарт, но давно уже стал де-факто (css3 тоже внедряют несколько лет по немногоу), ибо время не ждёт, а развиваться нужно.

“С xml другая проблема: сайты с невалидной версткой вообще не отображаются.”
ну а что мешает сделать правильно? :) почему если в css не закрыть скобку, то он едит, а html всё прощает? да это проще, у каждого есть свой хомяк, каждому есть, что сказать и показать, но основа от этого начинает гнить

akella | 41. 18 June, 2009

css3 тоже еще не стандарт, так же как и html5. Просто дату html5 незаслуженно распиарили, хотя цсс3 будет тоже готов еще нескоро. Так что все это ягоды с одного поля :) Главное что более менее активно браузеры их стали внедрять.

xml строже, но в условиях веба, слишком ресурсоемко контролировать постоянную строгую валидность, при том что в случае ошибки сайт будет недоступен. Неоправданно большая цена, браузеры на это не пойдут. Потому что в первую очередь негатив за это упадет на них: «Мой фаерфокс постоянно ломается на некоторых сайтах». Вот так это будет выглядеть.

Тормоз | 42. 18 June, 2009

Да, к сожалению, именно так. Одно время Opera многим не нравилась именно потому что нормально отображала только правильный код. Причём, 99% пользователей вообще не задумываются о том, кто виноват… да и не должны они думать об этом.

Замкнутый круг выходит?

Правда, Opera и валидный код тогда частенько коряво отображала :)

P.S. Раз уж затронули эту тему, tag soup, валидность и прочее… хочу ещё поругаться на гигантов. Вот почему они не чувствуют своей ответственности? Процент хорошего кода в сети был бы намного выше, если бы Яндекс, Google и тот же Лебедев хоть какое-то внимание обращали на стандарты. На них смотрят, их ставят в пример.

Кир | 43. 18 June, 2009

пускай будут html5 и xhtml5, если xml и mime – полностью осознанный выбор кодера, то в чем может быть проблема? разве что в криворуких программистах, так и наровящих при интеграции всё изуродовать какой-нибудь невалидной фигнёй :)

да, при такой строгости при xml-ошибке вместо сайта будет xml же алерт :) лично для меня это спортивный стимул

Тормоз | 44. 18 June, 2009

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

Кир | 45. 18 June, 2009

отлично понимаю.. :) я всего лишь хотел сказать, что если кодер берётся делать именно правильный xhtml, то это полностью его решение и, конечно же, ответственность. его трудозатраты на обучение программиста “не ломать xml”, его объяснения заказчику и т.д. и т.п.
никто ведь насильно кодить _именно так_ не заставляет, чего вы так набросились на эту тему? :) будет html5, будет счастье, 90% даже знать не будут о всяких application/xhtml+xml.

я просто хочу иметь такую возможность – дело выбора и каких-то личных принципов :)

cr_ | 46. 18 June, 2009

“Раз уж затронули эту тему, tag soup, валидность и прочее… хочу ещё поругаться на гигантов. … На них смотрят, их ставят в пример.”
лебедев же правильно говорил, — “лучший валидатор это браузер”, потому что красивый, или уж тем более семантичный код, вообще никому не нужен кроме того кто чего писал. все видят то, что в браузере. просто изначально пошли поэтому пути, вот собственно и имеем то, что имеем.

насчёт xml и всяких жёлтых “экранов смерти”. есть масса xml-форматов, например, тот же RSS. и почему-то с момента появления он активно пошёл в массы даже не смотря на свой “строгий синтаксис”. все пользуются и все счастливы. куча сервисов которые парсят тысячи rss-каналов и не знают бед, а вот попробуйте пропарсить среднестатистическую html-страницу (так сказать, почувствуй себя браузером), от части это и побудило к появлению подобного формата.

Тормоз | 47. 18 June, 2009

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

Попробую объяснить… Может быть я идеалист, конечно, но неужели вам безразлична эта чудовищная энтропия? Вы хотя бы приблизительно представляете масштабы “бедствия”?

потому что красивый, или уж тем более семантичный код, вообще никому не нужен кроме того кто чего писал

Красивый и семантичный код нужен всем разработчикам, просто это понимают не многие. Дело в том, что суммарные затраты ресурсов (времени и усилий) на поддержку (да и создание, даже прежде всего создание) изначально правильного кода и кода “под браузеры” отличаются на порядки. Суть и задумка именно в этом, а не в самоудовлетворении техноэстетов.

cr_ | 48. 19 June, 2009

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

я же не призываю всех на xml преходить, вовсе нет. благо мы может управлять контентом и способом его выдачи (content-type). просто, именно ужесточение ведёт к стандартизации и отсеивания более менее качественного кода от супового набора :) неужели так сложно закрыть тег, да взять всё в кавычки? ведь алерт говорит именно о вашей ошибке в коде, который “идеален” в html :)

SelenIT | 49. 19 June, 2009

@cr_

именно упрощение правил и приводит к обратному

Так упрощение — это как раз-таки XML: закрытие элемента — только одноименный закрывающий тег и баста, в отличие от HTML, где P, например, корректно закрывается при открытии любого блочного тега. При этом XML-веллформность (нарушения которой караются желтым экраном смерти) и собственно XHTML-ная валидность (отвечающая за корректность DOM) связаны постольку-поскольку. В итоге в XHTML ленивый верстальщик может запросто напихать в строчный контейнер кучу блочных элементов, и браузеру (он же не валидатор!) придется как-то с этим жить. Тогда как в HTML этого не допустит уже парсер (по крайней мере в идеале) — хотя и ценой собственной тяжеловесности. Но что важнее для надежности работы сайта?

А что касается “можно таблицами” — так ведь до сих пор действительно было можно, при правильном закрытии тегов это валидно (не противоречит формальной грамматике) и в HTML4-, и в XHTML1.x. А вот формальная грамматика HTML5 (она намного сложнее и “умнее”, чем “старые добрые” DTD), по идее, как раз выдаст на это ворнинг — независимо от синтаксиса сериализации…

cinic | 50. 22 June, 2009

@Akella, слушай а принцип использования article & section.

То-есть вложенность первого во второе и наоборот, чем ты руководствовался? У меня с англицким не очень классно, так что чтение спецификации особо не порадовало меня.

Kildor | 51. 23 June, 2009

По поводу XML и недоступности контента, была у меня история:
Сделал сайт, валидный, иксхтмльный, с правильными контент-типами, рабочий везде. Выложил, пошли валом отзывы о нерабочести сайта в фоксах/операх.
Полез разбираться, выяснил что у многих стоял аутпост (любящий заменять всё подряд на [AD]), а кто-то сидел за проксями, режущими всё подряд. И всё, кончились мои эксперементы, потому как содержимое я изменить никак не мог, а резалось именно оно.

akella | 52. 24 June, 2009

@cinic: Вот тут пример глянь и все думаю станет ясно

Лёша | 53. 27 June, 2009

А для каких браузеров это работает? У меня в Seamonkey всё перекорёжило, некоторый текст нельзя прочитать.

cinic | 54. 27 June, 2009

Thanks ;)

akella | 55. 2 July, 2009

@Лёша Работает во всех браузерах, кроме тех, что на движе старого Фаерфокса, в новом seamonkey уже будет работать. А в старом чтобы работало нужно отсылать с контент-тайпом application/xhtml+xml

bisserof | 56. 3 July, 2009

Уважаемые, разъясните пожалуйста, стоит ли уже сейчас внедрять доступные возможности HTML5?
PS – среди ярой переписки к сожалению ничего толком понять не смог :(

Тормоз | 57. 6 July, 2009

Увлёкся, читаю сейчас статьи про HTML 5 в процессе создания своего первого сайта на HTML 5. Вызывает недоумение, почему разработчики не включили замечательные особенности реализации XHTML 2. Например, href для любого элемента. Те же меню навигации в XHTML 2 получились бы на порядок элегантнее.

А HTML 5 раздувает код, так получается.

Тормоз | 58. 6 July, 2009

Ух ты. Три дня назад, оказывается, объявили, что на XHTML 2 уже можно поставить крест – http://zigzag.habrahabr.ru/blog/63470/ Ну и ладно :)

Тормоз | 59. 6 July, 2009

Сделал небольшой дайджест информации о HTML 5 – http://brokenbrake.biz/2009/07/06/future

P.S. Akella, извини, заспамил тебе всё :)

akella | 60. 6 July, 2009

@bisserof: Можно начать с простого: доктайп. А если сайт не какой-то очень-очень важный, то и таги новые можно уже использовать.

@Тормоз: ну прям выдающийся ;) Вот кстати слова самого Зельдмана про XHTML2 и HTML5. Еще на Design For Masters тоже HTML5, просто без новых тагов, а пока через классы class="section" и т.д. (правильно же я говорю Евгений?).

Тормоз | 61. 6 July, 2009

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

Кстати, вчера осознал всю ущербность вложенных section. Для роботов чудесное решение, а для человека?

akella | 62. 6 July, 2009

Ну в идеале-то использование человеком section сведется к тому, что роботы их будут парсить и производить из них какую-то полезную информацию для человека. Как и микроформаты — они же для роботов скорее, чем для человека.

Или ты про верстальщиков?

cr_ | 63. 6 July, 2009

в чем же ущербность section? по сути тот же див, только теперь уже для более “семантичной” верстки надо подходить пологичнее, чем просто дивов наляпать, хотя можно и просто наляпать :)
сам уже с две недели всё делаю на хтмл5, вполне неплохо.

2akella, кстати, в связи с обновкой Fx и долгожданной поддержкой font-face, шрифт Myriad Pro смотрится как-то мелко, чуть ли не в кашу :/

akella | 64. 6 July, 2009

@cr_: дело скорее в том что мой хак, стал действовать не только для Сафари, фонт-фейс я не использую. Да и не нужен он вроде тут.

Ну когда же уже винда научится нормально отображать Myriad?! =( Это какой-то заговор.

Тормоз | 65. 6 July, 2009

Нет, это не тот же div. И я вроде бы и не про верстальщиков, т. к. непосредственно содержанием теперь в большинстве случаев управляют из CMS, верно? Авторы материалов обычно не имеют представления о HTML, да и не нужно им это.

Akella, у тебя WP, я не знаю как там точно устроено, но наверняка ты же не расставлял вручную абзацы, они генерировались автоматически. А как генерировать вложенные section, на основе чего? Как это сделать удобным?

У меня TextPattern, там внутри Textile, довольно удобная штука. Но это я просто для примера, мне так проще. Пишу я статью с подзаголовками. Как сейчас?


h2. Первый подзаголовок

текст текст

h3. Подзаголовок третьего уровня

снова текст текст

h2. Второй подзаголовок статьи

текст

Я к тому, что использование h1-h6 мне видится вполне логичным и при этом очень лёгким и для обработки и для генерации любых оглавлений.

Кто будет мучаться с section? Чтобы использовать их по задумке разработчиков, вышеприведённый пример должен быть таким:


(section)
h1. Первый подзаголовок

текст текст

(section)
h1. Подзаголовок третьего уровня

снова текст текст
(/section)(/section)
(section)
h1. Второй подзаголовок статьи

текст
(/section)

Кому это кажется удобным?

P.S. Угловые скобки заменил на обычные, чтобы их не съел парсер комментариев.

akella | 66. 6 July, 2009

Они и сами насколько я знаю спорят об этом(точнее почти обо всем =) ), я думаю в том, что касается самого контента: секшнов и не должно быть, они скорее разделения более высокого уровня, и не должны генерироваться пользователем. Заголовочной структуры для контента вполне же хватает.

Section же предполагает что внутри него может быть хедер, футер, и создается, насколько я понимаю, для “ответвления” заголовочной структуры. То есть если хватает h1-h6 (а для обычного ввода пользователя, или поста их хватает) то он и не так нужен. А если уж ты захочешь в посте сделать “подраздел”, то можно просто выделить блок текста с заголовками и нажать кнопку section (когда таковая будет в визуальном редакторе)

Вот смотри как они на w3c описывают:

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, contact information.

Тормоз | 67. 6 July, 2009

News items маленько развеяли туман в моей голове.

А ещё я не понимаю, почему практически во всех примерах внутри новых тегов ставят старые. И у тебя… вот почему внутри footer стоит ещё и p, зачем он там?

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

Опять же не ясно, зачем надо было их внедрять? Использовали бы классы footer, nav и т.п. Много неясного, сумятица какая-то.

akella | 68. 6 July, 2009

Насчет новых тагов думаю дело скорее в том, что они посмотрели на статистику использования классов, и решили ввести новые семантические элементы. Все эти header footer nav section article на самом деле просто входят в топ используемых классов.
Ну, упростить чтобы, что ли.

Тормоз | 69. 6 July, 2009

Нет, блочные они планируются – http://www.w3.org/TR/html5/the-xhtml-syntax.html#display-types
Тогда тем более непонятно, зачем внутри ещё дополнительные p. В общем, в сравнении с нынешними стандартами код раздувается, это не очень приятно.

Тормоз | 70. 6 July, 2009

Так ведь это не упрощает, а наоборот усложняет. И появляются проблемы с обратной совместимостью. Впрочем, глупо тут об этом спорить, конечно. “Там” надо доказывать, а у меня английский ниже плинтуса. Получается, будем есть, что дадут :)

akella | 71. 6 July, 2009

Почему усложняет? Там где эти элементы не были нужны, их и не нужно, можно обойтись классом или другим тагом, а там где они явно выражены и их роль играют всякие div class=”header”, почему бы и не использовать новый таг? Тогда напротив сокращаются лишние классы, и все более читабельней. У меня на блоге кода, например, стало меньше.
А обратная совместимость почему? Все старые таги ведь работают как и раньше. Просто еще и новые.

Вот кстати статистика по классам.

Тормоз | 72. 6 July, 2009

Ты прав. Это я всё под впечатлением section был, похоже, мозги уже не соображают :)

cr_ | 73. 7 July, 2009

2akella: странно, до 3.5 был ариал, хотя шрифты новые не ставил. а что там за хак такой был?

2Тормоз: что-то мне подсказывает, что вы сами всё усложняете. сделаете как вам удобно или как вам кажется правильней, зачем так замарачиваться.

akella | 74. 7 July, 2009

Вот из этого поста, я использовал 5й способ, а рабочий на данный момент только 4й, я там апдейт написал.

Просто 3й фаерфокс не читал тот хак, а Мириад у тебя видимо был уже давно. А тут вышел новый 3.5, прочел мой хак и подключил Мириад.

Лёша | 75. 7 July, 2009

Так на новом движке Симанка пока только в альфатестировании, вроде

Sam | 76. 12 July, 2009

По идее aside применить к сайдбару будет неправильно т.к. отношения к статье он не имеет. Тут более уместен nav.

Тормоз | 77. 14 July, 2009

Да. Думаю, в aside будет логично помещать тэги (категории, метки, etc).

akella | 78. 14 July, 2009

Думаю он подходит для тех целей о которых говорите вы, так же как и для моих, вот как описывает его w3c

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

То есть не “относящегося” а “касающегося”, а последние 5 постов вполне касаются любого поста на этом блоге =) Как и полезные ссылки. Твиты разве что под сомнением – но я не склонен выдумывать сложности на ровном месте, все должно быть просто.

Solo | 79. 24 July, 2009

Открыл для себя ваш блог. Он чудесен)

Andrey Superstar | 80. 29 July, 2009

Akella, вы можете объяснить как вы так сделали, что при открытии вашего сайта в IE, Java уже включён?

У меня всё время появляется подсказка, хотите ли вы, мол, ключить.

Кир | 81. 29 July, 2009

паба-а-а-ам..
http://media2.smashingmagazine.com/wp-content/uploads/images/xhtml2-html5/comic-960px.jpg

Seleckis.lv :: журнал Никиты Селецкого » » Всемирная HTML 5 истерия | 82. 25 August, 2009

[…] Я не знаю, об этом просто сейчас модно писать или народ действительно в восторге? На самом деле, я бы с […]

Pavlusya | 83. 28 August, 2009

Жаль, очень люблю оперовские браузеры. Может обратиться в оперу, чтобы она включала поддержку во все последующие? А то какая то не полноценная получается опера, не так ли?

Антон | 84. 30 August, 2009

http://dl.getdropbox.com/u/157567/cssing.PNG

Антон | 85. 30 August, 2009

Ах, да. Хром версии 2

akella | 86. 30 August, 2009

Спасибо! Но это явно что-то с русским мириадом у вас, а не с ХТМЛ5. Попробую отменить мириад для всех тогда уж

Антон | 87. 30 August, 2009

Понятно, что не в ХТМЛ5. Видимо, так сошлись звезды, потому что все остальное показывает текст корректно, в том числе и третий хром на другой машине.

yuriy | 88. 3 September, 2009

В гугловском хроме это работает? (Там даже обычное форматирование таблицей как-то по другому отображается, потому и справшиваю)

tarasyk | 89. 26 September, 2009

искал в яндексе про хтмл5 нашел вас :) Спасибо прояснили немного ситуацию, для реферата информация пригодиться

Anton | 90. 26 September, 2009

Если кого-то интересует HTML 5 в серьез:
http://htmlmaster.ru
Материала еще мало, но, например, того, что в справочнике, на русском больше нигде нет.

Roman | 91. 21 October, 2009

Хм, теги конечно интересные. Надо будет попробовать с ними пошаманить.

Роман | 92. 24 October, 2009

Скажите, а почему сейчас все логотип тегом не добавляют?

akella | 93. 24 October, 2009

Наверное это все же не так сильно распространено, чаще есть header внутри которого или лого, или название сайта текстом или еще что-то. Я лично для лого часто использую заголовочный таг.

А может просто пока не приходило обсуждающим в голову =) или далеко не самая приоритетная идея, что ли. Можно спросить у них напрямую в этой рассылке

Рюмкин | 94. 25 October, 2009

Даже с выходом FF 3.5 в стилях по-умолчанию не появилось html-5 тегов.

Anton | 95. 26 October, 2009

Роман, я не понял, что Вы говорите про header.
Рюмкин, Вас тоже, что-то Вы путаете впринципе. В стилях тегов никак быть не может, да еще и по умолчанию? Или Вы про стилевые теги? Так зачем они новые?
Их достаточно и так, чтобы при отключенных стилях страница отображалась упорядочено.

akella | 96. 26 October, 2009

Думаю они имеют ввиду то, что по дефолту таги header,footer и прочие сейчас имеют стиль display:inline;, что плохо сочетается с актуальной спецификацией. И в новых браузерах это до сих пор не изменилось.

Anton | 97. 6 November, 2009

Да тоже это пришлось не по вкусу.
В любом случае чаще их как блочными прийдется использовать.
На днях в WHATWG буду писать по одному вопросу и это прихвачу.

Anton | 98. 23 November, 2009

Вышел 3-ий урок.
Бескопромиссное освещение article и section, и всего с ними прилагающегося.

кос | 99. 23 November, 2009

А чего это див с id=”header” ты оставил, если уж ты решил заменить его на ? смотрится не очень рационально. Либо одно, либо другое.

кос | 100. 23 November, 2009

*на тег header (вырезал, нехороший)

akella | 101. 23 November, 2009

Да, кажется для каких-то стилей было удобнее, и еще что-то связанное с тем что header не мог быть ребенком у body, из-за корявой пока еще спецификации html5. Header это мол не header, а footer тоже не футер, а aside это вам не сайдбар :) Через год они все исправятся или все их будут считать идиотами еще лет десять. ;-)

Антон | 102. 28 February, 2010

Akella пишет: “было бы правильно если header не мог быть ребенком у body”
Аkellа, body – тело документа, а не тело каких-то частей документа. Если это принять во внимание все становится на свои места. А вот тега contenter’a, что нет, это да.

Теперь по поводу того, что все новые теги имеют по дефолту уровень и, сответственно, воспроизведение: inline. Просто вопрос с тем “какой уровень кому назначить” отложен разработчиками “на потом”. Во всяком случае я рекомендую “блочить” все теги, что имеют formatCandidate: block в самом начале стилевого файла. Есть все основания пологать, что они в финалке будут блочными.

Пользуясь случаем, рад сообщить, что вышло несколько новых уроков, в том числе про множественные колонки(мульти-колонки).
В оригинале называемые multiple-columns / multi-columns — что при переводе означает одно и тоже.

akella | 103. 28 February, 2010

Не:

было бы правильно если header не мог быть ребенком у body

а

сейчас header не может быть ребенком у body

Тут мы опять возвращаемся к идиотизму создателей стандарта что sidebar это у нас не сайдбар, а header это у нас вроде как не хедер, а “далее следует пространное непрактичное определение термина”

Антон | 104. 1 March, 2010

“сейчас header не может быть ребенком у body”
Посмотри, напр. мой сайт, header ребенок у body, проходит валидацию.
Или про что ты?

akella | 105. 1 March, 2010

Значит что-то уже изменили, на момент верстки сайта не пропускал валидатор такое

Антон | 106. 2 March, 2010

Ясно

HTML5 – работает уже сегодня « faqALL | 107. 11 April, 2010

[…] Источник http://cssing.org.ua/2009/06/16/html5-wordpress/ […]

Scriptin | 108. 15 May, 2010

Я вот тоже решил написать небольшой обзор проблем внедрения HTML5 – может, кому полезно будет. Информация актуальна на май 2010.

Avastor | 109. 21 July, 2010

Посмотрите внимательно здесь http://tinyurl.com/2cvl7y8

Дмитрий | 110. 21 October, 2010

Небольшой сайтик на HTML 5, необычный )))

Дмитрий | 111. 21 October, 2010

http://www.qlider.ru
Что скажите? сайт на html 5 мне очень понравился !

Дмитрий | 112. 3 August, 2011

Уроки анимации на HTML5 http://dmitry-samohin.ru/programming/html5/da-vertel-ya-vse-na-html5

Оставить комментарий