ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Модернизация сайта с использованием семантической разметки

Модернизация сайта с использованием семантической разметки

Пример веб-страницы, который мы рассмотрели, будет работать во всех браузерах, кроме IE7 и IE8. В этих веб-браузерах страница будет отображаться неправильно и только потому, что Internet Explorer не добавляет стиль к элементам, которые не понимает. Эту проблему можно решить, если добавить к новым тегам свойство display:

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }

и создать фиктивный элемент с помощью JavaScript:

Например, для тега header это будет выглядеть так:

<script>
document.createElement("header");
</script>

Хорошо, если на странице встречается только один тег, а если их много. Не повторять же строку десять раз для десяти разных тегов, поэтому автоматизируем этот процесс через цикл. Сами теги указываются списком, разделяясь запятой:

<!--[if lt IE 9]>
<script>
var e = ("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split(',');
for (var i = 0; i < e.length; i++) {
document.createElement(e[i]);
}
</script>
<![endif]-->

Как видите, скрипт заключен в условные комментарии, чтобы выполнялся только для IE 8 и ниже, так как поддержка новых тегов в IE9 уже включена.

Если вы не хотите вставлять к себе на сайт данный скрипт, то можно воспользоваться общедоступным скриптом написанным Реми Шарпом и распространяемым по лицензии MIT. Для этого достаточно указать на него ссылку, как показано в примере:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Все указанные скрипты должны располагаться в коде перед CSS.

Таким образом, для полноценного использования тегов HTML5 во всех браузерах достаточно выполнить три условия:

  • установить доктайп <!DOCTYPE html>;
  • включить выше рассмотренные скрипты;
  • в стилях для новых тегов установить display: block.

Мы рассмотрели некоторые новые теги, на примере веб-страницы. Но в структуру нашего документа на вошли теги: figcaption,figure и hgroup.

Давайте рассмотрим их.

<figure> — используется для группирования любых элементов, например, изображений и подписей к ним.

<figcaption> — cодержит описание для тега figure. Тег figcaption должен быть первым или последним элементом в группе.

<hgroup> — используется для группирования заголовков веб-страницы или раздела.

А теперь внесем изменения в код веб-страницы и протестируем ее в браузерах IE7 и IE8.

Вот так страница выглядела до модернизации кода в браузере IE7:

Веб-страница в браузере IE7 до модернизации кода

На этом рисунке таже веб-страница после модернизации:

Веб-страница в браузере IE7 после модернизации кода

Тестирование проводилось с помощью браузера IE9. Новый веб-браузер IE10 такой возможности уже не предоставляет.

Если внимательно посмотреть на веб-страницу, то мы не увидим в правой части страницы горизонтального меню, в котором разместили архив блока.

Теперь давайте протестируем страницу в IE8. До модернизации ее интерфейс ничем не отличается от интерфейса IE7.

Вот так веб-страница будет выглядеть после модернизации:

Веб-страница в браузере IE8 после модернизации кода

Как видите отображение страницы в IE8 ничем не отличается от той, что мы видели в IE9.

Как исправить несоответствие в браузере IE7?

Вот об этом и не только мы поговорим дальше.