¡HTML5! La quinta y última versión del lenguaje básico de la World Wide Web (W3C). En este post vamos a comenzar con unas nociones básicas en este lenguaje. HTML5 comenzó a desarrollarse en el año 2004 y a pesar de no ser aún un lenguaje estandarizado si todavía no lo conoces es el momento de hacerlo, ya que el tradicional XHTML ha quedado atrás para dejar paso a HTML5, el nuevo estándar para HTML.

HTML5 es un estandard vivo, un concepto de marketing que agrupa tecnologías como CSS3 y Javascript, semántica, nuevas capacidades de diseño, etc. HTML5 es compatible con todos los navegadores. ¿Cómo? Los navegadores nuevos están perfectamente capacitados para soportar este lenguaje, y para los que no son tan nuevos, existen librerías Javascript como Modernizr o HTML shiv que permiten la compatibilidad de este lenguaje con antiguos navegadores.

Entre tantas, las novedades más destacadas para este nuevo estándar podrían ser algunas de las siguientes:

  • Sus nuevas etiquetas cuyo comportamiento no deja de ser distinto del de un div o span, pasan ahora a un lado semántico teniendo nombres dedicados a su contenido específico.
  • La declaración del tipo de documento o etiqueta doctype se simplifica ahora para ser exactamente la siguiente: <!DOCTYPE html>
  • Bajo el doctype y antes de abrir la etiqueta <head> es muy importante especificar el idioma de la página con <html lang=»es»>.
  • Los meta keywords y meta tags desaparaecen para dejar paso a <meta charset=»utf-8″>.

¿Qué pasaría si nuestra página fuera multiidiomas? La mejor y única solución que debemos dar a esta pregunta es crear una sola página por idioma. Debemos acabar con www.nombredelapagina.com/es o www.nombredelapagina.com/en. Cada página debe tener un subdominio. Por ej. es.nombredelapagina.com o en.nombredelapagina.com.

Aquí te muestro una imagen donde se perciben las principales diferencias entre las etiquetas de HTML tradicional y HTML5 donde podemos observar que HTML5 introduce una serie de etiquetas que ayudan a definir la estructura de una página.

diferencias entre html tradicional y html5
  • El elemento <header> corresponde al contenido introductorio de la cabecera de una página. Dentro de esta etiqueta debe estar el h1. Puesto que será lo primero que cualquier buscador lea dentro de cada página, si existieran más de un <h1> por página, este perdería su valor semántico de cara al posicionamiento.
  • <hgroup> agrupa etiquetas desde <h1> hasta <h6> para especificar que es un contenido semántico agrupado en una cabecera. Por ejemplo, dentro de un artículo de un blog, un <hgroup> puede contener una etiqueta <h2> y otra <h3> para especifica el título y subtítulo del artículo como cabecera del mismo.
  • <nav> es el menú de navegación de los contenidos o secciones importantes de la página. En este ejemplo lo hemos colocado solamente dentro de la etiqueta <header> pero igualmente podemos encontrar un menú de navegación dentro de un <aside> o un <footer>.
  • La etiqueta <aside> contiene elementos que no son esenciales dentro del sitio web. Por ejemplo, un listado de enlaces a redes sociales podría estar dentro de un elemento <aside>.
  • La etiqueta <section> agrupa contenidos dentro de la página.
  • <article> actúa como contenedor de una sección independiente de la página. Puede ir dentro de la etiqueta <section> o aislada dentro del sitio web.
  • Al igual que la etiqueta <header> corresponde a la cabecera de la página, <footer> encaja con el pie.

Para tener un ejemplo más concreto de cómo podría estar estructurada una página básica en HTML5 te muestro el siguiente ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8" />
	<title>Mi página web hecha en HTML5</title>
	<!--[if lt IE 9]>
		<script src="dist/html5shiv.js"></script>
	<![endif]-->
</head>
<body>
	<header>
		<hgroup>
			<h1>HTML5</h1>
			<h2>Estructura básica</h2>
		</hgroup>

		<nav>
			<ul>
				<li><a href="#" title="Inicio">Inicio</a></li>
				<li><a href="#" title="Características">Características</a></li>
				<li><a href="#" title="Contacta">Contacta</a></li>
			</ul>
		</nav>
	</header>

	<section class="propiedades">
		<article>
			<hgroup>
				<h2>Propiedades de HTML5</h2>
				<h3>Características principales:</h3>
			</hgroup>
			<figure>
				<img src="imagenes/html5.png" alt="características de HTML5" title="características principales de HTML5" />
				<figcaption>Características principales de HTML5</figcaption>
			</figure>
		</article>

		<article>
			<ul>
				<li>Etiam tincidunt sagittis felis</li>
				<li>Lorem ipsum dolor sit amet</li>
				<li>Morbi interdum malesuada lacus</li>
			</ul>
		</article>
	</section>

	<aside>
		<section>
			<h3>Enlaces de interés</h3>
			<ul>
				<li><a href="#" title="enlace1">Enlace 1</a></li>
				<li><a href="#" title="enlace2">Enlace 2</a></li>
				<li><a href="#" title="enlace3">Enlace 3</a></li>
				<li><a href="#" title="enlace4">Enlace 4</a></li>
			</ul>
		</section>

		<section>
			<h3>Síguenos en las Redes Sociales</h3>
			<ul>
				<li><a href="#" title="Facebook"><img src="imagenes/facebook.png" alt="Facebook" title="Facebook" /></a></li>
				<li><a href="#" title="Twitter"><img src="imagenes/twitter.png" alt="Twitter" title="Twitter" /></a></li>
			</ul>
		</section>
	</aside>

	<footer>
		© 2012 Mi página en HTML5
	</footer>
</body>
</html>

Ahora que ya conocemos las etiquetas básicas para poder crear una página en HTML5 hay que ponerlo en marcha y practicar con los conocimientos adquiridos. Y para ponerle la guinda al pastel, te dejo una serie de links con los que podrás ampliar tus conocimientos en este lenguaje que debe ser ya imprescindible en tus páginas 🙂 Ánimo y hasta el próximo post!