Чем отличается html 5
XHTML 2 против HTML 5
Вернемся в прошлое на десять с небольшим лет, в 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
XHTML 2.0 полностью основан на XML, разработчики отказались от наследства SGML и синтаксических особенностей, присутствующих в текущей web-разметке. Он позиционируется как «язык общего назначения», с минимальным функционалом по умолчанию, который легко расширить, используя CSS или другие технологии (XForms, XML Events, и т.д.). Этот модульный механизм позволяет группе разработчиков XHTML 2 сосредоточить свое внимание на общей разметке документа, пока остальные разрабатывают механизмы представления, интерактивности, построения документа и т.д.
Первым приоритетом для рабочей группы XHTML 2 является дальнейшее отделение контента и структуры документа от его представления. Другими целями являются повышенное удобство и доступность, улучшенную интернационализация, большая независимость от устройств, меньшее количество скриптов и интеграция с Semantic Web. Разработчики были меньше заинтересованы в обратной совместимости, чем их предшественники (и группа разработчиков HTML), что привело к удалению некоторого синтаксического багажа, существовавшего в ранних воплощениях HTML. Результатом стал более чистый и сжатый язык, исправляющий многие старые недочеты Web-разметки.
Обзор HTML 5
В то время как концепция 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.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 5
Ниже описаны некоторые возможности HTML 5, не имеющие аналогов в XHTML 2.0
API для web-приложений
HTML 5 вводит ряд API, значительно улучшающих оболочку для разработки на стороне клиента. Они делают из HTML 5 стек технологий для web-приложений, а не просто язык для разметки документов. Стоит отметить, что детали этих API сейчас проработаны группой разработчиков Web API (Web API working group), поэтому могут быть приняты как с остальной частью HTML 5, так и самостоятельно. Новыми API и соответствующими элементами являются:
Новые элементы
В HTML 5 вводится ряд новых возможностей, которых нет в XHTML 2.0:
Отслеживание пользователей оповещением (pinging) URI
Новый атрибут ping может использоваться в элементах a и area для отслеживания пользователей. Этот атрибут позволяет указать разделенный пробелами список URI, которые должны быть оповещены при переходе по ссылке, это позволяет уйти от использования переадресации или JavaScript’ов.
Только в XHTML 2.0
Новые возможности, которые доступны только в XHTML 2.0
Любой элемент может быть ссылкой
В XHTML 2.0 атрибут href можно указать в любом элементе, тем самым превратив его в ссылку. С этим изменением элемент a больше не является необходимым, но он сохраняется.
Любой элемент может быть изображением (или другим ресурсом)
В XHML 2.0 элемент img был удален. Но не волнуйтесь – теперь любой элемент может быть изображением. Идея в том, что все изображения имеют длинное описание, которое эквивалентно самому изображению. Добавлением атрибута src к любому элементу мы говорим браузеру загрузить указанный ресурс и разместить его на месте элемента. Если по какой-либо причине ресурс недоступен, будет отображено содержание элемента. Это позволяет разработчикам предоставлять несколько эквивалентных ресурсов, используя разные форматы файлов и представления, путем вложения элементов друг в друга.
Строки заменяют br
Новая структура заголовков
Новые элементы
Группа разработчиков XHTML 2 сосредотачивала внимание на создании более общего, упрощенного языка. В виду этого, они воздержались от добавления множества специализированных элементов для представления различных видов контента. Они утверждают, что новый атрибут role предоставляет механизм для внедрения богатых метаданных, которые делают ненужными специализированные элементы. Тем не менее, было включено несколько новых элементов:
Заключение
Оба предложения выглядят обещающе и содержат множество новых возможностей, указывающих на обычные проблемы 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 от HTML 5: Основные обновления
Чем отличается HTML от HTML 5? Узнайте, что такое HTML 5, какие имеет отличия и почему HTML это необходимость для веб-разработчиков.
Обновлено: October 17, 2021
Стандарты Проверки Фактов BitDegree.org
Чтобы обеспечить высокий уровень точности и актуальности информации, BitDegree.org регулярно проводит аудит и проверку фактов, следуя строгим редакторским правилам. Для соответствия стандартам надёжности, соблюдаются строгие правила добавления ссылок.
Весь контент на BitDegree.org соответствует данным критериям:
1. Только авторитетные источники такие как академические ассоциации или журналы могут быть использованы для целей исследования при создании контента.
2. Реальный контекст каждой освещаемой темы должен быть раскрыт читателю.
3. Если существует конфликт интересов в указываемом исследовании, то читатель должен быть об этом проинформирован.
Свяжитесь с нами, если вы думаете, что контент является устаревшим, неполным или сомнительным.
HTML5 на данный момент является основным строительным блоком Интернета. Это звучит просто, но это не так. По крайней мере не совсем так. Интернет в наши дни стал гораздо более интересным место, чем был когда-либо. И чтобы позволить эти интересным вещам работать, HTML должен был развиваться. Поэтому в этом руководстве мы поговорим о том, как ему удалось это сделать на примере различий между HTML и HTML 5. Но для начала, давайте узнаем, что такое HTML.
Содержание
Что Такое HTML?
Чтобы ответить на этот вопрос и рассказать про различия между нынешней и старой версией языка, мы должны расшифровать саму аббревиатуру. HTML означает Язык Гипертекстовой Разметки. Если вы не занимались веб-разработкой, то это вам явно не особо помогло, ведь так?
Что же, во-первых люди ошибочно считают HTML языком программирования, но это вовсе не так. Вместо этого, его можно считать способом давать разметки браузеру о том, как должна выглядеть страница. Будь-то текст, изображение или какой-либо другой элемент.
Основным различием HTML от более полноценного языка программирования является то, что HTML не может обрабатывать логические запросы. И именно этим занимается большинство языков программирования. Вы не можете сказать HTML делать одну вещь в одной ситуации, а другую в другой. Хотя программирование в основном из этого и состоит.
Это и будет краткий ответ на вопрос “Что такое HTML?” и наш первый шаг, чтобы узнать почему HTML5 это необходимость.
Итак, Как Работает HTML?
Ответ на этот вопрос также поможет нам понять различия между двумя версиями. Ведь пятая редакция языка построена на долгой истории веб-разработки и имеет дело с совершенно другим технологическим ландшафтом.
Тогда, каким образом работает HTML?
Всё, что вы пишите с помощью HTML говорит браузеру о том, что вы хотите увидеть на странице и в каком порядке. Если вы сделаете сайт с помощью простого HTML, то он будет выглядеть очень базовым, так как язык разметки не предназначен для стилизации сайта (для этого лучше воспользоваться CSS). Он только помещает элементы, которые вы хотите и создаёт необходимую структуру сайта (именно поэтому он является весьма важным звеном Интернета). Хотя некоторые утверждают, что HTML и является вебом.
Проще говоря, HTML работает определяя различные элементы в (открывающих) и (закрывающих) тегах. Они говорят браузеру какой там должен быть элементы и где он должен находиться.
Некоторые примеры:
Символ p в тегах говорит браузеру, что это текстовый элемент абзац.
Если вы хотите узнать про теги больше, то загляните в справочную часть нашего сайта по HTML тегам.
Конечно, это лишь базовое представление и всё гораздо сложнее, но всё сводится к тому, что HTML помещает один элемент за другим. Но КАК и ГДЕ он помещает эти элементы и какие теги для этого используются менялось с течением времени множество раз. Это ещё одно из различий между HTML и HTML 5. С течением времени HTML эволюционировал и HTML5 стал новой вехой в его развитии и некоторые не понимают, что это обязательная часть изучения данного языка.
Самые Полюбившиеся Статьи
Ищете более подробную информацию по какой-либо связанной теме? Мы собрали похожие статьи специально, чтобы вы провели время с пользой. Взгляните!
Курсы Машинного Обучения edX: Что Мы Рекомендуем?
Заинтересованы в прохождении курсов машинного обучения онлайн? Взгляните на лучшие edX курсы машинного обучения, которые вы можете пройти сейчас!
Курсы Рисования Skillshare: Лучшие Уроки Для Демонстрации Вашей Креативности
Станьте удивительным художником, пройдя отобранные вручную курсы рисования Skillshare!
Курсы Фотографии Skillshare: Как Запечатлеть Мир
Какие курсы фотографии Skillshare стоят вашего внимания? Взгляните на лучшие варианты и узнайте больше.
Что Такое HTML5?
Хорошо, теперь мы знаем об HTML. Тогда, HTML5, что это такое?
Люди, которые создали HTML в 1995 году, даже не имели понятия насколько сильно измениться Интернет в будущем
Конечно же, язык разметки тоже не должен был стоять на месте. Поэтому HTML 5 стал самой последней версией этого Языка Гипертекстовой Разметки. Его предназначением стало достижение полной совместимости сайта с любым доступным на данный момент браузером.
Безусловно, вы можете создать сайт с помощью предыдущей версии языка HTML, но она не будет обладать теми преимуществами, которые предлагает HTML 5. Вероятно, самое явное различие между HTML и HTML 5 заключается в том, как они обрабатывают некоторые современные особенности сайтов, в частности адаптивность для мобильных устройств, число которых растёт с каждым днём. И правда заключается в том, что при создании сайта в 2021, вы обязаны использовать HTML5.
Различия Между HTML и HTML5
Теперь, когда мы знаем про HTML5, что это и почему используется. Давайте взглянем насколько сильно он изменился по сравнению со своими предшественниками.
Вы ещё помните, когда сайты выглядели так?
Первая самая базовая версия HTML была “создана” в 1993, а HTML 2.0 появился уже в 1995. Попробуйте вспомнить самый первый сайт, который вы увидели (если вы не можете вспомнить, то они мало чем отличались от примера выше). Теперь, откройте новую вкладку и перейдите на любой другой современный сайт.
Вы видите насколько продвинутыми стали новые сайты по сравнению с прошлым?
Это кажется невероятным, но создание чего-то современного с помощью самых первых версий HTML будет почти невозможно. На тот момент просто не было необходимых технологий для этого, поэтому в них не было нужды.
Поэтому чем больше возрастали возможности компьютеров и Интернета, тем больше разработчиков по всему миру работали над HTML с целью улучшения возможностей своих сайтов.
После HTML 2.0 пришёл HTML 3.0 в январе 1997, но вскоре его место занял (около 11 месяцев спустя) HTML4.
HTML4 был создан в 1997 году W3C (Консорциумом Всемирной Паутины) и оставался основной Интернета более чем 17 лет (гораздо больше, чем его предшественники). И вот, в 2014 появился HTML 5, который продолжает получать широкое распространение среди разработчиков. Ещё одним отличием HTML от HTML 5 является то, что это будет последняя версия данного языка. Именно поэтому HTML5 останется надолго и будет обновляться без каких-либо серьёзных изменений или новой HTML6 (по крайней мере пока).
Но, давайте рассмотрим более подробнее: Как был адаптирован HTML5 к изменения в современной веб-разработке?
Лучшая Обработка Ошибок
Одним из самых ключевых различий является более лучшая обработка ошибок. Почему это настолько важный аспект?
Что же, к сожалению, никто не может написать код, который никогда не сломается. По крайней мере без изменений.
Поэтому одной из целей разработки HTML5 была возможность упрощения процесса создания браузерных парсеров, которые лучше обрабатывают сломанный HTML-код..
HTML5 был разработан для предоставления постоянной обработки ошибок, что сделало процесс более единообразным и значительно сократило усилия и затраты на создание работающего браузера.
HTML5 позволяет вашему браузеру показывать вам более правильную страницу, даже если разработчики допустили небольшую ошибку или пропустили где-то стиль.
Поддержка Современных Веб-Приложений
Улучшенная поддержка веб-приложений также стала важной частью обновления. Почему она необходима?
Представьте сайты 90-ых. Теперь подумайте о YouTube или Netflix (изображение ниже). Современные сайты является своего рода отдельной программой, которая работает в вашем браузере. HTML5 это одна из причин, по которым разработчики могут воплощать в жизнь подобные проекты.
Когда HTML4 являлся золотым стандартом, разработчикам приходилось искать лазейки для обхода его ограничений, вроде Flash, JavaScript, расширений браузера и многих других инструментов.
С появлением HTML5 многие из этих инструментов стали частью самого HTML, что позволяет воплощать многочисленные проекты без каких-либо дополнительных инструментов.
Улучшенная Семантика
Другим отличием между HTML и HTML5 является улучшенная семантика или другими словами более упрощённый синтаксис.
Сложный сайт может быть очень запутанным. Различные элементы по всему сайту, сотни, если не тысячи различных из них.
Цель изменения была в том, чтобы сделать процесс написания и проверки HTML более простым.
Улучшения Мобильной Поддержки
В 1997, когда был выпущен HTML4, мобильный телефон был относительно новой вещью. Телефоны были необходимы только, что же, для звонков и иногда сообщений. Вы сами знаете насколько всё изменилось
В 2014, когда был представлен HTML5, мы жили уже в совершенно другом мире. Смартфоны с технологией 4G стали важной частью повседневной жизни каждого человека.
Такой сдвиг поспособствовал другому различию между двумя версиями — улучшенной мобильное поддержке.
Экраны телефонов чаще всего длиннее, чем шире, тогда как с мониторами компьютеров дела обстоят совсем наоборот. Что выглядит отлично на компьютере, может выглядеть совершенно неправильно на смартфоне (проблема 1: контент шире чем экран), если сайт не был разработан специально для мобильных.
Именно в этом аспекте HTML5 облегчил жизнь для разработчиков по всему миру.
И HTML5 выбрал правильное время для этого. Более чем половины всех пользователей Интернета используют смартфоны. Возможно, что сейчас этим пользователем являетесь вы. Будете ли вы оставаться на сайте, который выглядит ужасно на телефоне? Вы даже вряд-ли захотите посетить его потом с помощью ПК.
Более того, по данным ThinkWithGoogle, 80% пользователей более склонны купить что-то у бренда, который имеет мобильную версию сайта или приложение. Поэтому мобильная поддержка стала важной не только для пользователей – но и для самих компаний.
Поддержка Аудио и Видео
Работа с видео и аудио является ещё одним отличием HTML от HTML5.
В 1997 году с коммутируемым подключением и компьютерами, которые уступают современному тостеру, для HTML не стояло задачи по внедрению поддержки аудио или видео на сайтах.
В 2014 и даже в 2021? Всё совсем по другому. Интернет стал настолько быстрее, что аудио и видео контент стал невероятно важным. Ни для кого не секрет, что различные подкасты и видео стали гораздо популярнее написанного контента.
В такой среде неудивительно, что этот аспект стал очень важным для развития основного языка разметки.
Поддержка Векторной Графики
В новой версии значительно улучшена поддержка векторной графики, которая является одним из инструментов, которые делают сайты более красивыми на различных устройствах..
Тогда, что случается, если вы хотите использовать небольшое изображение, но ваш дизайн требует более крупного? Что же, вы теряет в качестве при попытке сделать его крупнее: появляется эффект пикселизации. Векторная графика в какой-то степени решает эту проблему.
Конечно, есть вариант начать всё заново с помощью Photoshop, но если исходный файл небольшого размера, то много вы не добьётесь.
Во времена 4k разрешения на телевизорах и практически неограниченной скорости соединения, векторная графика является отличным способом обеспечить идеальный внешний вид важных элементов сайта вне зависимости от размера экрана.
HTML и HTML5 – в чем разница?
Дата публикации: 2017-02-14
От автора: язык гипертекстовой разметки или просто HTML – стандартный язык для создания сайтов. Как и все в мире технологий, HTML с момента появления в конце 1980-х очень быстро развивался. Новичкам в программировании следует учить последнюю версию языка – HTML5. Однако глубокое понимание эволюции языка поможет новичкам и профи оценить прошлое, настоящее и будущее веб-разработки.
Основы HTML
HTML код указывает браузеру, как рендерить контент. Разметка представляет собой базовую структуру страниц. На протяжении десятилетий HTML считался краеугольной технологией в интернете наряду с CSS и JS. Стандарты HTML и CSS регулируются консорциумом всемирной сети.
Из названия следует, что HTML нельзя назвать языком программирования. Это язык разметки, используемый для организации данных в интернете. HTML документы состоят из HTML элементов, представленных в виде тегов. Теги записываются в угловых скобках и разделяют контент на категории. Простой пример HTML структуры с сообщением «Hello World» выглядит следующим образом:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
HTML документы загружаются с серверов и говорят браузеру, как отображать текст, ссылки, изображения и интерактивные формы.
История HTML
Новые версии HTML фокусировались на повышении доступности интернет технологий, а не на рендеринге старых версий. Например, помимо новых опций по созданию макетов в HTML4 улучшилось размещение элементов для слабовидящих пользователей.
Последнее крупное обновление с 1990-х было направлено на интернационализацию языка, а также на то, чтобы упростить программистам со всего мира возможности для улучшения HTML. Как часть этих усилий, в качестве официальной кодировки HTML была принята Universal Coded Character Set. Этот шаг улучшил отображение множества символов и акцентов, которые есть в человеческих языках и диалектах.
Как результат, улучшилось архивное индексирование, что привело к повышению точности поиска. Кроме того, появилась очень качественная типографика. В HTML4 веб-дизайнеры также получили дополнительный контроль над скоростью и порядком рендеринга контента.
HTML или HTML5: эволюция веб-разработки
Интернет сейчас сильно отличается от того, что был в 1999 году, когда вышло последнее крупное обновление HTML 4.01. Сейчас есть такие технологии, которые мы не могли себе представить на рубеже веков. Смартфоны, планшеты и другие мобильные устройства – это новые вызовы для инженеров и разработчиков ПО. Ускоряющаяся глобализация сделала стандартизацию интернет технологий приоритетной задачей для всех с долей в мировой экономике. Мировое потребление интернета растет год за годом, и используемые технологии по прогнозам будут развиваться все быстрее и быстрее.
Поэтому был реализован 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.
Большей части разработчиков не придется чинить свои старые сайты. Однако если вы связываете свое будущее с созданием сайтов, вам следует узнать о преимуществах 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 теперь может работать в фоновом режиме;
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
глобальные атрибуты типа tabindex, repeat и id теперь можно применять ко всем элементам.
На изображении ниже показаны основные свойства 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 автоматически подсвечивается.
4. В тегах script and link больше не нужно указывать атрибут type
В HTML5 подразумевается, что теги script и link ссылаются на скрипты и стили, то есть необходимость в использовании атрибута type отпала.
Будущее HTML и HTML5
Новое поколение разработчиков без сомнений найдет новые преимущества в HTML5, а социальные сети помогут развитию языка. W3C анонсировали, что в будущих обновлениях HTML5 приоритет будет отдан основам приложений, таким как инструменты конфиденциальности. Основной упор в HTML5 делался на определение надежных совместимых свойств, поэтому ненадежные пойдут уже в HTML 5.1. Одним из наиболее противоречивых предложений было включение инструментов управления цифровыми правами.
На начало 2017 года веб-разработчики еще могут обойтись хорошим знанием старых HTML спецификаций. Однако если вы хотите продолжать свою карьеру и не хотите изучать HTML5, вы сделаете себе только хуже. Чего только стоит встроенная поддержка видео и аудио по сравнению с 4.1.
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3