Новые элементы в HTML5. Часть 3

HTML5 элементы
Всем привет! Сегодня мы закончим говорить про новые структурные элементы в HTML5 и постараемся объединить их на одной страничке.

Объединение элементов


Итак, давайте попробуем объединить элементы которые мы успели рассмотреть в предыдущих частях на одной страничке:
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset=utf-8>
  <title>Тег header</title>
  <style>
body{
 min-width:800px;
 margin:10px auto;}
header {
        text-align:center;
        margin:10px auto;
        background:#dde7e7;
        width:90%;
        padding:10px;
    border: 1px solid black;
-moz-border-radius:10px 30px; 
-webkit-border-radius: 10px 30px;
border-radius:10px 30px;
}
section {width:80%;
margin:10px auto;
padding:10px;
background:#000000;
    color:#ffffff;
-moz-border-radius:10px; 
-webkit-border-radius: 10px;
border-radius:10px;}

article {float:right; 
margin:10px 20px 0px auto ;
padding:10px;
width:65%;
background:#516c94;
    color:#c9ced6;
}
article>p{float:left; }
/* Выделим заголовок раздела поста */
section h2{background:#c3d9d8;
text-align:center;
width:40%;
    color:black;
-moz-border-radius:5px; 
-webkit-border-radius: 5px;
border-radius:5px;
margin:10px auto}
nav { 
float:left;    
width:25%;
margin:10px 10px;

}
nav ul{   
    margin:13px 10px 10px 10px;
    background:#a3bcc4;
    border: 1px solid black; 
    -moz-border-radius:10em 0.5em/1em 0.5em; 
-webkit-border-radius:10em 0.5em/1em 0.5em;
border-radius:10em 0.5em/1em 0.5em;    
    }
a {
    text-decoration:none;
}
nav ul li{    
    list-style:none;
    padding:15px;    
} 
nav ul li a:hover{   
    color:#CCC;
    background:#000;
    -moz-border-radius:5px; 
-webkit-border-radius:5px;
border-radius:5px;
padding:5px; 
}
aside {float:right;
margin:10px;
padding:10px;
width:30%;
-moz-border-radius:10px; 
-webkit-border-radius: 10px;
border-radius:10px;
background:#c3d9d8;
color:black;
 }
footer {clear:both;
  background:#DDECE9;
 width:90%;
    height:80px;
margin:auto;
border: 1px solid #ccc;
    -webkit-box-shadow: 1px 1px 8px rgba(0,0,0, 0.4);
    -moz-box-shadow: 1px 1px 8px rgba(0,0,0,0.4);
    box-shadow: 1px 1px 8px rgba(0,0,0,0.4);
    -webkit-border-bottom-right-radius: 50px 4px;
    -moz-border-radius-bottomright: 50px 4px;
    border-bottom-right-radius: 50px 4px;
    -webkit-transform: skew(3deg,3deg)
                        translate(4px,7px);
    -moz-transform: skew(3deg,3deg)
                        translate(4px,7px);
        -o-transform: skew(3deg,3deg)
                        translate(4px,7px);
    transform: skew(3deg,3deg)
                        translate(4px,7px);}
  footer p{
  font-size:25px;
  text-align:center;
padding:20px
}
 figure {
    background:#f5d4b6;       
    width: 85%; 
    margin:10px auto;    
    text-align:center;
    -moz-border-radius:5px; 
-webkit-border-radius: 5px;
border-radius:5px;
border:1px solid #CCC;
box-shadow:0 0 10px 0 #555555;
-webkit-box-shadow: 0 0 10px 0 #555555;
 -moz-box-shadow: 0 0 10px 0 #555555;
  } 
   figcaption {
position:relative;
 top:30px;
 margin:auto;
 padding:10px;
  width:120px;
 background:#c5c5c9;
opacity: 0.6;       
   }
time { background: #bfa893;
color:#ffffff ;
}
span{
    display:block;
margin:10px;    
 padding:10px auto;
    font-size:45pt;
}
.zvezda{ 
color: #f0442d;
text-shadow: 0 0 10px black;
}
.shadow {    
    -moz-box-shadow: 0 0 12px rgba(0,0,0,0.8); 
    -webkit-box-shadow: 0 0 12px rgba(0,0,0,0.8); 
    box-shadow: 0 0 12px rgba(0,0,0,0.8); 
}​
</style>
 </head>
     <body>
 <header class="shadow">
<h1>Тег header или просто шапка!</h1>
  </header>
<nav> 
  <ul class="shadow">
        <li><a href="#">Пункт меню №1</a></li>
        <li><a href="#">Пункт меню №2</a></li>
        <li><a href="#">Пункт меню №3</a></li>
        <li><a href="#">Пункт меню №4</a></li>
  </ul>
</nav>
  <article class="shadow">
<h1>Заголовок текста</h1>
<section>
<h2>Первый раздел</h2>
<p>Текст первого раздела.</p>
</section>
<section>
<h2>Второй раздел</h2>
<p>Текст второго раздела.</p> 
</section>
<p>Текст относится к заголовку основного текста и не имеет никакого отношения к разделам статьи.</p>
 <aside>
<h2>Новости</h2>
<p>В теге aside мы применим элемент details со скрытым элементом figure 
  <details>
      <figure>
    <span class="zvezda">★</span>
    <figcaption>Символ звезды с использованием юникода</figcaption>
   </figure> 
  </details></p>
    </aside>
      <p><time>2012-10-14</time> опубликована эта статья</p> 
</article>
<footer>
    <p>Подвал странички сайта</p>
</footer>​

Данный пример можно посмотреть здесь.

В этом примере собраны все структурные элементы, которые мы рассмотрели. Хотелось бы добавить, что все элементы могут использоваться по не скольку раз на страничке. Также элемент header и footer могут быть отдельными как для всей страницы, так и для какого-либо поста.

Давайте немного поговорим про поддержку этих элементов. Стили к новым тегам добавляются также, как и к другим элементам html и имеют следующий синтаксис:

элемент{св-ва элемента}

Отображаться элементы будут одинаково во всех браузерах, кроме одного. IE 8-ой версии и ниже. Мало того, что элементы не будут оформлены, так браузер IE вообще никак не поддерживает данные теги. На помощь к нам как всегда приходит JavaScript, с помощью которого можно задать условие при котором наши новые элементы начнут корректно отображаться.

Сейчас я покажу три способа, которые помогут облегчить жизнь:

  1. Первый способ:
  2. Добавляем скрипт между тегами
    <script>
    document.createElement('header') ;
    document.createElement('nav') ;
    document.createElement('article');
    document.createElement('footer') ;
    </script>
    
  3. Второй способ:
  4. Чтобы каждый раз не добавлять новый элемент, можно добавить другой скрипт:
    !--[if lt IE 9]>
    <script>
    var e = ("abbr,article,aside,audio,canvas,datalist,details," +
    "figure,footer,header,hgroup,mark,menu,meter,nav,output," +
    "progress,section,time,video").split(',');
    for (var i = 0; i < e.length; i++) {
    document.createElement(e[i]);
    }
    </script>
    <![endif]-->
  5. Третий способ:
  6. Загрузить скрипт напрямую с самого сайта:
    <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/
    svn/trunk/html5.js"></script>
     <![endif]-->

После этого стили к нашим элементам будут применены! Ну вот пожалуй и всё что я хотел рассказать про данные элементы. Правда я не стал затрагивать другие элементы такие как canvas, video, audio. Об этих элементах нужно писать отдельно. Тем более тег canvas уже не раз затрагивали. До скорых встреч!

Новые элементы в HTML5. Часть 1
Новые элементы в HTML5. Часть 2

2 комментария

avatar
  • GOR
+1! Продолжаю восторгаться полученными результатами!
avatar
Я бы посоветовал автору вдумчиво прочесть спецификацию.
Тема сисек элементов HEADER, FOOTER, ARTICLE и SECTION не раскрыта!