Soporte HTML5 en Navegadores Web
HTML5 es soportado por la mayoría de los navegadores web modernos, pero en adición, todos los navegadores web tanto modernos como antiguos, automáticamente manejan las etiquetas no reconocidas como etiquetas HTML con nivel de línea. Así, es posible enseñar a los navegadores web antiguos a manejar las etiquetas HTML no reconocidas como HTML5 correctamente.
Definir las etiquetas semánticas
HTML5 agrega 8 nuevas etiquetas semánticas y todas ellas son de nivel de bloque. Para asegurarse del correcto funcionamiento de estas etiquetas en navegadores web antiguos; en el CSS se les especifica la propiedad display: block; a estas etiquetas HTML5:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
Agregar nuevas etiquetas HTML
Es posible agregar nuevas etiquetas a una página HTML, haciendo uso de javascript y CSS.
En el siguiente ejemplo, se agrega una nueva etiqueta llamada <mietiqueta> a la página HTML y se le define un estilo CSS.
<!doctype html>
<html>
<head>
<script>document.createElement("mietiqueta")</script>
<style>
mietiqueta{
display: block;
background-color: #dddddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Mi Título</h1>
<mietiqueta>Mi nueva etiqueta</mietiqueta>
</body>
</html>
La declaración en JavaScript document.createElement("mietiqueta") es necesaria para crear una elemento en Internet Explorer 9 y versiones anteriores. Sin embargo, Internet Explorer 8 y versiones anteriores no permiten dar estilos a elementos desconocidos. Afortunadamente, Sjoerd Visscher creó HTML5Shif.
La solución HTML5Shiv
HTML5Shiv es una solución en JavaScript para permitir el diseño de elementos HTML5 para versiones anteriores de Internete Explores 9. Así, HTML5Shiv es un archivo JavaScript que debe ser referenciado con un etiqueta <script> colocada a su vez dentro de la etiqueta <head>.
Podemos descargar la última versión del proyecto HTML5Shiv desde el sitio github o hacer la referencia a la versión CDN en https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js.
Nota: Se debe de usar la solución HTML5Shiv cuando se esta usando los nuevos elementos HTML5 como son: <article>, <section>, <aside>, <nav>, <footer>, etc.
Sintaxis con el archivo del proyecto
Si se descarga el archivo JavaScript del proyecto, el script debe colocarse dentro del elemento <head>. La ruta en el atributo src debe en donde se localiza el archivo en tu sito:
<head>
<!--[if lt IE 9]>
<script src="/js/html/5shiv.js">
<![endif]-->
</head>
Sintaxis a la referencia CDN
Si se hace la referencia al versión CDN, el script HTML5Shiv debe colocarse dentro del elemento <head>, después de cualquier hoja de estilos:
<head>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
</head>