HTML5. Перехід з HTML4 на HTML5

Курс по основам HTML | CSS. 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>
Спробуйте самі »


warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.