Como muchos saben, HTML se ha actualizado a su quinta versión, por lo que es necesario actualizarse en cuestión de saber qué nuevas etiquetas existen, utilidades y demás, así como aprender a combinarlo con CSS3.
Podemos empezar diciendo que HTML 5 reduce mucho código, empezando desde el doctype, que establece el tipo de documento que se está creando, para html 5 el doctype es el siguiente:
<!DOCTYPE HTML>
Como se puede apreciar, es mucho más simplificado que el de XHTML.
Seguido de esto, se abre la etiqueta de siempre <html> para empezar con el código, pero se debe establecer el lenguaje que se va a utilizar en la página, en nuestro caso español, esto se hace con el atributo lang en la etiqueta html:
<html lang=»es»>
Después de esto, ya podemos seguir con nuestro código. Lo que sigue es la cabecera, <head> en donde va el título de la página, etiquetas meta, scripts, estilos (preferentemente se usa CSS3), etc.
Una etiqueta meta que es indispensable en el HTML5 es charset, que estipula el tipo de codificación de la página, siempre vamos a utilizar utf-8:
<meta charset=»utf-8″ />
Hasta aquí ya queda establecido el esqueleto por así decirlo de la estructura de html 5.
<!DOCTYPE html>
<html lang="es">
<head> </head>
<body>
</body>
</html>
En HTML 5 se crean nuevas etiquetas, entre ellas, <header> lo que evita el uso de muchas divisiones, entonces ya no es necesario poner <div id=»header»>.
Lo único que se puede hacer, si es que se quiere dar un estilo a estas etiquetas, es modificarlas desde una hoja de estilos CSS3.
Por ejemplo, en la etiqueta <header> podemos poner los elementos como título y menú de navegación. Para el menú, también existe la etiqueta <nav> que evita otro div.
La esructura puede quedar así:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8 /> <title>Ejemplo de HTML5</title> </head> <body> <header> <nav>Botones de navegación</nav> <h1>Titulo de la pagina</h1> </header> </body> </html>
Nótese que el título quedó en la etiqueta <h1> que ya viene con un estilo predeterminado al igual que las que le siguen hasta <h6>. Pero este estilo se puede modificar con un CSS.
Es muy importante saber que no es bueno utilizar las etiquetas <h1> – <h6> más de una vez, ya que esto podría afectar el posicionamiento de la página en buscadores.
Otra etiqueta nueva es <aside> que sirve para poner los elementos menos importantes de la página en algún lugar, no necesariamente a los lados. Esta etiqueta es más bien para poder ordenar mejor el código.
Para seccionar las partes de la página, podemos utilizar la etiqueta <section> y dentro de esta, la etiqueta <article> para agregar los textos necesarios.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8 /> <title>Ejemplo de HTML5</title> </head> <body> <header> <nav>Botones de navegación</nav> <h1>Titulo de la pagina</h1> </header> <section><article>Aquí algún artículo</article> <article>Otro artículo por acá</article> </section> </body>
Y finalmente, ésta versión de html 5 ya viene con la etiqueta <footer> integrada, tal vez por la moda que han causado los derechos de autor. Se debe recordar que se puede modificar el estilo de todas estas etiquetas usando CSS.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8 /> <title>Ejemplo de HTML5</title> </head> <body> <header> <nav>Botones de navegación</nav> <h1>Titulo de la pagina</h1> </header> <section><article>Aquí algún artículo</article> <article>Otro artículo por acá</article> </section> <footer>Copyright, links, etc</footer> </body> </html>
En otros posts seguiremos mostrando más etiquetas, sus usos y aplicaciones de CSS3 con HTML 5 para mejores resultados.
