ФорумРазработкаКлиентская сторонаВерстка и оформление → HTML 5 Working Draft

HTML 5 Working Draft

  • Timur

    Сообщения: 1068 Репутация: N Группа: Джедаи

    Spritz 28 января 2008 г. 19:27

    [size=20pt]HTML 5[/size]
    [size=15pt][tt]<!DOCTYPE html>[/tt][/size]

    22 января на w3.org был опубликован черновик (working draft) новой спецификации HTML 5.

    Tim Berners-Lee, автор первой версии языка и глава консорциума:
    HTML is of course a very important standard. I am glad to see that the community of developers, including browser vendors, is working together to create the best possible path for the Web.



    Синтаксис языка в значительной степени совместим как с HTML 4, так и c XHTML 1. Похоже, что религиозные войны между сторонниками разных стандартов скоро станут неактуальными :)



    [size=15pt]Новые элементы:[/size]
    Очень много новых тегов. При чем, сделан огромный шаг в сторону семантики кода. Кроме того, что введены новые элементы, многим старым и редко используемым элементам (dt, dd, legend) придано новое значение.

    [tt]section[/tt] - секция (раздел) документа. Может использоваться вместе с элементами h1-h6 для построения структуры документа

    [tt]article[/tt] - независимый фрагмент содержимого документа

    [tt]aside[/tt] - фрагмент содержимого, лишь незначительно связаный с остальным контентом

    [tt]header[/tt] - заголовок секции

    [tt]footer[/tt] - "подвал" (колонтитул), информация об авторе, copyright.

    [tt]nav[/tt] - секция для навигации (меню)

    [tt]dialog[/tt] - раздел для диалога (интервью, можно сказать). Внутри используются элементы, ранее служившие только для списка определений ([tt]dl[/tt]) - вопросы помещаются в [tt]dt[/tt], ответы - [tt]dd[/tt].

    [tt]figure[/tt] - подписи для медиа-содержания (видео, картинки и т.п.). Т.е. медиа-элемент помещается в [tt]figure[/tt], туда же помещается подпись, заключенная в [tt]legend[/tt]

    [tt]audio[/tt] и [tt]video[/tt] - да, да… время текстовых браузеров давно прошло :) Мультимедиа-теги включают пачку атрибутов ([tt]src[/tt], [tt]autoplay[/tt], [tt]start[/tt], [tt]loopstart[/tt], [tt]loopend[/tt], [tt]end[/tt], [tt]playcount[/tt], [tt]controls[/tt]) позволяющих контролировать их содержимое

    [tt]embed[/tt] - а раньше использовать этот тег не рекомендовалось :) Предназначен, если кто не знает для внедрения объектов для различных плагинов браузера (Flash в частности)

    [tt]m[/tt] - некая "отметка" в тексте, т.е. отмеченный или "подсвеченый" текст. Не совсем понятен смысл элемента и похоже не одному мне - в спецификации сказано что "данный раздел может быть изменён или удалён". Так что будем ждать…

    [tt]meter[/tt] - обозначение каких-либо размеров. Интересен набор специальных атрибутов: [tt]value[/tt], [tt]min[/tt], [tt]low[/tt], [tt]high[/tt], [tt]max[/tt], [tt]optimum[/tt], без которых, кстати, использовать его не рекомендовано.

    [tt]time[/tt] - дата и время. Вот такой пример использования:
    <time datetime="2008-01-01">С новым годом!</time>


    [tt]canvas[/tt] - холст для рисования растровой графики. Пока описана (и приведён пример) создания двумерных изображений, но в будущих версиях спецификации планируется описание 3d-графики. Описаны DOM-интерфейсы, включающие методы для работы с различными геометрическими фигурами, цветами, стилями, прозрачностью, тенями, градиентами для 2d-контекста.

    [tt]command[/tt] - некая "комманда". Может быть трех типов (атрибут [tt]type[/tt]):  "[tt]command[/tt]", "[tt]checkbox[/tt]", or "[tt]radio[/tt]". Примеров в этом разделе документа пока нет, поэтому обойдусь без лишних предположений.

    [tt]datagrid[/tt] - интерактивное, представление данных ввиде таблицы или дерева. За подробностями туда же.

    [tt]details[/tt] - некая более подробная (детальная) информация, которая может быть предоставлена пользователю.

    [tt]datalist[/tt] - комбобокс. Пример из документа:
    <input list=browsers>
    <datalist id=browsers>
    <option value="Safari">
    <option value="Internet Explorer">
    <option value="Opera">
    <option value="Firefox">
    </datalist>


    [tt]datatemplate[/tt] - обозначает некий "шаблон данных". Контекст использования: корень XML-документа, мета-данные. Содержит элементы [tt]rule[/tt]

    [tt]rule[/tt] и [tt]nest[/tt] - некие правила для шаблона данных [tt]datatemplate[/tt]

    [tt]event-source[/tt] - перехват событий при работе с сервером

    [tt]output[/tt] (WF2) - вспомогательный элемент формы, используемый для вывода. Подробнее...

    [tt]progress[/tt] - прогресс-бар обозначающий состояние процесса загрузки данных.

    Кроме того претерпели изменения элементы: [tt]a, address, b, hr, i, label, menu, small, strong.[/tt]
    Убраны элементы (т.к. на дворе 21 век и CSS3 на носу): [tt]basefont, big, center, font, s, strike, tt, u.[/tt] Вообщем тех, кто придерживается XHTML это изменение не коснётся (в XHTML этих элементов давно нет).
    Убраны элементы (т.к. всё равно никто толком не использует): [tt]acronym, applet, isindex, dir[/tt]. Вместо них предлогается использовать всё те же [tt]abbr, object, ul[/tt].
    Не рекомендуются элементы: [tt]frameset, frame, noframe[/tt]. А вот [tt]iframe[/tt] - пожалуйста.



    [size=15pt]Кодировки.[/size]
    вместо длинной и надоевшей записи:
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    предлагается использовать мета-тег с атрибутом charset:
    <meta charset="UTF-8">




    [size=15pt]Расширенные возможности для работы с формами[/size]
    или Web Forms 2.0

    Раздел описания форм в спецификации вообще пуст. Вместо него - лишь ссылки на WF2 (прототип HTML 5).
    В частности, в числе нововведений - новые типы [tt]input[/tt] - [tt]datetime, datetime-local, date, month, week, time, number, range, email, url[/tt]. Не может не радовать, что вскоре уже не придётся писать тонны js-кода для проверки форм перед отправкой :)



    [size=15pt]JS - Ну очень радостные нововведения[/size].
    никакой революции. Просто многие вещи наконец-то вошли в стандарт.

    [tt]getElementsByClassName()[/tt] - без комментриев (дождались наконец-то :)

    [tt]innerHTML[/tt] - теперь стандарт

    [tt]getSelection()[/tt] - теперь стандарт (возвращает объект выделения)

    [tt]designMode[/tt] и [tt]execCommand()[/tt] - теперь стандарт (для WISYWYG-редактирования)


    [size=12pt]Предупреждение[/size].
    Это всего лишь очередной взгляд в светлое будущее, не более. Документ ещё сырой, и неизвестно когда выйдет окончательная версия. И уж тем более неизвестно, когда и насколько всё это счастье будет поддерживаться браузерами. Напомню, что возвращение к HTML (от XHTML) было объявляено W3C в марте прошлого года.
    Так что как обычно - будем ждать…

    Источники:

    • http://www.w3.org/TR/2008/WD-html5-diff-20080122/

    • http://www.w3.org/TR/2008/WD-html5-20080122/

    • http://www.whatwg.org/specs/web-forms/current-work/




    [size=12pt]Что ещё почитать:[/size]
  • adw0rd

    Сообщения: 22902 Репутация: N Группа: в ухо

    Spritz 29 января 2008 г. 3:40, спустя 8 часов 12 минут 50 секунд

    Timur, преогромнейшее спасибо за столь подробный пост!
    HTML5 кажется вкусным, даже очень, жаль только будет если он остынет :(
    Если будет все так как описано в посте, то несомненно перейду на него, только главное чтоб и браузеры не отстовали… а то говорю - остынет он ;)
    adw/0
  • TRIAL

    Сообщения: 988 Репутация: N Группа: Джедаи

    Spritz 29 января 2008 г. 5:34, спустя 1 час 54 минуты 16 секунд

    А мне что-то не очень. Куча никому ненужных тегов вводят для абзацев, коментов и т.д. Нах это нужно… Еще и мои любимые <center> и <u> убирают :) Я конечно понимаю что в ксс прописать можно, но по мне проще написать <u>текст</u> чем <span class='u'>текст</span> и потом в ксс еще .u { text-decoration: underline; }
    Я против такого.
    Хотя многие вещи, например с кодировкой, не могли не порадывать. В общем как всегда полном разных ЗА и ПРОТИВ.
    from TRIAL with LOVE
  • vasa_c

    Сообщения: 3127 Репутация: N Группа: в ухо

    Spritz 29 января 2008 г. 5:43, спустя 9 минут 28 секунд

    Эти вещи убрали уже давным-давно. В деприкатед по крайней мере сунули.
  • AlexB

    Сообщения: 4288 Репутация: N Группа: в ухо

    Spritz 29 января 2008 г. 5:59, спустя 15 минут 44 секунды

    Куча никому ненужных тегов вводят для абзацев, коментов и т.д. Нах это нужно…
    Да, меня чего-то тоже не вдохновило обилие семантических тегов. Они были были и в раньше (<blockquote>, <menu>) и практика показала их нежизнеспособность. А тут еще добавится проблема совместимости с HTML4. В общем, есть большое сомнение, что приживутся.

    Еще и мои любимые <center> и <u> убирают :)
    <u> - однозначно в сад. Кроме спецификаций, он еще дико не эргономичен, так как вводит в заблуждение притворяясь ссылкой. :)

    Я конечно понимаю что в ксс прописать можно, но по мне проще написать <u>текст</u> чем <span class='u'>текст</span> и потом в ксс еще .u { text-decoration: underline; }
    А вот тут ты не прав. Догадаешься сам, чем отличается <u> и <span class='u'>, кроме разности написания или подсказать?
  • TRIAL

    Сообщения: 988 Репутация: N Группа: Джедаи

    Spritz 29 января 2008 г. 6:30, спустя 31 минуту 12 секунд

    Ну предположить могу конечно, но хочется всё-таки услышать твое мнение.
    from TRIAL with LOVE
  • Timur

    Сообщения: 1068 Репутация: N Группа: Джедаи

    Spritz 29 января 2008 г. 21:55, спустя 15 часов 24 минуты 43 секунды

    Да, меня чего-то тоже не вдохновило обилие семантических тегов. Они были были и в раньше (<blockquote>, <menu>) и практика показала их нежизнеспособность.
    Ну тут спорный вопрос. Я, например, стараюсь использовать по-возможности и меня всегда напрягало что таких тегов крайне мало. Да и что проще написать? -
    <div class="article">…</div>

    или
    <article>…</article>

    Статья, заголовок, подвал, меню - это элементы, присутствующие на 99% страниц. Почему бы не использовать соответствущие теги.

    А так, никто ведь не запретит использовать для разметки всё те же div'ы и table'ы, просто сейчас для них нет альтернативы. Это лишь не рекомендуется, а все мы знаем как прислушиваются к рекомендациям консорциума.
  • SA

    Сообщения: 37 Репутация: N Группа: Адекваты

    Spritz 22 февраля 2008 г. 5:45, спустя 23 дня 7 часов 49 минут

    за пост респект


    Еще и мои любимые <center> и <u> убирают


    AlexB правильно сказал. я не понимаю, для каких целей в принципе может понадобится использовать тег <u>.
    в интернете подчеркивают ссылки. а такие теги как center и font уже давным-давно никто не использует.
  • Timur

    Сообщения: 1068 Репутация: N Группа: Джедаи

    Spritz 24 февраля 2008 г. 2:02, спустя 1 день 20 часов 17 минут

    Валидатор для html5: http://html5.validator.nu (alpha-версия).
    Ссылка взята с w3.org
  • Kvs

    Сообщения: ? Репутация: N Группа: Кто попало

    Spritz 4 января 2011 г. 11:12, спустя 1045 дней 9 часов 9 минут

    Щас заглянул на
    я под впечатлением. Понравилась фишка с листанием страниц, стырю даже для себя)) если пойму как работает.
    Как на счет уже использовать html5?? {+++22+++} на http://slides.html5rocks.com/#css-transitions заглянул))
  • technobulka

    Сообщения: 4552 Репутация: N Группа: Джедаи

    Spritz 4 января 2011 г. 11:50, спустя 38 минут 5 секунд

    Как на счет уже использовать html5??

    рано…
    Высокоуровневое абстрактное говно
  • Sinkler

    Сообщения: 9658 Репутация: N Группа: в ухо

    Spritz 4 января 2011 г. 12:32, спустя 42 минуты 9 секунд

    29 Январь 2008

    прошло три года

    Как на счет уже использовать html5??

    рано…
  • Frozzeg

    Сообщения: 5642 Репутация: N Группа: Джедаи

    Spritz 4 января 2011 г. 12:37, спустя 4 минуты 46 секунд

    Как на счет уже использовать html5??

    как руки дойдут, так начну использовать {+++23+++} не считаю, что рано
    You can be anything you want to be. Just turn yourself into anything you think that you could ever be.
  • Timur

    Сообщения: 1068 Репутация: N Группа: Джедаи

    Spritz 4 января 2011 г. 12:46, спустя 8 минут 36 секунд

    http://cssing.org.ua/2009/06/16/html5-wordpress/ - загляните в исходный код
  • Sinkler

    Сообщения: 9658 Репутация: N Группа: в ухо

    Spritz 4 января 2011 г. 12:49, спустя 3 минуты 22 секунды

    веселые теги)))

Пожалуйста, авторизуйтесь, чтобы написать комментарий!