→ Бесплатные советы по HTML5

Бесплатные советы по HTML5

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

С выходом HTML5, HTML перешел с простого языка разметки гипертекста на совершенно новый уровень позволяющий создавать, используя все тот же знакомый HTML, сайт используя полный спектр веб-ресурсов, начиная с простеньких сайтов-визиток и заканчивая полноценных приложениями. И все это при полной обратной совместимости с HTML4. HTML5 начал свой путь в 2009 году, когда World Wide Web Consortium (W3C) признал, что у XHTML 2.0 закончились все сроки разработки, а результат не получен, разработчики вернулись к HTML 4.01, который не обновлялся с 2000 года и взялись за разработку HTML5, уже в 2010 году Стив Джобс отметил что HTML5 придет на смену Flash и больше не будет необходимости использовать Flash для медиа-контента. В 2014 году вышла финальная версия HTML5, и разработчики принялись за разработку новой версии HTML5.1, который получит еще больше возможностей, например, возможность добавления титров в видеоролики, автозавершение заполнения электронных форм и много другое.

Отличительные особенности HTML5

Одной из немаловажных отличительных особенностей HTML5 перед его предшественниками: появление возможности перетягивания файла прямо в окно браузера и в последующем работа с этим файлом на сайте. Реализуется это с помощью метода e.dataTransfer.getData(). Также улучшена работа с кэшированными данными, теперь их нет необходимости отправлять каждый раз после обновления странички. Очень важным нововведением стало локальное хранилище, которое позволяет хранить большие объёмы данных на устройстве пользователя, уменьшая поток обмена информацией с сервером. Необходимо отметить, что введено новое API, но это тема для отдельной статьи. Ну и, конечно же, немаловажное событие это встраивание всемирно известных и важных библиотек SVG и MathML. Сокращена запись кодировки документа <meta charset="utf-8">. Не требуется указыватьатрибут type у тегов <script> и <style>, отныне браузер сам понимает, какое содержимое находится в этих тегах.

Нововведения в HTML5

В HTML5 введено множество различных тегов которые улучшают семантику для поисковиков, которая улучшает выдачу только за счет качественной разметки контента сайта. Рассмотрим некоторые из новых тегов:

<article> - Семантический тег применяется для разметки содержащихся на сайте новостей, статей, записей блога, форума и т.п.
<aside> - Семантический тег применяется для разметки «боковой панели»
<audio> -Применяется для размещение аудио файла на страничке.
<canvas> - Семантический тег, определяющий область для JavaScript игр, областей для рисования, картинок и т.д.
<datalist> - Создается список элементов, которые отображаются при взаимодействии с текстовым полем.
<details> - Содержит текст, который по умолчанию скрыт и раскрывается при помощи атребута open: <details open="open">Текст</details>.
<figure> - Семантический тег, заключающий в себя и определяющий медиа-контент как иллюстрацию к статье.
<footer> - Семантический тег, который определяет «подвал странички».
<header> - Семантический тег, который определяет «шапку странички».
<keygen> - Применяется для генерации пары ключей, открытого(передается вместе с формой) и закрытого (сохраняется на локальном компьютере). Используются для шифрования данных и электронных подписей.
<mark> - служит для выделения текста, подобно маркеру.
<menu> - тег, служащий для создания меню.
<nav> - Семантический тег, который используется для размещения в нем более приоритетных ссылок.
<output> - Семантический тег, который служит для определения области вывода. <progress> - Используется для вывода прогресса завершенности задачи(выводит с помощью JavaScript)
<source> - Тег, для прикрепления медиафайлов в медиа теги.
<summary> - Используется внутри тега <datalist>, для задачи загаловка раскрываемого текста.
<time> - помечает текст внутри тега как дату либо время.
<video>- медиа тег для отображения видео.
<wbr> - указывает место в блоке, где можно делать перенос строки если это необходимо.

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

devicehit.ru


Теги: html5

Читайте также по теме статьи «Бесплатные советы по HTML5»:


Люди читают