Aplicando HTML5
Posteado el 20. Sep, 2012 por tuto in Desarrollo Web, HTML y CSS, HTML5
Maquetación básica con HTML5
Siguiendo la guía de nuestro tutorial anterior la maquetación de un sitio con HTML5 queda de la siguiente manera.
Ejemplo:
<header>
El código muestra el <header> conteniendo a <nav> que será nuestro menú.
<nav>
<aside>
<footer>
Estilando HTML5 con CSS:
Bien, ahora que ya tenemos un poco más clara la estructura de etiquetas en HTML5, tendremos que aplicarle estilos. En todos los navegadores menos uno, es muy simple dar estilos a un elemento. Igual que hacíamos con HTML4, creamos una hoja de estilos CSS y desde allí hacemos los llamados a los elementos.
header{
background-color:#ececec;
text-align:center;
color:#bbb;
}
header h1{
padding:30px;
margin:0;
}
article{
padding:30px;
width:570px;
float:left;
border-bottom:1px solid #ebebeb;
}
aside{
width:269px;
float:right;
border-left:1px solid #ebebeb;
background-color: #F7F6F6;
}
aside nav, aside section{
padding:30px;
}
Lo que más sorprende de este nuevo sistema, es que por defecto CSS asume que este tipo de elementos tienen la propiedad display:inline, así que si queremos poner alturas o anchuras, tendremos que cambiarlo a display:block;
/* Tell the browser to render HTML 5 elements as block */
header, footer, aside, nav, article, section {
display: block;
}
Peculiaridades de Internet explorer (IE) y HTML5
Con las versiones actuales de IE, siguiendo las instrucciones anteriormente expuestas, la página permanecerá sin estilos. O mejor dicho, tendrán estilos aquellos elementos típicos de HTML4 (span, div, a…) pero dejará sin estilos los nuevos de HTML5 (header, footer, section, canvas…)
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('footer');
</script>
De esta manera, y sin motivo aparente los estilos indicados en el CSS se aplicarán a los elementos. Tendremos que crear una línea para cada elemento que queramos crear. Este script lo podemos poner con los típicos condicionales para que sólo los lea IE, pero si los dejamos para todos los navegadores no pasa nada.