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


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Html5 » Element-nav-v-html5

Тег nav как элемент навигации в HTML5

Новый структурный элемент nav в html5 используется для создания панели навигации на сайте. Он может быть не один на странице. В панели навигации обычно ставятся ссылки на другие странички сайта, но не каждая ссылка должна быть в этом теге. Например ссылки на другой сайт, рекламы спонсора и т.п. не должны находиться в нем. Обычно, как все привыкли, в меню блок ссылок располагается с помощью неупорядоченного списка, но стоит помнить, что nav лишь обрамляет такие элементы, как <ol> или <ul>, а не заменяет их.

Также в нем может располагаться заголовок раздела. Хотя можно обойтись и без списка, а заключить в текстовые блоки. Сейчас вы на примере убедитесь, как легко можно использовать и текстовые блоки и списки в панели навигации:

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset=utf-8>
  <title>Использование тега nav</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 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:37%;
}
nav {float:left;
background:#CCC;
width:20%;
margin:10px 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}
nav ul{
	margin:0px 10px 10px 10px;
	background:#8F99C5;
	-moz-border-radius:5px; /* Радиус скругления */
-webkit-border-radius:5px;
-khtml-border-radius:5px;
border-radius:5px;
	}
nav ul li{
	list-style:none;
	padding:5px;
	margin-top:2px		
}  
nav p {background:#8F99C5;
text-align:center;
margin:0px 10px 10px 10px;
padding:5px;
-moz-border-radius:5px; /* Радиус скругления */
-webkit-border-radius:5px;
-khtml-border-radius:5px;
border-radius:5px;}
nav ul li a:hover, p a:hover{
	text-decoration:none;
	color:#CCC;
	background:#000;
	-moz-border-radius:5px; /* Радиус скругления */
-webkit-border-radius:5px;
-khtml-border-radius:5px;
border-radius:5px;
padding:5px;
	}
article {float:right; 
margin:10px auto;
padding-left:10px;
width:55%;
background:#6A9CBD
}
/* Выделим заголовок поста */
article h2{background:#D9CAA4;
text-align:center;
width:50%;
-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> 
<hgroup>
   <h1>&lt;header&gt; Шапка сайта</h1>
<p>Опубликовано: <time datetime=2012-01-14>14 января 
2011</time></p>
   </hgroup>
</header>
<nav>
  <h2>&lt;nav&gt; Использование списков</h2>
<ul>
  <li><a href="#">Пункт меню №1</a></li>
<li><a href="#">Пункт меню №2</a></li>
</ul>
</nav>
<nav>
  <h2>&lt;nav&gt; </h2>
  <h2>Текстовые блоки</h2>
<p><a href="#">Пункт меню №1</a></p>
<p><a href="#">Пункт меню №2</a></p>
</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>

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

Применение тега nav

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

В следующем уроке вы познакомитесь с новым структурным элементом HTML5 — тегом <article>.



наверх