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

HTML Учебник

HTML ГЛАВНАЯ HTML Введение HTML Редактор HTML Основные HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитирование HTML Комментарии HTML Цвет HTML с CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Классы HTML Идентификаторы HTML Фреймы HTML с JavaScript HTML Путь к Файлу HTML Мета теги HTML Методы верстки HTML Адаптивный дизайн HTML Компьютерный код HTML Симантика HTML Руководство HTML Сущности HTML Символы HTML Эмодзи HTML Кодировка HTML URL Кодировка HTML vs. XHTML

HTML Формы

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

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Медиа формат HTML Video HTML Audio HTML Плагины HTML YouTube

HTML API

HTML Геолакация HTML Перетаскивание HTML Веб хранилище HTML Веб работник HTML SSE

HTML Примеры

HTML Примеры HTML Тестирование HTML Упражнения HTML Сертификат HTML Резюме HTML Доступность

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

HTML Список Тегов HTML Атрибуты HTML Глобальные Атрибуты HTML Поддержка Браузера HTML События HTML Цвета HTML Холст HTML Аудио/Видео HTML Типы Документов HTML Кодировка Символов HTML URL Кодировка 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>
Редактор кода »