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

HTML5 Учебник

HTML Главная HTML Введение HTML Редакторы HTML Основные HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитирование HTML Комментарии HTML Цвета HTML c CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Классы HTML Идентификаторы HTML Фреймы HTML JavaScript HTML Путь к Файлу 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 Canvas HTML SVG HTML 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>
Редактор кода »