Миграция с HTML4 на HTML5

В этой главе будет показано, как перевести код HTML4 в код HTML5 без потери функционала исходного контента или структуры.

Используя приемы, продемонстрированные здесь, также можно мигрировать с XHTML в HTML5.

Типичный код HTML4	Типичный код HTML5
<div id="header">	<header>
<div id="menu">	<nav>
<div id="content">	<section>
<div class="article">	<article>
<div id="footer">	<footer>

Типичная страница HTML4


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
   <title>HTML4</title>
   <style>
      body {
         font-family: Verdana,sans-serif;
         font-size: 0.9em;
      }

      div#header, div#footer {
         padding: 10px;
         color: white;
         background-color: black;
      }

      div#content {
         margin: 5px;
         padding: 10px;
         background-color: lightgrey;
      }

      div.article {
         margin: 5px;
         padding: 10px;
         background-color: white;
      }

      div#menu ul {
         padding: 0;
      }

      div#menu ul li {
         display: inline;
         margin: 5px;
      }
   </style>
   </head>
<body>

<div id="header">
  <h1>Monday Times</h1>
</div>

<div id="menu">
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</div>

<div id="content">
   <h2>News Section</h2>
  <div class="article">
    <h2>News Article</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  </div>
  <div class="article">
    <h2>News Article</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  </div>
</div>

<div id="footer">
  <p>&amp;copy; 2016 Monday Times. All rights reserved.</p>
</div>

</body>
</html>

1. Изменение директивы DOCTYPE по стандарту HTML5

Директива DOCTYPE:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

меняется по стандарту HTML5:


<!DOCTYPE html>

2. Изменение указания кодировки по стандарту HTML5

Информация о кодировке документа:


<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

меняется по стандарту HTML5:


<meta charset="utf-8">

3. Добавляем библиотеку HTML5Shiv

Новые семантические элементы HTML5 поддерживаются всеми современными браузерами. При этом, вы можете "научить" более старые браузеры, как обрабатывать "неизвестные элементы".

Тем не менее, IE8 и более ранние версии не допускают определение стилей для неизвестных элементов. Ответом на это стала библиотека HTML5Shiv, которая является набором кодов JavaScript, определяющих стили для HTML5 элементов в Internet Explorer до версии 9.

Добавление библиотеки HTML5Shiv:


<!--[if lt IE 9]>
   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->

Подробнее о HTML5Shiv см. в разделе "Поддержка HTML5 браузерами".

4. Замена элементов на семантические элементы HTML5

В приведенном выше коде страницы есть код CSS, содержащий идентификаторы и классы, задающие стили некоторых элементов:


body {
    font-family: Verdana,sans-serif;
    font-size: 0.9em;
}

div#header, div#footer {
    padding: 10px;
    color: white;
    background-color: black;
}

div#content {
    margin: 5px;
    padding: 10px;
    background-color: lightgrey;
}

div.article {
    margin: 5px;
    padding: 10px;
    background-color: white;
}

div#menu ul {
    padding: 0;
}

div#menu ul li {
    display: inline;
    margin: 5px;
}

Его следует заменить на такой же код CSS, но задающий уже стили для семантических элементов HTML5:


body {
    font-family: Verdana,sans-serif;
    font-size: 0.9em;
}

 header, footer {
    padding: 10px;
    color: white;
    background-color: black;
}

section {
    margin: 5px;
    padding: 10px;
    background-color: lightgrey;
}

article {
    margin: 5px;
    padding: 10px;
    background-color: white;
}

nav ul {
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 5px;
}

И наконец, замените элементы HTML4 на соответствующие семантические элементы HTML5:


<body>

<header>
   <h1>Monday Times</h1>
</header>

<nav>
   <ul>
      <li>News</li>
      <li>Sports</li>
      <li>Weather</li>
   </ul>
</nav>

<section>
   <h2>News Section</h2>
   <article>
      <h2>News Article</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
   </article>
   <article>
      <h2>News Article</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
   </article>
</section>

<footer>
   <p>&copy; 2014 Monday Times. All rights reserved.</p>
</footer>

</body>

Разница между элементами <article>, <section> и <div>

Есть некоторая непонятная разница в стандарте HTML5 между тегами <article>, <section> и <div>.

Согласно стандарту HTML5 элемент <section> определяется, как блок связанных элементов. Элемент <article> как законченный, самодостаточный блок связанных элементов. А элемент <div> определяется, как блок дочерних элементов.

Но как же все это интерпретировать?

В примере выше элемент <section> использовался в качестве контейнера для связанных по тематике элементов <articles>.

Но аналогичным образом можно было бы в качестве контейнера использовать также элемент <article>.

Вот несколько других примеров.

<article> в <article>:


<article>

  <h2>Знаменитые города</h2>

   <article>
      <h2>Лондон</h2>
      <p>Лондон — столица Англии. Это самый густо населенный город
      Великобритании с населением более 13 миллионов человек.</p>
   </article>

   <article>
     <h2>Париж</h2>
     <p>Париж — столица и самый густо населенный город Франции.</p>
   </article>

   <article>
      <h2>Токио</h2>
      <p>Токио — столица Японии и самый густо населенный город мира.</p>
   </article>

</article>

<div> в <article>:


<article>

   <h2>Знаменитые города</h2>

   <div class="city">
      <h2>Лондон</h2>
      <p>Лондон — столица Англии. Это самый густо населенный город
      Великобритании с населением более 13 миллионов человек.</p>
   </div>

   <div class="city">
      <h2>Париж</h2>
      <p>Париж — столица и самый густо населенный город Франции.</p>
   </div>

   <div class="city">
      <h2>Токио</h2>
      <p>Токио — столица Японии и самый густо населенный город мира.</p>
   </div>

</article>

<div> в <section> в <article>:


<article>

   <section>
      <h2>Знаменитые города</h2>

      <div class="city">
         <h2>Лондон</h2>
         <p>Лондон — столица Англии. Это самый густо населенный город
         Великобритании с населением более 13 миллионов человек.</p>
      </div>

      <div class="city">
         <h2>Париж</h2>
         <p>Париж — столица и самый густо населенный город Франции.</p>
      </div>

      <div class="city">
         <h2>Токио</h2>
         <p>Токио — столица Японии и самый густо населенный город мира.</p>
      </div>
   </section>

   <section>
      <h2>Знаменитые страны</h2>

      <div class="country">
         <h2>Англия</h2>
         <p>Лондон — столица Англии. Это самый густо населенный город
         Великобритании с населением более 13 миллионов человек.</p>
      </div>

      <div class="country">
         <h2>Франция</h2>
         <p>Париж — столица и самый густо населенный город Франции.</p>
         </div>

      <div class="country">
         <h2>Япония</h2>
         <p>Токио — столица Японии и самый густо населенный город мира.</p>
      </div>
   </section>

</article>