Миграция на HTML5
На этой странице мы покажем, как можно перейти с HTML4 на HTML5. Давайте изучим это шаг за шагом.
В HTML4 мы часто использовали универсальные элементы <div> с атрибутами id и class для определения структуры. HTML5 вводит семантические элементы, которые могут заменить многие из этих универсальных контейнеров. Хотя id и class сами по себе не задают семантику, вот распространённые структурные замены:
HTML-теги с id
<div id="header"> - <header>
<div id="menu"> - <nav>
<div id="content"> - <main>
<div class="article"> - <article>
<div id="footer"> - <footer>TIP
Описанные ниже шаги также можно выполнить при переходе с 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
<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.
Пример элементов 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>© 2020 All rights reserved.</p>
</div>
</body>
</html>Теперь посмотрим на переход от элементов HTML4 к семантическим элементам HTML5.
Пример семантических элементов HTML5:
Пример семантических элементов HTML5:
<!DOCTYPE html>
<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;
}
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>© 2020 All rights reserved.</p>
</footer>
</body>
</html>Разница между элементами <section>, <article> и <div>
В HTML5 есть некоторые различия между элементами <section>, <article> и <div>. В частности:
<code><section></code>группирует тематически связанный контент, обычно с заголовком.<code><article></code>представляет самостоятельный контент, который можно распространять или использовать повторно независимо.<code><div></code>— это универсальный контейнер без семантического значения, используемый только для стилизации или скриптов.
Пример тегов <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>Практика
Какие из следующих являются новыми элементами, введёнными в HTML5 согласно содержимому по указанному URL?