HTML5 — это новая платформа, которая позволяет не только создавать сайты, но и разрабатывать мощные веб-приложения. Эта технология предлагает множество полезных тегов, сохраняя при этом знакомый синтаксис HTML 4.01 и XHTML 1.0. Однако, для front-end разработчиков нет необходимости привыкать к новым правилам HTML5.
Так что же такое HTML5 и какие преимущества он предоставляет?
Новый способ разметки
Если вы когда-то создавали сетки для сайтов, то наверняка помните, как нужно было каждый блок разделить и обернуть в div с классами. Названия основных частей страницы, таких как шапка, сайдбар, главная часть и подвал, использовались повсеместно и часто повторялись в классах. Именно поэтому HTML5 предложил отдельные теги для этих элементов. Вот небольшой список:
<header></header> — шапка страницы
<article></article> — главная часть страницы
<aside></aside> — сайдбар
<footer></footer> — подвал страницы
Технически, эти теги эквивалентны тегу <div>, где многоточие — шапка, главная часть страницы, сайдбар или подвал страницы. И, конечно, вы понимаете, почему лучше использовать теги HTML5 вместо <div>. Во-первых, это короче; во-вторых, это уменьшает вероятность ошибки в коде (в старых версиях HTML каждый блок нужно было оборачивать ТОЛЬКО в <div>, и при большом количестве блоков можно легко запутаться в открытии и закрытии тегов, в то время как в HTML5 эти теги сразу бросаются в глаза); и, в-третьих, использование классов будет сокращено.
Задача для гениев
Мой учитель всегда говорил, что «проектирование макета сайта — самая сложная часть создания сайта». Но я считаю, что самая сложная часть — написание кода для определения типа документа. Это действительно так. Только человек с феноменальной памятью сможет запомнить код для определения типа документа. Но с HTML5 эта проблема решена: код сокращается до двух слов — <!DOCTYPE html>. Просто и легко запомнить.
Мощный медиа-друг
Раньше было проблематично вставить медиа-файлы на веб-страницу до появления HTML5. Нам приходилось использовать либо тег object с несколькими параметрами (что требовало много кода), либо вставлять Flash-проигрыватель (что также требовал создания тега object для его размещения). Но сейчас, в XXI веке, мы не нуждаемся в таких сложностях. HTML5 берет на себя всю «грязную работу» с помощью тегов и , которые позволяют добавить на страницу музыку и видео соответственно.
И еще одна интересная возможность. Вы уже знаете, что изображения в HTML можно вставить с помощью тега . Но что, если мы хотим создавать свои собственные рисунки прямо в HTML? HTML5 решает и эту задачу с помощью нового тега .
Стоит отметить, что для «рисования» потребуется использовать JavaScript. Разработчики начали применять эту функциональность не только для создания графики, но и для игр и красивых эффектов. Один тег — столько возможностей!