Esquema básico de una página en HTML5

Esquema básico de una página en HTML5

Este artículo contiene un esquema básico para que puedas comenzar tu proyecto básico de HTML5. Incluye lo elemental en HTML y CSS para que comiences tu sitio web.

En este artículo no veremos ninguna tecnología web en especial. Es simplemente HTML (1)(2) y CSS que podras probar en tu computadora sin necesidad de instalar nada mas que un simple navegador.

El código HTML5 ha simplificado la forma de trabajo de su predecesor XHTML4.0, la gran ventaja para los desarrolladores es que podemos crear sitios web mas sencillo

A continuacion daré una explicación básica de los distintos elementos, aunque casi todos son bastante intuitivos.

Tu página HTML no es mas que un archivo de texto que utiliza etiquetas (o tags) para indicar distintas secciones del contenido. Las páginas HTML5 tienen que comenzar con el texto:

DOCTYPE HTML

Que indica que efectivamente ese archivo de texto debe ser tratado como HTML5. Posteriormente tenemos la gran etiqueta html que engloba todo el resto de la página.

html lang="es"

En nuestro caso debemos especificar que nuestra página esta escrita en español. Posteriormente viene el tag html que tiene dos grandes secciones.

Seccion head

La seccion head es la cabecera de tu página e incluye todos los meta-datos de tu sitio además de enlaces a las hojas de estilo CSS y a los archivos con código JavaScript. En esta sección normalmente tenemos:

La descripción del juego de caracteres que utilizaremos. Normalmente en español haremos uso de UTF-8:

meta charset="utf-8"

Los meta-datos más importantes son el título (title) y la descripción (meta name="description"), aunque puedes añadir otros más como las palabras clave, imagen principal, enlace canónico o ícono de tu sitio.

Los enlaces a las hojas de estilo van en la cabecera de tu sitio. También podrías colocar el estilo directamente aquí utilizando la etiqueta style, aunque los casos de hacer eso son bastante raros.

link rel="stylesheet" href="css/public.css"

Finalmente en esta sección puedes colocar los enlaces a los archivos que tendrán el codigo JavaScript. Muchos usuarios prefieren colocarlos directamente al final de la página por temas de velocidad pero son detalles de optimización.

script type="text/javascript" src="js/public.js"

Seccion body

La sección body es el cuerpo de tu sitio, es aqui donde tienes que colocar el contenido de tu sitio web. Básicamente esta compuesta de las siguientes partes:

Cabecera de tu sitio

Esta identificada por la etiqueta header y normalmente debes colocar el logo de tu sitio y el menu de navegación que debe ser identificado con la etiqueta nav. También puedes incluir en la cabecera enlaces a las redes sociales de tu sitio o los botones para cambiar de idioma.

Pie de página

Identificado por la etiqueta footer es un elemento bastante intuitivo. Lo recomendable es que coloques la dirección fisica y datos de contacto de tu sitio web. Nunca esta demás tener un menu a las secciones mas importantes de tu web.

Contenido aparte

El tag en este caso es aside y se utiliza para todo el contenido que no sea específicamente relevante a tu página pero sí a tu sitio. Los usos mas comúnes son los de colocar enlaces externos, nubes de palabras clave, bloques de contenido de redes sociales o enlaces categorizados a nuestro propio sitio web.

Secciones de contenido

Están identificadas por la etiqueta section y son bastante genéricas. Sirven básicamente para diferenciar diferentes secciones en tu contenido. Puedes por ejemplo tener una sección para el contenido en sí, otra sección para los comentarios y una adicional para los artículos relacionados.

Artículos en tu sitio web

Los artículos estan identificados por el tag article y se pueden ver como una mini versión del cuerpo de tu sitio ya que aceptan las etiquetas header y footer. Pese a que el nombre hace referencia a un artículo, puede ser utilizado para escribir posts, comentarios, widgets, gadgets o cualquier elemento idependiente del contenido.

Links adicionales

(1) Referencia completa del HTML por el W3C: http://www.w3.org/TR/html5/
(2) Portal de Mozilla con información detallada de HTML5: https://developer.mozilla.org/es/docs/HTML/HTML5