Из XHTML в HTML5 | htmlbook.ru

Из XHTML в HTML5



Низкая сложность

Тема: 

Переведите следующий код на HTML5. Обязательно используйте новые теги, вроде <nav>, <footer>, <header> и др.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Рецепты от Миранды</title>
  <style type="text/css">
   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">
   <div id="header">Рецепты от Миранды</div>
   <div id="content">
    <h2>Рома!</h2>
    <p>Очистить от ядрышек 2 кг. грецких орехов. Растолочь скорлупу и смешать с фруктами
    в 2 литрах рома. Употреблять 3–4 раза в день.</p>
    <h2>Кровавая Мери</h2>
    <p>Влить в бокал хорошую 100% кровь по лезвию ножа. Влить водку &laquo;Смирновскую&raquo;.
    Пить залпом.</p>
    <h2>Грог по-рыбацки</h2>
    <p>1 рыбу залить кипятком, через 5 минут процедить и добавить грога. Подавать в чашках.</p>
    <h2>Хвангур</h2>
    <p>Сварить на медленном огне воду. Добавить в нее хлива и хрольва. Довести до кипения.</p>
    <h2>Царская водка</h2>
    <p>Смешать 2 части соляной кислоты и 1 часть азотной со льдом. Слить охлажденную смесь 
    в фужер. Пить залпом.</p>
    <h2>HotDog</h2>
    <p>Тщательно промойте косточки и сварите из них бульон. Подавать горячим.</p>
    <h2>Fireball</h2>
    <p>В большой бокал положить лед, вылить на него все компоненты и положить кружок лимона.</p>
   </div>
   <div 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>
   </div>
   <div class="clear"></div>
   <div id="footer">&copy; Влад Мержевич</div>
  </div>
 </body>
</html>

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.