Guía Básica Para HTML5

HTML5 es la versión más reciente del estándar HTML que ha llegado para quedarse. Es más simple, más rápido y mucho más fácil de implementar.
Esta es una breve guía para introducirse en HTML5.

Primero lo primero: El "doctype"

El doctype en HTML5 es bastante sencillo. En versiones anteriores se trataba de un código largo y difícil de recordar. Por ejemplo la versión anterior:

HTML4:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML5:

<!DOCTYPE html>

Mientras que con las versiones anteriores tenias que andar copiando y pegando un código larguísimo, ahora solo tienes que escribir <!DOCTYPE html> y listo.

<html>

La etiqueta html y otras etiquetas también se han simplificado. Ahora en lugar de escribir algo así:
<html xmlns=http://www.w3.org/1999/xhtml lang=”en” xml:lang=”en”>

Podemos escribir simplemente:

<html lang="en">

Y a la hora de usar la etiqueta <link> no será necesario especificar el tipo.

<link rel=”stylesheet” href=”style.css” type=”text/css”>

Se convierte en:

<link rel=”stylesheet” href=”style.css”>

Las nuevas etiquetas:

El HTML5 también vino con nuevas etiquetas que te facilitaran el trabajo. Las siguientes son solo las más importantes.

<article>

El elemento “article” representa una composición auto-contenida en un documento, pagina o sitio. Puede ser usado para foros, artículos de revista o periódicos, entradas de blog, comentarios o cualquier otro tipo de contenido independiente.

<header>

Puede contener encabezados y otros elementos como logos, cuadro de búsqueda, enlaces de navegación y elementos parecidos. Aunque lo más común es usarlo al principio del documento, también puede situarse en cualquier otra parte.

<nav>

Representa una sección que enlaza a otras páginas o a otras partes de la página, o sea, una sección con enlaces de navegación.

<section>

Es básicamente cualquier sección genérica en el documento. Más comúnmente, una agrupación temática de contenido.

<aside>

Representa una sección de la pagina que tiene contenido relacionado a esta pero puede ser considerado aparte. Es comúnmente usado para las sidebars o bloques de anuncios.

<footer>

Representa un “footer” o pie de página, puede ser, de la página en general, o de cualquier otro elemento. Esta etiqueta es muy parecida a la etiqueta header, pero en el lado opuesto de la pagina.


Bueno, suficiente teoría, pasemos a la práctica. Realicemos nuestra propia página con HTML5.

La plantilla

Comenzamos declarando una estructura básica, definimos el tipo de documento, agregamos un titulo a la página, una meta etiqueta de ejemplo y un enlace a la hoja de estilos:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mi Pagina HTML5</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>

Ahora es buen momento para armar el body de nuestra página. Crearemos un div con id=”wrapper” y dentro de él, usaremos las etiquetas <header>, <section> y <footer>.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mi Pagina HTML5</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrapper">
<header>
</header>
<section>
</section>
<footer>
</footer>
</div>
</body>
</html>

Ya tenemos todo listo para comenzar a agregar contenido a nuestra página. Pero antes, enlaces de navegación y un titulo en nuestro header.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mi Pagina HTML5</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrapper">
<header>

<h1>Mi página HTML5</h1>

<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">¿Qué es HTML5?</a></li>
</ul>
</nav>

</header>
<section>
</section>
<footer>
</footer>
</div>
</body>
</html>

Ahora sí, agreguemos un poco de contenido. Un «Lorem Ipsum» estará bien. Lo agregaremos dentro de la etiqueta section y tendrá su propio header también.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mi Pagina HTML5</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>Mi página HTML5</h1>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">¿Qué es HTML5?</a></li>
</ul>
</nav>
</header>
<section>

<article>
<header>
<h1>Lorem Ipsum</h1>
<p>Abril del 2012</p>
</header>
<p>Vestibulum adipiscing lectus ut risus adipiscing
mattis sed ac lectus. Cras pharetra lorem eget diam
consectetur sit amet congue nunc consequat. Curabitur
consectetur ullamcorper varius. Nulla sit amet sem ac
velit auctor aliquet. Quisque nec arcu non nulla adipiscing
rhoncus ut nec lorem. Vestibulum non ipsum arcu. Quisque
dapibus orci vitae massa fringilla sit amet viverra nulla.</p>
</article>

</section>
<footer>
</footer>
</div>
</body>
</html>

Y por ultimo definamos el footer.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mi Página HTML5</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>Mi página HTML5</h1>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">¿Qué es HTML5?</a></li>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h1>Lorem Ipsum</h1>
<p>Abril del 2012</p>
</header>
<p>Vestibulum adipiscing lectus ut risus adipiscing
mattis sed ac lectus. Cras pharetra lorem eget diam
consectetur sit amet congue nunc consequat. Curabitur
consectetur ullamcorper varius. Nulla sit amet sem ac
velit auctor aliquet. Quisque nec arcu non nulla adipiscing
rhoncus ut nec lorem. Vestibulum non ipsum arcu. Quisque
dapibus orci vitae massa fringilla sit amet viverra nulla.</p>
</article>

<footer>
<p>
<a href="http://erwinandres.blogspot.com/">Erwin Andrés</a>
</p>
</footer>

</div>
</body>
</html>

¿Y si es Internet Explorer?

Las versiones anteriores a Internet Explorer 9 no son compatibles con HTML5, por esto es necesario agregar el siguiente spcript en el <head> de la página:

<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

El código final quedara así:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mi Página HTML5</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<h1>Mi página HTML5</h1>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">¿Qué es HTML5?</a></li>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h1>Lorem Ipsum</h1>
<p>Abril del 2012</p>
</header>
<p>Vestibulum adipiscing lectus ut risus adipiscing
mattis sed ac lectus. Cras pharetra lorem eget diam
consectetur sit amet congue nunc consequat. Curabitur
consectetur ullamcorper varius. Nulla sit amet sem ac
velit auctor aliquet. Quisque nec arcu non nulla adipiscing
rhoncus ut nec lorem. Vestibulum non ipsum arcu. Quisque
dapibus orci vitae massa fringilla sit amet viverra nulla.</p>
</article>
</section>
<footer>
<p>
<a href="http://erwinandres.blogspot.com/">Erwin Andrés</a>
</p>
</footer>
</div>
</body>
</html>

¡Y eso es todo! Ya tenemos lista nuestra página en HTML5.

0 comentarios