Переход с HTML4 на HTML5

Курс по основам HTML5. W3Schools на русском языке. Уроки для начинающих

Как перейти с HTML4 на HTML5?

В этом разделе рассказывается лишь о том, как перейти с 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>
Попробуйте сами »

Изменить на HTML5 Doctype

Изменить doctype:

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

на HTML5 doctype:

Пример:

<!DOCTYPE html>
Попробуйте самі »

Изменить на кодировку HTML5

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

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

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

Пример:

<meta charset="utf-8">
Попробуйте сами »

Добавить 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. Поддержка браузерами.

Изменить на семантические 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;
}

И, наконец, меняем элементы на семантические элементы 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..</p>
  </article>
  <article>
    <h2>News Article</h2>
    <p>Lorem ipsum dolor sit amet..</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>Famous Cities</h2>

<article>
  <h2>London</h2>
  <p>London is the capital city of England.</p>
</article>

<article>
  <h2>Paris</h2>
  <p>Paris is the capital and most populous city of France.</p>
</article>

<article>
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</article>

</article>
Попробуйте сами »

<div> в <article>:

<article>

<h2>Famous Cities</h2>

<div class="city">
  <h2>London</h2>
  <p>London is the capital city of England.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital and most populous city of France.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

</article>
Попробуйте сами »

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

<article>

<section>
  <h2>Famous Cities</h2>

  <div class="city">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
  </div>

  <div class="city">
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
  </div>

  <div class="city">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
  </div>
</section>

<section>
  <h2>Famous Countries</h2>

  <div class="country">
    <h2>England</h2>
    <p>London is the capital city of England.</p>
</div>

  <div class="country">
    <h2>France</h2>
    <p>Paris is the capital and most populous city of France.</p>
</div>

  <div class="country">
    <h2>Japan</h2>
    <p>Tokyo is the capital of Japan.</p>
  </div>
</section>

</article>
Попробуйте сами »