З XHTML до HTML5

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

Тема:HTML5

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Трьохколонковий макет</title>
  <style>
   body {
    font: 0.8em Arial, Helvetica, sans-serif; /* Шрифт на веб-сторінці */
    background: #D7E1F2; /* Колір фону */
    color: #ffe; /* Колір тексту */
   }
   a { color: #008BCE; /* Колір посилань */ }
   #container {
    width: 500px; /* Ширина макету */
    margin: 0 auto; /* Вирівнюємо по центру */
    background: #FCE600; /* Колір колонок */
   }
   #header { 
    font-size: 2.2em; /* Розмір тексту */
    text-align: center; /* Вирівнювання по центру */
    padding: 5px; /* Відступи навколо тексту */
    background: #D71920; /* Колір фону шапки */
   }
   #nav, #aside {
    float: left; width: 110px; padding: 5px;
   }
   #content {
    background: #54B948;
    margin: 0 120px; /* Ширина колонок */
    padding: 10px;
   }
   #aside {
    float: right; color: #000;
   }
   h2 { margin: 0 0 1em; }
   #footer { 
    clear: both; /* Скасовуємо дію float */
    padding: 5px; /* Відступи навколо тексту */
    background: #D71920; /* Колір фону шапки */
   }
  </style>
 </head>
 <body>
  <div id="container">
   <header id="header">Історичний турнір</header>
   <nav id="nav">
    <p><a href="stat.html">Статистика турніру</a></p>
    <p><a href="interview.html">Інтерв'ю з головним суддею</a></p>
    <p><a href="ask.html">Конкурсні питання</a></p>
   </nav>
   <aside id="aside">
    <h3>Статистика</h3>
    <p>одинадцять людей досягли фіналу;</p>
    <p>одна людина правильно вказала, в якому стилі писав Дієго Веласкес;</p>
    <p>лише одна людина знала, хто винахідник пароплава;</p>
   </aside> 
   <section id="content"> 
   <h2>Опитування громадської думки показало</h2>
    <ul>
     <li>що пароплав винайдений: Петром I, А. Ейнштейном та А. Поповим;</li>
     <li>Дієго Веласкес писав свої полотна в стилі: імперіалізму, кубізму 
     та імпресіонізму;</li>
     <li>Фароський маяк знаходиться в Фаросі;</li>
     <li>конфуціанство виникло в: Італії, Кореї та Франції;</li>
     <li>богами торгівлі та крадіжок в Стародавній Греції були: Марс, Меркурій 
     та Діоніс;</li>
     <li>Франція – це місто;</li>
     <li>богами загробного світу в Єгипті були: Аїд, Анубіс та Ассіріс;</li>
     <li>столиця Золотої Орди — Монголія;</li>
     <li>головні противники Олександра Македонського: татаро-монголи, Дедал 
     та Цезар;</li>
    </ul>
   </section>
   <footer id="footer">&copy; Влад Мержевич</footer>
  </div>
 </body>
</html>
SEO текст: "Перекладіть код на HTML5 та використайте нові теги для створення трьохколонкового макету веб-сторінки. Дізнайтеся, як правильно організувати контент для кращої структуризації і доступності."

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