HTML5 Browser Support

Todos los navegadores modernos admiten HTML5 y manejan automáticamente los elementos desconocidos como elementos en línea. Además, es posible “enseñar” a los navegadores más antiguos a manejar este tipo de elementos.

Elementos semánticos como elementos de bloque

HTML5 especifica varios elementos semánticos nuevos, y todos ellos son elementos de bloque. Aquí están:

Establece la propiedad CSS display para los elementos mencionados anteriormente para garantizar un comportamiento adecuado en navegadores más antiguos:

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

HTML5Shiv

El HTML5Shiv se coloca dentro de la etiqueta <head>. Es un archivo JavaScript. Se referencia en una <script> etiqueta.

Deberías usar el HTML5Shiv al utilizar los nuevos elementos de HTML5.

Ejemplo de HTML5Shiv:

<!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>

Pruébalo tú mismo »

Compatibilidad de HTML5 con navegadores

Elementos semánticos como elementos de bloque

HTML5Shiv

Ejemplo de HTML5Shiv:

Práctica