Desde tiempos inmemoriables, los navegadores tienen una característica muy buena en la que cualquier contenido dentro de símbolos < y > es considerado una "etiqueta". Independientemente si el navegador reconoce o no dicha etiqueta, no mostrará su texto.
Es decir, si yo tengo esto en mi página web:
<etiquetaInventadaPorMi> <p>Un párrafo</p> </etiquetaInventadaPorMi>
Cualquier navegador se va a "brincar" la etiqueta superior, ya que no la reconoce como válida, y plasmar lo contenido dentro de ella. Cuando algún navegador reconozca esa etiqueta (cosa que dudo mucho), la aplicará como debe, pero de momento, ningún navegador la tomará en cuenta.
Un ejemplo más real de esto es la etiqueta <object>, que nos permite importar un elemento a nuestra página y colocar dentro algún contenido que será visible si el navegador no reconoce dicha etiqueta, o si no puede mostrar el elemento importado.
Ahora, ¿qué pasa si estoy haciendo mi sitio con HTML5 y uso etiquetas <header>, <footer>, <nav>, etc., y despliego la página en un navegador como IE8? No va a pasar nada, simplemente el navegador pasará de largo por esas etiquetas. Pero, ¿y si le di estilos a dichas etiquetas? He ahí el detalle.
Hay un truquillo que he tenido que utilizar en estos casos, y porque no me quedaba de otra: para cada elemento de HTML5, agrego un <div> que agrupe todo su contenido. Es decir, de esta manera:
<header>
<div class="header">
<h1>Mi sitio</h1>
</div>
</header>
<article>
<div class="article">
<h2>Artículo</h2>
<section id="seccion1">
<div class="section seccion1">
</div>
</section>
</div>
</article>
Lo que hago es jugar con las propiedades class y id para crear los contenedores dentro de cada etiqueta, y en lugar de aplicar los estilos a header, article, section, #section1, los aplico a .header, .article, .section, .section.section1.
Con Javascript
Esa técnica es algo tediosa, lo sé. Hace poco quise recurrir a Javascript para crear los elementos div dentro de cada etiqueta HTML5, pero no di con la solución.
Revisando un par de sitios que estoy desarrollando, caí en cuenta de una cosa: en uno de ellos estoy usando esa técnica de los divs, pero en el otro no, y sin embargo, en éste último cualquier versión de IE respeta los estilos aplicados a las etiquetas HTML5. ¿Cómo le hice, si ni me acuerdo?
Pues resulta que estoy usando Modernizr, y esta librería incluye (a menos que en la descarga lo deshabilitemos) un componente Javascript llamada HTML5 Shiv, cuya utilidad es, precisamente, habilitar las versiones de IE inferiores a la 9 para que reconozcan las etiquetas HTML5 y permitan aplicarles estilos.
Ojo, esto no implica que el navegador aplique las características predeterminadas de estas etiquetas, como el display:block. Lo que hace es que un estilo en CSS para una etiqueta HTML5 sea aplicado como debe ser. No por usar HTML Shiv nuestro IE8 va a poder reproducir un <video>, por ejemplo.
¿Y cuál de las dos uso?
Dependiendo el público al que va dirigido nuestro sitio, tendremos que decidir si vamos a hacer cosas como ésta usando Javascript. Por ejemplo, si el mercado de navegadores móviles es una opción, no nos vamos a limitar a los usuarios de iPhone y Android, que tienen sus navegadores de última generación, sino que tenemos que pensar en qué otros teléfono se usan en el mercado, como puede ser Windows Phone (sí, puede ser), Blackberry, etc. No podemos estar seguros de su capacidad para soportar (y ejecutar) Javascript, así que probablemente nos vayamos por una opción como la primera, con puro HTML.
Son sugerencias. Cosas que uno va aprendiendo en su vida de desarrollador web 😛
Deployando .NET 