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


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

Тег aside и section в HTML5

Тег <aside> в HTML5 используется для создания какого-либо раздела на странице документа, который лишь косвенно относится к основному контенту. Можно использовать этот элемент для оформления врезок и боковых панелей. Но этот элемент должен располагаться отдельно от основного текста документа. В принципе тег aside можно использовать внутри элемента article, но я бы не стал использовать его, например, для навигации по сайту.

Применение тега <section>

Этот элемент возможно использовать для создания одного или нескольких разделов документа, которые могут вмещать в себя шапку, подвал. В отличие от тега article элемент section не предназначен к многократному использованию на сайте. Он помогает разделять страницу на тематические области или какую либо статью на разделы.


Чтобы получше познакомиться с элементами aside и section предлагаю рассмотреть простенький пример:

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset=utf-8>
  <title><section> и <aside></title>
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/
svn/trunk/html5.js"></script>
  <![endif]-->
<style>
header {
        text-align:center;
        background:#B0C8C6
        }
section {width:80%;
margin:10px auto;
background:#ffffff;
-moz-border-radius:6px; /* Радиус скругления */
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius:6px;}
aside {float:right;
background:#CCC;
width:20%;
text-align:center;}
nav h2 {text-align:center}
article {float:left; 
margin:10px auto;
padding-left:10px;
width:77%;
background:#6A9CBD
}
/* Выделим заголовок поста */
section 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>
<aside>
  <h2>&lt;aside&gt;</h2>
<h2>Новости</h2>
Здесь мы можем написать полезную информацию, которая косвенно 
будет причастна к основному тексту.
</aside>
<article>
<h1>Заголовок нашего основного текста</h1>
<section>
<h2>Раздел №1</h2>
<p>Здесь мы будем писать текст первого раздела.</p>
</section>
<section>
<h2>Раздел №2</h2>
<p>Здесь мы будем писать текст второго раздела.</p>
</section>
<p>А этот текст непосредственно относится к заголовку основного 
текста и не имеет никакого отношения к разделам статьи.</p>
</article>
<footer>
<p><b>&lt;footer&gt;</b> Здесь обычно пишут, что права защищены.
 Год и т.п. Копирование запрещено))</p>
</footer>
 </body>
</html>

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

Использование aside и section

Из примера видно, что самый нижний текст в article относится именно к основному контенту, а не к разделам статьи. Хотя сами разделы статьи (section) имеют непосредственное отношение к основному тексту. Также возможен и другой вариант его  использования.

Например, у вас основной контент имеет разную тематику и разделен на 2 и более блоков, причем каждый блок имеет свои разделы и т.п. В таком случае можно размещать элементы article в тегах section. А делается это очень просто:

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset=utf-8>
  <title>Использование тега section</title>
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/
svn/trunk/html5.js"></script>
  <![endif]-->
  <style>
header{
	text-align:center;
	background:#AD942C;
}
nav {float:left;
background:#CCC;
width:20%;}
nav h2 {text-align:center}
section {float:right;
margin:10px auto;
width:77%;
background:#000000
}
section h1{color:#ffffff;
padding-left:15px;
}
article {float:left; 
margin:10px;
padding-left:10px;
width:95%;
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>
<section>
<h1>Тематический блок №1</h1>
<article>
<h2>&lt;article&gt; Пост №1</h2>
<p>Здесь мы будем писать текст первого поста.</p>
</article>
<article>
<h2>&lt;article&gt; Пост №2</h2>
<p>Здесь мы будем писать текст второго поста.</p>
</article>
</section>
<section>
<h1>Тематический блок №2</h1>
<article>
<h2>&lt;article&gt; Пост №1</h2>
<p>Здесь мы будем писать текст первого поста.</p>
</article>
<article>
<h2>&lt;article&gt; Пост №2</h2>
<p>Здесь мы будем писать текст второго поста.</p>
</article>
</section>
<footer>
<p><b>&lt;footer&gt; </b>Здесь обычно пишут, что права защищены.
 Год и т.п. Копирование запрещено))</p>
</footer>
 </body>
</html>

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

Тег article внутри элемента section

Потренируйтесь на досуге использовать эти элементы уверен вам понравится. После можете переходить к следующему уроку.



наверх