Разметка страниц c HTML5
Введение
HTML5 (HyperText Markup Language) — это язык для структурирования и представления содержимого веб страниц. Сегодня он поддерживается практически всеми современными браузерами. Что касается старых версий IE (ниже 9 версии), то для них есть решение на JavaScript. Документ размеченый HTML5 легко читается как человеком так и поисковым ботом. Поскольку семантическая разметка позволяет структурировать елементы в соответствии с их предназначением. Итак, давайте рассмотрим эти елементы на примерах.
Оформление документа
Доктайп:
<!doctype html>Кодировка:
<meta charset="utf-8" />Язык:
<html lang="ru">Элемент <main>
Содержит основной контент документа. Сюда не включаются навигационные панели, сайдбары, логотипы, копирайты и т.п.. Например:
<main>
<h1>Заголовок</h1>
<p>Описание</p>
<article>
<h2>Товар 1</h2>
<p>Описание товара 1</p>
</article>
<article>
<h2>Товар 2</h2>
<p>Описание товара 2</p>
</article>
</main>Элемент <header>
Содержит навигационные и вводные елементы. Может включать заголовок, логотип, навигацию, форму поиска и т.п.. Например:
<header>
<h1>Название компании</h1>
<nav>
<ul>
<li><a href="/about">О компании</a></li>
<li><a href="/store">Магазин</a></li>
<li><a href="/feedback">Обратная связь</a></li>
</ul>
</nav>
</header>В документе может быть несколько элементов <header>.
Элемент <footer>
Содержит информацию об авторстве, дате публикации, копирайт, контакты и т.п.. Например:
<footer>
<p>Copyright © 2016. Jetsource.ru</p>
<address>
Контакты для связи <a href="mailto:help@site.ru">Название компании</a>.
</address>
<nav>
<ul>
<li><a href="/about">О компании</a></li>
<li><a href="/sitemap">Карта сайта</a></li>
<li><a href="/feedback">Обратная связь</a></li>
</ul>
</nav>
</footer>Элемент <section>
Объединяет елементы документа. Но не является обёрткой. Обязательно должен содержать заголовок. Может включать список новостей, вкладок, товаров и т.п.. Например:
<section>
<h2>Заголовок</h2>
<p>Содержимое</p>
</section>
<section>
<h3>Новости</h3>
<article>
<h4>Новость 1</h4>
<p>Описание новости 1</p>
</article>
<article>
<h4>Новость 2</h4>
<p>Описание новости 2</p>
</article>
</section>В документе может быть несколько элементов <section>.
Элемент <nav>
Содержит навигацию по сайту. Например:
<nav>
<ul>
<li><a href="/about">О компании</a></li>
<li><a href="/store">Магазин</a></li>
<li><a href="/feedback">Обратная связь</a></li>
</ul>
</nav>Элемент <article>
Содержит независимый блок информации. Может быть запись блога, новость, комментарий и т.п.. Также может включать в себя несколько других елементов <article>. Например:
<article>
<h2>Заголовок статьи</h2>
<div>Текст статьи</div>
<div>
<h3>Комментарии</h3>
<article>
<h4>Автор комментария1</h4>
<p>Комментарий1</p>
</article>
<article>
<h4>Автор комментария2</h4>
<p>Комментарий2</p>
</article>
</div>
</article>Элемент <aside>
Содержит елементы существующие независимо от контента. Это может быть рекламные блоки, плагины соцсетей, виджеты голосований и т.п.. Например:
<aside>
<h2>Скидки на смартфоны</h2>
<p>Спешите купить новый флагман от компании на 20% дешевле! <a href="/buy?id=45">Купить</a></p>
</aside>Элемент <address>
Содержит контактную информацию. Например:
<address>
Контакты для связи <a href="mailto:help@site.ru">Название компании</a>.
</address>Элемент <time>
Содержит дату и время. Имеет атрибут datetime. В котором указывается дата в формате YYYY-MM-DD. Например:
<time datetime="2016-01-31">31 января 2016 г.</time>Элемент <mark>
Выделяет слово или словосочетание. По умолчанию желтым цветом. Может быть важным содержимым, на которое нужно обратить внимание или ключевым словом. Например:
Это здесь <mark>самое главное</mark> во всем тексте.Элемент <wbr>
Указывает где допустим перенос строки. Можно применить для длинных слов, блоков кода, урлов и т.п.. Например:
Это был четырёхсотпяти<wbr>десяти<wbr>семи<wbr>миллиметровый калибр.Совместимость с IE ниже 9 версии
У IE есть такая особенность, как не замечать неизвестные ему теги. Поэтому обратимся за помощью к JavaScript:
<!--[if lt IE 9]>
<script type="text/javascript">
document.createElement('main');
document.createElement('header');
document.createElement('section');
document.createElement('nav');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
<![endif]-->Корректное отображение тегов
Все елементы HTML5 по умолчанию инлайновые. Поэтому для корректного отображения нужно сделать их блочными. Например:
main, header, footer, section, nav, article, aside {display: block}Заключение
В статье рассмотрены только основные структурные елементы HTML5. Но поскольку задачей являлось знакомство с языком разметки, то их вполне достаточно для его понимания. Главное помнить, что использование HTML5 улучшит семантическое содержимое страницы.