Coding-space.ru
menu

Что нового в HTML5

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

Изменение в структуре документа

Пожалуй структура - одно из первых отличий, которое сразу бросается в глаза. Как только Вы откроете HTML5 документ, то можете заметить объявление типа документа:

<!DOCTYPE html>
Зачем нужен <!DOCTYPE html>?

Этот тег сообщает валидатору версию нашего HTML документа.

<!DOCTYPE html> - должен всегда находиться на первой строке страницы.

Теперь кодировку можно задать так:

<meta charset="UTF-8">
UTF-8 используется по умолчанию в HTML5 документах.

Новая структура HTML5 страницы

Сейчас мы рассмотрим новые теги, которые помогают систематизировать логику нашей разметки.

Шапка сайта <header>

Наверняка Вы видели на сайтах секцию с логотипом, навигацией по сайту. Эта секция могла повторяться на каждой странице и зачастую находиться в самом верху - это <header>

Ранее в HTML4 мы бы могли для такой секции прописать обычный <div>, дать ему специальный идентификатор с названием header, но сейчас в HTML5 появился такой отличный элемент, как - <header>

<!DOCTYPE html><head></head>
<body>
<header>
о компании: логотип и т.п.
</header>
</body>
Кодировка UTF-8 стоит по умолчанию, поэтому мы не прописывали её.

Навигация по сайту <nav>

Раз уж мы затронули тему с навигацией, то давайте познакомимся с элементов который должен содерждать её.

<nav> - просто обёртка, в которую Вы можете поместить ссылки на другие страницы Вашего сайта.

<nav>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О компании</a></li>
<li><a href="#">Партнёры</a></li>
</ul>
</nav>
<nav> может находиться не только в шапке сайта.

Результат:

nav tag
В теге <nav> находится только основная навигация, не стоит оборачивать этим тегом каждую ссылку на сайте.

Подвал сайта <footer>

Футер (подвал) в какой-то степени противоложность хедеру, только по его рассположению на сайте - снизу. Это так же важный элемент без которого не обходиться ни один сайт.

В футере размещается информация о компании, контактная информация, уведомление об авторских правах, карта сайта (навигация).

<!DOCTYPE html><head></head>
<body>
<footer>
контактная информация, навигация
</footer>
</body>

Элемент <article>

Ещё один элемент, пришедший на замену дивам - <article>. Он представляет собой какой-то независимый контент, это может быть: статья на Вашем сайте, сообщение на форуме, комментарий и т.п.

Вы в <article>!

Например, контент этото урока, который Вы читаете, находится в теге <article>.

Элемент <section>

Этот элемент отчасти помог вылечить болезнь "диватоз", которая заключалась в том, что в HTML4 всё обрамляли в дивы. Сейчас же с приходом HTML5 мы может использовать множество тегов, в том числе и этот.

Основная задача <section> - выделять логические блоки. Например, главная страница компании о строительстве может содержать разделы про услуги компании, местонахождение компании, партнеёров.

Обычной в каждом блоке <section> находится заголовок, характеризующий этот блок.
<!DOCTYPE html><head></head>
<body>
<section class="partners">
<h2>Секция про партнёров</h2>
<p>Описание секции</p>
</section>
</body>
Классификация секций

Обычно таким секция дают идентификаторы class или id чтобы потом взаимодействовать с помощью CSS.

Элемент <aside>

Элемент <aside> содержит второстепенный контент. Обычно он располагается в боковых панелях страницы.

Вы могли видеть такую панель, например с рекламой.
<body>
<aside>
<div>Блок с рекламой</div>
</aside>
</body>

Помогайте другим!

Ниже находится секция с комментариями, мы призываем всех делиться своими знаниями по данной теме, помогать другим.
Так же Вы можете скидывать свои задачи и самые интересные мы обязательно опубликуем в уроке!