Какая версия html включает специфические для браузера функции
Историю развития языка HTML можно сравнить с детективным рассказом в том, что в ней есть свой неожиданный поворот событий, в результате которых появилась новая версия языка — HTML5.
Предполагалось, что язык HTML уйдет в небытие, не дожив до XXI столетия. Организация , которая занимается разработкой и внедрением официальных стандартов Всемирной паутины, забросила язык HTML в далеком 1998 г., считая его не способным на дальнейшее выживание.
Свои надежды на будущее консорциум W3C возлагал на модернизированного наследника HTML — язык XHTML. Но язык HTML не умер. Его "подобрала" группа программистов-аутсайдеров и не только возвратила его к жизни, но и заложила основу для новых возможностей, которые мы с вами и исследуем.
Как вы знаете, HTML — это язык для создания веб-страниц. Ключевая идея языка HTML - организация содержимого с помощью элементов, не претерпела никаких изменений с самых ранних времен Всемирной паутины. Более того, даже очень старые веб-страницы без проблем обрабатываются в наиболее современных браузерах (включая и те, которые не существовали на момент создания этих страниц, например Firefox или Chrome).
Но успех и почтенный возраст также несут с собой определенные существенные угрозы. Что и случилось с языком HTML — в 1998 г. консорциум W3C прекратил его поддержку и попытался заменить его языком на основе языка XML - XHTML 1.0.
На рисунке ниже схематично показана история развития HTML:
XHTML 1.0
В стандарте XHTML используются те же синтаксические соглашения, что и HTML, но в нем ужесточены требования к следованию установленным правилам. Большая часть отступлений от правил разметки, которые сходят с рук в традиционном HTML, попросту неприемлемы в XHTML.
Например, допустим, что вы хотите выделить курсивом последнее слово заголовка следующим образом:
Но при этом вы случайно поменяли местами два последних тега:
В отношении разработки веб-сайтов это полезно, т. к. позволяет отловить небольшие ошибки, вследствие которых страница может отображаться по-разному в различных браузерах, или которые могут вызвать более серьезные проблемы при попытке отредактировать страницу с целью ее улучшения.
Поначалу XHTML пользовался большим успехом. Профессиональные веб-разработчики, раздосадованные индивидуальными особенностями отображения страниц браузерами и вседозволенностью в области веб-разработки, скопом переходили на XHTML. При этом они были вынуждены совершенствовать свои навыки работы и отказываться от использования значительного количества полусырых возможностей форматирования, предоставляемых HTML.
Но многие из предполагаемых преимуществ XHTML — такие как функциональная совместимость с инструментами XML, облегчение обработки страниц автоматизированными программами, переносимость на мобильные платформы, а также расширяемость самого языка XHTML — так никогда и не материализовались.
Тем не менее XHTML стал стандартом для большинства серьезных веб-разработчиков. Но в то время, как все казались достаточно довольными этим языком разметки, у него был один скелет в шкафу: хотя браузеры понимали разметку XHTML, они не обеспечивали строгую проверку отступлений от правил, требуемую этим стандартом. Это означает, что страница может быть создана с нарушением правил XHTML, но браузеры и глазом не моргнут при ее обработке.
Более того ничто не могло помешать веб-разработчику бросить в одну кучу небрежно написанную разметку и устаревшее HTML-содержимое и назвать все это страницей XHTML. Ни один браузер на планете не имел бы никаких претензий при обработке такой страницы. И это обстоятельство вызывало у людей, ответственных за стандарт XHTML, глубокое чувство тревоги.
XHTML 2: неожиданный провал
Эта проблема должна была, по идее, быть решенной в следующей версии — XHTML 2. В ней нужно было ужесточить правила обработки ошибок, которые бы заставляли браузеры не обрабатывать страницы, не отвечающие стандарту XHTML 2. В XHTML 2 также избавились от многих странностей и соглашений, унаследованных от HTML.
Например, система нумерации заголовков (, , и т. д.) была заменена одним элементом с уровнем обозначаемого им заголовка, зависящего от местонахождения этого элемента в веб-странице. Подобным образом элемент был заменен возможностью, позволяющей веб-разработчикам преобразовывать любой элемент в ссылку, а вместо атрибута alt элемента был предложен новый способ предоставления альтернативного содержимого.
Изменения такого рода были типичными для XHTML 2. С теоретической точки зрения, они делали язык более аккуратным и были более понятными. Но с практической стороны, они вынуждали всех изменить свой подход к созданию веб-страниц (не говоря об обновлении уже созданных веб-страниц), не добавляя при этом никакой новой функциональности, чтобы оправдать всю эту работу. Попутно из XHTML 2 было удалено несколько удобных элементов, которые все еще пользовались популярностью среди веб-разработчиков, таких как (полужирный текст), (текст курсивом) и (для вложения одной веб-страницы в другую).
Но, возможно, худшей проблемой оказалась чрезвычайно медленная скорость внесения изменений. Разработка XHTML 2 тащилась в течение пяти лет, и интерес разработчиков к этому стандарту медленно угасал.
HTML5: возвращение к жизни
Приблизительно в то же самое время (начиная с 2004 г.) группа разработчиков начала рассматривать будущее Всемирной паутины в другом ракурсе. Вместо того чтобы попытаться разобраться, что было неправильным (или просто "грязным" с философической точки зрения) в HTML, они сфокусировались на том, чего в нем не хватало, что хотели бы иметь веб-разработчики для воплощения своих идей.
В конце концов, HTML зародился как инструмент для отображения документов. С добавлением языка сценариев JavaScript, HTML преобразовался в систему для разработки веб-приложений, таких как поисковые движки, онлайновые магазины, картографические инструменты, средства чтения электронной почты и многие другие. Но в то время как искусное веб-приложение может делать много чего впечатляющего, создать такое приложение — задача не из легких. Большинство разработчиков использует для этого мешанину кода JavaScript, один или несколько популярных инструментариев JavaScript, а также веб-приложение, исполняемое на веб-сервере. Добиться правильного и единообразного взаимодействия всех этих составляющих на разных браузерах — сложная задача.
Такая ситуация вызывала особенную озабоченность среди разработчиков браузеров, поэтому группа дальновидных разработчиков из компании Opera Software (создатели браузера Opera) и компании Mozilla Foundation (создатели браузера Firefox) начали агитировать за включение в XHTML больше возможностей, ориентированных на разработчиков. Когда их попытки не увенчались успехом, компании Opera, Mozilla и Apple создали группу с целью работы над новыми решениями.
Группа не ставила перед собой задачу заменить HTML, ее целью было плавное расширение языка, и причем такое, чтобы расширения были обратно совместимыми. Надо сказать, что самая ранняя версия работы этой группы включала две спецификации расширений — Web Applications 1.0 и Web Forms 2.0. В конечном итоге эти стандарты эволюционировали в HTML5.
Предполагается, что число 5 в названии HTML5 означает: данный стандарт является продолжением стандарта HTML (последней версией стандарта HTML перед XHTML была версия 4.01). Это, конечно же, не совсем верно, т. к. HTML5 поддерживает все разработки, существовавшие в области создания веб-страниц в течение десяти лет после выпуска HTML 4.01, включая строгий синтаксис в стиле XHTML (если разработчики желают использовать его), а также множество инноваций для JavaScript. Тем не менее это название делает ясным следующее: язык HTML5 может поддерживать соглашения XHTML, но требует следования правилам HTML.
В 2000-х все интересное происходило в лагере группы WHATWG. После некоторого периода болезненных размышлений организация W3C решила распустить работающую над XHTML 2 группу и работать вместо этого над формализацией стандарта HTML5. На этом этапе первоначальный стандарт HTML5 был разделен на более управляемые части, и многие из его функциональных возможностей стали отдельными стандартами.
Что входит в состав HTML5?
Браузеров, "поддерживающих" HTML5, не существует. Вместо этого, каждый браузер поддерживает постепенно расширяющееся подмножество возможностей HTML5. Этот подход является как хорошим, так и плохим. Хорош он потому, что браузеры могут быстро реализовать готовые части стандарта HTML5, пока другие возможности продолжают развиваться. А плох он тем, что заставляет веб-разработчиков беспокоиться о проверке, поддерживает ли конкретный браузер каждую функциональную возможность, которую они хотят использовать.
Далее приводится список и короткое описание основных категорий функциональных возможностей, охватываемых HTML5:
Ядро HTML5
Эта часть HTML5 составляет официальную версию спецификации организации W3C. Она содержит новые семантические элементы, новые и усовершенствованные элементы управления для веб-форм, поддержку аудио и видео, а также холст для рисования с помощью JavaScript. В эту категорию входит большинство функциональных возможностей, которые наилучшим образом поддерживаются браузерами.
Ранние возможности HTML5
Возможности, иногда называемые HTML5
Это возможности следующего поколения, которые часто считаются частью HTML5, хотя они никогда не входили в стандарт HTML5. Эта категория включает спецификацию CSS3 и геолокацию.
В результате перехода поддержки HTML сначала от организации W3C к группе WHATWG, а потом обратно, возникла довольно необычная ситуация. Технически организация W3C отвечает за определение, что является официальным HTML5, а что — нет. Но в то же самое время группа WHATWG продолжает свою работу, придумывая будущие возможности HTML. Только теперь она называет его не HTML5, а просто HTML, объясняя это тем, что HTML будет продолжать существовать, как живой язык.
Так как HTML является живым языком, то HTML-страница никогда не устареет и не перестанет работать. Для HTML-страниц никогда не потребуется номер версии (даже в блоке указания типа документа ), а веб-разработчикам никогда не понадобится обновлять свою разметку от одной версии языка к другой, чтобы она работала на новых браузерах.
Так как HTML — это живой язык, новые возможности (и новые элементы) можно добавлять к стандарту HTML в любое время. Некоторые разработчики могут решить использовать эти возможности в своих веб-страницах, а некоторые разработчики веб-браузеров — поддерживать их в своих продуктах. Но возможности никогда не будут привязаны к какой-либо конкретной версии стандарта.
Люди, плохо знакомые со сферой веб-дизайна, часто слышат слово «разметка» и задаются вопросом, что оно означает и как отличается от более широко известного термина «код». В основном язык разметки предназначен для обработки, определения и представления информации о тексте; теги стилей и текстовые аннотации записываются в файлах стилей, чтобы упростить работу с текстом для компьютера. Исторически сложилось, что термин «разметка» произошел от английского 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
Единственной постоянной вещью в области информационных технологий является то, что периодические обновления и изменения неизбежны. Ни один язык не может избежать обновлений или новых выпусков. 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 теперь лучше поддерживается маломощными электронными устройствами, такими как смартфоны и планшеты.
Одной из самых обсуждаемых особенностей HTML5 является элемент . Внедрение этого уникального тега произвело огромное влияние на Adobe Flash. Несмотря на то, что многие сайты до сих пор используют Flash, все больше людей склоняются к использованию HTML5, именно поэтому есть основание полагать, что Flash в ближайшем будущем полностью устареет.
Используя элемент canvas разработчики могут рисовать с помощью скриптов (например JavaScript) графические изображения с применением различных цветов. Стоит упомянуть, что canvas это обычный графический контейнер и для показа изображения необходимо выполнение скрипта. Вот пример использования JavaScript в сочетании с canvas:
Недавно добавленные элементы и являются составными частями интерактивных элементов, однако, они не очень популярны в сообществе разработчиков. Несмотря на это, эти два элемента могут быть использованы для обеспечения более лучшей интерактивности на странице.
Тег используется для простоты предоставления команд меню на мобильных приложениях и приложениях рабочего стола. Здесь показано возможное применение тега :
Добавление пользовательских атрибутов было возможно и до появления HTML5, но оно было связано с определенным риском, к примеру, в HTML4 пользовательские атрибуты могли приводить к остановке рендера страницы или что еще хуже, могли стать причиной неправильной работы документа. Атрибут data-* в HTML5 поставил точку в решении этой часто встречающейся проблемы. Этот атрибут имеет несколько предназначений, но основной целью его введения было хранение дополнительной информации о разных элементах. Теперь, благодаря этому атрибуту могут быть включены пользовательские данные, что дает разработчикам больше возможностей сделать привлекательные и эффективные страницы, без лишних запросов на сервер или вызовов Ajax.
Поддержка локального хранилища стала важным дополнением к HTML5. До появления HTML5, если разработчики хотели хранить что-либо на стороне пользователя, им приходилось использовать файлы cookie. Однако файлы cookie могут содержать лишь небольшой объем данных (не говоря уже о том, что все их ненавидят), это прибавило добавлению объекта localStorage в HTML5 еще больше преимуществ. Объект localStorage является частью глобального пространства имен и при использовании скриптов может быть доступен из любого места.
Шпаргалка HTML5
Если вы еще не знаете что такое HTML5 и с чем его едят, шпаргалка может быть отличным подспорьем при его изучении. Используйте приведенную ниже таблицу стилей HTML, для более продуктивного начала работы с HTML. Эта шпаргалка показывает наиболее часто используемые теги HTML.
Преимущества HTML5 для обычного пользователя
HTML5 привел к сдвигу устоявшейся модели программирования как для разработчиков, так и для обычных пользователей. Приведем примеры нескольких преимуществ для обычных пользователей:
- Мобильные браузеры теперь работают более стабильно, чем стандартные приложения. До появления HTML5 ситуация была иная.
- Сегодня ставка на адаптивные сайты (дружелюбные к мобильным устройствам) очень высока, так как почти 30 процентов пользователей мобильных устройств не хотят загружать специальные приложения. Это стало еще одним преимуществом HTML5, к примеру, если пользователь хочет использовать услуги компании, но не хочет загружать специальное приложение, он может просто зайти на сайт компании, чтобы сделать это.
- Искоренение необходимости использования Adobe Flash позволяет разработчикам обеспечить более эстетичный пользовательский интерфейс. Использование JavaScript и MPEG4 в сочетании с HTML5 сделало жизнь пользователей намного лучше.
- Возможность поддержки собственных аудио и видео элементов означает, что пользователям не придется загружать дополнительные плагины для просмотра мультимедиа на вашем сайте. Поддержка мультимедиа, предоставляемая HTML5, является одной из самых значимых причин, по которой он используется намного чаще чем HTML.
Заключение
Вряд ли новая версия любого языка может быть хуже предшественника и HTML5 не является исключением. С каждым годом разработчики узнают новые способы использования HTML5. Кроме того, ожидается, что в ближайшее время изменение затронет и социальные сети.
Несмотря на то, что волна изменений уже настигла многих разработчиков по всему миру, ожидается, что в ближайшие годы HTML5 еще более расширит свое влияние. Очень важно адаптироваться и узнать что такое HTML5 сейчас, чтобы максимально использовать возможности современных браузеров.
Если вы хотите оптимизировать ваш HTML код, вы можете посетить данное руководство.
Елена имеет профессиональное техническое образование в области информационных технологий и опыт программирования на разных языках под разные платформы и системы. Более 10 лет посвятила сфере веб, работая с разными CMS, такими как: Drupal, Joomla, Magento и конечно же наиболее популярной в наши дни системой управления контентом – WordPress. Её статьи всегда технически выверены и точны, будь то обзор для WordPress или инструкции по настройке вашего VPS сервера.
HTML5 является последним стандартом для браузеров для отображения и взаимодействия с веб-страницами. Утвержденный в 2014 году, это первое обновление для HTML за 14 лет. Это прямо целая жизнь между обновлениями.
Целью HTML5 является, в первую очередь, упрощение для веб-разработчиков и создателей браузеров соблюдения стандартов, основанных на консенсусе, которые повышают эффективность и расширение прав. Он также предназначен для обеспечения более лучшего, более быстрого и удобного пользовательского интерфейса для десктопа и мобильных пользователей.
Вот несколько ключевых улучшений в HTML5:
- На страницах есть более простая, более прямолинейная структура элементов, что упрощает их сбор, настройку и отладку - и создание автоматизированных службы, которые помогут вам найти важные ресурсы в Интернете.
- Он предоставляет стандартные элементы для обычных медиа-объектов, которые ранее требовали раздражающих плагинов для аудио, видео и т.д. Эти плагины необходимо было регулярно обновлять, то есть повторять загрузки для управления безопасностью.
- Существует встроенная интеграция с интерфейсами для удовлетворения современных веб-и мобильных потребностей. Одним из моих любимых примеров этого является геолокация, которая позволяет вам определять координаты GPS посетителя через браузер. Ранее эта функция была ограничена телефонами с поддержкой GPS.
Например, ниже приведен пример геолокации HTML5 из «Создание вашего стартапа с PHP: геолокация и Google Места» (Tuts +):
Для кого HTML5 имеет значение?
Вы просто веб-пользователь или поклонник YouTube?
HTML5 улучшит скорость, удобство использования и согласованность в Интернете. Да, ваш опыт YouTube будет постепенно становиться все лучше. Будет меньше обновлений для браузера и плагинов, меньше угроз безопасности и больше более элегантных, более читаемых и более быстрых веб-сайтов.
Вы веб-разработчик?
HTML5 делает вашу жизнь невероятно легкой и значительно расширяет возможности. Это также означает, что вы сможете создавать страницы и больше полагаться на разработчиков браузеров, чтобы обеспечить согласованность. Это означает гораздо меньше условного кода в макетах.
Вы хотите создать веб-браузер?
С одной стороны, у вас будет отличная дорожная карта в спецификации HTML5, в которой подробно описано, как и что вы должны строить. С другой стороны, есть еще кое-что. Совсем не так просто будет отличить ваш браузер от крупных производителей браузеров.
Хотите узнать больше?
Просто быстрое напоминание, прежде чем мы погрузимся! Я стараюсь участвовать в обсуждениях ниже. Если у вас есть вопрос или тема для будущего учебника, пожалуйста, напишите комментарий ниже или свяжитесь со мной в Twitter @reifman.
Предистория HTML5
Откуда выходит HTML5?
HTML5 является последним за более чем 20 лет стандартов программирования браузера с момента запуска Интернета в 1991 году.
История HTML
HTML впервые появился в качестве стандарта в 1993 году, и вот график версий HTML, принятых комитетами по стандартам:
- HTML 2.0: 1995
- HTML 4.0: 1997
- HTML 4.01: 2000
- HTML 5: 2014
Цели HTML5
Согласно Википедии, HTML5 предназначен для консолидации более ранних версий и дифференцированных типов документов, таких как XHTML 1 и DOM Level 2 HTML:
[HTML5] расширяет, улучшает и рационализирует разметку, доступную для документов, и вводит разметку и . (API) для сложных веб-приложений . HTML5 также является потенциальным кандидатом для кросс-платформенных мобильных приложений. Многие функции были разработаны с использованием маломощных устройств, таких как смартфоны и планшеты, которые были приняты во внимание.
Вот краткое описание того, как MakeUseOf объясняет цели HTML5:
Кредит изображения: Простая тема
Какие новые возможности предлагает HTML5?
Выходи что очень много! HTML5 предоставляет такой впечатляющий список новых возможностей, которые основные браузеры по-прежнему не полностью еще поддерживают даже через 18 месяцев после его принятия:
Там также эта интерактивная визуальная радуга в HTML5Readiness. Наведите указатель мыши на разные дуги, и вы увидите, какие функции поддерживаются браузерами:
Это весело, но другие диаграммы на других сайтах могут быть более функционально интуитивными в использовании.
Уровни поддержки HTML5
В 2011 году Wikipedia сообщила, что около трети из 100 лучших веб-сайтов поддерживали некоторые возможности HTML5. К августу 2013 года было сделано около 153 сайтов из списка Fortune 500.
Вот визуализация огромности возможностей HTML5:
Новые элементы HTML5
Самые основные новые элементы HTML5 облегчают выкладку веб-страниц и отладку кода. Это также облегчает автоматические услуги для сканирования документов в Интернете и понимания важности различных компонентов страницы.
Для макета страницы и ключевых функций в настоящее время существуют определенные элементы, такие как:
Вот хороший визуальный очерк их Smashing Magazine:
Вот некоторые из более продвинутых функций HTML5, включая интеграцию API, что делает программирование в JavaScript для сложных действий более простым и последовательным в браузерах:
- Воспроизведение аудио и видео: обеспечивает воспроизведение мультимедиа в браузерах без использования плагинов.
- Геолокация: укажите местоположение посетителя.
- Перетаскивание: для загрузки файлов из браузера с помощью простых жестов.
- Кэш приложения: обеспечивает поддержку для запуска HTML-сайтов в автономном режиме.
- Веб-воркеры: выполняет JavaScript в фоновом режиме (неблокирование).
- События, отправленные сервером: позволяют серверам обновлять веб-страницы в браузере после их загрузки, проще и эффективнее, чем AJAX и JavaScript.
- Автономное хранение данных: обеспечивает способ хранения данных локально в браузере независимо от файлов cookie. Как использовать автономное хранилище HTML5 на вашем сайте предоставит вам хороший обзор этой возможности.
HTML5 и «Будущее Интернета» предлагают другое руководство по этим функциям. Вот один из их выводов - они очень ценят кэш приложений:
Google Gears предоставил нам автономное хранилище данных, и Flash познакомил нас с кешем приложений (Pandora использует его для сохранения вашей информации в журнале). Благодаря HTML5 эти возможности теперь доступны для использования прямо в браузере и могут быть легко расширены с помощью JavaScript.
Нужно выяснить, какие функции поддерживаются в браузерах? HTML5Test имеет полезную интерактивную оценку функций и поддержки браузера:
Существует так много новых функций, что невозможно создать каталог и упомянуть здесь все из них. Проверьте ссылки ресурсов внизу этого руководства для более глубоких ресурсов, которые я рекомендую.
Несколько примеров HTML5 в действии
Давайте рассмотрим несколько интересных примеров HTML5 в действии.
Простота HTML5 понятна в новых макетах страниц. Чем больше элементов, ориентированных на контент, тем легче понять код страницы и отладить. Вот простой пример, который я построил с помощью проекта HTML5-Reset:
Обратите внимание, что есть более простой тег doctype, теги ссылок и теги скриптов. Сценарий HTML5Shiv обеспечивает устаревшую поддержку версий Internet Explorer до 9.x.
Если вы хотите увидеть некоторые другие подходы, ознакомьтесь с HTML5 Boilerplate, более широкой версией HTML5 с открытым исходным кодом.
Элемент video и плейеры
Вот видео-пример из W3Schools, показывающий исходный код слева, и полученный плейер справа:
Нет никакого плагина и нет обновлений.
Формы
HTML5 имеет множество улучшений в формах и элементах ввода, чтобы упростить веб-программирование и улучшить работу пользователя. Например, элементы ввода теперь поддерживают множество встроенных проверок. Вот валидация чисел в определенном диапазоне:
Вот пара отличных уроков для перехода к более продвинутым формам в HTML5 Doctor:
Например, вот демонстрация элемента range, отображаемого в браузере Chrome:
Масштабируемая векторная графика (SVG)
В HTML5 вы можете легко анимировать элементы с помощью JavaScript и HTML5. Вот масштабируемые простые анимированные часы (изменение масштаба):
Вот пример кода для демонстрации выше интеграции JavaScript:
Что дальше?
Надеюсь, вам понравился этот обзор появления и преимуществ HTML5. Если вы хотите еще раз изучить HTML5, есть еще два ресурса, которые я хотел бы предложить:
- Введение в HTML5: отличное введение в улучшения HTML5 для разработчиков, которые хотят быстро пройти по всем новым элементам.
- HTML5 Demos and Examples: Идеально подходит для показа организованного меню из множества демонстраций HTML5, показывая вам новые возможности.
Вот пример доступных для просмотра демонстраций в HTML5 Demos (не все из них для меня оказались рабочими):
В целом, я очень впечатлен HTML5. И, похоже, он будет продолжать развиваться быстрее, чем каждые 14 лет.
Кроме того, если вы ищете другие утилиты, которые помогут вам развить свои навыки HTML5, не забудьте посмотреть, что у нас есть на Envato Market.
Мне бы хотелось узнать больше в ваших отзывах о HTML5 и предложениях для будущих тем, о которых вы хотели бы узнать больше. Пожалуйста, не стесняйтесь оставлять свои вопросы и комментарии ниже. Вы также можете напрямую связаться со мной в Twitter @reifman. Чтобы увидеть другие учебники, которые я написал, просмотрите страницу инструктора Envato Tuts +.
Ссылки по теме
Поскольку для HTML5 существует так много полезных ресурсов, я включил дополнительную помощь некоторых из тех, которые я считаю наиболее полезными:
Что такое HTML? Это язык разметки гипертекста. Он позволяет пользователю создавать и структурировать разделы, параграфы, заголовки, ссылки и блоки для веб-страниц и приложений.
HTML не является языком программирования, то есть он не имеет возможности создавать динамические функции. Вместо этого он позволяет организовывать и форматировать документы, аналогично Microsoft Word.
При работе с HTML мы используем простые структуры кода (теги и атрибуты), чтобы разметить страницу веб-сайта. Например, мы можем создать абзац, поместив прилагаемый текст в исходный тег и закрывающий .
В целом, HTML — это язык разметки, который очень прост в освоении даже для начинающих в создании сайтов. Вот что вы узнаете, прочитав эту статью.
Нужен недорогой, но надёжный хостинг для учебного или небольшого коммерческого проекта? Ознакомьтесь с тарифами общего хостинга. Скидки до 85%!
История HTML
HTML был изобретён Тимом Бернерсом-Ли, физиком из исследовательского института ЦЕРН в Швейцарии. Он придумал идею интернет-гипертекстовой системы.
Hypertext означает текст, содержащий ссылки на другие тексты, которые зрители могут получить немедленно. Он опубликовал первую версию HTML в 1991 году, состоящую из 18 тегов HTML. С тех пор каждая новая версия языка HTML появилась с разметкой новых тегов и атрибутов (модификаторов тегов).
Согласно Справочнику HTML Element Reference от Mozilla Developer Network, в настоящее время существует 140 тегов HTML, хотя некоторые из них уже устарели (не поддерживаются современными браузерами).
Из-за быстрого роста популярности HTML теперь считается официальным веб-стандартом. Спецификации HTML поддерживаются и разрабатываются консорциумом World Wide Web (W3C). Вы можете проверить последнее состояние языка в любое время на веб-сайте W3C (англ).
Самым большим обновлением языка стало внедрение HTML5 в 2014 году. Было добавлено несколько новых семантических тегов к разметке, которые показывают смысл их собственного контента, например , и .
Как работает HTML?
HTML-документы — это файлы, которые заканчиваются расширением .html или .htm. Вы можете просматривать его с помощью любого веб-браузера (например, Google Chrome, Safari или Mozilla Firefox). Браузер читает HTML-файл и отображает его содержимое, чтобы пользователи интернета могли его просматривать.
Обычно средний веб-сайт включает несколько разных HTML-страниц (англ). Например: домашние страницы, обычные страницы, страницы контактов будут иметь отдельные HTML-документы.
Каждая HTML-страница состоит из набора тегов (также называемых элементами), которые вы можете назвать строительными блоками веб-страниц. Они создают иерархию, которая структурирует контент по разделам, параграфам, заголовкам и другим блокам контента.
Большинство элементов HTML имеют открытие и закрытие, в которых используется синтаксис .
Ниже вы можете увидеть пример кода, с помощью которого можно структурировать элементы HTML:
- Самый главный элемент — это простое разделение ( ), которое вы можете использовать для разметки больших разделов контента.
- Он содержит заголовок ( ), подзаголовок ( ), два абзаца ( ) и изображение ( ).
- Второй абзац содержит ссылку ( ) с атрибутом href, который содержит целевой URL.
- Тег изображения также имеет два атрибута: srcдля пути изображения и altдля описания изображения.
Обзор наиболее используемых HTML-тегов
HTML-теги имеют два основных типа: блок-уровень и встроенные теги.
- Элементы уровня блока занимают всё свободное пространство и всегда запускают новую строку в документе. Заголовки и параграфы — отличный пример блочных тегов.
- Встроенные элементы занимают столько места, сколько им нужно, и не запускают новую строку на странице. Они обычно служат для форматирования внутреннего содержимого элементов уровня блока. Ссылки и подчеркнутые строки — хорошие примеры встроенных тегов.
Теги блочного уровня
Три тега уровня блока, которые каждый HTML-документ должен содержать: , и .
- Тег — это элемент самого высокого уровня, который охватывает каждую HTML-страницу.
- Тег содержит метаинформацию, такую как заголовок страницы и кодировка.
- Наконец, тег содержит всё содержимое, отображаемое на странице.
- Заголовки имеют 6 уровней в HTML. Они варьируются от до , где h1 — заголовок наивысшего уровня, а h6 — самый низкий. Абзацы прилагаются , в то время как в блочных комментариях используется тег .
- Разделы — это более крупные секции контента, которые обычно содержат несколько абзацев, изображений, иногда блок-записей и других меньших элементов. Мы можем пометить их, используя тег . Элемент div может содержать ещё один тег div внутри него.
- Вы можете также использовать теги для упорядоченных списков и для неупорядоченных. Отдельные элементы списка должны быть заключены в тег . Например, вот как выглядит основной неупорядоченный список в HTML:
Встроенные теги
Для форматирования текста используются многие встроенные теги. Например, тег визуализирует выделенный элемент жирным шрифтом, тогда как теги отображают его курсивом.
Гиперссылки также являются встроенными элементами, для которых требуются теги и атрибуты href для указания адресата ссылки:
Изображения также являются встроенными элементами. Вы можете добавить один с помощью img> без закрывающего тега. Но вам также нужно будет использовать атрибут src для указания пути изображения, например:
Если вы хотите узнать больше тегов HTML, попробуйте проверить наш полный HTML-лист (англ) (который также доступен для загрузки).
Эволюция HTML. Что отличает HTML и HTML5?
Начиная с первых дней, HTML прошёл невероятную эволюцию. W3C постоянно публикует новые версии и обновления, в то время как исторические вехи также получают выделенные имена.
HTML4 (в наши дни обычно называемый «HTML») был опубликован в 1999 году, а последняя крупная версия вышла в 2014 году. HTML5 — это обновление, которое ввело множество новых функций для языка.
Одной из наиболее ожидаемых особенностей HTML5 является поддержка встраивания аудио и видео. Вместо использования Flash-плеера мы можем просто вставлять видео и аудио-файлы на наши веб-страницы с помощью новых тегов и . Он также включает встроенную поддержку масштабируемой векторной графики (SVG) и MathML для математических и научных формул.
HTML5 также ввёл несколько семантических улучшений. Новые семантические теги информируют браузеры о значении контента, что приносит пользу как читателям, так и поисковым системам.
Наиболее популярными семантическими тегами являются , , , и . Чтобы найти уникальные отличия, попробуйте проверить наше подробное сравнение HTML и HTML5.
Плюсы и минусы HTML
Как и большинство вещей, HTML имеет как сильные стороны так и слабые.
Плюсы:
- Широко используемый язык с большим количеством ресурсов и огромным сообществом.
- Выполняется изначально в каждом веб-браузере.
- Поставляется с плоской кривой обучения.
- В открытом доступе и совершенно бесплатный.
- Чистая и последовательная разметка.
- Официальные веб-стандарты поддерживаются консорциумом World Wide Web (W3C).
- Легко интегрируется с базовыми языками, такими как PHP и Node.js.
Минусы:
- В основном используется для статических веб-страниц. Для динамической функциональности вам может потребоваться использовать JavaScript или бэкэнд-язык, такой как PHP.
- Это не позволяет пользователю реализовать логику. В результате все веб-страницы нужно создавать отдельно, даже если они используют одни и те же элементы, например. заголовки и колонтитулы.
- Некоторые браузеры принимают новые функции медленно.
- Иногда поведение браузера трудно предсказать (например, старые браузеры не всегда создают новые теги).
Как связаны HTML, CSS и JavaScript?
Хотя HTML является мощным языком, недостаточно создать профессиональный и полностью отзывчивый веб-сайт. Мы можем использовать его только для добавления текстовых элементов и создания структуры содержимого.
Однако HTML отлично работает с двумя другими интерфейсами: CSS (каскадные таблицы стилей) и JavaScript. Вместе они могут обеспечить богатый пользовательский интерфейс и реализовать расширенные функции.
- CSS отвечает за стили, такие как фон, цвета, макеты, интервал и анимация.
- JavaScript позволяет добавлять динамические функции, такие как ползунки, всплывающие окна и фотогалереи.
Подумайте об HTML как о человеке, тогда CSS будет его одеждой а JavaScript — движениями и манерами.
Итак … Что такое HTML?
HTML является основным языком разметки в интернете. Он запускается изначально в каждом браузере и поддерживается консорциумом World Wide Web.
Вы можете использовать его для создания структуры контента веб-сайтов и веб-приложений. Это самый низкий уровень технологий frontend, который служит основой для стилизации, которую вы можете добавить с помощью CSS и функциональности, которую вы можете реализовать с помощью JavaScript.
Анна долгое время работала в сфере социальных сетей и меседжеров, но сейчас активно увлеклась созданием и сопровождением сайтов. Она любит узнавать что-то новое и постоянно находится в поиске новинок и обновлений, чтобы делиться ими с миром. Ещё Анна увлекается изучением иностранных языков. Сейчас её увлёк язык программирования!
HTML (HyperText Markup Language) представляет язык разметки гипертекста, используемый преимущественно для создания документов в сети интернет. HTML начал свой путь в начале 90-х годов как примитивный язык для создания веб-страниц, и в настоящий момент уже трудно представить себе интернет без HTML. Подавляющее большинство сайтов так или иначе используют HTML.
В 2014 году официально была завершена работа над новым стандартом - HTML5, который фактически произвел революцию, привнеся в HTML много нового.
Что именно привнес HTML5?
HTML5 определяет новый алгоритм парсинга для создания структуры DOM
добавление новых элементов и тегов, как например, элементы video , audio и ряд других
переопределение правил и семантики уже существовавших элементов HTML
Фактически с добавлением новых функций HTML5 стал не просто новой версией языка разметки для создания веб-страниц, но и фактически платформой для создания приложений, а область его использования вышла далеко за пределы веб-среды интернет: HTML5 применяется также для создания мобильных приложений под Android, iOS, Windows Mobile и даже для создания десктопных приложений для обычных компьютеров (в частности, в ОС Windows 8/8.1/10).
В итоге, как правило, HTML 5 применяется преимущественно в двух значениях:
HTML 5 как обновленный язык разметки гипертекста, некоторое развитие предыдущей версии HTML 4
HTML 5 как мощная платформа для создания веб-приложений, которая включает не только непосредственно язык разметки гипертекста, обновленный HTML, но и язык программирования JavaScript и каскадные таблицы стилей CSS 3.
Поддержка браузерами
Надо отметить, что между спецификацией HTML5 и использованием этой технологии в веб-браузерах всегда был разрыв. Большинство браузеров стало внедрять стандарты HTML5 еще до их официальной публикации. И к текущему моменту большинство последних версий браузеров поддерживают большинство функциональностей HTML5 (Google Chrome, Firefox, Opera, Internet Explorer 11, Microsoft Edge). В то же время многие старые браузеры, как например, Internet Explorer 8 и более младшие версии, не поддерживают стандарты, а IE 9, 10 поддерживает лишь частично.
При этом даже те браузеры, которые в целом поддерживают стандарты, могут не поддерживать какие-то отдельные функции. И это тоже надо учитывать в работе. Но в целом с поддержкой данной технологии довольно хорошая ситуация.
Необходимые инструменты
Также стоит упомянуть кроссплатформенный текстовый редактор Visual Studio Code. Данный редактор обладает несколько большими возможностями, чем Notepad++, и кроме того, может работать не только в ОС Windows, но и в MacOS и в операционных системах на основе Linux.
И также потребуется веб-браузер для запуска и проверки написанных веб-страничек. В качестве веб-браузера можно взять последнюю версию любого из распространенных браузеров - Google Chrome, Mozilla Firefox, Microsoft Edge, Opera.
Читайте также:
- 1с фреш магазин расширений где найти
- Пакета обновления 3 sp3 для пакета обеспечения совместимости microsoft office
- Hp laserjet pro mfp m127fn не устанавливается драйвер
- Некорректный файл ключей неверный формат версия или поврежден ошибка во время распаковки файла
- Как сделать готический шрифт в ворде