HTML5 Перехід з HTML4
Перехід з 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>&copy; 2024 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:
Змініть на HTML5 кодування
Змініть інформацію про кодування:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
на HTML5 кодування:
Додайте 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>© 2014 Monday Times. All rights reserved.</p>
</footer>
</body>
Спробуйте самі »
Різниця між <article>, <section> та <div>
В стандарті HTML5 відсутня різниця між <article>, <section> та <div>.
В стандарті HTML5 елемент <section> визначається як блок пов’язаних елементів.
Елемент <article> визначається як повний, автономний блок пов’язаних елементів.
Елемент <div> визначається як блок дочірніх елементів.
Як це інтерпретувати?
В наведеному вище прикладі ми використовували <section> в якості контейнера для пов’язаних статей <article>.
Але ми могли б використовувати <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>
Спробуйте самі »
