En el artículo anterior echamos un vistazo a la estructura de un documento HTML y mencionamos que se divide en dos partes, el HEAD y el BODY, ahora vamos a tratar el tema del HEAD mas a fondo.
HEAD traducido del ingles al español significa "cabeza", por eso a esta parte del documento la llamamos cabecera. En el documento HTML comienza con la etiqueta <head> y se indica su final con la etiqueta </head>, se escribe así:
<html>
<head>
Todo lo que esté aquí pertenece al HEAD
</head>
<body>
</body>
</html>El HEAD es la parte donde se incluye la información acerca del documento, podríamos atrevernos a decir que el HEAD es una sección de un documento HTML meramente "técnica e informativa", pues la mayoría de esta información no la muestra el navegador al usuario e inclusive pudiéramos dejarla vacía y esto no afectaría al funcionamiento o la forma en que se visualiza la página, y si bien el HEAD de un documento HTML pudiera ir vacío siempre es mejor darles la suficiente importancia a las etiquetas que el HEAD contiene, mucho mas aun si nuestro objetivo es publicar nuestro trabajo en la web, pues muchas de las etiquetas del HEAD son importantes para los buscadores y para un buen posicionamiento en los resultados de búsqueda.
Bueno vamos al grano y conozcamos las etiquetas del HEAD.
TITLE:
<head>
<title>Título de la página</title>
</head>Un elemento del HEAD visible desde el navegador, muy importante para los buscadores pues es el texto que se visualiza en los resultados de búsqueda.
Me parece importante señalar que este elemento nada tiene que ver con el nombre del archivo pues son dos cosas totalmente distintas e independientes una de la otra, por ejemplo podríamos tener un archivo llamado index.html y en el código un <title>Página principal - Bienvenido</title> y esto estaría bien.
META:
<head>
<meta name="description" content="Artículos sobre HTML" />
<meta name="keywords" content="HTML,manual de HTML" />
<meta name="author" content="Israel Romero" />
<meta http-equiv="refresh" content="30" />
</head>Una etiqueta con atributos. La función de esta etiqueta va a depender totalmente de los atributos y valores que contenga, en nuestro ejemplo las primeras 3 tienen los atributos "name" y "content" pero tienen valores diferentes, la primera (con valor "description") indica la descripción de la página, la segunda indica las palabras clave con la que los buscadores deberían de relacionarla, en el ejemplo se pretende que los buscadores muestren la pagina en sus resultados cuando alguien busque "HTML" o "manual de HTML", la tercera incluye el nombre del autor de la página. Ahora la cuarta etiqueta tiene atributos diferentes, en este caso esta etiqueta le dice al navegador que la página se debe actualizar cada 30 segundos. Hay algunos otros argumentos posibles para la etiqueta <meta>, pero el tema principal aquí es el HEAD por lo que tocará hablar del META mas a fondo en otro post.
STYLE:
<head>
<style type="text/css">
p {color:blue;}
</style>
</head>Con esta etiqueta se puede incluir código CSS dentro del documento HTML, en este ejemplo se le da un color azul a los párrafos, es decir a los fragmentos de texto contenidos por las etiquetas <p> </p>.
SCRIPT:
<head>
<script type="text/javascript">
document.write("Hola")
</script>
</head>Otra mas para agregar código de lenguajes ajenos a HTML, en este ejemplo agregamos codigo de javascript que lo unico que hace es mostrarnos un texto que dice "Hola".
Bueno creo que con estas 4 etiquetas de ejemplo queda mas claro lo que es el HEAD y su función en un documento HTML, otras etiquetas que pueden ir en esta sección son:
<base>
<link>
<noscript> </noscript>Solo las menciono porque de explicarlas se extendería mas el artículo.
Cómo crear una página HTML
Etiqueta BODY - Cuerpo de una página HTML