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.

Estructura HTML5

Ejemplo:

<header>

El código muestra el <header> conteniendo a <nav> que será nuestro menú.

Code block

<header> 
		<hgroup>
			<h1>EJEMPLO HTML 5></h1> 
			<h2>Tutoriales en la web con ejemplos de HTML5</h2>
		</hgroup> 
		<nav>
			<ul>
				<li>Inicio</li> <li> <a href=”#”>Tutoriales en la Web</a> </li>
				<li><a href=”#”>Contactenos</a></li> 
			</ul>
		</nav> 
	</header>

<nav>

Code block

<nav>
	<h2>Menu HTML5</h2> 
	<ul>
		<li><a href=”#”>Tutoriales 1</a></li> 
		<li><a href=”#”>Tutoriales 2</a></li> 
	</ul>
</nav>

<aside>

Code block

<aside>
	<nav>
		<h2>Paginas</h2> 
		<ul> .. </ul> 
	</nav>
	<nav> 
		<h2>Comentarios Recientes</h2> 
		<ul> ... </ul> 
	</nav>
	<nav> 
		<h2>Ultimos Posts</h2> 
		<ul> ... </ul> 
	</nav>
</aside>

<footer>

Code block

<footer> 
	<small>Tutoriales en la Web</small>
</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.

Code block

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;

Code 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…)

Code block

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