ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

HTML учебник

HTML HOME HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Styles HTML Formatting HTML Quotations HTML Comments HTML Colors HTML CSS HTML Links HTML Images HTML Tables HTML Lists HTML Blocks HTML Classes HTML Id HTML Iframes HTML JavaScript HTML File Paths HTML Head HTML Layout HTML Responsive HTML Computercode HTML Entities HTML Symbols HTML Charset HTML URL Encode HTML XHTML

HTML Forms

HTML Forms HTML Form Elements HTML Input Types HTML Input Attributes

HTML5

HTML5 Intro HTML5 Support HTML5 New Elements HTML5 Semantics HTML5 Migration HTML5 Style Guide

HTML Graphics

HTML Canvas HTML SVG HTML Google Maps

HTML Media

HTML Media HTML Video HTML Audio HTML Plug-ins HTML YouTube

HTML APIs

HTML Geolocation HTML Drag/Drop HTML Web Storage HTML Web Workers HTML SSE

HTML Examples

HTML Examples HTML Accessibility

HTML References

HTML Tag List HTML Attributes HTML Events HTML Colors HTML Canvas HTML Audio/Video HTML Doctypes HTML Character Sets HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods PX to EM Converter Keyboard Shortcuts


HTML5 Переход


Переход из 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 HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

для документа HTML5:

Пример

<!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, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</article>
<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>
</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> in <article>:

<article>

<h2>Famous Cities</h2>

<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</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, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</article>

</article>

<div> в <article>:

<article>

<h2>Famous Cities</h2>

<div class="city">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</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, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</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. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</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, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</section>

<section>
<h2>Famous Countries</h2>

<div class="country">
<h2>England</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</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, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</section>

</article>