Поддержка HTML5 в браузерах

Все современные браузеры поддерживают HTML5, автоматически обрабатывая неизвестные элементы как строчные. Кроме того, можно «научить» старые браузеры корректно обрабатывать подобные элементы.

Семантические элементы как блочные

HTML5 определяет несколько новых семантических элементов, и все они являются блочными. Вот они:

Задайте свойство CSS display для перечисленных выше элементов, чтобы обеспечить их корректную работу в старых браузерах:

css

header, section, footer, aside, nav, main, article, figure {
  display: block;
}

HTML5Shiv

HTML5Shiv размещается внутри тега <head>. Это файл JavaScript. Он подключается с помощью тега <script>.

Рекомендуется использовать HTML5Shiv при работе с новыми элементами HTML5.

Пример использования HTML5Shiv:

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <section>
      <h1>The most beautiful places in the world</h1>
      <article>
        <h2>Salar de Uyuni, Bolivia</h2>
        <p>The world's largest salt flats, spanning 4086 miles (10,582 sq. km), Salar de Uyuni is unlike anywhere else on earth.</p>
      </article>
      <article>
        <h2>Moraine Lake, Canada</h2>
        <p>Moraine Lake may be only half the size of its nearby neighbour Lake Louise, but it's even more scenic.</p>
      </article>
      <article>
        <h2>Iguazu Falls, Argentina/Brazil border</h2>
        <p>One of the modern natural wonders of the world, this chain of mini waterfalls is one of the planet's most awe-inspiring sights.</p>
      </article>
    </section>
  </body>
</html>

Try it Yourself »

Поддержка HTML5 в браузерах ​

Семантические элементы как блочные ​

HTML5Shiv ​

Пример использования HTML5Shiv: ​

Practice ​

Поддержка HTML5 в браузерах

Семантические элементы как блочные

HTML5Shiv

Пример использования HTML5Shiv:

Practice