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


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

Применение новых структурных элементов

Говоря о новых структурных элементах  надо сказать, что разработчики пытались добиться, чтобы их выбор определялся значением содержимого, расположенного в документе, а не его внешнем представлении. И им это удалось! Можно конечно сверстать страницу только с помощью <div> и <span>, но объекты, расположенные на страничке не будут иметь никакого отношения к семантике.

Чтобы легче было понять о чем идет речь я приведу два примера. В первом примере я буду использовать div, а во втором уже новые элементы, но внешний вид документа при этом останется тем же самым

Первый пример (с использованием div):

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset=utf-8>
  <title>Старая разметка</title>
  <style>
#header {
	text-align:center;
	background:#B0C8C6
	}
#sidebar {float:left;
background:#CCC;
width:20%;}
#sidebar h2 {text-align:center}
.post {float:right; 
margin:10px auto;
padding-left:10px;
width:77%;
background:#6A9CBD
}
/* Выделим заголовок поста */
.post 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>
  
<div id="header">
<h1>&lt;div id=&quot;header&quot;&gt; Шапка сайта</h1>
</div>
<div id="sidebar">
  <h2>&lt;div id=</h2>
  <h2>&quot;sidebar&quot;&gt;</h2>
  <h2>Меню</h2>
<ul>
<li><a href="#">Пункт меню №1</a></li>
<li><a href="#">Пункт меню №2</a></li>
</ul>
</div>
<div class="post">
<h2>&lt;div class=&quot;post&quot;&gt;Пост №1</h2>
<p>Здесь мы будем писать текст первого поста.</p>
</div>
<div class="post">
<h2>&lt;div class=&quot;post&quot;&gt;Пост №2</h2>
<p>Здесь мы будем писать текст второго поста.</p>
</div>
<div id="footer">
<p><b>&lt;div id=&quot;footer&quot;&gt;</b>Здесь обычно
 пишут, что права защищены. Год и.т.п. Копирование запрещено))
</p>
</div>
 </body>
</html>

В итоге вы должны получить следующее:

Использование блоков div

Думаю как размещаются блоки вам объяснять не нужно. Каждый блок я специально подписал, что он обозначает. А теперь давайте применим новые элементы HTML5:

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset=utf-8>
  <title>Новая разметка</title>
  <style>
header {
	text-align:center;
	background:#B0C8C6
	}
nav {float:left;
background:#CCC;
width:20%;}
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>
<h1>&lt;header&gt; Шапка сайта</h1>
</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>

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

Использование элементов HTML5

Проанализировав два примера становится ясно, что в HTML5 можно использовать оба примера, но в отличие от нейтрального div, который не имеет никакой семантики, новые теги (headerarticlenavfooter и т.д) предоставляют конкретную информацию браузеру — что, где находится. Но надо сказать, что далеко не все браузеры поддерживают эти теги, но это всегда можно исправить при помощи JavaScript, но об этом мы поговорим на следующей уроке.



наверх