Tutorial HTML5: la cabecera del documento
En la primera parte del tutorial de introducción al HTML conocíamos un poco la historia del HTML, veíamos la estructura HTML de la que empezaremos todas las plantillas y la explicábamos a grandes rasgos.
En esta segunda entrega vamos a ver la cabecera del sitio web y trataré de explicar un poco, aunque sea por encima, las funciones (más que importantes) que cumplen las diferentes partes de la cabecera.
Si analizamos el código de una web (por ejemplo el de Katharsix) veremos que siempre empieza con el Doctype y después vienen las etiquetas head.
El doctype fue explicado en el capitulo anterior de este tutorial.
Etiquetas title
Una parte fundamental, y uno de los pilares, es el título del sitio web. Este título se coloca en la cabecera del sitio con las etiquetas <title> y </title>. De cara al posicionamiento es importante que sea único para cada página del sitio web, pero esto ya lo explicaré más adelante o en otras entradas.
Las etiquetas meta
Por otro lado, la cabecera contendrá etiquetas meta, que son leidas por los buscadores (al menos por parte de ellos) rastreando información como palabras clave o descripción del sitio web.
Hay muchos tipos de etiquetas meta con diferentes funcionalidades, pero las más utilizadas (y prácticamente las únicas) son:
- description: Podemos utilizarla para describir el sitio (la página actual). Debe ser una frase legible, nada de palabras sueltas separadas por comas. El tamaño máximo varía entre 150 y 200 caracteres, aunque pueden ser menos. No es aconsejable repetir palabras dado que se podría considerar spam.
La forma en que se inserta esta descripción es la siguiente:<meta name="description" content="Aquí la descripción de tu página" />
- keywords: Se utilizan para indicarle al buscador, en términos o palabras clave, de qué trata nuestro sitio. A la hora de construir esta etiqueta debemos tener en cuenta que tiene gran relevancia para el posicionamiento, por lo que deberemos de separar por coma las palabras clave en orden de relevancia.
La forma de construir esta etiqueta es la siguiente:<meta name="keywords" content="recursos, tutoriales, guias, consejos, diseño, desarrollo, blogging,WordPress, posicionamiento, optimizacion" />
Considero que esta etiqueta es mejor explicarla en una entrada sobre posicionamiento web, por lo que aquí me limito a nombrar su existencia y construcción.
- Charset: Indica la codificación de caracteres que tendrá nuestro documento; puedes leer más en Codificación de caracteres, charset UTF-8
Scripts
En la cabecera del documento también podemos incluir scripts de diferentes lenguajes de programación, pero en especial hojas de estilos, javascript…
Si queremos incluir la librería en nuestro sitio deberemos insertar algo así:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> |
Incluimos la librearía JQuery desde el repositorio de Google.
Por otro lado, si deseamos incluir una hoja de estilos (CSS) la instrucción sería la siguiente:
<link rel="stylesheet" href="ruta_del_fichero/style.css" type="text/css" media="screen" /> |
Realmente todas estas llamadas a ficheros externos y scripts son siempre iguales, con un poco de práctica las manejarás y recordarás con total facilidad.
Hasta aquí queda explicada (aunque por encima) la cabecera de nuestro sitio web.
Seguir con el tutorial
Volver al índice
Anterior: Introducción al HTML
Siguiente: Etiquetas estructurales
