Миграция HTML5

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

Эта глава объясняет, как迁移 с типичной страницы HTML4 на типичную страницу HTML5.

Эта глава демонстрирует, как преобразовать существующую страницу HTML4 в страницу HTML5, не разрушая исходный контент и структуру.

Комментарий:Вы можете использовать те же приемы для迁移 с HTML4 и XHTML на HTML5.

Типичная HTML4 Типичная HTML5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div id="post"> <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.8em;}
  div#header,div#footer,div#content,div#post 
  {border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}
  div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;}
  div#content {background-color:#ddd;}
  div#menu ul {margin:0;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 id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
<div id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
</div>
<div id="footer">
  <p>© 2014 Monday Times. Все права защищены.</p>
</div>
</body>
</html>

Попробуйте сами

на Doctype HTML5

Измените тип документа с HTML4 doctype:

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

Измените doctype на HTML5:

<!DOCTYPE html>

Попробуйте сами

на кодировку HTML5

Измените информацию о кодировке с HTML4:

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

Измените на HTML5:

<meta charset="utf-8">

Попробуйте сами

Добавить shiv

Все современные браузеры поддерживают семантические элементы HTML5.

Кроме того, вы можете "объяснить" старым браузерам, как обрабатывать "неизвестные элементы".

Добавлен shiv для поддержки Internet Explorer:

<![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Попробуйте сами

Комментарий:Читайте больше о shiv в поддержке браузеров HTML5.

Добавьте CSS для семантических элементов HTML5

Смотрите уже существующие стили CSS:

div#header,div#footer,div#content,div#post {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}
Повторите с одинаковыми стилями CSS для семантических элементов HTML5:
header,footer,section,article {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}

Попробуйте сами

на HTML5 <header> и <footer>

Измените элементы <div> с id="header" и id="footer":

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>© 2016 CodeW3C.com. All rights reserved.</p>
</div>

Измените на семантические элементы HTML5 <header> и <footer>:

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <p>© 2016 CodeW3C.com. All rights reserved.</p>
</footer>

Попробуйте сами

на HTML5 <nav>

Измените элемент <div> с id="menu":

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

Измените на семантические элементы HTML5 <nav>:

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

Попробуйте сами

на HTML5 <section>

Измените элемент <div> с id="content":

<div id="content">
.
.
.
</div>

Измените на семантические элементы HTML5 <section>:

<section>
.
.
.
</section>

Попробуйте сами

на HTML5 <article>

Измените все элементы <div> с классом "post":

<div class="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>

Измените на семантические элементы HTML5 <article>:

<article>
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</article>

Попробуйте сами

Удалите эти "не нужные" стили:

div#header,div#footer,div#content,div#post {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}

Попробуйте сами

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

В конце вы можете удалить тег <head>. В HTML5 они больше не нужны:

Пример

<!DOCTYPE html>
<html lang="en">
<title>HTML5</title>
<meta charset="utf-8">
<![if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
body {
    font-family:Verdana,sans-serif;font-size:0.8em;
}
header,footer,section,article {
    border:1px solid grey;
    margin:5px;margin-bottom:15px;padding:8px;
    background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}
</style>
<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>
<div id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
<div id="post">
<h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
</section>
<footer>
  <p>© 2014 Monday Times. Все права защищены.</p>
</footer>
</body>
</html>

Попробуйте сами

Различия между <article>, <section> и <div>:

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

В стандарте HTML5 элемент <section> расположен как блок связанных элементов.

Элемент <article> определен как полный самостоятельный блок связанных элементов.

Элемент <div> определен как блок подэлементов.

Как это понять?

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

Однако, мы также можем использовать <article> в качестве контейнера для статьи.

Ниже приведены несколько примеров:

В элементе <article> содержится <article>:
<article>
<h2>Известные города</h2>
<article>
<h2>Лондон</h2>
<p>Лондон является столицей Англии. Это наиболее населенный город в Великобритании,</p>
<p>с мегаполисом, населенным более чем 13 миллионами жителей.</p>
</article>
<article>
<h2>Париж</h2>
<p>Париж является столицей и наиболее населенным городом Франции.</p>
</article>
<article>
<h2>Токио</h2>
<p>Токио является столицей Японии, центром Большого Токио,</p>
и это наиболее населенный мегаполис в мире.</p>
</article>
</article>

Попробуйте сами

<article> внутри <div>：</article>
<article>
<h2>Известные города</h2>
<div class="city">
<h2>Лондон</h2>
<p>Лондон является столицей Англии. Это наиболее населенный город в Великобритании,</p>
<p>с мегаполисом, населенным более чем 13 миллионами жителей.</p>
</div>
<div class="city">
<h2>Париж</h2>
<p>Париж является столицей и наиболее населенным городом Франции.</p>
</div>
<div class="city">
<h2>Токио</h2>
<p>Токио является столицей Японии, центром Большого Токио,</p>
и это наиболее населенный мегаполис в мире.</p>
</div>
</article>

Попробуйте сами

<article> внутри <section> внутри <div>：</article>
<article>
<section>
<h2>Известные города</h2>
<div class="city">
<h2>Лондон</h2>
<p>Лондон является столицей Англии. Это наиболее населенный город в Великобритании,</p>
<p>с мегаполисом, населенным более чем 13 миллионами жителей.</p>
</div>
<div class="city">
<h2>Париж</h2>
<p>Париж является столицей и наиболее населенным городом Франции.</p>
</div>
<div class="city">
<h2>Токио</h2>
<p>Токио является столицей Японии, центром Большого Токио,</p>
и это наиболее населенный мегаполис в мире.</p>
</div>
</section>
<section>
<h2>Известные страны</h2>
<div class="country">
<h2>Англия</h2>
<p>Лондон является столицей Англии. Это наиболее населенный город в Великобритании,</p>
<p>с мегаполисом, населенным более чем 13 миллионами жителей.</p>
</div>
<div class="country">
<h2>Франция</h2>
<p>Париж является столицей и наиболее населенным городом Франции.</p>
</div>
<div class="country">
<h2>Япония</h2>
<p>Токио является столицей Японии, центром Большого Токио,</p>
и это наиболее населенный мегаполис в мире.</p>
</div>
</section>
</article>

Попробуйте сами