САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

HTML5 Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторыHTML ОсновныеHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML ЦветаHTML c CSSHTML СсылкиHTML ИзображенияHTML ТаблицыHTML СпискиHTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML JavaScriptHTML Путь к ФайлуHTML ГлаваHTML МакетHTML АдаптивныйHTML Компьютерный кодHTML ОбъектыHTML СимволыHTML КодировкаHTML URL КодированиеHTML XHTML

HTML Формы

HTML ФормыHTML Элементы формыHTML Тип вводаHTML Атрибуты ввода

HTML5

HTML5 ВведениеHTML5 ПоддержкаHTML5 Новые ЭлементыHTML5 СемантикаHTML5 МиграцияHTML5 Синтасис

HTML Графика

HTML CanvasHTML SVGHTML Google Карта

HTML Медиа

HTML МедиаHTML ВидеоHTML АудиоHTML ОбъектыHTML YouTube

HTML API

HTML ГеолокацияHTML ПеретаскиваниеHTML Веб ХранилищеHTML Веб РаботникHTML СОС

HTML Примеры

HTML ПримерыHTML ВикторинаHTML УпражненияHTML СертификатHTML ЗаключениеHTML Возможности

HTML Справочники

HTML Список ТеговHTML АтрибутыHTML ГлобальныеHTML СобытияHTML ЦветаHTML ХолстHTML Аудио/ВидеоHTML ДекларацииHTML Набор КодировокHTML URL КодHTML Коды языкаHTML Коды странHTTP СообщенияHTTP МетодыКовертер PX в EMКлавишные комбинации

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="ru">
<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>Время Понедельник</h1>
</div>

<div id="menu">
  <ul>
    <li>Новости</li>
    <li>Спорт</li>
    <li>Погода</li>
  </ul>
</div>

<div id="content">
  <h2>Раздел новостей</h2>
  <div class="article">
    <h2>Статья новостей</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>Статья новостей</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 Время Понедельник. Все права защищены.</p>
</div>

</body>
</html>
Редактор кода »

Изменить на Doctype HTML5

Изменить doctype:

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

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

Пример

<!DOCTYPE html>
Редактор кода »

Изменение кодировки HTML5

Изменить информацию encoding:

<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 in Поддержка в браузере HTML5.


Изменение семантических элементов HTML5

Существующий CSS содержит id и class для стилизации элементов:

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>Время Понедельник</h1>
</header>

<nav>
<ul>
<li>Новости</li>
<li>Спорт</li>
<li>Погода</li>
</ul>
</nav>

<section>
<h2>Раздел новостей</h2>
<article>
<h2>Статья новостей</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>Статья новостей</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 Время Понедельник. Все права защищены.</p>
</footer>

</body>
Редактор кода »

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

Существует запутанная (отсутствие) разница в стандарте HTML5, между <article> <section> и <div>.

В стандарте HTML5 элемент <section> определяется как блок, связанных с элементами.

Элемент <article> определяется как полный, автономный блок связанных элементов.

Элемент <div> определяется как блок дочерних элементов.

Как это интерпретировать?

В приведенном выше примере мы использовали <section> как контейнер для родственного <articles>.

Но, мы могли бы использовать <article>также, как контейнер для статей.

Вот несколько различных примеров:

Элемент <article> в <article>:

<article>

<h2>Знаменитые города</h2>

<article>
<h2>Лондон</h2>
<p>Лондон - столица Англии. Это самый густонаселенный город в Великобритании,
с столичной площадью более 13 миллионов жителей.</p>
</article>

<article>
<h2>Париж</h2>
<p>Париж -столица и самый густонаселенный город Франции.</p>
</article>

<article>
<h2>Токио</h2>
<p>Токио - столица Японии, центр большого Токио,
самый густонаселенный мегаполис в мире.</p>
</article>

</article>
Редактор кода »

Элемент <div> в <article>:

<article>

<h2>Знаменитые города</h2>

<div class="city">
<h2>Лондон</h2>
<p>Лондон - столица Англии. Это самый густонаселенный город в Великобритании,
с столичной площадью более 13 миллионов жителей.</p>
</div>

<div class="city">
<h2>Париж</h2>
<p>Париж -столица и самый густонаселенный город Франции.</p>
</div>

<div class="city">
<h2>Tokyo</h2>
<p>Токио - столица Японии, центр большого Токио,
самый густонаселенный мегаполис в мире.</p>
</div>

</article>
Редактор кода »

Элемент <div> в <section> в <article>:

<article>

<section>
<h2>Знаменитые города</h2>

<div class="city">
<h2>Лондон</h2>
<p>Лондон - столица Англии. Это самый густонаселенный город в Великобритании,
с столичной площадью более 13 миллионов жителей.</p>
</div>

<div class="city">
<h2>Париж</h2>
<p>Париж -столица и самый густонаселенный город Франции.</p>
</div>

<div class="city">
<h2>Токио</h2>
<p>Токио - столица Японии, центр большого Токио,
самый густонаселенный мегаполис в мире.</p>
</div>
</section>

<section>
<h2>Известные Страны</h2>

<div class="country">
<h2>Англия</h2>
<p>Лондон - столица Англии. Это самый густонаселенный город в Великобритании,
столичной площадью более 13 миллионов жителей.</p>
</div>

<div class="country">
<h2>Франция</h2>
<p>Париж - столица и самый густонаселенный город Франции.</p>
</div>

<div class="country">
<h2>Япония</h2>
<p>Токио - столица Японии, центр большого Токио,
самый густонаселенный мегаполис в мире.</p>
</div>
</section>

</article>
Редактор кода »