HTML5 Estructura Básica I


En este artículo voy a tocar el tema de los componentes básicos en HTML5 así como hablar un poco de que es en realidad HTML5, ya que alrededor de la web he visto varias veces que muchos aún no tienen una idea concreta de lo que es HTML5. Las nuevas especificaciones de HTML5 nos proveen básicamente con 3 características: estructura, estilo y funcionalidad. Nunca se declaró oficialmente, pero incluso cuando algunas APIs y las especificaciones completas de CSS3 no son parte de HTML5, HTML5 en realidad es considerado el producto de la combinación de HTML, CSS y Javascript. Estas tecnologías son altamente dependientes y actúan como una, bajo las especificaciones de HTML5. En pocas palabras HTML es el encargado de la estructura, así como CSS de la presentación y estilo del contenido y finalmente Javascript se encarga del resto (lo cual veremos en otro artículo posteriormente).

Luego de ha verte dado una pequeña introducción a HTML5 vamos directo a lo que venimos, específicamente al análisis de la estructura global de un documento y como consecuente algunos de los nuevos elementos semánticos incorporados en HTML5.

Sabemos que los documentos HTML son estrictamente organizados y para esto utilizamos las llamadas etiquetas. Lo primero que notaras en HTML5 es que cuando indicamos el tipo de documento ya no vas a utilizar la imposible-de-memorizar etiqueta con todos sus caracteres y enlaces:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Y es que en HTML5 solo tendrás que colocar:

<!DOCTYPE html>

Línea fácil de recordar, que nunca debes olvidar colocar al comienzo del documento sin ningún espacio o línea de código anterior a ella. De esta manera se activa el modo estándar y fuerza a los navegadores a interpretar el documento como HTML5 cuando algunas veces es posible que lo ignoren cuando esta no se especifica.

Luego de ver declarado el tipo de documento, tenemos que construir una estructura y como siempre el elemento base para esta es <html lang="es">. Este elemento encerrara todo el código de nuestro documento. Como puedes ver cuenta con el atributo lang, único atributo que necesitamos especificar en esta etiqueta, el cual define el lenguaje humano del contenido que estamos creando, en este caso Español. Para ver una lista completa del código ISO de lenguajes puedes visitar Códigos de Lenguajes.

Declarado nuestro documento, creo que podemos seguir con la creación de nuestra plantilla, los siguientes elementos son los conocidos <head> y <body> que al igual que en versiones anteriores dividen nuestro documento en 2 secciones encabezado y cuerpo. El elemento <head> va de primero como es de sospechar y como el resto de los elementos de estructura poseen etiquetas de apertura y cierre. Este elemento no cambio nada comparado con versiones anteriores de HTML y su propósito sigue siendo exactamente el mismo, dentro de sus etiquetas definiremos el título de nuestra página web, declararemos el tipo de carácter y proveeremos la información general acerca del documento así como incorporaremos ficheros externos, como hojas de estilo, scripts o incluso imágenes que son necesarias para mostrar la pagina. Excepto por el título y el marcador, el resto de la información incorporada en la sección del encabezado usualmente no será visible en el documento.

El próximo elemento como había mencionado antes es el <body>, sección que encierra el contenido visible de nuestra página, el cual tampoco sufrió cambios desde su versión anterior y cuenta con etiquetas de apertura y cierre.

Por si no te has percatado nuestra estructura hasta el momento va teniendo la siguiente forma:

<!DOCTYPE html>
<html lang="es">
<head>
...
</head>
<body>
...
</body>
</html>

Antes de continuar es necesario construir el encabezado de nuestro documento. Dentro del cual podemos ver un par de cambios e innovaciones. Uno de ellos es el elemento <meta>, elemento que especifica como el texto debe ser presentado en la pantalla cuando utilizamos el attributo 1, ej: <meta charset="utf-8">, recuerda que el charset lo puedes cambiar para el tipo de codificación que necesites. Como en la mayoría de los casos la innovación de este elemento fue solo de simplificación, el nuevo elemento ahora es más corto y simple. En el siguiente código verás otros usos que también se le pueden dar al <meta> dentro del encabezado.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplo de estructura en HTML5">
<meta name="keywords" content="HTML5, CSS3, Javascript">
</head>
<body>
...
</body>
</html>

Existen varias etiquetas que pueden ser usadas dentro del elemento meta para declarar la información general del documento, sin embargo como mencionado antes esta información no aparecerá en la ventana de nuestro navegador, sino que es solo importante para los buscadores y otros equipos que necesitan un sumario previo a cargar la información de nuestro documento. Como explique anteriormente aparte de algunas imágenes e iconos, toda la demás información contenida dentro del elemento head no será mostrada.

En HTML5 no es necesario cerrar al final el elemento meta pero si se recomienda cerrarse por razones de compatibilidad, por lo tanto el ultimo código que vistes, va a ser recomendable que lo escribas de la siguiente manera:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Ejemplo de estructura en HTML5" />
<meta name="keywords" content="HTML5, CSS3, JavaScript" />
</head>
<body>
...
</body>
</html>

Terminado con la etiqueta meta continuamos con el siguiente elemento dentro del head, <title> del cual no creo que tengas duda, simplemente declara el título del documento. Esta etiqueta en especifico no tiene ningún cambio nuevo de que hablar, y el título que pongamos dentro de ella es el que generalmente aparece en la parte superior de la ventana de nuestro navegador.

Próximo elemento importante que va dentro del head es <link>. Este elemento es usado para incorporar, hojas de estilo, imágenes o iconos desde ficheros externos en nuestro documento. Quizás el uso más común que tenga este sea el de incorporar hojas de estilos CSS. Con este último elemento podemos decir que ya el encabezado de nuestra página esta completo. Echémosle un vistazo al código siguiente el cual muestra lo abarcado hasta el momento.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplo de estructura en HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>Título del Documento</title>
<link rel="stylesheet" href="hoja-de-estilo.css">
</head>
<body>
...
</body>
</html>

Con este pedazo de código me despido y la vez invitándote a que continúes con la segunda parte de este articulo, en el cuál veremos nuevos elementos incorporados a HTML5 así como la parte más importante del documento el body o cuerpo de la página.

Dimitri

Dimitri

CEO & Founder at MyCyberAcademy
Estudiante de Ingenieria de Software. Fundador de MyCyberAcademy. Lo encontrarás frente a su computador escribiendo código o jugando con algún nuevo framework de PHP. En sus ratos libres monta vela o bicicleta de montaña.
Dimitri
Categories