З XHTML в HTML5

Влад Мержевич

Тема:HTML5

Перекладіть на HTML5 наступний код, використовуючи нові теги, такі як <nav>, <footer>, <header> та інші.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Рецепти від Міранди</title>
  <style>
   body {
    font: 10pt Arial, Helvetica, sans-serif;
    background: #fff;
    margin: 0;
   }
   h2 {
    font-size: 1.1em;
    color: #752641;
    margin-bottom: 0;
   }
   #container {
    width: 500px;
    margin: 0 auto;
    position: relative;
   }
   #header {
    background: #8fa09b;
    font-size: 24pt;
    font-weight: bold;
    color: #edeed5;
    padding: 5px;
   }
   #content {
    margin-right: 130px;
    padding: 10px;
    border-right: 1px dashed #183533;
   }
   #content p {
    margin-top: 0.3em
   }
   #sidebar {
    position: absolute;
    right: 0;
    top: 60px;
    width: 120px;
   }
   #footer {
    background: #8fa09b;
    color: #fff;
    padding: 5px;
   }
  </style>
 </head>
 <body>
  <div id="container">
   <header id="header">Рецепти від Міранди</header>
   <div id="content">
    <h2>Ром!</h2>
    <p>Очистити від горішків 2 кг грецьких горіхів. Роздавити шкарлупу і змішати з фруктами у 2 літрах рому. Споживати 3–4 рази на день.</p>
    <h2>Кровава Мері</h2>
    <p>Налити в бокал хорошу 100% кров по лезу ножа. Додати відку «Смірновську». Пити ковтками.</p>
    <h2>Грог по-рибацьки</h2>
    <p>1 рибу залити кип'ятком, через 5 хвилин процідити і додати грогу. Подавати у чашках.</p>
    <h2>Хвангур</h2>
    <p>Сварити на повільному вогні воду. Додати в неї хлива і хрольва. Довести до кипіння.</p>
    <h2>Царська водка</h2>
    <p>Змішати 2 частини соляної кислоти і 1 частину азотної з льодом. Вилити охолоджену суміш в фужер. Пити ковтками.</p>
    <h2>Хот-дог</h2>
    <p>Тщательно вимийте кісточки і сваріть з них бульйон. Подавати гарячим.</p>
    <h2>Fireball</h2>
    <p>У великий бокал покласти лід, вилити на нього всі компоненти і покласти кружок лимона.</p>
   </div>
   <aside id="sidebar">
    <p><a href="popular.html">Популярні рецепти</a></p>
    <p><a href="day.html">Рецепт дня</a></p>
    <p><a href="apple.html">Рецепти на основі яблук</a></p>
    <p><a href="ice.html">Рецепти на основі льоду</a></p>
    <p><a href="hliv.html">Рецепти з хлива і хрольва</a></p>
   </aside>
   <div class="clear"></div>
   <footer id="footer">&copy; Влад Мержевич</footer>
  </div>
 </body>
</html>

Часті запитання