HTML5 простыми словами. Пять вещей, которые надо знать об HTML5
В последние несколько лет ведется активная разработка HTML5. Инновационный язык разметки гипертекста должен разом решить все проблемы и вопросы, связанные с проектированием и разработкой веб-сайтов.
Правда, до последнего момента так и не было заявлено о завершении работ и достижении успешного результата. Чтобы лучше понять, что такое HTML5, полезно обратиться к истории и проанализировать результаты предыдущих этапов поиска идеального кода. Несмотря на незаконченность работы, все больше появляется HTML5-сайтов.
HTML1 и HTML2
Первые версии были очень несовершенны, да к тому же не стандартизированы. Каждый дизайнер писал код, как ему казалось лучше. Поэтому сайты часто неадекватно отражались в разного типа браузерах. Поэтому от этих языков очень быстро отказались.
HTML3.0
Третья версия уже приобрела некий единообразный формат и позволяла делать сайты приличного качества. Однако были и серьезнейшие проблемы. Например, в HTML3 все форматирование и выравнивание делалось в рамках самого кода станицы.
На странице размещалась и графика и скрипты. Это сильно увеличивало вес веб-страниц и серьезно замедляло загрузку сайта. Постепенно представление о качественном сайте существенно расширилось. Потребовалась гораздо большая интерактивность и медийные возможности. Пользователи интернета стали гораздо более взыскательными к возможностям веб-проекта.
HTML4.1
Считается самым совершенным вариантом. Все внутреннее форматирование было вынесено в каскадные таблицы стилей, работающие по принципу стилей в MS Word. Кроме того, сами таблицы было принято выносить за пределы страниц и размещать в отдельных директориях. Введение в действие CSS привело к достижению соответствия внешнего вида страницы в браузере задумкам веб-мастера.
Отдельно стали располагаться графические и программные элементы. Все это привело к значительному снижению веса кода и ускорению работы сайтов. Людям такая ситуация понравилась и до сегодняшнего дня большая часть сайтов сделана именно на HTML4.1.
XHTML и DHTML
Довольно сомнительные попытки сделать сайты более стандартными и динамичными. Сложности кодирования и чрезмерная строгость языка не способствовали широкому распространению этих версий.
Истоки появления HTML5
Появились мобильные компьютеры, экраны стали сенсорными. При этом каждый производитель устанавливает на своих девайсах операционную систему собственной разработки. Пользователи привыкли пользоваться компьютерами не просто как электронной пишущей машинкой, а как многофункциональными медиа-развлекательными центрами. Общение по видеотелефонии через интернет стало массовым явлением.
Поэтому от нового кода требовались современные условия.
- Обеспечить кроссплатформенность, одинаковость отображения во всех типах браузеров.
- Сайт должен быть одинаково хорошо читаем в десктопах, смартфонах и планшетах любых производителей.
- Приспособленность к сенсорному управлению для мобильных компьютеров.
- Способность воспроизводить видео без помощи Flash–плейера. Многие планшеты вообще не поддерживают эту технологию.
- Возможность открывать документы разных форматов без дополнительных приложений, которые необходимо устанавливать на компьютер.
- Повысить быстродействие сайтов. Что особенно важно для мобильного интернета, который обеспечивает меньшую скорость.
- Сделать сайты динамичными и интерактивными. Современный пользователь желает общаться с интернет-ресурсом почти как с человеком.
Короче говоря – HTML5 должен удовлетворить самые изысканные вкусы пользователей и позволить разработчикам легко и просто делать великолепные веб-сайты.
Насколько успешно идут работы по созданию самого совершенного и стандартного языка гипертекста? Такие сайты действительно многое могут. Если у вас нет Flash-плейера, сайт сам это понимает и предлагает просматривать видео и слушать музыку с помощью своих возможностей.
HTML5–сайты на самом деле стали очень шустрыми. Что касается динамических возможностей и интерактивности, большинство пользователей интернета привыкли пользоваться всеми этими прекрасными вещами уже на подсознательном уровне.
Люди просто пользуются удобствами современных технологий, не вспоминая, что так было далеко не всегда. Вполне возможно, что затянувшаяся разработка HTML5 так никогда и не закончится.
Интернет и компьютеры так быстро совершенствуются, что достаточно тяжело предвидеть будущее. Возможно, появятся такие возможности компьютеров, о которых сегодня никто и не подозревает. Сегодня голосовой набор текста представляется почти чудом, а ведь специалисты прогнозируют, что буквально через пять лет никто не будет пользоваться клавиатурой и мышью. Возможно, компьютеры научатся читать мысли человека и понимать его желания.
Люди, плохо знакомые со сферой веб-дизайна, часто слышат слово “разметка” и задаются вопросом, что оно означает и как отличается от более широко известного термина “код”. В основном язык разметки предназначен для обработки, определения и представления информации о тексте; теги стилей и текстовые аннотации записываются в файлах стилей, чтобы упростить работу с текстом для компьютера. Исторически сложилось, что термин “разметка” произошел от английского marking-up , а сам процесс от manuscript marking-up – процесса разметки рукописи перед отдачей ее в печать. Здесь речь пойдет о наиболее часто используемом языке разметки – HTML. Несколько лет назад для этого языка было выпущено обновление под названием HTML5. В этом руководстве мы расскажем, что такое HTML5 и поведаем о различиях между HTML и HTML5.
Что такое HTML?
HTML можно назвать основным языком Всемирной паутины. Большинство веб-страниц, размещенных в Интернете, написаны в какой-либо из вариаций HTML. С помощью него разработчики определяют то, как мультимедиа, текст или гиперссылки будут отображаться среди другого контента в браузере. Начиная от элементов, которые устанавливают связи с вашим документом (гипертекстом), до элементов которые делают эти документы интерактивными (например формы) – все это является составными частями HTML.
Стандарт HTML был разработан W3C или Консорциумом Всемирной Паутины в 1997 году. В HTML для определения структуры текста используются теги; теги и элементы выделяются с использованием символов < и >. Вот лишь некоторые из примеров для ранее упомянутых тегов – это заголовки, таблицы, абзацы и т. д. В свою очередь, браузеры отвечают за визуализацию содержимого страницы с помощью этих тегов. HTML не был единственным стандартом веб-разработки. В первые дни развития Интернета все теги контента и стили присутствовали на одном гигантском, громоздком (и довольно сложном) языке. Со временем W3C пришла к решению о необходимости разделения контента и стиля страницы; Это привело к созданию таблиц стилей или CSS. В настоящее время теги, которые используются для определения стиля текста (например FONT), нежелательны и почти не используются, на их место пришли таблицы стилей и только теги определения содержимого (например H1) по-прежнему составляют ядро HTML.
С течением времени в HTML было много обновлений, и в настоящее время его новейшей версией является HTML5. HTML5, конечно прежде всего является языком разметки, но он приобрел множество функций в отличии от HTML и устранил некоторые из строгостей, присутствовавших в XHTML. Хотя HTML5 обновляется практически каждый день, однако новых выпущенных пронумерованных выпусков нет. Основным различием между HTML и HTML5 может стать то, что ни аудио, ни видео не являются составной частью HTML, тогда как они оба могут рассматриваться как неотъемлемые части HTML5.
Чтобы полностью ответить на вопрос что такое HTML, нужно затронуть и этапы его развития. Так как с течением времени он неоднократно изменялся.
Единственной постоянной вещью в области информационных технологий является то, что периодические обновления и изменения неизбежны. Ни один язык не может избежать обновлений или новых выпусков. HTML не является исключением. HTML5 был выпущен с целью улучшения работы Всемирной паутины как для разработчиков, так и для обычных пользователей. Как уже упоминалось, самым большим преимуществом, которое имеет HTML5 над своим ненумерованным предшественником, является то, что у него есть поддержка аудио и видео высокого уровня, которая не была частью спецификации в предыдущих HTML. Другие различия между HTML и HTML5:
- SVG, canvas и другая виртуальная векторная графика поддерживаются в HTML5, тогда как в HTML использование векторной графики стало возможным только при использовании его в сочетании с различными технологиями, такими как Flash, VML, Silver-light и т.д.
- HTML5 использует базы данных SQL и кеш приложений для временного хранения данных, тогда как в HTML для этого используется только кэш браузера.
- Еще одно отличие между HTML и HTML5, о котором стоит упомянуть: первый не позволяет запуск JavaScript в коде (вместо этого он работает в потоке интерфейса браузера), тогда как последний обеспечивает полную поддержку JavaScript для запуска в фоновом режиме.
- HTML5 не основан на SGML, и это позволяет ему иметь улучшенные правила синтаксического анализа, которые обеспечивают улучшенную совместимость.
- В HTML5, в тексте могут использоваться встроенные MathML и SVG, тогда как это невозможно в HTML.
- Некоторые из устаревших элементов были полностью удалены: isindex, noframes, acronym, applet, basefont, dir, font, frame, frameset, big, center, strike, tt.
- HTML5 поддерживает новые виды элементов управления, к примеру, dates and times, email, number, range, tel, url, search и т.д.
- В HTML появилось много новых элементов. Вот некоторые из самых важных: summary, time, aside, audio, command, data, datalist, details, embed, wbr, figcaption, figure, footer, header, article, hgroup, bdi, canvas, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, track, video.
Основные преимущества HTML5 для разработчиков
HTML5 предоставляет для разработчиков больше гибкости при разработке дизайна сайтов, и в этой сфере есть значительные улучшения, о которых стоит упомянуть:
- Постоянная обработка ошибок:
Большинство браузеров поддерживают парсинг структурно или синтаксически неправильного HTML кода, но до недавнего времени для этого не было стандартного процесса. Это означает, что разработчикам новых браузеров необходимо производить тесты неверных HTML документов для создания более улучшенного процесса обработки ошибок. Постоянная обработка ошибок в HTML5 сыграла в этом процессе огромное значение.
Улучшенные алгоритмы парсинга, которые используются в HTML5 имеют неоценимые преимущества. Исследования показывают, что около 90% сайтов могут содержать некорректно написанный код, поэтому очень важно обрабатывать эти ошибки. Кроме того, присущая HTML5 обработка ошибок сохраняет разработчикам много денег и массу времени.
- Улучшенная семантика для элементов:
Для упрощения и улучшения понимания кода были внесены улучшения в семантические роли различных существующих элементов. Section, article, nav и header – это новые элементы, которые заменили большинство из ныне устаревших div элементов. Это сделало процесс обработки ошибок менее сложным.
- Расширенная поддержка функций веб-приложений:
Одной из главных целей HTML5 было создание возможности функционирования браузеров в качестве платформы для приложений. Веб-сайты в прошлом были намного менее сложными, но со временем громоздкость возрастала. HTML5 предоставляет разработчикам расширенный контроль над производительностью своих сайтов. Раньше разработчикам приходилось использовать обходные пути, поскольку многие серверные технологии и браузерные расширения отсутствовали. Теперь, при использовании HTML5 нет смысла использовать какие-либо JS или Flash расширения (как это было в HTML4), поскольку в HTML5 присутствуют элементы, которые обеспечивают все эти функции.
- Создание мобильных сайтов стало проще:
Даже сегодня, создание мобильной версии сайта, это головная боль для разработчика. Увеличение популярности смартфонов в последние десятилетия создало необходимость в улучшении стандартов HTML. Сегодня пользователи хотят иметь доступ к веб-ресурсам в любое время и с помощью любого устройства, что накладывает определенные обязательства на разработчиков. HTML5 сделал в этом плане значительные улучшения, благодаря тому, что код HTML5 теперь лучше поддерживается маломощными электронными устройствами, такими как смартфоны и планшеты.
- Элемент canvas:
Одной из самых обсуждаемых особенностей HTML5 является элемент
Используя элемент canvas разработчики могут рисовать с помощью скриптов (например JavaScript) графические изображения с применением различных цветов. Стоит упомянуть, что canvas это обычный графический контейнер и для показа изображения необходимо выполнение скрипта. Вот пример использования JavaScript в сочетании с canvas:
var c = document.getElementById(“TestCanvas”); var context = c.getContext(“2d”); context.fillStyle = “#FF0000”; context.fillRect(0,0,140,75);
- Элемент m enu :
Недавно добавленные элементы
