Внимание! На этой странице вы найдете материал урока из архивного курса по HTML. Курс был написан в 2015, обновлен в 2024 году и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по HTML и на странице первого урока.
- Упростите кодировку. Она должна выглядеть как в HTML5
- Уберите лишние атрибуты в теге
<script>
В предыдущем разделе подробно изучили формы в HTML. С этого урока начнем изучать новые особенности, добавленные в HTML5.
Может показаться, 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 стало доступно использовать четыре вида синтаксиса определения атрибутов элемента.
Без кавычек:
<input type = "text" value=Значение>С двойными кавычками:
<input type = "text" value = "Два слова">С одинарными кавычками:
<input type = "text" value = 'Два слова'>Пустое значение:
<input type = "text" value = "Значение" disabled>Новые элементы для медиа в HTML5
<audio>- аудио контент;<embed>- контейнер для внешнего приложения;<source>- медиа-ресурс для медиа-элементов (<video>и<audio>);<track>- текстовая дорожка для медиа-элементов (<video>и<audio>);<video>- видео контент.
Графика в HTML5
<canvas>- область, в которой можно рисовать при помощи скриптов JavaScript;<svg>- векторная графика.
В этом уроке кратко пробежались по особенностям HTML5 и новым (уже старым) возможностям. В следующем уроке разберемся с новыми структурными элементами сайта.
Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу HTML.
