Un documento HTML se estructura en una cabecera y un cuerpo. Son las que permiten mostrar el título y el icono de de la página en la pestaña, definir las reglas de estilo, con las que se determina su apariencia, añadir metainformación útil que facilite su localización por parte de los buscadores o importar todo tipo de recursos externos.
Las etiquetas que se usará con más frecuencia en la cabecera de un documento HTML son las siguientes:
- <title> Establece el título del documento
- <link> Importa recursos externos, es decir, aquellos que no están incluidos en el propio documento HTML. Se usa para cargar código JavaScript, hojas de estilo, imágenes como la del pequeño icono que aparece al lado del título en la pestaña del navegador.
- <meta> Se la emplea para identificar el autor, dar un breve resumen de lo que trata la página, añadir las palabras clave que mejor representan la información, identificar el juego de caracteres, etc.
- <style> Agrupa las reglas de estilo con las que se determina el aspecto de los elementos mostrados en pantalla, por ejemplo, el color o el tamaño del texto. Estas reglas se escriben en lenguaje CSS, también son las responsables de la distribución de estos elementos en la página, según un diseño o una composición gráfica determinada.
METADATOS
Pues los metadatos, no son más que un conjunto de etiquetas que contienen información acerca del documento web sobre el que trabaja, siendo capaz de analizarlo y clasificar su contenido. Esto hace que la labor de los buscadores sea mas fácil y además, es bueno para que los buscadores coloquen nuestro sitio en los primeros puestos de los resultados de las búsquedas.
Los metadatos serán introducidos en tres meta etiquetas. En orden en el que se escriben por defecto en un documento html, son las siguientes: Meta etiqueta "charset", "autor", "description", "keywords" y "title". Aunque existen más meta etiquetas, no voy a hablar de ellas en este post, no vamos a utilizarlas por el momento, así que sería una perdida de tiempo.
Etiqueta meta charset
Posiblemente de los metadatos mas importantes y explico porqué, lo entenderéis enseguida. A través de esta meta etiqueta definimos el atributo del conjunto de caracteres para que no se interprete de manera incorrecta y veamos en nuestra web la palabra p&a¡gina en vez de página, se visualice la ñ, o cosas por el estilo.
Etiqueta meta author
Sirve para identificar correctamente el autor del sitio web. Su uso es muy importante y solo debe haber una metatag como ésta en la página.
Etiqueta meta description
Como su propio nombre nos indica, su objetivo es describir de qué va nuestro sitio, cuales son sus temas, o sus objetivos…. Este es un metadato esencial porque aparece en los resultados de las búsquedas.
Etiqueta meta keywords
Con esta meta etiqueta declaramos cuales van a ser las palabras clave de nuestra página. En la actualidad esta meta etiqueta a perdido fuerza según declaraciones de Matt Cutts responsable del área anti-spam de Google. Sus declaraciones vienen a decir que Google, no tiene en cuenta actualmente esta meta etiqueta para los ranking de búsquedas.
Etiqueta title
En cuanto a la etiqueta title, hay que decir que técnicamente no es una meta etiqueta. Su contenido va a mostrarse en la parte superior de los navegadores (en la pestaña) y en los títulos de los resultados de búsqueda.
Recursos externos
Los recursos externos son archivos de diversa naturaleza. Para incorporarlos a esta, HTML, proporciona la etiqueta <link>, que deberá usarse con una serie de atributos que determinen su ruta de acceso, la naturaleza de su contenido y el formato en el que está almacenado.
Por ejemplo para cambiar el icono o el favicon de la página utilizaremos la siguiente sintaxis:
<link rel="icon" type="ïmage/x-icon" href="icono1.ico">