Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Конструктор сайтов uGuide
Главная » Html5 » Primenenie-tega-header-v-html5

Применение тега 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>&lt;header&gt; Шапка сайта</h1>
<p>Опубликовано: <time datetime=2012-01-14>14 января 2011
</time></p>
   </hgroup>
</header>
<nav>
  <h2>&lt;nav&gt;</h2>
<h2>Меню</h2>
<ul>
<li><a href="#">Пункт меню №1</a></li>
<li><a href="#">Пункт меню №2</a></li>
</ul>
</nav>
<article>
<h2>&lt;article&gt;Пост №1</h2>
<p>Здесь мы будем писать текст первого поста.</p>
</article>
<article>
<h2>&lt;article&gt;Пост №2</h2>
<p>Здесь мы будем писать текст второго поста.</p>
</article>
<footer>
<p><b>&lt;footer&gt;</b>Здесь обычно пишут, что права защищены.
 Год и.т.п. Копирование запрещено))</p>
</footer>
 </body>
</html>

В результате должно получиться следующее:

header в HTML5

Здесь в <header> я вставил кроме заголовка h1 текст с датой (новый тег <time>), а также небольшую навигацию при помощи тега <nav>
. Можно было вставить и другие элементы, всё это не запрещается. Также вы наверное заметили, что я объединил текст с заголовком с помощью тега <hgroup>. Вообще с помощью этого тега можно объединять и разные заголовки, и изображения с заголовками и т.п.

В следующем уроке я расскажу, как используется тег <nav>



наверх