В чем отличие html5 от html 2.0. Отличия html5 от html4.01 и xhtml1.0

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

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

Подобные документы

История появления HTML5. Отличия HTML5 от предыдущих версий. Сравнительный анализ плюсов и минусов. Примеры российских сайтов на HTML5. Увеличение скорости работы. Технология Web Storage. Структурные возможности HTML5. Сравнение популярных браузеров.

курсовая работа , добавлен 23.10.2013


HTML5 - язык для структурирования и представления содержимого для всемирной паутины, а также основная технология, используемая в Интернете. Создание web-приложения и использованием технологии Asp.net MVC 3 и языка web-разметки HTML5. Состав платформы MVC.

курсовая работа , добавлен 25.05.2012


Жанры и форматы мультимедиа. Специфика интернета как медиаплатформы. Способы создания и распространения мультимедийного контента. Разработка контента мультимедийного интернет-портала о городских экстремальных видах спорта: аудитория, рубрикация и пр.

дипломная работа , добавлен 20.08.2017


Формирование и структура, взаимосвязь основных элементов учебного сайта "HTML5&CSS3" для предоставления пользователям информации о новейших технологиях в web-индустрии и обучения практическим навыкам их применения. Разработка руководства пользователя.

курсовая работа , добавлен 17.06.2014


Концепция Web 2.0. Язык разметки HTML5. Инструментальные средства для создания веб-приложений. Язык объектного анализа и проектирования UML. Осуществление наполнения и тестирования разработанного интернет-магазина. Форматирование содержимого Web-страниц.

дипломная работа , добавлен 05.06.2016


Исследование возможностей и областей использования языка программирования JavaScript. Сравнительный анализ языков программирования JavaScript и PHP. Разработка интерактивного Web-приложения на примере теста по теме "Программирование на языке Delphi".

практическая работа , добавлен 04.02.2015


Сравнительная характеристика, возможности и функции языков программирования JavaScript и PHP. Основные области их использования. Разработка интерактивного Web-приложения с применением JavaScript на примере теста по теме "Программирование на языке Delphi".

курсовая работа , добавлен 01.07.2014


Разработка и практическое внедрение мультимедийного обучающего курса по дисциплине "НЭК АСОИУ". Анализ свойств модифицированной LMS MOODLE и ее возможности по оказанию поддержки и структурированию контента. Эффективность подхода к формированию курса.

дипломная работа , добавлен 21.05.2009

Многие из вас наверное уже немного знакомы с этими стандартами языка гипертекста или хотя бы слышали о них. Из старых версий самой удачной, я считаю, является HTML4.01. Почему нет упоминания о XHTML 1.0? - спросите вы. Потому что синтаксис написания кода XHTML 1.0 очень схож с предыдущей версией HTML4.01 . Добавились лишь определенные правила, которые следует соблюдать.

Что же нового появилось в новом стандарте HTML5 ? Очень много! Во-первых: появились новые структурные элементы (около 28 штук), благодаря которым улучшилась семантика написания кода; во-вторых: появилась поддержка аудио и видео файлов (в предыдущих версиях такого не наблюдалось!); ну, и наконец, в-третьих: появилась возможность рисования в новой среде canvas с помощью JavaScript. По последнему пункту в интернете ходит много всяких споров, насчёт: «Заменит ли HTML5 всеми любимый FLASH?» Пока что - нет, не заменит! А дальше поживем увидим.

Так какое же главное отличие HTML5 от своих предшественников? В этом вопросе можно разобраться взглянув на два разных кода, которые должны одинаково отображаться в окне браузера.

Код HTML4.01:

Вообще говоря про новые теги, могу сказать большее:

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

P/s: скажу немного новичкам: «Если вы затрудняетесь с ответом: с какого языка начать учить, то начните учить с азов (HTML4.01). Я думаю, вы его быстро освоите!»

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

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

Синтаксис

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

01

03 < head >

04 < title >Example document

05

06 < body >

07 < p >Example paragraph

08

09

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

Для синтаксиса 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

• 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

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

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

• элементы 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 приложений

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

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

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

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

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

Отмененные атрибуты

• 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

• align для caption , iframe , img , input , object , legend , table , hr , div , h1-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

• 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

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

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

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

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

Синтаксис

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

Example paragraph

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

Example paragraph

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

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

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

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

• section представляет часть документа или раздел
• article представляет независимую часть содержания для включения в документ статей
• aside представляет часть содержания, которая только частично связана с остальной страницей
• header представляет заголовок section
• footer – нижний колонтитул, может содержать информацию об авторе, авторском праве и так далее
• nav представляет раздел документа, предназначенный для навигации
• dialog может использоваться для выделения диалогов:

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

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

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

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

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

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
• center
• strike

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

• frame
• frameset
• noframes

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

• 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 , h1-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? Отличия HTML5 от HTML 4

Спецификация HTML5 несет в себе множество изменений разного уровня и разной важности. Принципиально, ключевые изменения можно разделить на 7 блоков:

а) Семантика (смысловое значение единиц языка)

В HTML5 появился ряд новых семантических тегов, позволяющих более осмысленно организовывать внутреннюю структуру веб-страниц. Это включает как блочные теги вроде header, footer, article, так и теги для разметки текста, например, mark, ruby, details. Ряд существующих тегов HTML4 признан устаревшим, отдельные теги поменяли свое значение, определенные изменения претерпели атрибуты.

б) Мультимедиа

HTML5 добавляет встроенную поддержку мультимедийного контента (аудио и видео) прямо в HMTL-разметке -- с соответствующим API для управления.

в) Графика

Работать с графикой на стороне клиента стало заметно проще. В HTML5 добавлен элемент canvas и специальный API на JavaScript для работы с ним. Canvas представляет собой динамическую «поверхность», поверх которой можно программного рисовать. Также в HTML5 официально включен тег svg, позволяющий внедрять векторную графику, описываемую соответствующим веб-стандартом SVG (Scalable Vector Graphics).

г) Веб-формы

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

д) JavaScript APIs.

В HTML5 включены новые возможности по перемещению объектов (Drag & Drop), работа с историей переходов (History API), а также ряд мелочей, вроде возможности сделать контент редактируемым прямо в текущем месте с помощью Content Editable атрибутов.

е) Новый DOCTYPE

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

В HTML 4 было 3 вида элемента :

• 1. Строгий (Strict)
• 2. Переходный (Transitional)
• 3. С фреймами (Frameset)

Зачастую выбор того или иного элемента DOCTYPE был достаточно затруднителен. В HTML5 DOCTYPE всего один он пишется так:

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

"http://www.w3.org/TR/html4/strict.dtd">

ж) Синтаксис

HTML 5 будет иметь два синтаксиса - "custom" HTML и XML. HTML синтаксис определяет детализированные правила синтаксического анализа (включая "обработку ошибок").

XML синтаксис совместим с документами XHTML1 и его реализациями. Чтобы использовать этот синтаксис нужно объявить MIME (Multipurpose Internet Mail Extensions) тип XML, а элементы должны быть выстроены согласно спецификации XML.

Рисунок 2 - основные свойства HTML5