HTML5 поддерживаются всеми современными браузерами. При этом все браузеры, старые и новые, автоматически обрабатывают неизвестные теги как строчные элементы.
Благодаря этому можно "научить" старые браузеры (даже IE6) правильно обрабатывать "неизвестные" HTML элементы.
Определение семантических элементов как блоковые элементы
HTML5 определяет восемь новых семантических тегов. Все они являются блоковыми элементами.
Чтобы обеспечить корректное поведение этих HTML элементов в старых браузерах, вы можете установить для них CSS свойство display в значение block:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
Добавление новых HTML элементов
Также вы можете добавлять в HTML код страницы пользовательские элементы.
В следующем примере добавляется новый HTML элемент <myHero> и определяется для него стиль:
<!DOCTYPE html>
<html>
<head>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #dddddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Заголовок</h1>
<myHero>Новый элемент myHero</myHero>
</body>
</html>
Выражение document.createElement("myHero") на JavaScript необходимо для создания нового элемента в IE версии 9 и более ранних версий.
Проблемы с Internet Explorer 8
Вы можете использовать описанное выше решение для определения всех новых элементов HTML5.
Однако, IE8 (и более ранние версии) не позволяют определять стиль для неизвестных элементов!
Но спасибо HTML5Shiv! HTML5Shiv — плагин JavaScript, позволяющий определять стили элементов HTML5 в браузерах Internet Explorer до версии 9.
Подключение HTML5Shiv
Плагин HTML5Shiv подключается внутри тега <head>.
HTML5Shiv — это JavaScript файл, который подключается в теге <script>.
Плагин HTML5Shiv следует использовать, когда используются новые элементы HTML5 вроде <article>, <section>, <aside>, <nav>, <footer>.
Последнюю версию плагина HTML5shiv можно скачать с github авторов (https://github.com/aFarkas/html5shiv) или определить ссылку на CDN версию по адресу https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js
Синтаксис:
<head>
<!--[if lt IE 9]>
<script src='/js/html5shiv.js'></script>
<![endif]-->
</head>
Пример подключения HTML5Shiv
Если вы не хотите или у вас нет возможности скачать на свой сайт файлы плагина HTML5Shiv, то вы можете определить ссылку на его CDN версию.
Скрипт плагина HTML5Shiv должен размещаться внутри тега <head> после всех определений стилей:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<section>
<h1>Знаменитые города</h1>
<article>
<h2>Лондон</h2>
<p>Лондон — столица Англии. Это самый густо населенный город
Великобритании с населением более 13 миллионов человек.</p>
</article>
<article>
<h2>Париж</h2>
<p>Париж — столица и самый густо населенный город Франции.</p>
</article>
</section>
</body>
</html>
