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

HTML 5 Working Draft

  • Timur

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

    Spritz 28 января 2008 г. 16: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

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

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

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

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

    Spritz 29 января 2008 г. 2: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 г. 2:43, спустя 9 минут 28 секунд

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

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

    Spritz 29 января 2008 г. 2: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 г. 3:30, спустя 31 минуту 12 секунд

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

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

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

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

    или
    <article>…</article>

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

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

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

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

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


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


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

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

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

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

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

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

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

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

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

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

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

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

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

    29 Январь 2008

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

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

    рано…
  • Frozzeg

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

    Spritz 4 января 2011 г. 9: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 г. 9:46, спустя 8 минут 36 секунд

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

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

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

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

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