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


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

Применение тега article в HTML5

Для информационных, публицистических, научных сайтов, где расположено много информации и статей, структурный элемент article в html просто необходим. Обычно в этот тег вставляется основная область контента. Причем из предыдущего примера видно, что этот элемент может использоваться несколько раз. Но я бы не стал использовать его в header или в footer, хотя такие примеры имеются. Ещё надо сказать, что заголовок должен быть расположен внутри элемента а не снаружи:

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset=utf-8>
  <title>Использование тега article</title>
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/
html5.js"></script>
  <![endif]-->
  <style>
article { 
margin:auto;
padding-top:10px;
width:85%;
background:#006
}
article, article h2 {-moz-border-radius:5px; 
/* Радиус скругления */
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius:5px;}
/* Выделим заголовок поста */
article h2{background:#D9CAA4;
text-align:center;
width:50%;
margin:10px auto}
article p {
	color:#886F17;
	padding-left:15px}
footer {clear:both;
background:#DDECE9}
footer p{
	font-size:14px;
	text-align:center}
  </style>
 </head>
 <body>
<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>

В результате мы получим вот что:

Тег article в HTML5

Совсем неправильно было бы писать вот так:

<h2>&lt;article&gt;Пост №1</h2>
<article>
<p>Здесь мы будем писать текст первого поста.</p>
</article>
<h2>&lt;article&gt;Пост №2</h2>
<article>
<p>Здесь мы будем писать текст второго поста.</p>
</article>

Если вам что-то не понятно не стесняйтесь задавать вопросы, мы ещё вернёмся к этому тегу. В следующем уроке мы познакомимся с вами с тегом footer.



наверх