Compatibilidad de HTML5 con Navegadores

Todos los navegadores evergreen — Chrome, Firefox, Safari y Edge — llevan más de una década soportando nativamente los elementos semánticos de HTML5 (desde aproximadamente 2013). En la web actual, esto rara vez es algo en lo que necesites pensar: puedes escribir <header>, <nav>, <article> y el resto, y simplemente funcionan.

Esta página cubre dos temas relacionados. Primero, la pequeña línea de CSS que históricamente garantizaba que los elementos semánticos se renderizaran como bloques. Segundo — incluido aquí principalmente por contexto histórico — el polyfill HTML5Shiv, que anteriormente era necesario para que esos elementos funcionaran en Internet Explorer 8 y versiones anteriores. Finalizamos con la forma moderna de verificar las capacidades del navegador.

Por Qué los Navegadores Más Antiguos Necesitaban Ayuda

Cuando un navegador encuentra un elemento que no reconoce, no lo ignora — de todas formas lo inserta en el DOM. La pregunta es cómo lo renderiza. Por defecto, un elemento desconocido se trata como display: inline. Sin embargo, los nuevos elementos semánticos de HTML5 son todos de nivel bloque por diseño (como <div>). Así que en un navegador que no conocía, digamos, <section>, ese elemento se mostraría en línea en lugar de como un bloque, rompiendo silenciosamente los márgenes, los anchos y el apilamiento.

Hay dos problemas separados que un navegador antiguo podía tener:

Diseño — el elemento existe pero se renderiza en línea en lugar de como bloque. Se soluciona con una regla CSS (a continuación).
Aplicación de estilos — Internet Explorer 8 y versiones anteriores no podían aplicar CSS a elementos que no reconocía hasta que eran "registrados" mediante JavaScript. Ese es el problema que HTML5Shiv resolvió.

Elementos Semánticos como Elementos de Bloque

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

Para forzar que estos elementos se rendericen como bloques en un navegador más antiguo, establece la propiedad CSS display de forma explícita. Los navegadores modernos ya aplican esta regla por sí mismos, así que no hace daño dejarla:

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

Ten en cuenta que display: block por sí solo es suficiente para corregir el diseño. No hace que Internet Explorer 8 pueda aplicar estilos al elemento en absoluto — esa limitación más antigua requería el shim de JavaScript descrito a continuación.

HTML5Shiv (Legado)

Legado / histórico. HTML5Shiv (también escrito "shim") era un pequeño archivo JavaScript necesario únicamente para Internet Explorer 8 y versiones anteriores, que no podía aplicar CSS a elementos desconocidos. Microsoft finalizó el soporte para esas versiones, e Internet Explorer llegó al final de su vida útil en 2022. A menos que tengas un requisito explícito e inusual de soportar IE 8, no necesitas HTML5Shiv hoy en día. Se incluye aquí solo por contexto.

El shiv se coloca dentro del <head> y se referencia en una etiqueta <script>. Está envuelto en un comentario condicional exclusivo de IE (<!--[if lt IE 9]>) para que todos los demás navegadores lo ignoren por completo.

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 »

El Enfoque Moderno: Detección de Características

Los polyfills al estilo del shiv corregían un elemento faltante para un navegador específico ya obsoleto. La forma contemporánea de manejar las diferencias entre navegadores es la detección de características: en lugar de preguntar "¿qué navegador es este?", preguntas "¿este navegador soporta la característica que quiero?" y te adaptas en consecuencia.

En CSS, la regla @supports comprueba si un par propiedad/valor es comprendido antes de aplicar un bloque de estilos:

/* Use a grid layout only where the browser supports it */
@supports (display: grid) {
  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

En JavaScript, compruebas la API o la propiedad directamente:

if ('IntersectionObserver' in window) {
  // Use IntersectionObserver
} else {
  // Provide a fallback
}

Este patrón es más fiable que detectar la versión del navegador porque comprueba la capacidad real, y sigue funcionando a medida que se lanzan nuevos navegadores y versiones. Para los elementos semánticos de HTML5 específicamente, no se necesita ninguna detección en los navegadores evergreen actuales.

Qué Más Leer

Introducción a HTML5 — qué añade HTML5 respecto a versiones anteriores.
Elementos Semánticos en HTML5 — cuándo y cómo usar cada elemento estructural.
Migración a HTML5 — convertir un documento HTML 4 antiguo a HTML5.

Práctica

¿Cuáles de estos navegadores admiten elementos semánticos de HTML5 de forma nativa (sin necesidad de shiv)?

Google Chrome actualFirefox actualSafari actualMicrosoft Edge actualInternet Explorer 8Internet Explorer 6