Применение тега header в HTML5
В одном из предыдущих уроков я уже показывал вам пример, в котором использовался этот тег. Давайте, теперь немного разберемся когда применять этот тег. На большинстве современных сайтов, которые уже используют HTML5, элемент <header>. В спецификации HTML5 предлагается, чтобы структурный элемент <header> содержал в себе заголовок раздела (h1-h6, hgroup) или страницы. Но это вовсе не обязательно. Тег <header> содержать в себе логотип, меню навигации, форму поиска и т.п. Давайте немного изменим предыдущий пример и посмотрим, что из этого получиться:
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Новая разметка</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/
svn/trunk/html5.js"></script>
<![endif]-->
<style>
header {
text-align:center;
margin:5px auto;
background:#B0C8C6;
width:94%;
padding:5px
}
header nav{
-moz-border-radius:5px; /* Радиус скругления */
-webkit-border-radius:5px;
-khtml-border-radius:5px;
border-radius:5px;
margin-left:15px;
}
header hgroup {
text-align:right;
width:50%;
color:#CCC;
background:#000;
-moz-border-radius:5px; /* Радиус скругления */
-webkit-border-radius:5px;
-khtml-border-radius:5px;
border-radius:5px;
margin-left:40%;
}
nav {float:left;
background:#CCC;
width:20%;
margin:10px auto}
header hgroup p {
background:#FFF;
color:#006;
-moz-border-radius:0px 0px 5px 5px; /* Радиус скругления */
-webkit-border-radius:0px 0px 5px 5px;
-khtml-border-radius:0px 0px 5px 5px;
border-radius:0px 0px 5px 5px;
padding-right:10px;
}
nav h2 {text-align:center}
article {float:right;
margin:10px auto;
padding-left:10px;
width:77%;
background:#6A9CBD
}
/* Выделим заголовок поста */
article h2{background:#D9CAA4;
text-align:center;
width:40%;
-moz-border-radius:5px; /* Радиус скругления */
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius:5px;
margin:10px auto}
footer {clear:both;
background:#DDECE9}
footer p{
font-size:14px;
text-align:center}
</style>
</head>
<body>
<header>
<nav>
|<a href="#">Пункт №1</a>|<a href="#">Пункт №2</a>|<br>
|<a href="#">Пункт №3</a>|<a href="#">Пункт №4</a>|
</nav>
<hgroup>
<h1><header> Шапка сайта</h1>
<p>Опубликовано: <time datetime=2012-01-14>14 января 2011
</time></p>
</hgroup>
</header>
<nav>
<h2><nav></h2>
<h2>Меню</h2>
<ul>
<li><a href="#">Пункт меню №1</a></li>
<li><a href="#">Пункт меню №2</a></li>
</ul>
</nav>
<article>
<h2><article>Пост №1</h2>
<p>Здесь мы будем писать текст первого поста.</p>
</article>
<article>
<h2><article>Пост №2</h2>
<p>Здесь мы будем писать текст второго поста.</p>
</article>
<footer>
<p><b><footer></b>Здесь обычно пишут, что права защищены.
Год и.т.п. Копирование запрещено))</p>
</footer>
</body>
</html>
В результате должно получиться следующее:
Здесь в <header> я вставил кроме заголовка h1 текст с датой (новый тег <time>), а также небольшую навигацию при помощи тега <nav>
. Можно было вставить и другие элементы, всё это не запрещается. Также вы наверное заметили, что я объединил текст с заголовком с помощью тега <hgroup>. Вообще с помощью этого тега можно объединять и разные заголовки, и изображения с заголовками и т.п.
В следующем уроке я расскажу, как используется тег <nav>