HTML 5

HTML5 - это новая версия HTML. Предыдущая версия HTML была выпущена в 1999 году, за это время всемирная паутина сильно изменилась и поэтому изменения требовались и от HTML. В HTML5 было добавлено много нового, поэтому некоторые возможности, которые были доступны в HTML4 только с использованием внешних плагинов (таких как Adobe Flash) или клиентских скриптов теперь доступны с помощью обычных разметочных тегов. HTML5 все еще в разработке, но его частичную поддержку имеют все современные браузеры, поэтому использовать новые возможности Вы можете уже сейчас.

HTML-5 Наиболее интересные нововведения HTML5:

Поддержка видео и аудио (элементы video и audio);
Возможности рисования на веб-страницах произвольных объектов (элемент canvas);
Улучшение форм (новые значения type для <input> и множество новых элементов и атрибутов);
Добавление семантических тегов, позволяющих сделать веб-страницы более понятными для поисковых систем, браузеров и других программ и устройств читающих веб-страницы (элементы footer, header, nav, article);
DOM хранилища - более функциональная альтернатива cookie. Все HTML5 документы должны начинаться с объявления DOCTYPE. Предыдущие версии HTML имели несколько типов DOCTYPE. HTML5 имеет только один:

Все HTML5 документы должны начинаться с объявления DOCTYPE. Предыдущие версии HTML имели несколько типов DOCTYPE. HTML5 имеет только один: <!DOCTYPE html>

Видео и аудио

HTML5 вводит специальный тег <video> позволяющий встраивать в веб-страницы видео файлы. Обратите внимание: поддержку видео имеют браузеры: Internet Explorer 9+, Opera 10.50+, Firefox 3.5+, Chrome 3.0+, Safari 3.1+. Атрибут src тега <video> позволяет указать путь к видео файлу, который будет воспроизведен. Атрибут controls отображает в плеере кнопки управления видео, a атрибуты height (высота) и width (ширина) задают размеры плеера.

1<video src="mountvideo.ogv" width='300' height='200' controls='controls'/>

Видео из предыдущего примера будет нормально проигрываться только в браузерах Opera, Firefox и Chrome. Это происходит из-за того, что в данный момент разные браузеры поддерживают разные форматы. Opera и Firefox поддерживают формат Ogg (с видео кодеком Theora и аудио кодеком и множество новых элементов и атрибутовVorbis) и WebM (с видео кодеком VP8 и аудио кодеком Vorbis), а Internet Explorer и Safari поддерживают MPEG4 (с видео кодеком H.264 и аудио кодеком AAC). Браузер Chrome имеет поддержку всех перечисленных форматов. Таким образом для того, чтобы видео нормально воспроизводилось во всех браузерах необходимо добавить источники в формате Ogg и MPEG4 (или WebM и MPEG4). С помощью тега <source> Вы можете предоставить несколько источников видео в разных форматах для воспроизведения. Браузер будет использовать первый поддерживаемый им формат.

1<video width="300" height="200" controls="controls">
2<source src="mountvideo.ogv" type="video/ogg" />
3<source src="mountvideo.mp4" type="video/mp4" />
4<source src="mountvideo.webm" type="video/webm" />
5</video>

Аналогично с помощью нового HTML5 элемента <audio> Вы можете добавить на Ваш веб-сайт музыкальный трек или подкаст с помощью обычного разметочного тега.

1<audio controls="controls">
2<source src="ghost_k-stop.ogv" type="audio/ogg" />
3<source src="ghost_k-stop.mp3" type="audio/mpeg" />
4Данный текст будет выведен если браузер пользователя не поддерживает элемент audio.
5</audio>

Семантические теги

В HTML4 благодаря использованию CSS Вы могли создавать страницы с хорошо понятной для пользователей визуальной структурой, но были ли эти страницы также понятны для поисковых систем или браузеров? Например, как поисковый робот может отличить содержимое документа от навигационного меню если они размечены с помощью одинаковых div элементов? Для того, чтобы разрешить эту проблему в HTML5 были введены семантические теги. С помощью семантических тегов Вы можете сделать страницы сайтов более понятными для поисковых систем и браузеров.

section

Элемент <section> определяет раздел в документе.

В соответствии со спецификацией W3C по HTML5: "Раздел — это тематически сгруппированный контент, как правило с заголовком."

Домашняя страница обычно может быть разбита на следующие разделы: вступление, основной контент и контактная информация.

Пример:

1<section>
2   <h1>HTML</h1>
3   <p>стандартизированный язык разметки веб-страниц во Всемирной паутине</p>
4</section>

article

Элемент <article> определяет независимый, самодостаточный контент. Контент, помещенный в этот элемент, должен иметь смысл сам по себе, т. е. он должен быть понятен в отрыве от остальных частей веб-сайта. В качестве примеров использования элемента <article> могут выступать:

Публикация на форуме
Публикация в блоге
Газетная статья

Пример:

1<article>
2   <h1>Общее представлени</h1>
3   <p> HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1986—1991 годах в стенах ЦЕРНа в Женеве в Швейцарии.
4   HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. </p>
5</article>

ℹ️note

Элемент <article> определяет независимый, самодостаточный контент. Элемент <section> определяет раздел в документе.

Элемент <header> предназначен для определения заголовочного блока или "шапки" документа или раздела. Элемент <header> следует использовать как контейнер для вводной информации.

В одном документе разрешается определять несколько элементов <header>. Пример:

1<article>
2   <header>
3     <h1>Использование CSS</h1>
4   </header>
5   <p>CSS используется создателями веб-страниц для задания цветов, шрифтов, стилей, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. </p>
6</article>

Элемент <footer> предназначен для определения "подвала" документа или раздела.

Элемент <footer> должен содержать информацию о содержащим его элементе.

Обычно в "подвале" размещают информацию об авторе документа, ссылки на условия использования текста, информация об авторских правах, контактные данные и т.п.

В одном документе разрешается определять несколько элементов <footer>.

Пример:

1<footer>
2   <p>Author John Doe</p>
3   <p>Contacts: <a href="mailto:johndoe@example.com">johndoe@example.com</a>.</p>
4</footer>

nav

Элемент <nav> определяет набор ссылок навигации.

Обратите внимание, что НЕ ВСЕ ссылки в документе следует размещать внутри элемента <nav>. Элемент <nav> предназначен только для основного блока навигационных ссылок.

Пример

1<nav>
2   <a href='/html/'>HTML</a>
3   <a href='/css/'>CSS</a>
4   <a href='/js/'>JavaScript</a>
5</nav>

aside

Элемент <aside> определяет некий контент, находящийся в стороне от контента, внутри которого он расположен.

Контент внутри элемента <aside> должен соотноситься с окружающим контентом.

Пример

1<div>
2Main content
3</div>
4<aside>
5   <nav>
6   <a href='/html/'>HTML</a>
7   <a href='/css/'>CSS</a>
8   <a href='/js/'>JavaScript</a>
9</nav>
10</aside>

main

Тег <main> определяет основное содержимое документа.

Содержимое внутри элемента <main> должно быть уникальным для данного документа. Здесь не должно быть ничего, что повторяется где-либо, вроде сайдбаров, навигационных ссылок, информации об авторских правах, логотипов сайта, поисковых форм и т.п.

❗️Важно

В документе может быть только один элемент <main>, и он не должен быть вложен в элементы <article>, <aside>, <footer>, <header> или <nav>.

В журналах и газетах иллюстрации часто сопровождаются подписями. В HTML4 невозможно было создавать подписи не прибегая к использованию CSS. В HTML5 это проблема решена добавлением новых тегов: <figure> и <figcaption>.

1<figure>
2<img src='mountimg3.jpg' width='300' height='230' />
3<figcaption>Скала "Братья", Западный Саян </figcaption>
4</figure>

Новые input в формах

input type=email определяет поле, которые должно содержать email адрес. Значение введенное в поле автоматически проверяется перед отправкой на сервер.
input type=url определяет поле, которое должно содержать url адрес. Значение введенное в поле автоматически проверяется перед отправкой на сервер.
input type=tel определяет поле для ввода телефонного номера. С помощью атрибута pattern Вы может установить формат принимаемого телефонного номера. Формат задается с помощью регулярных выражений.
input type=number определяет поле, которое должно содержать числа. Вы можете ограничивать диапазон принимаемых чисел с помощью атрибутов min (минимальное допустимое число) и max (максимальное допустимое число). С помощью атрибута step Вы можете задать шаг допустимых чисел (к примеру если шаг равен 2, то в поле могут вводиться числа 0,2,4,6 и т.д.)
input type=range определяет поле, которые может содержать значения в определенном интервале. Отображается как ползунок, который можно перетаскивать мышкой. Вы можете ограничивать диапазон принимаемых чисел с помощью атрибутов min (минимальное допустимое число) и max (максимальное допустимое число). С помощью атрибута step Вы можете задать шаг допустимых чисел (к примеру если шаг равен 2, то в поле могут вводиться числа 0,2,4,6 и т.д.)
input type=search определяет поле поиска (может использоваться например для создания поиска по сайту).

Новые атрибуты:

autofocus делает поле активным после загрузки страницы (может использоваться со всеми типами input).
form указывает форму, которой принадлежит данное поле (может использоваться со всеми типами input).
multiple указывает, что данное поле может принимать несколько значений одновременно (может использоваться с input типов email и file).
novalidate указывает, что данное поле не должно проверяться перед отправкой (может использоваться с form и input).
placeholder отображает текст-подсказку в поле (может использоваться с input следующих типов: text, search, url, tel, email и password.).
required указывает, что данное поле должно быть обязательно заполнено перед отправкой.

Выбор даты

date позволяет выбрать дату в формате год-месяц-день_месяца.
time позволяет выбрать время.
datetime позволяет выбрать дату в формате год-месяц-день_месяцаTвремяZ (отчет ведется по глобальному времени).
datetime-local позволяет выбрать дату в формате год-месяц-день_месяцаTвремя (отчет ведется по местному времени).
month позволяет выбрать дату в формате год-месяц.
week позволяет выбрать дату в формате год-неделя.

Веб хранилища

Веб хранилища представляют собой более функциональную альтернативу cookie. Преимущества веб хранилищ:

Можно хранить неограниченные объемы информации;
Информация, сохраненная в хранилищах, доступна даже без подключения к интернету;
Данные, находящиеся в хранилище, не отсылаются при каждом запросе страниц;
Информацию более удобно сохранять и извлекать;
Хранилища более безопасны, чем cookie.

Drag & Drop

Технология drag and drop (иногда может упоминаться как drag'n'drop) позволяет сделать элементы на Ваших веб-страницах перетаскиваемыми (совсем как окна с программами в операционной системе). Ранее это было возможным только с помощью реализаций сложных JavaScript функций или подключением jQuery. Сейчас технология drag and drop является частью спецификации HTML5 и ее поддержка встроена во все современные веб-браузеры. Практически любые элементы на веб-страницах можно сделать перетаскиваемыми включая картинки, ссылки и обычные текстовые элементы. Для того, чтобы сделать элемент перетаскиваемым, необходимо добавить к нему HTML5 атрибут draggable со значением true.

1<img draggable='true'/>

Геолокация

С помощью HTML5 геолокации Вы можете определить местоположение пользователя. Так как информация о местоположении может нарушать конфиденциальность, прежде чем сервер сможет получить данную информацию пользователь должен явным образом подтвердить, что не имеет возражений на этот счет. Например вот так выглядит окно, которое появляется в браузере Chrome при попытке считать информацию о местоположении:

Практика 👩‍💻👨‍💻

Цели:

Получить навыки создания html страниц с использованием html 5.

Задание

Разработать персональный блог
Придумать уникальный контент
Создать базовую структура блога
Стилизовать фон, логотип и текст
Добавить содержимое блога.