Теория урока

69. Знакомство с HTML5

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ

В предыдущем разделе подробно изучили формы в HTML. С этого урока начнем изучать новые особенности, добавленные в HTML5.

Примечание (10.2024)

Может показаться, HTML5 - это что-то новое и передовое. Но нет. Дело в том, что сайт codebra.ru с первыми уроками курса по HTML был запущен в ноябре 2014, через пару дней после официального принятия и рекомендации к использованию пятой версии HTML.

В 2024 году решил оставить структуру курса в прежнем состоянии.

Отличия HTML5 от HTML4

Перед тем как перейти к теории урока, немного напишу о HTML5.

В HTML5 по сравнению с HTML4 валидатор (DOCTYPE) всего один и это <!DOCTYPE html>.
HTML5 стал поддерживать SVG и язык математической разметки (MathML).
Огромное количество новых тегов, перечислять не буду. О всех их узнаете в этом разделе.
В HTML5 появились новые атрибуты для тегов и новые значения атрибута type для универсального тега формы (<input>).
Список универсальных атрибутов тоже пополнился.
Многие теги теперь считаются «устаревшими».
Некоторые имена тегов заменены на новые.
Появились новые API и элементы DOM.
Можете забыть про указание типа (атрибут type) у тега <style> и <script>.

Синтаксис атрибутов в HTML5

В HTML5 стало доступно использовать четыре вида синтаксиса определения атрибутов элемента.

Без кавычек:

Пример (html)

<input type = "text" value=Значение>

С двойными кавычками:

Пример (html)

<input type = "text" value = "Два слова">

С одинарными кавычками:

Пример (html)

<input type = "text" value = 'Два слова'>

Пустое значение:

Пример (html)

<input type = "text" value = "Значение" disabled>

Новые элементы для медиа в HTML5

<audio> - аудио контент;
<embed> - контейнер для внешнего приложения;
<source> - медиа-ресурс для медиа-элементов (<video> и <audio>);
<track> - текстовая дорожка для медиа-элементов (<video> и <audio>);
<video> - видео контент.

Графика в HTML5

<canvas> - область, в которой можно рисовать при помощи скриптов JavaScript;
<svg> - векторная графика.

В этом уроке кратко пробежались по особенностям HTML5 и новым (уже старым) возможностям. В следующем уроке разберемся с новыми структурными элементами сайта.

69. Знакомство с HTML5

Отличия HTML5 от HTML4

Синтаксис атрибутов в HTML5

Новые элементы для медиа в HTML5

Графика в HTML5

Похожие уроки Codebra