Введение в HTML5 основы для начинающих

HTML (HyperText Markup Language) представляет язык разметки гипертекста, используемый преимущественно для создания документов в сети интернет. HTML начал свой путь в начале 90-х годов как примитивный язык для создания веб-страниц, и в настоящий момент уже трудно представить себе интернет без HTML. Подавляющее большинство сайтов так или иначе используют HTML.

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

Что добавилось в HTML5?

HTML5 определяет новый алгоритм парсинга для создания структуры DOM, добавление новых элементов и тегов, как например, элементы video, audio и ряд других.

С добавлением новых функций HTML5 стал не просто новой версией языка разметки для создания веб-страниц, но и фактически платформой для создания приложений, а область его использования вышла далеко за пределы веб-среды интернет: HTML5 применяется также для создания мобильных приложений под Android, iOS, Windows Mobile и даже для создания десктопных приложений для обычных компьютеров (в частности, в ОС Windows 8/8.1/10).

HTML 5 применяется преимущественно в двух значениях:
1. HTML 5 как обновленный язык разметки гипертекста, некоторое развитие предыдущей версии HTML.
2. HTML 5 мощная платформа для создания веб-приложений, которая включает не только непосредственно язык разметки гипертекста, обновленный HTML, но и язык программирования JavaScript и каскадные таблицы стилей CSS 3.

Развитием HTML5 занимается World Wide Web Consortium (сокращенно W3C - Консорциум Всемирной Паутины) - независимая международная организация, которая определяет стандарт HTML5 в виде спецификаций. Текущую полную спецификацию на английском языке можно посмотреть по адресу https://www.w3.org/TR/html5/.

Поддержка различными браузерами

Большинство браузеров стало внедрять стандарты HTML5 еще до их официальной публикации. И к текущему моменту большинство браузеров поддерживают большинство функций HTML5 (Google Chrome, Firefox, Opera, Internet Explorer 11, Microsoft Edge и др.). Многие старые браузеры, как например, Internet Explorer 8 и более младшие версии, не поддерживают стандарты, а IE 9, 10 поддерживает лишь частично.

Те браузеры, которые поддерживают стандарты, могут не поддерживать какие-то отдельные функции. Это тоже надо учитывать в работе с HTML5. Но в целом с поддержкой данной технологии довольно хорошая ситуация, которая редко требует вмешательств со стороны разработчика.
Для проверки поддержки HTML5 конкретным браузером можно использовать специальный сервис http://html5test.com.

Необходимые инструменты для HTML5

Прежде чем переходить непосредственно к созданию своих веб-страниц на HTML5, необходимо рассмотреть основные блоки, кирпичики, из которых состоит веб-страница.

Документ HTML5, как и любой документ HTML, состоит из элементов, а элементы состоят из тегов. Как правило, элементы имеют открывающий и закрывающий тег, которые заключаются в угловые скобки. Например:

Здесь определен элемент div, который имеет открывающий тег <div> и закрывающий тег </div>. Между этими тегами находится содержимое элемента div. В данном случае в качестве содержимого выступает простой текст "Текст элемента div".

Элементы также могут состоять из одного тега, например, элемент <br />, функция которого - перенос строки.

Такие элементы еще называют непарными элементами. Хотя я использовал закрывающий слеш, но его наличие согласно спецификации необязательно, и равнозначно использованию тега без слеша: <br>
Каждый элемент внутри открывающего тега может иметь атрибуты. Например:

Здесь определено два элемента: div и input. Элемент div имеет атрибут style. После знака равно в кавычках пишется значение атрибута: style="color:red;". В данном случае значение "color:red;" указывает, что цвет текста будет красным.

Второй элемент - элемент input, состоящий из одного тега, имеет два атрибута: type (указывает на тип элемента - кнопка) и value (определяет текст кнопки)

Существуют глобальные или общие для всех элементов атрибуты, как например, style, а есть специфические, применяемые к определенным элементам, как например, type.

Кроме обычных атрибутов существуют еще булевые или логические атрибуты (boolean attributes). Подобные атрибуты могут не иметь значения. Например, у кнопки можно задать атрибут disabled:

Атрибут disabled указывает, что данный элемент отключен. Фокусировка на элементе будет не возможна, и он станет неактивен.

Глобальные атрибуты

В HTML5 есть набор глобальных атрибутов, которые применимы к любому элементу HTML5:
1.accesskey: определяет клавишу для быстрого доступа к элементу
2.class: задает класс CSS, который будет применяться к элементу
3.contenteditable: определяет, можно ли редактировать содержимое элемента
4.contextmenu: определяет контекстное меню для элемента, которое отображается при нажатии на элемент правой кнопкой мыши
5.dir: устанавливает направление текста в элементе
6.draggable: определяет, можно ли перетаскивать элемент
7.dropzone: определяет, можно ли копировать переносимые данные при переносе на элемент
8.hidden: скрывает элемент
9.id: уникальный идентификатор элемента. На веб-странице элементы не должны иметь повторяющихся идентификаторов
10.lang: определяет язык элемента
11.spellcheck: указывает, будет ли для данного элемента использоваться проверка правописания
12.style: задает стиль элемента
13.tabindex: определяет порядок, в котором по элементам можно переключаться с помощью клавиши TAB
14.title: устанавливает дополнительное описание для элемента
15.translate: определяет, должно ли переводиться содержимое элемента

Как правило, из всего этого списка наиболее часто используются три: class, id и style.

Пользовательские атрибуты

В отличие от предыдущей версии языка разметки в HTML5 были добавлены пользовательские атрибуты (custom attributes). Теперь разработчик или создатель веб-страницы сам может определить любой атрибут, предваряя его префиксом data-. Например:

Здесь определен атрибут data-color, который имеет значение "red". Хотя для этого элемента, ни в целом в html не существует подобного атрибута. Мы его определяем сами и устанавливаем у него любое значение.

Одинарные или двойные кавычки

Нередко можно встретить случаи, когда в html при определении значений атрибутов применяются как одинарные, так и двойные кавычки. Например:

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

Создание документа HTML5

Элементы являются кирпичиками, из которых складывается документ html5. Для создания документа нам надо создать простой текстовый файл, а в качестве расширения файла указать *.html
Создадим текстовый файл, назовем его index и изменим его расширение на .html.

Откроем этот файл в любом текстовом редакторе, например, в блокноте. Добавим в файл следующий текст:

Для создания документа HTML5 нам нужны в первую очередь два элемента: DOCTYPE и html. Элемент doctype или Document Type Declaration сообщает веб-браузеру тип документа. <!DOCTYPE html> указывает, что данный документ является документом html и что используется html5, а не html4 или какая-то другая версия языка разметки.

А элемент html между своим открывающим и закрывающим тегами содержит все содержимое документа.

Внутри элемента html мы можем разместить два других элемента: head и body. Элемент head содержит метаданные веб-страницы - заголовок веб-страницы, тип кодировки и т.д., а также ссылки на внешние ресурсы - стили, скрипты, если они использутся. Элемент body собственно определяет содержимое html-страницы.
Теперь изменим содержимое файла index.html следующим образом:

В элементе head определено два элемента:
1.элемент title представляет заголовок страницы
1.элемент meta определяет метаинформацию страницы. Для корректного отображения символов предпочтительно указывать кодировку. В данном случае с помощью атрибута charset="utf-8" указываем кодировку utf-8.

В пределах элемента элемента body используется только один элемент - div, который оформляет блок. Содержимым этого блока является простая строка.

Поскольку мы выбрали в качестве кодировки utf-8, то браузер будет отображать веб-страницу именно в этой кодировке. Однако необходимо чтобы сам текст документа также соответствовал выбранной кодировке utf-8. Как правило, в различных текстовых редакторах есть соотвествующие настройки для установки кодировки. Жмем сохранить как, и выбираем следующий формат:

Сохраним и откроем файл index.html в браузере:

Таким образом, мы создали первый документ HTML5. Так как мы указали в элементе title заголовок "Документ HTML5", то именно такое название будет иметь вкладка браузера.

Так как указана кодировка utf-8, то веб-браузер будет корректно отображать кириллические символы. А весь текст, определенный внутри элемента body мы увидим в основном поле браузера.