Html5 чем отличается от html – В чем отличие HTML от HTML5? есть ли HTML2,3,4? и в чем отличие паскаля от турбо паскаля?

Содержание

HTML и HTML5 – в чем разница?

HTML и HTML5 – в чем разница?

От автора: язык гипертекстовой разметки или просто HTML – стандартный язык для создания сайтов. Как и все в мире технологий, HTML с момента появления в конце 1980-х очень быстро развивался. Новичкам в программировании следует учить последнюю версию языка – HTML5. Однако глубокое понимание эволюции языка поможет новичкам и профи оценить прошлое, настоящее и будущее веб-разработки.

HTML и HTML5 – в чем разница?

Основы HTML

HTML код указывает браузеру, как рендерить контент. Разметка представляет собой базовую структуру страниц. На протяжении десятилетий HTML считался краеугольной технологией в интернете наряду с CSS и JS. Стандарты HTML и CSS регулируются консорциумом всемирной сети.

Из названия следует, что HTML нельзя назвать языком программирования. Это язык разметки, используемый для организации данных в интернете. HTML документы состоят из HTML элементов, представленных в виде тегов. Теги записываются в угловых скобках и разделяют контент на категории. Простой пример HTML структуры с сообщением «Hello World» выглядит следующим образом:

HTML и HTML5 – в чем разница?

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<html> <body> <p>Hello World</p> </body> </html>

<html>

    <body>

        <p>Hello World</p>

    </body>

</html>

HTML документы загружаются с серверов и говорят браузеру, как отображать текст, ссылки, изображения и интерактивные формы.

История HTML

Новые версии HTML фокусировались на повышении доступности интернет технологий, а не на рендеринге старых версий. Например, помимо новых опций по созданию макетов в HTML4 улучшилось размещение элементов для слабовидящих пользователей.

Последнее крупное обновление с 1990-х было направлено на интернационализацию языка, а также на то, чтобы упростить программистам со всего мира возможности для улучшения HTML. Как часть этих усилий, в качестве официальной кодировки HTML была принята Universal Coded Character Set. Этот шаг улучшил отображение множества символов и акцентов, которые есть в человеческих языках и диалектах.

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

HTML или HTML5: эволюция веб-разработки

Интернет сейчас сильно отличается от того, что был в 1999 году, когда вышло последнее крупное обновление HTML 4.01. Сейчас есть такие технологии, которые мы не могли себе представить на рубеже веков. Смартфоны, планшеты и другие мобильные устройства – это новые вызовы для инженеров и разработчиков ПО. Ускоряющаяся глобализация сделала стандартизацию интернет технологий приоритетной задачей для всех с долей в мировой экономике. Мировое потребление интернета растет год за годом, и используемые технологии по прогнозам будут развиваться все быстрее и быстрее.

HTML и HTML5 – в чем разница?

Поэтому был реализован HTML5, призванный решить эти проблемы и предоставить более плавный и последовательный опыт пользователям и разработчикам.

HTML – плод совместных усилий World Wide Web Consortium или W3C и Web Hypertext Application Technology Working Group или WHATWG. В 2006 организации объединились, чтобы снизить зависимость от плагинов, улучшить обработку ошибок и заменить скрипты на разметку. Как следствие, HTML5 сильно упростил процесс создания веб-приложений.

Благодаря HTML5 веб-страницы научились хранить данные локально в браузерах пользователей, что позволяет отказаться от HTTP кук. Контент доставляется быстрее и безопаснее. HTML5 также упростил процесс кроссбраузерности. Обычно браузеры использовали различные плагины для проигрывания мультимедиа файлов. Встроенная поддержка аудио и видео устраняет проблемы с совместимостью. Новые атрибуты добавляют кнопки управления, такие как плей, пауза и громкость.

Постепенное внедрение

HTML4 являлся стандартом на протяжении 15 лет, поэтому многие разработчики до сих пор им пользуются. Браузеры еще долго будут поддерживать этот стандарт. Старые браузеры могут «игнорировать» новый HTML5 код при рендеринге контента. По факту все современные браузеры хорошо поддерживают HTML5 спецификацию: Chrome, Firefox, Opera и Safari. HTML5 постоянно развивается, поэтому браузеры в новых версиях добавляют поддержку новых свойств. К нашему счастью, все основные браузеры одновременно добавляют поддержку новых свойств, как только те выходят.

Можете проверить свой браузер на поддержку HTML5 с помощью HTML5test.

HTML и HTML5 – в чем разница?

Большей части разработчиков не придется чинить свои старые сайты. Однако если вы связываете свое будущее с созданием сайтов, вам следует узнать о преимуществах HTML5 перед HTML.

HTML или HTML5: что нового?

Если HTML устраивал всех больше десяти лет, зачем нужно было обновляться в 2014? Самое значимое различие между старыми версиями HTML и HTML5 заключается в интеграции видео и аудио в спецификации языка. Кроме того, в HTML5 вошли следующие обновления:

были удалены устаревшие элементы, такие как center, font и strike;

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

появились новые элементы video, time, nav, section, progress, meter, aside и canvas;

новые атрибуты для инпутов, в том числе email, URL, dates и times ;

новые атрибуты, в том числе charset, async и ping;

новые API с офлайн кэшированием и поддержкой drag-and-drop и т.д;

поддержка векторной графики без сторонних программ типа Silverlight или Flash;

поддержка MathML улучшила отображение математических обозначений;

благодаря JS Web worker API, JS теперь может работать в фоновом режиме;

HTML и HTML5 – в чем разница?

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

глобальные атрибуты типа tabindex, repeat и id теперь можно применять ко всем элементам.

На изображении ниже показаны основные свойства HTML5, разбитые по категориям.

HTML и HTML5 – в чем разница?

Какие преимущества для пользователей есть в HTML5 по сравнению с HTML?

Мы разобрались с технической стороной вопроса, а какие преимущества несет HTML5 для обычных пользователей? Ниже я составил список этих нововведений, которые вы могли заметить или не заметить:

часть данных можно хранить на устройстве пользователя, т.е. приложения могут работать без интернет соединения;

веб-страницы могут отображать больше шрифтов с более широким диапазоном цветов, теней и других эффектов;

объекты на странице могут двигаться вместе с курсором;

интерактивные медиа типа игр можно запускать прямо в браузерах без подключения дополнительного ПО или плагинов. Для аудио и видео теперь также не нужны плагины;

браузеры могут отображать интерактивную 3D графику с помощью графического процессора компьютера.

Отбросив необходимость в сторонних плагинах, HTML5 ускоряет доставку более динамичного контента.

Какие преимущества для веб-разработчиков есть в HTML5 по сравнению с HTML?

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

1. Одинаковая обработка ошибок

Во всех браузерах есть парсеры для обработки синтаксических и структурных ошибок в HTML коде. До недавнего времени стандарты этого процесса нигде не были прописаны.

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

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

2. Улучшенная поддержка свойств для веб-приложений

Другой целью HTML5 было – заставить браузеры работать, как платформы приложений. Сайты стали намного сложнее, поэтому разработчики научились обходить расширения браузеров и другие серверные технологии. HTML5 позволяет контролировать производительность сайта. Множество хаков на Flash и JS, используемых в HTML4, вошли в новую спецификацию языка. Эти изменения обеспечивают более плавный и быстрый пользовательский опыт.

3. Усовершенствованная семантика элементов

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

4. Максимальная поддержка мобильных устройств

Мобильные устройства – сплошная головная боль для веб-разработчиков. Их быстрое распространение за последние десять лет заставило улучшить HTML стандарты. Пользователи хотят открывать веб-приложения откуда угодно в любое время и на любом устройстве. Разработчики были вынуждены подчиниться требованиям рынка. HTML5 упрощает мобильную поддержку, так как он заточен под смартфоны и планшеты.

Другие заметные улучшения

С запуска HTML5 прошло несколько лет, и несколько крупных компаний перевели свои сайты на новый стандарт. Множество разработчиков делятся своими мнениями о HTML и HTML5. Самые упоминаемые особенности:

1. Поддержка пользовательских data-атрибутов

До выхода HTML5 добавлять в теги пользовательские атрибуты было рискованно. В HTML4 пользовательские атрибуты не мешали полному рендерингу страниц, но документы с ними не проходили валидацию, что приводило к рендерингу в режиме совместимости. Атрибут data-* решил эту проблему.

Атрибут data-* можно использовать по-разному, но его основная задача – хранить дополнительную информацию об элементах. Данные хранятся в виде простой строки. Пользовательские данные позволили разработчикам создавать более захватывающие страницы без подключения Ajax и серверных технологий.

2. Больше никаких кук

Об этом уже говорилось, но поддержка локального хранения данных по-настоящему перевернула разработку. До HTML5 надежно хранить информацию о состоянии можно было только с помощью кук. Куки способны хранить ограниченный объем данных, а некоторые пользователи по умолчанию отключают их. HTML5 объект localStorage позволяет обмануть натуру HTTP протокола, не поддерживающего состояния.

Объект localStorage принадлежит к глобальному пространству имен window, то есть он доступен из любой точки скрипта. В локальное хранилище можно помещать только строки, однако с помощью методов JSON.stringify() и JSON.parse() можно с легкостью помещать туда все новые данные. Есть и другой объект sessionStorage, позволяющий хранить данные до тех пор, пока пользователь не закрыл окно браузера.

3. Автофокус на полях формы

Атрибут автофокуса позволяет разработчикам указать поле, которое получит фокус после загрузки страницы. В одном документе можно указать атрибут autofocus только для одного элемента, пользователь может переписывать значение, выбирая другое поле. Например, если добавить атрибут autofocus к полю Last Name, как показано на скриншоте ниже, то после загрузки страницы поле Last Name автоматически подсвечивается.

HTML и HTML5 – в чем разница?

4. В тегах script and link больше не нужно указывать атрибут type

В HTML5 подразумевается, что теги script и link ссылаются на скрипты и стили, то есть необходимость в использовании атрибута type отпала.

Будущее HTML и HTML5

Новое поколение разработчиков без сомнений найдет новые преимущества в HTML5, а социальные сети помогут развитию языка. W3C анонсировали, что в будущих обновлениях HTML5 приоритет будет отдан основам приложений, таким как инструменты конфиденциальности. Основной упор в HTML5 делался на определение надежных совместимых свойств, поэтому ненадежные пойдут уже в HTML 5.1. Одним из наиболее противоречивых предложений было включение инструментов управления цифровыми правами.

На начало 2017 года веб-разработчики еще могут обойтись хорошим знанием старых HTML спецификаций. Однако если вы хотите продолжать свою карьеру и не хотите изучать HTML5, вы сделаете себе только хуже. Чего только стоит встроенная поддержка видео и аудио по сравнению с 4.1.

Источник: https://www.keycdn.com/

Редакция: Команда webformyself.

HTML и HTML5 – в чем разница?

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее HTML и HTML5 – в чем разница?

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Отличия html5 от html 4

В статье кратко рассмотрены различия html5 и html 4.
Синтаксис, кодировка символов, новые элементы, новые атрибуты, API. Также будуn рассмотрены отменённые атрибуты и ряд значительных изменений.

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

 Синтаксис

HTML 5 будет иметь два синтаксиса - "custom" HTML и XML. HTML синтаксис определяет детализированные правила синтаксического анализа (включая "обработку ошибок"). Пользовательские агенты будут следовать этим правилам для документов, имеющих MIME тип text/html. Вот пример синтаксиса HTML:

1<meta charset="UTF-8">

2<title>Example document</title>

3 

4 

5<p>Example paragraph</p>

XML синтаксис совместим с документами XHTML1 и его реализациями. Чтобы использовать этот синтаксис нужно объявить MIME тип XML, а элементы должны быть выстроены согласно спецификации XML. Ниже приведен пример, который соответствует синтаксису XML:

01<?xml version="1.0" encoding="UTF-8"?>

03<head>

04<title>Example document</title>

05</head>

06<body>

07<p>Example paragraph</p>

08</body>

09</html>

Кодировка символов
Для синтаксиса HTML разработчики могут использовать три способа установки кодировки: - на транспортном уровне. При использовании Content-Type HTTP заголовка, например. - используя символ Unicode Byte Order Mark (BOM) в начале файла. Этот символ обеспечивает сигнатуру используемого кодирования. - используя мета тег с атрибутом charset, который должен быть определен как первый дочерний элемент head. Обратите внимание, что для определения кодировки используется

<meta charset="UTF-8">

вместо

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Для синтаксиса XML разработчики должны руководствоваться правилами спецификаций XML.

Новые элементы
  • section представляет часть документа или раздел
  • article представляет независимую часть содержания для включения в документ статей
  • aside представляет часть содержания, которая только частично связана с остальной страницей
  • header представляет заголовок section
  • footer - нижний колонтитул, может содержать информацию об авторе, авторском праве и так далее
  • nav представляет раздел документа, предназначенный для навигации
  • dialog может использоваться для выделения диалогов:   
  •  
  • 01<dialog>
  • 02<dt> Costello

    03<dd> Look, you gotta first baseman?

    04<dt> Abbott

    05<dd> Certainly.

    06<dt> Costello

    07<dd> Who's playing first?

    08<dt> Abbott

    09<dd> That's right.

    10<dt> Costello

    11<dd> When you pay off the first baseman every month, who gets the money?

    12<dt> Abbott

    13<dd> Every dollar of it.

    14</dialog>

  • figure может использоваться для связи заголовка с медиа контентом:

    1<figure>

    2<video src=ogg>…</video>

    3<legend>Example</legend>

    4</figure>

  • audio и video для мультимедиа. Оба обеспечивают соответствующий API. Таким образом разработчики могут писать скрипты собственного пользовательского интерфейса, но также предусмотрен способ вызова стандартного API пользовательского агента. Вместе с этими элементами может быть использован source, если есть возможность организовать параллельные потоки.
  • embed используется для контента plugin'ов.
  • meter - для представления единиц измерений.
  • time - дата и/или время.
  • canvas используется для динамической отрисовки графики.
  • command представляет команду, которую может вызвать пользователь.
  • datagrid - интерактивное представление списка типа "дерево" или табличных данных.
  • details представляет дополнительную информацию, которую пользователь может получить по требованию.
  • datalist вместе с новым атрибутом list используется чтобы сделать combobox:

    1<input list=browsers>

    2<datalist id=browsers>

    3<option value="Safari">

    4<option value="Internet Explorer">

    5<option value="Opera">

    6<option value="Firefox">

    7</datalist>

  • datatemplate, rule, и nest обеспечивают механизм шаблонов (templating mechanism) для HTML.
  • event-source используется для перехвата событий, посланных сервером.
  • output представляет определенный тип вывода, например, от вычислений, сделанных через скрипт.
  • progress представляет ход выполнения задачи, например, загрузки.
  • Атрибут type элемента input теперь имеет следующие новые значения:
    • datetime
    • datetime-local
    • date
    • month
    • week
    • time
    • number
    • range
    • email
    • url
    Идея относительно этих новых типов состоит в том, что пользовательский агент может обеспечить интерфейс для таких объектов как календарь (выбор даты), интеграции с адресной книгой и предоставить серверу данные в определенном формате. Это дает определенные преимущества как пользователям, так и разработчикам, поскольку пользовательский ввод проверяется перед посылкой на сервер браузером. Это означает, что разработчикам нет необходимости расходовать ресурсы на проверку введенных данных, что, в свою очередь, приводит к сокращению времени ожидания ответа.

Новые атрибуты
HTML 5 вводит несколько новых атрибутов для элементов, которые уже входили в HTML 4:
  • элементы a и area получили новый признак ping, который определяет список URI адресов, которые должны пропинговаться при переходе по гиперссылке. Принцип функционирования пока до конца не ясен.
  • элемент area теперь имеет атрибуты hreflang и rel
  • base получил атрибут target
  • атрибут value для li и атрибут start для элемента ol больше не deprecated
  • meta получил атрибут charset
  • новый атрибут autofocus может быть определен у input (кроме тех случаев, когда type атрибут - hidden), select, textarea и button. Это обеспечивает способ передачи управления форме во время загрузки страницы
  • атрибут form для input, output, select, textarea, button и fieldset позволяет связать элемент с более чем одной формой
  • input, button и form получили атрибут replace, который определяет, что будет с элементом после отправки формы
  • form, select и datalist имеют атрибут data, который учитывает автоматическое предзаполнение, в случае заполнения данными с сервера
  • новый атрибут required применяется к input (кроме тех случаев, когда type атрибут - hidden, image или кнопка) и textarea. Он указывает обязательные для заполнения поля
  • input и textarea имеют новый атрибут inputmode, который дает подсказку пользовательскому интерфейсу относительно того, какие данные ожидаются для ввода
  • теперь можно disable (отключить) сразу целый fieldset, что не было возможно прежде
  • элемент input имеет несколько новых атрибутов для определения ограничений: autocomplete, min, max, pattern и step, а также list, который может использоваться вместе с элементами select и datalist
  • input и button также получили новый атрибут template, который может использоваться для шаблонов повторения
  • элемент menu имеет три новых атрибута: type, label и autosubmit
  • script имеет новый атрибут async, который влияет на загрузку и выполнение сценария
  • элемент html имеет новый атрибут manifest, который указывает на кэш приложений, используемый вместе с API для автономных Web приложений
Несколько атрибутов из HTML 4 применяют ко всем элементам, поэтому их называют глобальными атрибутами: class, dir, id, lang, tabindex и title.

Появились также несколько новых глобальных атрибутов:

  • атрибут contenteditable указывает, что элемент доступен для редактирования
  • contextmenu может использоваться для указания на контекстное меню, созданное автором
  • draggable может использоваться вместе с новым drag&drop API
  • irrelevant указывает, что элемент еще или больше не актуален
Атрибуты для модели повторения (repetition model):
  • repeat
  • repeat-start
  • repeat-min
  • repeat-max

Отмененные элементы
Следующие элементы не включены в HTML 5, потому что их эффект достигается использованием CSS:
  • basefont
  • big
  • center
  • font
  • s
  • strike
  • tt
  • u
Следующие элементы не включенв в HTML 5, потому что их использование негативно сказывалось на удобстве и доступности: Следующие элементы не включены, потому что использовались редко или они могут быть заменены другими элементами:
  • acronym
  • applet замещен object
  • isindex
  • dir замещен ul
Наконец noscript остался только в синтаксисе HTML, поскольку его использование предполагает разбор с помощью HTML парсера.
Отмененные атрибуты
  • accesskey для a, area, button, input, label, legend и textarea
  • rev и charset для link и a
  • shape и coords для a
  • longdesc для img и iframe
  • target для link
  • nohref для area
  • profile для head
  • version для map, img, object, form, iframe, a
  • scheme для meta
  • archive, classid, codebase, codetype, declare и standby для object
  • valuetype и type для param
  • charset и language для script
  • summary для table
  • headers, axis и abbr для td и th
  • scope для td
Кроме того, HTML 5 не имеет следующих атрибутов, поскольку они лучше обрабатываются CSS:
  • align для caption, iframe, img, input, object, legend, table, hr, div, h2-h6, p, col, colgroup, tbody, td, tfoot, th, thead, tr и body
  • alink, link, text и vlink для body
  • background для body
  • bgcolor для table, tr, td, th и body
  • border для table, img и object
  • cellpadding и cellspacing для table
  • char и charoff для col, colgroup, tbody, td, tfoot, th, thead и tr
  • clear для br
  • compact для menu, ol и ul
  • frame на table
  • frameborder приписывают на iframe
  • height для iframe, td и th
  • hspace и vspace для img и object
  • marginheight, marginwidth и scrolling для iframe
  • noshade для hr
  • nowrap для td и th
  • rules для table
  • size для hr, input и select
  • style для всех элементов
  • type для li, ol и ul
  • valign для col, colgroup, tbody, td, tfoot, th, thead и tr
  • width для hr, table, td, th, col, colgroup, iframe и pre
API
HTML 5 вводит множество API, которые должны помочь в создании Web приложений. Они могут использоваться вместе с новыми элементами.
  • 2D drawing API , который может использоваться с новым элементом canvas
  • API для проигрывания видео и аудио, который может использоваться с новыми элементами video и audio
  • выделенная область памяти (Persistent storage) с поддержкой данных в виде ключ / значение и SQL данных
  • API, который допускает автономную работу web приложений
  • API, который позволяет web приложений регистрировать себя для определенных протоколов или типов MIME
  • Editing API в сочетании с новым глобальным атрибутом contenteditable
  • Drag&drop API в сочетании с атрибутом draggable
  • Network API
  • API, который выстраивает историю посещения, чтобы предотвратить нарушение функционирования back кнопки (Этот API имеет необходимые ограничения безопасности)
  • Cross-document messaging (Передача сообщений между документами)
  • события сервера (Server-sent events) в сочетании с новым элементом event-source

Расширение HTMLDocument
HTML 5 расширил интерфейс HTMLDocument. Интерфейс теперь реализован на всех объектах интерфейса Document. Его новые методы:
  • getElementsByClassName()
  • activeElement и hasFocus
  • getSelection()
  • designMode и execCommand(), которые используются главным образом для редактирования документов

Расширение к HTMLElement
Интерфейс HTMLElement также получил несколько расширений:
  • getElementsByClassName()
  • innerHTML
  • classList введен для удобства доступа к className. Возвращаемый объект имеет методы has(), add(), remove() и toggle() для манипуляции классами элемента

По мотивам http://www.w3.org/TR/2008/WD-html5-diff-20080122/

XHTML 2 против HTML 5 / Habr

Вернемся в прошлое на десять с небольшим лет, в 18 декабря 1997. Internet Explorer 4 был выпущен 3 месяца назад, The Mozilla Foundation еще не сформирована и до выхода Firefox еще далеко. Здесь нет XMLHttpRequest, нет даже XML. В этот день, больше десятилетия назад, HTML 4.0 был опубликован как рекомендация W3C.

Он и стал базой, на основе которой были разработаны современные web-стандарты. Конечно, были и усовершенствования. В 2000 году как официальная рекомендация был принят XHTML 1.0, а CSS 2 был реализован большинством производителей браузеров. Но основа Web – костяк, на котором построен каждый сайт, от простых визиток до комплексных приложений – по существу осталась неизменной.

По крайней мере, до сегодняшнего дня. После долгого затишья, кажется, уклад вещей в W3C меняется – в разработке находятся две конкурирующие спецификации, призванные заменить устаревшие стандарты HTML 4.x и XHTML 1.x. Обе инициативы работают под эгидой W3C (пусть так было и не всегда) и обе, по моему мнению, значительно превосходят текущую подборку языков web-разметки. Это HTML 5 и XHTML 2.0. И если вы читаете эту статью, скорее всего, в течение нескольких следующих лет вам придется работать с одной (или обеими) из них.


Работа над XHTML 2.0 началась вскоре после публикации XHTML 1.1 в качестве рекомендации в 2001 году. Первый черновой вариант XHTML 2.0 был опубликован в 2002 г., но значительная часть документа была в ненормативном и незавершенном состоянии (а кое-что осталось до сих пор). К 2004 году у некоторых видных деятелей отрасли – разработчиков браузеров, дизайнеров, web-разработчиков и владельцев контента – возросло недовольство дирекцией рабочей группы XHTML 2.0. Ссылаясь на закрытый характер работы W3C, они решили основать и разрабатывать свой собственный стандарт.

Итак, в 2004 г. была сформирована независимая коалиция, названная WHATWG (Web Hypertext Application Technology Working Group). Группа начала работу над спецификацией, названной Web Applications 1.0. В апреле 2007 года W3C проголосовало в пользу предложения рассмотреть спецификацию группы. Члены WHATWG начали работать в рамках W3C как группа разработчиков HTML и продолжили работу над своим проектом, который был переименован в HTML 5. Таким образом, черновик HTML 5 должен однажды стать рекомендацией W3C наряду с XHTML 2.0 (хотя этот день еще очень далек, и W3C уже пропустил несколько ключевых этапов проекта).

XHTML 2.0 полностью основан на XML, разработчики отказались от наследства SGML и синтаксических особенностей, присутствующих в текущей web-разметке. Он позиционируется как «язык общего назначения», с минимальным функционалом по умолчанию, который легко расширить, используя CSS или другие технологии (XForms, XML Events, и т.д.). Этот модульный механизм позволяет группе разработчиков XHTML 2 сосредоточить свое внимание на общей разметке документа, пока остальные разрабатывают механизмы представления, интерактивности, построения документа и т.д.

Первым приоритетом для рабочей группы XHTML 2 является дальнейшее отделение контента и структуры документа от его представления. Другими целями являются повышенное удобство и доступность, улучшенную интернационализация, большая независимость от устройств, меньшее количество скриптов и интеграция с Semantic Web. Разработчики были меньше заинтересованы в обратной совместимости, чем их предшественники (и группа разработчиков HTML), что привело к удалению некоторого синтаксического багажа, существовавшего в ранних воплощениях HTML. Результатом стал более чистый и сжатый язык, исправляющий многие старые недочеты Web-разметки.

В то время как концепция XHTML 2.0 предназначена быть революционной, группа разработчиков HTML выбирает прагматичный подход и создает HTML 5, как эволюционировавшую технологию. Получается, что HTML 5 является шагом вперед, но по-прежнему большей частью совместим с текущими стандартами HTML 4/XHTML 1. Однако HTML 5 предлагает множество изменений и расширений для HTML 4/XHTML 1, указывающих на многие недочеты своих предыдущих спецификаций.

В спецификации HTML 5 речь идет об отходе HTML от разметки документа и внедрении его в языки для создания web-приложений. С этой целью основное внимание концентрируется на создании более надежного и функционального клиентского окружения, предоставляющего различные API для разработки web-приложений. Среди прочего, спецификация предусматривает то, что реализации должны предоставить на стороне клиента постоянные хранилища данных (как вида ключ/значение, так и SQL-базы данных), API для воспроизведения аудио и видео, 2D-рисования посредством элемента canvas, обмен сообщениями между документами, отправляемые сервером события и сетевые API.

HTML 5 поддерживает SGML-подобный синтаксис, совместимый с текущими спецификациями HTML (хотя некоторые наиболее эзотерические черты SGML больше не поддерживаются). В спецификацию также включена вторичная «XML-сериализация», позволяющая разработчикам использовать правильные XML-документы. Путем сохранения SGML-подобной сериализации группа разработчиков HTML 5 достигла баланса между прагматизмом и прогрессом: разработчики могут выбирать между разметкой с использованием HTML-сериализации (которая больше похожа на HTML 4.x) или XML-сериализации (больше похожа на XHTML 1.x).

Никого не удивит, что обе группы разработчиков предлагают ряд сходных возможностей. Они указывают на известные «больные места» web-разработки и будут желанным дополнением в новом поколении языков разметки.

Удаление элементов представления

Ряд элементов будут удалены в XHTML 2 и HTML 5, так как они отвечают только за представление документа. Считается, что представление должно управляться посредством таблиц стилей.

Документы XHTML 2 и HTML 5 не могут содержать следующих элементов: basefont, big, font, s, strike, tt и u. XHTML 2.0 также удаляет элементы small, b, i и hr, а HTML 5 переопределяет их другим значением (отвечающим не за представление). В XHTML 2.0 элемент hr заменяется элементом separator дабы уменьшить путаницу (элемент hr предназначен для создания горизонтальных разделителей, но вовсе не обязательно используется для этого).

Списки навигации

Списки навигации были введены как в XHTML 2.0, так и HTML 5. В XHTML 2.0 они определяются новым элементом nl (Navigation List). Сам список должен начинаться дочерним элементом label, определяющим заголовок списка. После него может идти один или несколько элементов li, используемых для разметки ссылок. Также новинкой в XHTML 2.0 является возможность создания ссылки с любого элемента, используя для него атрибут href. Комбинация этих методов позволяет создать простую, легкую разметку меню:

<nl>
    <label>Category</label>
    <li href="/">All</li>
    <li href="/news">News</li>
    <li href="/videos">Videos</li>
    <li href="/images">Images</li>
</nl>

В HTML 5 для этих целей был введен элемент nav. К сожалению, nav не является списочным элементом, поэтому не может содержать дочерних элементов li для логической организации ссылок (возможно, будет разработана новая идиома). И так как для создания ссылок в HTML 5 остаются необходимыми элементы a, разметка навигации не очень элегантна:

<nav>
    <h2>Category</h2>
    <ul>
        <li><a href="/">All</a></li>
        <li><a href="/news">News</a></li>
        <li><a href="/videos">Videos</a></li>
        <li><a href="/images">Images</a></li>
    </ul>
</nav>

Улучшенные формы

Обе спецификации содержат новые возможности для создания более последовательных форм с применением меньшего количества скриптов. В XHTML 2.0 стандарт HTML-форм был полностью удален в пользу более обширного стандарта XForms. Группа разработчиков XHTML 2.0 не контролирует эту технологию, а только ссылается на нее в спецификации. Для упрощения повторного использования в XForms собираемые данные отделены от разметки элементов управления. Это мощный язык, но его полное описание выходит за рамки этой статьи. Достаточно сказать, что даже малые знания этой технологии значительно повысят скорость разработки.

HTML 5 сохраняет привычные HTML-формы, но добавляет некоторые типы данных для упрощения разработки и повышения удобства для пользователя. Добавлено несколько новых типов элемента input для email-адресов, URL, даты и времени и числовых данных. Это позволит браузерам создавать более удобный пользовательский интерфейс (например, диалоги для выбора даты и времени), интегрироваться с другими приложениями (выбор адресов из Outlook или Адресной Книги, например) и проверять введенные пользователем данные перед отправкой на сервер (сокращение JavaScript-проверок на стороне клиента).

Семантическая разметка

Обе спецификации охватывают приближающийся Semantic Web, позволяя разработчикам внедрять в документы более богатые метаданные. Как и с формами, группа разработчиков XHTML2 использует более сложную технологию, в то время как разработчики HTML 5 пошли по более простому пути.

В XHTML 2.0 метаданные могут быть внедрены при использовании нескольких новых атрибутов из Модуля Метаинформационных Атрибутов (Metainformation Attributes Module). В частности, новый глобальный атрибут role предназначен для описания значения данного элемента в контексте документа. Также используется технология «Внедрения структурированных данных в web-страницы» (Embedding Structured Data in Web Pages), для этого группа использует существующие стандарты, ссылаясь на RDF. Эта технология является чрезвычайно мощной, но также и сложной.

Группа разработчиков HTML выбрала подход, который очень поход на микроформаты – перегрузка атрибута class преопределенным набором классов, представляющих различные типы данных. На данный момент в спецификации имеется семь зарезервированных классов: copyright, error, example, issue, note, search и warning. Хотя такой метод может казаться не очень надежным, маловероятно, что в разных браузерах эти элементы будут отображаться по-разному. Имена классов достаточно конкретны, поэтому есть о чем побеспокоиться: элемент с классом copyright будет отображаться как авторские права, независимо от того, знал разработчик о зарезервированных классах или нет.

Ниже описаны некоторые возможности HTML 5, не имеющие аналогов в XHTML 2.0

API для web-приложений

HTML 5 вводит ряд API, значительно улучшающих оболочку для разработки на стороне клиента. Они делают из HTML 5 стек технологий для web-приложений, а не просто язык для разметки документов. Стоит отметить, что детали этих API сейчас проработаны группой разработчиков Web API (Web API working group), поэтому могут быть приняты как с остальной частью HTML 5, так и самостоятельно. Новыми API и соответствующими элементами являются:

  • API 2D-рисования посредством элемента canvas
  • API воспроизведения аудио и видео, поддерживающие возможность предоставлять браузеру несколько форматов, которые могут быть использованы в новых элементах audio и video.
  • Постоянные хранилища данных на стороне клиента, как вида ключ/значение, так и SQL-базы данных.
  • Оффлайн-API для web-приложений (схожее с Google Gears).
  • API, позволяющее web-приложениям сопоставлять себя с различными протоколов или MIME-типами.
  • API редактирования, которое может быть использовано в комбинации с глобальным атрибутом contenteditable.
  • Drag&Drop API, которое может быть использовано в комбинации с атрибутом draggable
  • Сетевое API, позволяющее web-приложениям использовать протокол TCP.
  • API, отражающее историю переходов браузера, позволяющее web-приложениям добавлять в нее записи, что позволит адекватно работать при нажатии кнопки «Назад» браузера.
  • API обмена сообщениями меду документами.
  • Отправляемые сервером события в комбинации с новым элементом event-source.

Новые элементы

В HTML 5 вводится ряд новых возможностей, которых нет в XHTML 2.0:

  • figure представляет изображение или график с заголовком. Вложенный элемент legend отображает заголовок, а обычный элемент img используется для изображения
  • m отображает текст, выделенный каким-либо образом. Может быть использован для подсветки слов при выдаче результатов поиска, к примеру.
  • time отображает дату и время
  • meter отображает измерения или величины
  • datagrid отображает интерактивное дерево данных или табличные данные
  • command отображает команду, которую пользователь может выполнить
  • event-source используется для «ловли» посылаемых сервером событий
  • output отображает определенный тип вывода, такой как результат вычисления скрипта
  • progress – отображает выполнение процесса, такого, как загрузка или выполнение серии трудоемких вычислений.

В дополнение, некоторые новые элементы помогают семантично разметить части документа. Их названия говорят сами за себя: section, article, header, footer и aside. А новый элемент dialog предназначен для отображения сообщений с использованием дочерних элементов: dt — для имени отправителя, а dd — для текста сообщения.

Отслеживание пользователей оповещением (pinging) URI

Новый атрибут ping может использоваться в элементах a и area для отслеживания пользователей. Этот атрибут позволяет указать разделенный пробелами список URI, которые должны быть оповещены при переходе по ссылке, это позволяет уйти от использования переадресации или JavaScript’ов.

Новые возможности, которые доступны только в XHTML 2.0

Любой элемент может быть ссылкой

В XHTML 2.0 атрибут href можно указать в любом элементе, тем самым превратив его в ссылку. С этим изменением элемент a больше не является необходимым, но он сохраняется.

Любой элемент может быть изображением (или другим ресурсом)

В XHML 2.0 элемент img был удален. Но не волнуйтесь – теперь любой элемент может быть изображением. Идея в том, что все изображения имеют длинное описание, которое эквивалентно самому изображению. Добавлением атрибута src к любому элементу мы говорим браузеру загрузить указанный ресурс и разместить его на месте элемента. Если по какой-либо причине ресурс недоступен, будет отображено содержание элемента. Это позволяет разработчикам предоставлять несколько эквивалентных ресурсов, используя разные форматы файлов и представления, путем вложения элементов друг в друга.

Строки заменяют br

Почтенный элемент br, использующийся для вставки перехода на новую строку, также был удален в XHTML 2.0. Для его замены введен новый элемент l. Он представляет строку текста, и работает как span, после которого стоит br по правилам текущей разметки.

Новая структура заголовков

Новые элементы h и section были введены для замены пронумерованных элементов h2h6. Цель этого – стремление передать иерархическую структуру документа. Текущие нумерованные заголовки линейны, не вкладываются друг в друга. При вложении элементов section и h в родительские section структура документа будет ясна.

Новые элементы

Группа разработчиков XHTML 2 сосредотачивала внимание на создании более общего, упрощенного языка. В виду этого, они воздержались от добавления множества специализированных элементов для представления различных видов контента. Они утверждают, что новый атрибут role предоставляет механизм для внедрения богатых метаданных, которые делают ненужными специализированные элементы. Тем не менее, было включено несколько новых элементов:

  • blockcode представляет компьютерный код
  • di представляет группу связанных терминов и определений в dl (definition list). Это удобно для слов с различными значениями или различным произношением.
  • handler представляет скриптовый обработчик событий с атрибутом type, который указывает язык обработчика. Если браузер его не понимает, обрабатываются потомки элемента-обработчика (иначе они игнорируются). Таким образом, обработчики могут вкладываться друг в друга для предоставления реализации на нескольких языках.

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

Несмотря на позднее начало, группа разработчиков HTML 5 имеет большую индустриальную поддержку и прошла больший путь в рекомендационном процессе. Их цель состоит в том, чтобы иметь полную спецификацию, с множеством взаимодействующих реализаций не позднее 2010 года (как я уже говорил, несмотря на это, консорциум W3C уже пропустил несколько этапов в процессе утверждения). С индустриальной поддержкой большинства главных разработчиков браузеров (единственным исключением является Microsoft) эти спецификации, вероятнее всего, будут внедряться быстро и последовательно, как только они достигнут стабильного состояния.

Всеобщее желание состоит в том, чтобы избежать очередной войны стандартов. К счастью, так как оба языка поддерживают пространства имен XML (или, в случае HTML-сериализации в HTML 5 — переключение DOCTYPE), маловероятно, что мы увидим такую же зависимость отображения документа от браузера, какая наблюдалась в 90-ых. Если отмести в сторону войны стандартов, будущее web-разработки выглядит светлым. Эти новые возможности разметки и API предоставят хорошую оболочку для web-разработки, которая должна сократить разрыв между настольными и web-приложениями.

Оригинал: Mike Malone, XHTML 2 vs. HTML 5
Перевод: Helios

HTML 5: отличия от HTML 4

HTML 5 еще в разработке, но про него уже известно много интересного. Нововведения на первый взгляд кажутся противоречивыми, как будет обстоять дело в реальности – покажет время.

Синтаксис

HTML 5 будет иметь два синтаксиса – “custom” HTML и XML. HTML синтаксис определяет детализированные правила синтаксического анализа (включая “обработку ошибок”). Пользовательские агенты будут следовать этим правилам для документов, имеющих MIME тип text/html. Вот пример синтаксиса HTML:

<meta charset="UTF-8">
<title>Example document</title>
<p>Example paragraph</p>

XML синтаксис совместим с документами XHTML1 и его реализациями. Чтобы использовать этот синтаксис нужно объявить MIME тип XML, а элементы должны быть выстроены согласно спецификации XML. Ниже приведен пример, который соответствует синтаксису XML:

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>

Кодировка символов

Для синтаксиса HTML разработчики могут использовать три способа установки кодировки: – на транспортном уровне. При использовании Content-Type HTTP заголовка, например. – используя символ Unicode Byte Order Mark (BOM) в начале файла. Этот символ обеспечивает сигнатуру используемого кодирования. – используя мета тег с атрибутом charset, который должен быть определен как первый дочерний элемент head. Обратите внимание, что для определения кодировки используется

<meta charset="UTF-8">

вместо

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Для синтаксиса XML разработчики должны руководствоваться правилами спецификаций XML.

Новые элементы
  • section представляет часть документа или раздел
  • article представляет независимую часть содержания для включения в документ статей
  • aside представляет часть содержания, которая только частично связана с остальной страницей
  • header представляет заголовок section
  • footer – нижний колонтитул, может содержать информацию об авторе, авторском праве и так далее
  • nav представляет раздел документа, предназначенный для навигации
  • dialog может использоваться для выделения диалогов:
<dialog>
<dt> Costello
<dd> Look, you gotta first baseman?
<dt> Abbott
<dd> Certainly.
<dt> Costello
<dd> Who's playing first?
<dt> Abbott
<dd> That's right.
<dt> Costello
<dd> When you pay off the first baseman every month, who gets the money?
<dt> Abbott
<dd> Every dollar of it.
</dialog>
  • figure может использоваться для связи заголовка с медиа контентом:
<figure>
<video src=ogg>…</video>
<legend>Example</legend>
</figure>
  • audio и video для мультимедиа. Оба обеспечивают соответствующий API. Таким образом разработчики могут писать скрипты собственного пользовательского интерфейса, но также предусмотрен способ вызова стандартного API пользовательского агента. Вместе с этими элементами может быть использован source, если есть возможность организовать параллельные потоки.
  • embed используется для контента plugin’ов.
  • meter – для представления единиц измерений.
  • time – дата и/или время.
  • canvas используется для динамической отрисовки графики.
  • command представляет команду, которую может вызвать пользователь.
  • datagrid – интерактивное представление списка типа “дерево” или табличных данных.
  • details представляет дополнительную информацию, которую пользователь может получить по требованию.
  • datalist вместе с новым атрибутом list используется чтобы сделать combobox:
<input list=browsers>
<datalist id=browsers>
<option value="Safari">
<option value="Internet Explorer">
<option value="Opera">
<option value="Firefox">
</datalist>
  • datatemplate, rule, и nest обеспечивают механизм шаблонов (templating mechanism) для HTML.
  • event-source используется для перехвата событий, посланных сервером.
  • output представляет определенный тип вывода, например, от вычислений, сделанных через скрипт.
  • progress представляет ход выполнения задачи, например, загрузки.
  • Атрибут type элемента input теперь имеет следующие новые значения:
  • datetime
  • datetime-local
  • date
  • month
  • week
  • time
  • number
  • range
  • email
  • url

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

 

Новые атрибуты

HTML 5 вводит несколько новых атрибутов для элементов, которые уже входили в HTML 4:

  • элементы a и area получили новый признак ping, который определяет список URI адресов, которые должны пропинговаться при переходе по гиперссылке. Принцип функционирования пока до конца не ясен.
  • элемент area теперь имеет атрибуты hreflang и rel
  • base получил атрибут target
  • атрибут value для li и атрибут start для элемента ol больше не deprecated
  • meta получил атрибут charset
  • новый атрибут autofocus может быть определен у input (кроме тех случаев, когда type атрибут – hidden), select, textarea и button. Это обеспечивает способ передачи управления форме во время загрузки страницы
  • атрибут form для input, output, select, textarea, button и fieldset позволяет связать элемент с более чем одной формой
  • input, button и form получили атрибут replace, который определяет, что будет с элементом после отправки формы
  • form, select и datalist имеют атрибут data, который учитывает автоматическое предзаполнение, в случае заполнения данными с сервера
  • новый атрибут required применяется к input (кроме тех случаев, когда type атрибут – hidden, image или кнопка) и textarea. Он указывает обязательные для заполнения поля
  • input и textarea имеют новый атрибут inputmode, который дает подсказку пользовательскому интерфейсу относительно того, какие данные ожидаются для ввода
  • теперь можно disable (отключить) сразу целый fieldset, что не было возможно прежде
  • элемент input имеет несколько новых атрибутов для определения ограничений: autocomplete, min, max, pattern и step, а также list, который может использоваться вместе с элементами select и datalist
  • input и button также получили новый атрибут template, который может использоваться для шаблонов повторения
  • элемент menu имеет три новых атрибута: type, label и autosubmit
  • script имеет новый атрибут async, который влияет на загрузку и выполнение сценария
  • элемент html имеет новый атрибут manifest, который указывает на кэш приложений, используемый вместе с API для автономных Web приложений

Несколько атрибутов из HTML 4 применяют ко всем элементам, поэтому их называют глобальными атрибутами: class, dir, id, lang, tabindex и title.

Появились также несколько новых глобальных атрибутов:

  • атрибут contenteditable указывает, что элемент доступен для редактирования
  • contextmenu может использоваться для указания на контекстное меню, созданное автором
  • draggable может использоваться вместе с новым drag&drop API
  • irrelevant указывает, что элемент еще или больше не актуален

Атрибуты для модели повторения (repetition model):

  • repeat
  • repeat-start
  • repeat-min
  • repeat-max

 

Отмененные элементы

Следующие элементы не включены в HTML 5, потому что их эффект достигается использованием CSS:

  • basefont
  • big
  • center
  • font
  • s
  • strike
  • tt
  • u

Следующие элементы не включенв в HTML 5, потому что их использование негативно сказывалось на удобстве и доступности:

Следующие элементы не включены, потому что использовались редко или они могут быть заменены другими элементами:

  • acronym
  • applet замещен object
  • isindex
  • dir замещен ul

Наконец noscript остался только в синтаксисе HTML, поскольку его использование предполагает разбор с помощью HTML парсера.

Отмененные атрибуты
  • accesskey для a, area, button, input, label, legend и textarea
  • rev и charset для link и a
  • shape и coords для a
  • longdesc для img и iframe
  • target для link
  • nohref для area
  • profile для head
  • version для map, img, object, form, iframe, a
  • scheme для meta
  • archive, classid, codebase, codetype, declare и standby для object
  • valuetype и type для param
  • charset и language для script
  • summary для table
  • headers, axis и abbr для td и th
  • scope для td

Кроме того, HTML 5 не имеет следующих атрибутов, поскольку они лучше обрабатываются CSS:

  • align для caption, iframe, img, input, object, legend, table, hr, div, h2-h6, p, col, colgroup, tbody, td, tfoot, th, thead, tr и body
  • alink, link, text и vlink для body
  • background для body
  • bgcolor для table, tr, td, th и body
  • border для table, img и object
  • cellpadding и cellspacing для table
  • char и charoff для col, colgroup, tbody, td, tfoot, th, thead и tr
  • clear для br
  • compact для menu, ol и ul
  • frame на table
  • frameborder приписывают на iframe
  • height для iframe, td и th
  • hspace и vspace для img и object
  • marginheight, marginwidth и scrolling для iframe
  • noshade для hr
  • nowrap для td и th
  • rules для table
  • size для hr, input и select
  • style для всех элементов
  • type для li, ol и ul
  • valign для col, colgroup, tbody, td, tfoot, th, thead и tr
  • width для hr, table, td, th, col, colgroup, iframe и pre

 

API

HTML 5 вводит множество API, которые должны помочь в создании Web приложений. Они могут использоваться вместе с новыми элементами.

  • 2D drawing API , который может использоваться с новым элементом canvas
  • API для проигрывания видео и аудио, который может использоваться с новыми элементами video и audio
  • выделенная область памяти (Persistent storage) с поддержкой данных в виде ключ / значение и SQL данных
  • API, который допускает автономную работу web приложений
  • API, который позволяет web приложений регистрировать себя для определенных протоколов или типов MIME
  • Editing API в сочетании с новым глобальным атрибутом contenteditable
  • Drag&drop API в сочетании с атрибутом draggable
  • Network API
  • API, который выстраивает историю посещения, чтобы предотвратить нарушение функционирования back кнопки (Этот API имеет необходимые ограничения безопасности)
  • Cross-document messaging (Передача сообщений между документами)
  • события сервера (Server-sent events) в сочетании с новым элементом event-source

 

Расширение HTMLDocument

HTML 5 расширил интерфейс HTMLDocument. Интерфейс теперь реализован на всех объектах интерфейса Document. Его новые методы:

  • getElementsByClassName()
  • activeElement и hasFocus
  • getSelection()
  • designMode и execCommand(), которые используются главным образом для редактирования документов

 

Расширение к HTMLElement

Интерфейс HTMLElement также получил несколько расширений:

  • getElementsByClassName()
  • innerHTML
  • classList введен для удобства доступа к className. Возвращаемый объект имеет методы has(), add(), remove() и toggle() для манипуляции классами элемента

Источник

В чем ключевое отличие HTML 4 от HTML 5?

Решение

У HTML5 есть несколько целей, которые отличают его от HTML4.

Основным является согласованная, определенная обработка ошибок . Как вы знаете, HTML преднамеренно поддерживает «суп-тег» или возможность писать искаженный код и исправлять его в действительном документе. Проблема в том, что правила для этого нигде не записаны. Когда новый поставщик браузеров хочет выйти на рынок, он просто должен протестировать искаженные документы в различных браузерах (особенно IE) и перепроектировать их обработку ошибок. Если этого не произойдет, то многие страницы будут отображаться некорректно (по оценкам, примерно 90% страниц в сети, по крайней мере, несколько искажены).

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

Вторичная цель HTML5 - развить способность браузера быть прикладной платформой с помощью HTML, CSS и Javascript. Многие элементы были добавлены непосредственно к языку, которые в настоящее время (в HTML4) флэш - память или JS на основе хаков, таких как <canvas>, <video>и <audio>. Полезные вещи, такие как локальное хранилище (js-доступная встроенная в браузер база данных значений ключей, для хранения информации, выходящей за пределы того, что могут содержать файлы cookie), новые типы ввода, такие как дата, для которой браузер может предоставить простой пользовательский интерфейс (чтобы мы могли не нужно использовать наши средства выбора календаря на основе js), а поддерживаемая браузером проверка форм значительно упростит разработку веб-приложений для разработчиков и сделает их намного быстрее для пользователей (поскольку многие вещи будут поддерживаться изначально, а не взломанный через JavaScript).

Есть много других меньших усилий, протекающие в HTML5, такие как лучше определенные семантические роли для существующих элементов ( <strong>и в <em>настоящее время на самом деле означает что - то другое, и даже <b>и <i>имеет расплывчатые семантики , которые должны хорошо работать при анализе устаревших документов) и добавления новых элементов с полезным семантика - <article>, <section>, <header>, <aside>, и <nav>должен заменить большинство <div>с используемых на веб - странице, что делает ваши страницы немного более семантические, но что более важно, легче читать . Больше не нужно мучительно сканировать, чтобы увидеть, что именно </div>закрывает этот случайный код - вместо этого вы получите очевидное </header>или сделаете </article>структуру документа намного более интуитивно понятной.

Автор: Xanthir Размещён: 23.02.2009 02:22

HTML 5: отличия от HTML 4

HTML 5 еще в разработке, но про него уже известно много интересного. Нововведения на первый взгляд кажутся противоречивыми, как будет обстоять дело в реальности — покажет время.

Синтаксис

HTML 5 будет иметь два синтаксиса — «custom» HTML и XML. HTML синтаксис определяет детализированные правила синтаксического анализа (включая «обработку ошибок»). Пользовательские агенты будут следовать этим правилам для документов, имеющих MIME тип text/html. Вот пример синтаксиса HTML:

<!doctype html>
    Example document

Example paragraph

 

XML синтаксис совместим с документами XHTML1 и его реализациями. Чтобы использовать этот синтаксис нужно объявить MIME тип XML, а элементы должны быть выстроены согласно спецификации XML. Ниже приведен пример, который соответствует синтаксису XML:

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>
Кодировка символов

Для синтаксиса HTML разработчики могут использовать три способа установки кодировки:

  • на транспортном уровне. При использовании Content-Type HTTP заголовка, например.
  • используя символ Unicode Byte Order Mark (BOM) в начале файла. Этот символ обеспечивает сигнатуру используемого кодирования.
  • используя мета тег с атрибутом charset, который должен быть определен как первый дочерний элемент head.

Обратите внимание, что для определения кодировки используется

<meta charset="UTF-8">
вместо
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Для синтаксиса XML разработчики должны руководствоваться правилами спецификаций XML.

Новые элементы
  • section представляет часть документа или раздел
  • article представляет независимую часть содержания для включения в документ статей
  • aside представляет часть содержания, которая только частично связана с остальной страницей
  • header представляет заголовок section
  • footer — нижний колонтитул, может содержать информацию об авторе, авторском праве и так далее
  • nav представляет раздел документа, предназначенный для навигации
  • dialog может использоваться для выделения диалогов:
    <dialog>
     <dt> Costello
     <dd> Look, you gotta first baseman?
     <dt> Abbott
     <dd> Certainly.
     <dt> Costello
     <dd> Who's playing first?
     <dt> Abbott
     <dd> That's right.
     <dt> Costello
     <dd> When you pay off the first baseman every month, who gets the money?
     <dt> Abbott
     <dd> Every dollar of it.
    </dialog>
  • figure может использоваться для связи заголовка с медиа контентом:
    <figure>
     <video src=ogg>…</video>
     <legend>Example</legend>
    </figure>
  • audio и video для мультимедиа. Оба обеспечивают соответствующий API. Таким образом разработчики могут писать скрипты собственного пользовательского интерфейса, но также предусмотрен способ вызова стандартного API пользовательского агента. Вместе с этими элементами может быть использован source, если есть возможность организовать параллельные потоки.
  • embed используется для контента plugin’ов.
  • meter — для представления единиц измерений.
  • time — дата и/или время.
  • canvas используется для динамической отрисовки графики.
  • command представляет команду, которую может вызвать пользователь.
  • datagrid — интерактивное представление списка типа «дерево» или табличных данных.
  • details представляет дополнительную информацию, которую пользователь может получить по требованию.
  • datalist вместе с новым атрибутом list используется чтобы сделать combobox:
    <input list=browsers>
    <datalist id=browsers>
     <option value="Safari">
     <option value="Internet Explorer">
     <option value="Opera">
     <option value="Firefox">
    </datalist>
  • datatemplate, rule, и nest обеспечивают механизм шаблонов (templating mechanism) для HTML.
  • event-source используется для перехвата событий, посланных сервером.
  • output представляет определенный тип вывода, например, от вычислений, сделанных через скрипт.
  • progress представляет ход выполнения задачи, например, загрузки.
  • Атрибут type элемента input теперь имеет следующие новые значения:
    • datetime
    • datetime-local
    • date
    • month
    • week
    • time
    • number
    • range
    • email
    • url

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

Новые атрибуты

HTML 5 вводит несколько новых атрибутов для элементов, которые уже входили в HTML 4:

  • элементы a и area получили новый признак ping, который определяет список URI адресов, которые должны пропинговаться при переходе по гиперссылке. Принцип функционирования пока до конца не ясен.
  • элемент area теперь имеет атрибуты hreflang и rel
  • base получил атрибут target
  • атрибут value для li и атрибут start для элемента ol больше не deprecated
  • meta получил атрибут charset
  • новый атрибут autofocus может быть определен у input (кроме тех случаев, когда type атрибут — hidden), select, textarea и button. Это обеспечивает способ передачи управления
    форме во время загрузки страницы
  • атрибут form для input, output, select, textarea, button и fieldset позволяет связать элемент с более чем одной формой
  • input, button и form получили атрибут replace, который определяет, что будет с элементом после отправки формы
  • form, select и datalist имеют атрибут data, который учитывает автоматическое предзаполнение, в случае заполнения данными с сервера
  • новый атрибут required применяется к input (кроме тех случаев, когда type атрибут — hidden, image или кнопка) и textarea. Он указывает обязательные для заполнения поля
  • input и textarea имеют новый атрибут inputmode, который дает подсказку пользовательскому интерфейсу относительно того, какие данные ожидаются для ввода
  • теперь можно disable (отключить) сразу целый fieldset, что не было возможно прежде
  • элемент input имеет несколько новых атрибутов для определения ограничений: autocomplete, min, max, pattern и step, а также list, который может использоваться вместе с элементами select и datalist
  • input и button также получили новый атрибут template, который может использоваться для шаблонов повторения
  • элемент menu имеет три новых атрибута: type, label и autosubmit
  • script имеет новый атрибут async, который влияет на загрузку и выполнение сценария
  • элемент html имеет новый атрибут manifest, который указывает на кэш приложений, используемый вместе с API для автономных Web приложений

Несколько атрибутов из HTML 4 применяют ко всем элементам, поэтому их называют глобальными атрибутами: class, dir, id, lang, tabindex и title.

Появились также несколько новых глобальных атрибутов:

  • атрибут contenteditable указывает, что элемент доступен для редактирования
  • contextmenu может использоваться для указания на контекстное меню, созданное автором
  • draggable может использоваться вместе с новым drag&drop API
  • irrelevant указывает, что элемент еще или больше не актуален

Атрибуты для модели повторения (repetition model):

  • repeat
  • repeat-start
  • repeat-min
  • repeat-max
Отмененные элементы

Следующие элементы не включены в HTML 5, потому что их эффект достигается использованием CSS:

  • basefont
  • big
  • center
  • font
  • s
  • strike
  • tt
  • u

Следующие элементы не включенв в HTML 5, потому что их использование негативно сказывалось на удобстве и доступности:

Следующие элементы не включены, потому что использовались редко или они могут быть заменены другими элементами:

  • acronym
  • applet замещен object
  • isindex
  • dir замещен ul

Наконец noscript остался только в синтаксисе HTML, поскольку его использование предполагает разбор с помощью HTML парсера.

Отмененные атрибуты
  • accesskey для a, area, button, input, label, legend и textarea
  • rev и charset для link и a
  • shape и coords для a
  • longdesc для img и iframe
  • target для link
  • nohref для area
  • profile для head
  • version для map, img, object, form, iframe, a
  • scheme для meta
  • archive, classid, codebase, codetype, declare и standby для object
  • valuetype и type для param
  • charset и language для script
  • summary для table
  • headers, axis и abbr для td и th
  • scope для td

Кроме того, HTML 5 не имеет следующих атрибутов, поскольку они лучше обрабатываются CSS:

  • align для caption, iframe, img, input, object, legend, table, hr, div, h2-h6, p, col, colgroup, tbody, td, tfoot, th, thead, tr и body
  • alink, link, text и vlink для body
  • background для body
  • bgcolor для table, tr, td, th и body
  • border для table, img и object
  • cellpadding и cellspacing для table
  • char и charoff для col, colgroup, tbody, td, tfoot, th, thead и tr
  • clear для br
  • compact для menu, ol и ul
  • frame на table
  • frameborder приписывают на iframe
  • height для iframe, td и th
  • hspace и vspace для img и object
  • marginheight, marginwidth и scrolling для iframe
  • noshade для hr
  • nowrap для td и th
  • rules для table
  • size для hr, input и select
  • style для всех элементов
  • type для li, ol и ul
  • valign для col, colgroup, tbody, td, tfoot, th, thead и tr
  • width для hr, table, td, th, col, colgroup, iframe и pre
API

HTML 5 вводит множество API, которые должны помочь в создании Web приложений. Они могут использоваться вместе с новыми элементами.

  • 2D drawing API , который может использоваться с новым элементом canvas
  • API для проигрывания видео и аудио, который может использоваться с новыми элементами video и audio
  • выделенная область памяти (Persistent storage) с поддержкой данных в виде ключ / значение и SQL данных
  • API, который допускает автономную работу web приложений
  • API, который позволяет web приложений регистрировать себя для определенных протоколов или типов MIME
  • Editing API в сочетании с новым глобальным атрибутом contenteditable
  • Drag&drop API в сочетании с атрибутом draggable
  • Network API
  • API, который выстраивает историю посещения, чтобы предотвратить нарушение функционирования back кнопки (Этот API имеет необходимые ограничения безопасности)
  • Cross-document messaging (Передача сообщений между документами)
  • события сервера (Server-sent events) в сочетании с новым элементом event-source
Расширение HTMLDocument

HTML 5 расширил интерфейс HTMLDocument. Интерфейс теперь реализован на всех объектах интерфейса Document. Его новые методы:

  • getElementsByClassName()
  • activeElement и hasFocus
  • getSelection()
  • designMode и execCommand(), которые используются главным образом для редактирования документов
Расширение к HTMLElement

Интерфейс HTMLElement также получил несколько расширений:

  • getElementsByClassName()
  • innerHTML
  • classList введен для удобства доступа к className. Возвращаемый объект имеет методы has(), add(), remove() и toggle() для манипуляции классами элемента.

 

Что нового появилось в разметке HTML5 и отличия от HTML 4?

Ни для кого не секрет, что на смену уже устаревающему стандарту HTML 4.01, приходит новый стандарт, который называется HTML5.

Давайте посмотрим, какие новые возможности для нас несет HTML5.

1) Название

Первое, что сразу бросается в глаза – это то, что в названии HTML 4.01 версия «4.01» отделяется от HTML через знак пробела, HTML5 пишется слитно. Это не случайно. HTML5 – это принципиально новый стандарт, который не имеет отношения к предыдущей нумерации версия HTML.

2) У HTML5 появился новый doctype, который намного проще запомнить.

Теперь он пишется так:

<!DOCTYPE HTML>

Причем, не имеет значения регистр, в котором он написан, можно написать так:

<!doctype HTML>

И так

<!doctype html>

Эта короткая запись заменяет старую и длинную форму:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

3) Теперь кодировку можно указывать новым сокращенным способом:

<meta charset="UTF-8">

Вместо старого

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

3) Добавление новых элементов, которые добавляют логику и семантику на страницу. 

Основным конструктивным элементом в HTML4 был элемент div. По сути div – это просто прямоугольная область на странице, которая может содержать в себе все, что угодно.

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

В HTML5 div никуда не исчез, но появляются новые элементы, которые сами по себе несут какой-то логический смысл.

О некоторых из них можно почитать здесь.

4) Появились другие новые элементы, которые выполняют какие-то спецефические задачи.

5) Появилась новая технология построения оглавления веб-страницы (outline).

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

6) HTML5 добавляет новые правила, которые делают язык более строгим.

HTML4 был слишком вольным, в плане синтаксиса.

Ко всем урокам курса «Быстрый старт в HTML для начинающих»

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *