Введение в язык HTML 5
HTML — язык гипертекстовой разметки, который используется для размещения контента на веб-сайтах. Он был создан в 1986 году и до сих пор является основой веб-программирования. За HTML активно развивался, и его последняя версия HTML 5 является новым стандартом в веб-программировании.
Рекомендуем начать изучение именно с последней версии, так как некоторые старые теги уже устарели и практически не используются.
HTML код позволяет браузеру определять предназначение того или иного контента, с помощью блоков. Все блоки прогружаются в браузере и образуют общую структурe веб-страницы. Этот метод используется уже более 30 лет. Даже сейчас, HTML 5, CSS и JavaScript — основная составляющая каждого сайта. HTML 5 — самый центр.
Хоть многие и считают HTML языком программирования, но это не так. Это специальный инструмент, который позволяет хранить и структурировать данные во всемирной паутине.
Основными составляющими языка являются теги, которые разделяют всю информацию на разные смысловые блоки. Они записываются в двухсторонних угловых скобках и имеют множество функций.
Вот самая простая html конструкция:
<html> <head></head> <body> <h1>Заголовок веб-страницы</h1> <p>Основной текст страницы</p> </body> </html>
Создайте HTML документ в кодовом редакторе и запишите туда этот код. После откройте, и в новом окне браузера вы увидите следующее:
Заголовок веб-страницы Основной текст страницы
HTML 5 — отличия от старой версии и нововведения
Четвертая версия HTML не является плохой, её тоже можно использовать в верстке, но HTML 5 намного лучше. В HTML 5 появилась возможность встройки аудио и видео. Зайдя на любой сайт, открыв видеоплеер в старом браузере вы увидите надпись: «Ваш браузер устарел и больше не поддерживает HTML 5».
Он полностью заменил старую версию, так как привнес целый ряд обновлений:
- Появилась возможность повсеместного применения глобальных атрибутов. То-есть, теперь атрибут id можно применять к любому значению.
- Были убраны некоторые устаревшие теги и атрибуты.
- Была увеличена гибкость и совместимость кода.
- Теперь, благодаря JavaScript WEB Worker стало намного удобнее работать с JS скриптами. Появилась возможность открывать их в фоновом режиме.
- Появилась поддержка векторной графики.
- Добавление новых структурных тегов(nav, header, footer) и других тегов, например video.
- Добавление новых атрибутов для форм, а также для некоторых обычных тегов.
Пользовательские улучшения
Что дает новая версия языка для простых пользователей? Данная версия языка сделала работу веб-сайтов намного комфортнее, ниже показан список улучшений:
- Поддержка 3D графики. Делает дизайны сайтов более приятными и необычными.
- Некоторые приложения, размещенные на сайте, могут сохраняться в кеше и работать без подключения к сети Интернет.
- Возможность передвижения элементов курсором.
- Увеличение количества шрифтов, цветов и других визуальных эффектов.
- Поддержка браузерами медиа приложений. Теперь можно слушать аудио, смотреть видео, играть в онлайн игры, без подключения специальных плагинов.
Наиболее значимым из всех нововведений является возможность работы без плагинов. Это повышает скорость работы как браузера, так и самого сайта.
Улучшения для веб-разработчиков
Новая версия языка HTML стала более гибкой. Она дала больше пространства для разработчиков, позволив создавать более качественные веб-сайты. Кроме того, она стала более простой, дав новичкам возможность обучаться немного быстрее.
Основные улучшения:
- Улучшенная семантика
- Обработка ошибок
- Улучшенная поддержка веб-приложений
- Поддержка мобильных устройств
Прошлая версия заключалась в повсеместном использовании тегов div. Их огромное скопление сильно усложняло поиск ошибок в коде.
В HTML 5 были введены структурные теги header, article, section, nav и footer. Они делают код более простым для чтения. Новые теги дают браузерам хорошее понятие о своем предназначении, что гораздо улучшает семантическую работу веб-сайтов.
Во время написания HTML кода могут встретиться различные ошибки, как синтаксические, так и структурные. Старые браузеры не придавали особого значения этим ошибкам.
Путем долго тестирования была создана система обработки ошибок. Разработчики тестировали язык в разных браузерах.
Обработчик позволяет экономить время верстальщиков, ведь ошибки допускает почти каждый разработчик. По официальным данным Rebulding the Web почти 90% страниц содержат в себе ошибки.
Обработчик обрабатывает их и позволяет странице нормально отображаться. Не будь его, время разработки увеличилось бы в разы.
Ранее сайты, для содержания в себе различного медиа контента, использовали различные плагины. Новая версия языка содержит в себе их функции и позволяет обходить многие расширения браузеров.
Сайты стали намного сложнее и функциональнее. При этом, появилась возможность контролировать их и делать более оптимизированными. Теперь работу сайтов можно сделать более плавной и быстрой нежели раньше.
За последние годы мобильные устройства стали всё распространение. Телефоны и планшеты и стали использоваться почти на одном уровне с ПК.
Многим людям нужно зайти на тот или иной сайт, но возможности зайти на компьютер нет. Именно это стало одной из причин обновления.
Мобильные устройства имеют небольшой экран — главная проблема верстальщиков. HTML 5 улучшил адаптивную верстку и дал возможность создавать сайты с хорошей поддержкой мобильных устройств.
Сам HTML 5 был создан больше не для ПК, а для смартфонов и планшетов.
Другие полезные нововведения
Многие компании перевели свои сайты на HTML 5. Все остались довольны и оставили целый ряд положительных отзывов, в которых с особенным жаром описывались следующие нововведения:
- Убрали куки
- Data-атрибуты
- Автофокус
- Убрали атрибут type из тегов подключения
Раньше все данные с веб-ресурсов хранились в куках. Они имели небольшой объем памяти. Некоторые пользователи сети отключали их, для того, чтобы не тратить лишнее место на локальных дисках.
В новой версии HTML появился объект под названием localStorage. Этот элемент может управляться в любом подключенном скрипте, вне зависимости от места подключения функций. Сам объект является частью пространства имен window. LocalStorage позволяет хранить все данные веб-сайтов.
Был введен объект sessionStorage. Он отвечает за быстрое хранение. Все данные сохраняются до закрытия браузера.
В новой версии языка HTML появился новый атрибут — data. Он позволяет добавлять пользовательские атрибуты к тегам самого языка, без каких-либо рисков.
В старой версии языка редко добавлялись пользовательские атрибуты. Код, который их содержал, был не валидным. Из-за этого приходилось запускать страницу в режиме совместимости.
Атрибут data позволяет добавлять пользовательские атрибуты, которые хранятся в одной строке. Это позволяет разработчикам обходиться без подключения специальных библиотек(Ajax) и других серверных технологий.
Кроме этого, элемент data может содержать в себе дополнительную информацию о некоторых элементах страницы.
В новой версии HTML появилась возможность делать автофокус на полях форм. То-есть при загрузке страницы, одна из её форм будет сразу же доступна для ввода данных. Атрибут autofocus может применяться только к одному полю ввода на странице.
Пример:
<form action="form.html"> Логин: <input type="text" name="login"><br> Пароль: <input type="password" name="password" autofocus><br> </form>
При подключении таблиц стилей или скриптов, больше не нужно указывать атрибут type. Теперь язык понимает, что тег link указывает ссылку на стили, а script дает ссылку на скрипты.
Прогнозы и дальнейшее развитие языка
Новая версия языка HTML 5 стала более простой, функциональной и удобной. Она лучше подойдет для нового поколения веб-разработчиков.
W3C сказали немного слов о том, каким будут следующие обновления языка. В новом обновлении будет приоритет на хорошую поддержку новых веб-приложений, например, инструменты поддержки конфиденциальности.
Будут добавлены инструменты для управления цифровыми правами.
В HTML 5 делался небольшой упор на поддержку надежных свойств, для лучшей совместимости. В новой версии HTML 5.1 улучшат поддержку ненадежных свойств.
Наш совет — изучайте HTML 5. Веб-программирование не стоит на месте. В 2018 году вы ещё можете пользоваться версией HTML 4.1. Но созданные вами сайты будут плохо смотреться на фоне современных проектов, с улучшенной обработкой данных и поддержкой медиа контента.