W3docs
ru
Войти

Миграция на HTML5

На этой странице вы найдёте информацию об HTML5, различия между HTML4 и HTML5 и пошаговое руководство по миграции с HTML4 на HTML5.

Миграция с HTML4 на HTML5 означает замену устаревшего объявления doctype и кодировки на более короткие эквиваленты HTML5, замену обобщённых контейнеров <div> семантическими элементами и удаление презентационных тегов и атрибутов, которые HTML5 больше не поддерживает. На этой странице процесс описан пошагово, а в конце приведён итоговый список, который можно использовать как чеклист.

Совет

Описанные ниже шаги также применимы при миграции с XHTML на HTML5.

При миграции с XHTML не забудьте удалить атрибут xmlns="http://www.w3.org/1999/xhtml" из тега <html>.

Шаг 1: Изменение Doctype

Заменяем doctype HTML4 на doctype HTML5.

HTML4

Устаревший doctype HTML4

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

HTML5

Миграция на HTML5

<!DOCTYPE html>

Шаг 2: Изменение кодировки

Здесь мы заменяем объявление кодировки HTML4 на объявление кодировки HTML5.

HTML4

Устаревшее объявление кодировки HTML4

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

HTML5

Миграция на HTML5

<meta charset="utf-8">

Кроме того, HTML5 позволяет опускать атрибут type у тегов <script> и <style>, так как по умолчанию он равен text/javascript и text/css соответственно.

Шаг 3: Добавление HTML5Shiv

Все современные браузеры поддерживают новые семантические элементы HTML5. Кроме того, можно «научить» старые браузеры обрабатывать «неизвестные элементы». HTML5Shiv используется для включения стилизации элементов HTML5 в таких браузерах. Обратите внимание, что этот скрипт в значительной мере устарел для современной веб-разработки, поскольку все актуальные браузеры поддерживают семантические элементы HTML5 нативно.

Миграция на HTML5 — HTML5Shiv

<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

Шаг 4: Переход на семантические элементы HTML5

В HTML4 для описания структуры страницы часто использовались обобщённые элементы <div> с атрибутами id и class. HTML5 вводит семантические элементы, которые могут заменить многие из этих обобщённых контейнеров, предоставляя браузерам, поисковым системам и вспомогательным технологиям более чёткое представление о странице. Идентификаторы и классы не задают семантику автоматически, но вот распространённые замены структурных элементов:

Контейнер HTML4Семантический элемент HTML5
<div id="header"><header>
<div id="menu"><nav>
<div id="content"><main>
<div class="article"><article>
<div class="sidebar"><aside>
<div id="footer"><footer>

Элемент <aside> заслуживает отдельного упоминания: он обозначает контент, косвенно связанный с окружающим содержимым, — например, боковая панель, вставная цитата или блок связанных ссылок. У него нет прямого аналога в HTML4, поэтому он обычно вводится при миграции для замены контейнера <div class="sidebar"> или аналогичного.

Для начала рассмотрим пример с использованием элементов HTML4.

Пример элементов HTML4:

Пример HTML4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Title of the document</title>
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <style>
      body {
        font-size: 0.9em;
      }
      #header,
      #footer {
        padding: 10px;
        color: white;
        background-color: black;
        text-align: center;
      }
      h2 {
        text-align: center
      }
      h3 {
        text-align: right;
        padding-right: 20px;
      }
      div.content {
        margin: 5px;
        padding: 20px;
        background-color: lightgrey;
      }
      .article {
        margin: 20px;
        padding: 10px;
        background-color: white;
      }
      #header-menu ul {
        padding: 0;
      }
      #header-menu ul li {
        display: inline;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <div id="header">
      <h1>LaravelSoft</h1>
    </div>
    <div id="header-menu">
      <ul>
        <li>
          <a href="https://www.w3docs.com/learn-html.html">Books</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/quiz/">Quizzes</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/snippets">Snippets</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/tool/">Tools</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/string-functions/">String Functions</a>
        </li>
      </ul>
    </div>
    <div class="content">
      <h2>Article Section</h2>
      <div class="article">
        <h3>Article Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at. 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">
        <h3>News Article</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
        <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>&copy; 2020 All rights reserved.</p>
    </div>
  </body>
</html>
Попробуйте сами »

Теперь посмотрим на миграцию с элементов HTML4 на семантические элементы HTML5.

Пример семантических элементов HTML5:

В приведённой ниже версии скрипт HTML5Shiv удалён, поскольку все актуальные браузеры нативно понимают семантические элементы. Добавьте shiv обратно только в том случае, если вам необходима поддержка Internet Explorer 8 или более ранних версий.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <meta charset="utf-8" />
    <style>
      body {
        font-size: 0.9em;
      }
      header,
      footer {
        padding: 10px;
        color: white;
        background-color: black;
        text-align: center;
      }
      h2 {
        text-align: center
      }
      h3 {
        text-align: right;
        padding-right: 20px;
      }
      main {
        margin: 5px;
        padding: 20px;
        background-color: lightgrey;
      }
      article {
        margin: 20px;
        padding: 10px;
        background-color: white;
      }
      nav ul {
        padding: 0;
      }
      nav ul li {
        display: inline;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>LaravelSoft</h1>
    </header>
    <nav>
      <ul>
        <li>
          <a href="https://www.w3docs.com/learn-html.html">Books</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/quiz/">Quizzes</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/snippets">Snippets</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/tool/">Tools</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/string-functions/">String Functions</a>
        </li>
      </ul>
    </nav>
    <main>
      <h2>Article Section</h2>
      <article>
        <h3>Article Title</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
        </p>
      </article>
      <article>
        <h3>News Article</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
        </p>
      </article>
    </main>
    <footer>
      <p>&copy; 2020 All rights reserved.</p>
    </footer>
  </body>
</html>
Попробуйте сами »

Шаг 5: Удаление устаревших элементов и атрибутов HTML4

Миграция — это не только замена структурных контейнеров <div>. HTML5 также удалил группу презентационных тегов и атрибутов, функции которых теперь выполняет CSS. Их сохранение в разметке смешивает структуру и стилизацию и может приводить к неожиданным результатам в современных браузерах, поэтому при миграции их следует удалить.

Распространённые элементы для удаления и их замена в CSS:

Устаревший элементЧто использовать вместо
<font>Задайте font-family, font-size и color в CSS
<center>Используйте text-align: center или flex/grid-разметку
<big>, <tt>, <strike>Используйте font-size, моноширинный font-family или text-decoration: line-through
<frame>, <frameset>, <noframes>Реструктурируйте страницу; используйте <iframe> только там, где встроенный документ действительно необходим

Распространённые атрибуты для удаления и их замена в CSS:

Устаревший атрибутЧто использовать вместо
align, valigntext-align, vertical-align
bgcolorbackground-color
width, height (в таблицах и ячейках для разметки)CSS width / height
border (презентационный)CSS border
cellpadding, cellspacingpadding и border-spacing

Например, вот разметка HTML4:

<center>
  <font face="Arial" color="red" size="5">Welcome</font>
</center>
<table border="1" bgcolor="#eee" cellpadding="10">
  <tr><td align="center">Cell</td></tr>
</table>

в HTML5 превращается в следующее, при этом вся презентация перенесена в CSS:

<p class="title">Welcome</p>
<table class="data">
  <tr><td>Cell</td></tr>
</table>

<style>
  .title {
    text-align: center;
    font-family: Arial, sans-serif;
    color: red;
    font-size: 1.5em;
  }
  .data {
    border: 1px solid black;
    border-collapse: collapse;
    background-color: #eee;
  }
  .data td {
    padding: 10px;
    text-align: center;
  }
</style>

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

В HTML5 есть различия между элементами <section>, <article> и <div>. В частности:

  • <section> группирует тематически связанный контент, как правило, с заголовком.
  • <article> представляет самодостаточный контент, который можно распространять или использовать повторно независимо от остального.
  • <div> — обобщённый контейнер без семантического значения, используемый исключительно для стилизации или скриптов.

Пример тегов <section>, <article> и <div>:

Пример тегов <section>, <article> и <div>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <section>
      <h1>Articles about flowers</h1>
      <article>
        <h2>Roses</h2>
        <p>
          Rose – the queen of flowers - is the object of worship and ardent love. Since time immemorial, the rose has been the object of worship and admiration.
        </p>
      </article>
      <div>
        <h2>Lilies</h2>
        <p>
          Lily - an amazing beauty flower, one of the most ancient among a variety of bulbous plants.
        </p>
      </div>
    </section>
  </body>
</html>
Попробуйте сами »

Итоги миграции

Используйте эти шаги как чеклист при переносе страницы с HTML4 на HTML5:

  1. Замените длинный doctype HTML4 на <!DOCTYPE html>.
  2. Замените мета-тег http-equiv с типом содержимого на краткий <meta charset="utf-8">.
  3. Добавляйте HTML5Shiv только в том случае, если вам нужна поддержка Internet Explorer 8 или более ранних версий; в противном случае пропустите этот шаг.
  4. Замените структурные контейнеры <div> семантическими элементами, такими как <header>, <nav>, <main>, <article>, <aside> и <footer>.
  5. Удалите устаревшие презентационные элементы и атрибуты (<font>, <center>, align, <frameset> и подобные) и перенесите их стилизацию в CSS.

Практика

Практика
Выберите все подходящие варианты. Какие из следующих элементов являются новыми в HTML5?
Выберите все подходящие варианты. Какие из следующих элементов являются новыми в HTML5?
Was this page helpful?