Структурные элементы HTML5
Всем доброго времени суток. На связи Алексей Гулынин. В HTML5 появилось несколько новых структурных элементов или, как их ещё называют, семантических элементов. Из всех этих структурных элементов браузер почти никакие не обрабатывает (разве что тег <mark>). Нужно это всё для поисковых систем, поисковых роботов, чтобы им проще было анализировать контент на нашей странице. Для нас разницы нет, что задать <div id="footer">, что просто поставить <footer>, но для поисковых роботов разница огромная. Робот сразу понимает, что здесь находится подвал сайта, следовательно здесь можно будет найти копирайты, счетчики и всё то, что обычно присутствует в подвале сайта.
Давайте попробуем заглянуть в будущее и представить, где это может пригодится (помимо того, что наш сайт будет лучше индексироваться). Возможно будут созданы приложения, которые будут управляться голосом и по запросу людей с ограниченным зрением выводить содержимое из тега <div id="article"> (пропуская всё остальное), который мы разберем ниже.
Давайте приступим к изучению структурных элементов html5.
Парный тег <div id="header"> служит для того, чтобы разметить, что в данном месте страницы идёт заголовок сайта. Сюда можно включать абсолютно всё то, что вы включали, когда использовали такую конструкцию <div id="header"> (или какую-то свою). Обычно здесь присутствуют логотип, картинка шапки сайта, название сайта и его описание. Сразу пример (обращаю внимание, что изменился DOCTYPE, теперь его можно запомнить):
<!DOCTYPE html> <html> <head> <title>Семантические элементы элементы</title> <meta charset="utf-8" /> </head> <body> <header> <h1>Здесь содержится заголовок нашего сайта.</h1> </header> </body> </html>
Все следующие новые элементы будем вставлять после тега </header>.
Новый тег <nav> служит для того, чтобы показать браузеру, что здесь идёт навигация по сайту. Можно использовать несколько тегов <nav> на странице. Обычно служит для вывода меню, хлебных крошек. Пример:
<nav> <a href="#">Ссылка 1</a> <a href="#">Ссылка 2</a> <a href="#">Ссылка 3</a> </nav>
Тег <article> служит для вывода полноценного текста (так сказать законченного куска информации) на сайте, как вариант: статья, запись блога.
<article> Здесь находится моя первая статья по HTML5 </article>
Тег <section> служит для выделения какой-то законченной смысловой части контента (это как в книге отдельные главы). Допустим мы решили написать большую статью про домашних животных, в которой расскажем о кошках, собаках и курах. В данном случае разметку можно написать так:
<article> <h1>В данной статье речь пойдёт о домашних животных</h1> <section><p>Кошки...</p></section> <section><p>Собаки...</p></section> <section><p>Куры...</p></section> </article>
Тег <aside> служит для вывода цитат, определенных фраз из статей, комментариев. Данный тег в браузере никак не выделяется, но зато поисковая система теперь знает, что здесь у нас содержится цитата, комментарий или что-то в этом духе.
<aside> <p>Мой первый комментарий</p> </aside>
Тег <figure> используется для вывода графики, аудио, видео, да в принципе можно ко всему применять. Тег <figcaption> используется для вывода подписи к содержимому (данный тег должен идти либо сразу перед после <figure>, либо в конце перед </figure>):
<figure> <img src="1.jpg" width="200px" height="200px" alt="image1"/> <figcaption>Картинка номер 1</figcaption> </figure>
Тег <footer> это подвальная часть сайта, другими словами нижний колонтитул документа. Теперь браузер точно сможет понять, что здесь находится подвал. Здесь обычно размещают копирайты, различные счетчики, могут дублировать верхнее меню.
Тег <mark> используется для выделения важной части статьи. Это, наверное, единственный тег, который обрабатывается браузером:
<mark>Самая важная часть на сайте</mark>
Данная часть должна выделиться желтым цветом. Как же данные элементы обрабатывать в CSS. Здесь всё очень просто:
mark {
background:none;
}
header {
background:yellow;
}
Теперь фон заголовка будет желтым, а фон тега <mark> мы убрали совсем.
В заключении хочу отметить, что теперь не имеет смысла писать атрибут type у тегов <link> и <script>. Браузер и так понимает, что это CSS и Javascript.
Домашнее задание: составьте свою разметку сайта, с использованием новых структурных элементов.
В данной статье вы узнали про структурные элементы HTML5.
На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.
