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

Основы HTML

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

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

Hello World

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 теперь может работать в фоновом режиме;

глобальные атрибуты типа 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.

В последний год, а может и два, значительно возрос интерес к разрабатываемой в настоящее время спецификации HTML 5. Это касается и производителей браузеров, и создателей сайтов. Однако, целостного взгляда на отличия новой спецификации от старой я ещё не находил, поэтому решил изложить суть официального документа рабочей группы HTML5 о различиях этой спецификации с её предыдущей версией.

Эта статья не закончена, здесь описаны лишь первые два из четырёх основных разделов документа о различиях HTML4 и HTML5. Она будет дополнена и завершена в ближайшее время, также возможны обновления по мере изменения исходного документа W3C.

1. Введение

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

HTML4 стал Рекомендацией W3C в 1997. В то время как он продолжал для многих быть грубым руководством к основным функциям HTML, он также не обеспечивал достаточной информации для построения реализаций, которые взаимодействуют с другими реализациями, и что важнее с критическим объёмом созданного HTML-содержимого. Это относилось и к XHTML1 и DOM Level 2 HTML. HTML5 заменит эти документы.

Рабочий проект HTML5 начал разрабатываться в 2004 году с попытки изучения современных реализаций HTML и созданных с помощью них HTML-документов. Рабочий проект:

• Описывает отдельный язык, названный HTML5, который может использовать синтаксис HTML или XML.
• Определяет подробные модели обработки для развития способных к взаимодействию реализаций.
• Совершенствует разметку для HTML-документов.
• Внедряет разметку и API для зарождения идиом, таких как Web applications.

1.1. Нерешенные проблемы

HTML5 — пока еще незаконченная спецификация. Содержание HTML5, также как и содержание этого документа («HTML5 differences from HTML4»), напрямую зависящего от HTML5, всё ещё обсуждается в Рабочей группе HTML и WHATWG. Нерешенные проблемы включают в себя (список не исчерпывающий):

• Семантическое определение некоторых элементов, ранее предназначенных лишь для оформления.
• Сведения о доступности, возможностях замены и сопровождения альтернативным содержимым медиа-данных, таких как атрибуты alt и summary .

1.2. Обратная совместимость

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

Агенты пользователей, однако, всегда должны будут поддерживать устаревшие элементы и атрибуты, и именно поэтому спецификация полностью отделяет требования к авторам и агентам пользователей. Это означает, что авторы не могут использовать элементы isindex или plaintext , но агентам пользователей необходимо их поддерживать для совместимости с созданным HTML-содержимым.

1.3. Разрабатываемая модель

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

1.4. Влияние на веб-архитектуру

Предполагается, что на веб-архитектуру окажут влияние следующие области/возможности, определенные в HTML5:

• Использование DOM в качестве основы для описания языка.
• Концепция окружения браузера.
• Разделение требований к агентам пользователей и авторам HTML-документов.
• Использование обязательных определений вместо абстрактных определений с требованием эквивалента «чёрного ящика» при реализации.
• Новая концепция модели содержимого (взамен концепции строчных и блочных элементов в HTML4).
• Рассмотрение доступности как неотъемлемой концепции для создания новых возможностей (таких как атрибут hidden , элемент progress и т.п.) вместо каких-либо расширений (к примеру, атрибута alt).
• Подробное определение семантики (например, алгоритма outline, взамен его нечёткой семантики в HTML4).
• Элементы menu и command .
• Основополагающие идеи.
• Оффлайн-кеш веб-приложений.
• Определение алгоритма контекстной навигации в браузере (browsing context "navigation" algorithm) и связанных с ним алгоритмов просмотра истории сессий (session history traversal algorithms).
• Контроль типов содержимого и кодировок.
• Очень строгое и недвусмысленное описание парсера.
• Возможности contentEditable и UndoManager.
• Архитектура Drag&Drop и Copy&Past.
• Новые возможности «sandbox» («песочницы», учебно-эксперементальных сред) для iframe .

2. Синтаксис

HTML5 использует синтаксис HTML, который совместим с HTML4- и XHTML1-документами, опубликованными в Интернете, но несовместим с нечёткими функциями SGML языка HTML4, такими как команды обработки (processing instructions) и сокращенная разметка (shorthand markup). Документы, использующие синтаксис HTML почти всегда имеют медиа-тип text/html .

HTML5 также описывает подробные правила синтаксического анализа (включая обработку ошибок), которые в значительной степени совместимы с уже существующими популярными реализациями парсеров. Агенты пользователей должны использовать эти правила для документов, которые имеют медиа-тип text/html . Ниже приведен пример документа, который соответствует HTML-синтаксису языка HTML5:

Example paragraph

HTML5 также определяет медиа-тип text/html-sandboxed для документов, использующих HTML-синтаксис и содержащих непроверенное (разрабатываемое) содержимое.

Другим синтаксисом, который можно использовать для HTML5, является XML. Этот синтаксис совместим с реализациями и документами XHTML1. Документы, использующие такой синтаксис, должны иметь медиа-тип XML, а элементы должны быть помещены в пространство имён http://www.w3.org/1999/xhtml по правилам, в дальнейшем устанавливаемым спецификациями XML.

Ниже представлен пример документа, который соответствует XML-синтаксису языка HTML5. Обратите внимание на то, что документы XML должны иметь медиа-тип XML, например, application/xhtml+xml или application/xml .

Example paragraph

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

• На транспортном уровне можно использовать заголовок HTTP Content-Type .
• Использовать символ маркера порядка байтов Unicode (BOM) в начале файла. Этот символ обеспечивает сигнатуру для использования необходимой кодировки.
• Используя элемент meta с атрибутом charset . Например, может использоваться для установки кодировки UTF-8. Эта запись заменяет более длинную , которая также допустима в HTML-синтаксисе.

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

2.2. DOCTYPE

HTML-синтаксис HTML5 требует наличия DOCTYPE для гарантирования того, что браузер отобразит страницу в режиме поддержки стандартов. У DOCTYPE нет иного предназначения и поэтому он необязателен для XML. Документы с медиа-типом XML всегда отображаются в режиме поддержки стандартов. Объявление DOCTYPE должно быть следующим: , оно регистронезависимо в HTML-синтаксисе. DOCTYPE в ранних версиях HTML был длиннее, потому что язык HTML был основан на SGML, и поэтому требовал ссылки на DTD . В HTML5 такой ссылки не требуется, и DOCTYPE нужен лишь для включения режима поддержки стандартов для документов с HTML-синтаксисом. Браузеры уже выполняют переключение в режим стандартов при использовании объявления .

2.3. MathML и SVG

HTML-синтаксис языка HTML5 допускает использование элементов MathML и SVG непосредственно внутри документа. Ниже представлен пример использования такой возможности:

Зелёный круг:

Более сложные сочетания также допустимы. Например, с помощью SVG-элемента foreignObject вы можете внедрять MathML, HTML внутрь фрагмента SVG, который сам находится внутри HTML.

2.4. Прочее

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

• HTML теперь имеет встроенную поддержку идентификаторов IRI , хотя они могут использоваться в полной мере, только если документ имеет кодировку UTF-8 или UTF-16.
• Атрибут lang может иметь значение пустой строки или верного идентификатора языка, также как и атрибут xml:lang в XML.

Многие из вас наверное уже немного знакомы с этими стандартами языка гипертекста или хотя бы слышали о них. Из старых версий самой удачной, я считаю, является 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. Отличия 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