Миграция с HTML4 на HTML5
Меню
Руководство по HTML
Рубрики
Рубрики
Последние записи

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

Опубликовано: 14 января, 2024 ★ Обновлено: 13 апреля, 2024 ★ Разработка ПО

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

В этом руководстве вы узнаете, как можно перейти с HTML4 на HTML5. Давайте научимся этому шаг за шагом.

В HTML4 мы использовали атрибуты id и class, которые теперь заменены новыми элементами в HTML5:

HTML4 HTML5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div class="article"> <article>
<div id="footer"> <footer>
★ Примечание: описанные ниже шаги также можно использовать для перехода с XHTML на HTML5.

Шаг 1. Изменение типа документа

Меняем тип документа HTML4 на тип документа HTML5:

HTML4

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

HTML5

<!DOCTYPE html>

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

Здесь мы меняем информацию о кодировке HTML4 на кодировку HTML5:

HTML4

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

HTML5

<meta charset="utf-8">

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

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

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

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

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

<!DOCTYPE html>
  <html>
   <head>
    <title>Название документа</title>
   <meta charset="utf-8">
   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">
</script>
   <style>
      body {
        font-size: 0.9em;
      }
      #header,
      #footer {
        padding: 10px;
        color: #fff;
        background-color: #333;
        text-align: center;
      }
      h2 {
        text-align: center;
      }
      h3 {
        text-align: right;
        padding-right: 20px;
      }
        div.content {
        margin: 5px;
        padding: 20px;
        color: #fff;
        background-color: #666;
      }
      .article {
        margin: 20px;
        padding: 10px;
        background-color: #333;
      }
      #header-menu ul {
         padding: 0;
      }
        #header-menu ul li {
        display: inline;
        margin: 5px;
      }
   </style>
  </head>
  <body>
    <div id="header">
      <h1>Вебсайт по разработке</h1>
   </div>
    <div id="header-menu">
     <ul>
       <li>
        <a href="#">HTML</a>
       </li>
       <li>
        <a href="#">CSS</a>
       </li>
       <li>
        <a href="#">JavaScript</a>
       </li>
       <li>
        <a href="#">PHP</a>
       </li>
       <li>
        <a href="#">Python</a>
      </li>
     </ul>
  </div>
   <div class="content">
    <h2>Раздел статей</h2>
     <div class="article">
       <h3>Статья</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>Новость</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; 2024 Все права защищены.</p>
  </div>
 </body>
</html>

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

<!DOCTYPE html>
  <html>
   <head>
    <title>Название документа</title>
   <meta charset="utf-8">
   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">
</script>
   <style>
      body {
        font-size: 0.9em;
      }
      header,
      footer {
        padding: 10px;
        color: #fff;
        background-color: #333;
        text-align: center;
      }
      h2 {
        text-align: center
      }
      h3 {
        text-align: right;
        padding-right: 20px;
      }
        section {
        margin: 5px;
        padding: 20px;
        color: #fff;
        background-color: #666;
      }
      article {
        margin: 20px;
        padding: 10px;
        background-color: #333;
      }
        nav ul {
        padding: 0;
      }
      nav ul li {
        display: inline;
        margin: 5px;
      }
    </style>
   </head>
   <body>
    <header>
      <h1>Вебсайт по разработке</h1>
    </header>
    <nav>
     <ul>
       <li>
        <a href="#">HTML</a>
       </li>
       <li>
        <a href="#">CSS</a>
       </li>
       <li>
         <a href="#">JavaScript</a>
       </li>
       <li>
         <a href="#">PHP</a>
       </li>
       <li>
        <a href="#">Python</a>
       </li>
     </ul>
    </nav>
    <section>
      <h2>Раздел статей</h2>
      <article>
        <h3>Статья</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>Новость</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>
     </section>
   <footer>
      <p>&copy; 2024 Все права защищены.</p>
   </footer>
 </body>
</html>

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

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

Особенно:

  • Элемент section указывается как блок связанных элементов;
  • Элемент article указывается как независимый и полный блок связанных элементов;
  • Элемент div указывается как блок дочерних элементов.

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

<!DOCTYPE html>
<html>
 <head>
  <title>Заголовок документа</title>
 </head>
 <body>
  <section>
   <h1>Статья о веб-разработке</h1>
   <article>
     <h2>HTML</h2>
     <p>
      HTML ( The HyperText Markup Language) — это стандартный язык разметки для создания веб-страниц.
     </p>
   </article>
   <div>
     <h2>CSS</h2>
     <p>
      CSS - "Cascading Style Sheets" что в переводе означает каскадные таблицы стилей.
     </p>
   </div>
  </section>
 </body>
</html>

🔗 Руководство по HTML — HTML5 введение.

🔗 См. также - Справочник по HTML.

 

Поделиться ссылкой

Похожие статьи