La etiqueta HEAD
Como se ha explicado anteriormente una de las partes principales en la estructura de un documento web, es la sección de cabecera del mismo, la cual se define mediante la etiqueta <head></head>. La explicación formal de esta etiqueta es que sirve de contenedor para el resto de etiquetas que puede contener esta sección.
El formato de la etiqueta es el siguiente:
<head> … elementos o etiquetas que componen el encabezado del documento html…. </head
Entre las etiquetas destacadas que puede contener la sección de encabezado, se pueden encontrar las siguientes:
La etiqueta <title>
la etiqueta <title> “titulo”, sirve para definir el titulo del documento, siendo requerida u obligatoria en todos los documentos. El titulo es el único elemento de la sección encabezado que es visible y normalmente los navegadores lo visualizan en la barra de titulo de la ventana, o en caso de ser un navegador que muestre pestañas, se muestra como titulo de la pestaña. También es usada por los navegadores para añadir la página a su agenda de favoritos con el titulo especificado y por ultimo los motores de búsqueda la utilizan para indexar la pagina.
El formato de la etiqueta es el siguiente:
<head> <title>Titulo del documento</title> <head>
La etiqueta <meta>
La etiqueta <meta> sirve para definir datos (“metadatos”) sobre el documento web o html, estos datos no son visualizados por el navegador, ya que se encuentran incluidos en la sección de encabezado y se suelen utilizar para establecer valores como palabras claves (“ keywords “), descripción de la página, autor de la misma, última fecha de modificación, etc. Estos datos son utilizados por los navegadores por ejemplo, para recargar la página o establecer valores de visualización de la misma. Los buscadores suelen utilizar las keywords para establecer valores de búsqueda para la pagina, mientras que otros tipos de datos podrían ser utilizados por otros tipos de servicio web.
el formato de la etiqueta es el siguiente:
<meta atributo=valor >
Entre los atributos a destacar podemos encontrar los siguientes:
charset: este atributo permite establecer el conjunto de caracteres que ha de utilizar el navegador para visualizar la información del documento HTML que se esta representando.
La sintaxis para definir esta etiqueta con el atributo charset es la siguiente:
<meta charset = “ conjunto de caracteres “ >
Los conjuntos de caracteres que más se suelen utilizar son UTF-8 y ISO-8859-1, que se corresponden con la codificación Unicode y el juego de caracteres para el alfabeto Latín. el siguiente ejemplo establece un juego de caracteres unicode para el documento.
<html>
<head>
<title>Aprendo en casa, Ejercicios HTML</title>
<meta charset=”UTF-8”>
</head>
<body>
</body>
</html>name y content: estos atributo permite definir pares de datos, es decir un nombre de valor con su respectivo valor o contenido. el atributo name sirve para establecer el nombre del dato que se quiere definir, mientras que content sirve para establecer el valor o contenido que se le quiere dar al dato. Entre los datos que se suelen utilizar están application-name, author,description, generator y keywords.
| name (“Nombre de dato”) | Descripción |
| application-name | se utiliza para definir el nombre de la aplicación de la cual forma parte el documento web. |
| author | se utilizar para definir el nombre del autor del documento web. |
| description | se utiliza para definir una descripción del documento web, es utilizada por los motores de búsqueda, para establecer resultados. |
| generator | se utiliza para especificar el nombre del programa con el que se ha creado el documento web. |
| keywords | se utiliza para indicar una serie de términos o palabras que sirven para establecer categorías en la cual el documento web puede ser incluido. Suele ser utilizada por los motores de búsqueda para establecer búsquedas y categorías de los documentos. |
El siguiente ejemplo muestra el uso de la etiqueta <meta> en conjunto con los atributos comentados anteriormente:
<html>
<head>
<title>Ejercicios y prácticas HTML , aprendoencasa.com</title>
<meta charset=”ISO-8859-1”>
<meta name=”application-name” content=”Ejercicios y prácticas 1.0”>
<meta name=”author” content=”aprendoencasa.com”>
<meta name=”description” content=”Prácticas y ejercicios de HTML”>
<meta name=”generator” content=”aprendoencasa.es”>
<meta name=”keywords” content=”ejercicios, practicas, programacion, html, etc”>
</head>
<body>
</body>
</html>http-equiv: este atributo se suele utilizar para especificar y similar atributos de cabecera del protocolo HTTP, se utiliza estableciendo un valor para el atributo al igual que el atributo anterior, entre los cuales se pueden destacar los siguientes: content-type, default-style y refresh.
| http-equiv | Descripción |
| content-type | se utiliza para especificar el juego de caracteres de codificación del documento. |
| default-style | se utiliza para especificar la hoja de estilos preferida. |
| refresh | se utiliza para establecer un intervalo de refresco del documento web, el cual sera actualizado por el navegador transcurrido el tiempo especificado. |
El siguiente ejemplo muestra el uso de la etiqueta <meta> en conjunto con los atributos comentados anteriormente:
<html>
<head>
<title>Ejercicios y prácticas HTML , aprendoencasa.com</title>
<meta charset=”ISO-8859-1”>
<meta name=”application-name” content=”Ejercicios y prácticas 1.0”>
<meta name=”author” content=”aprendoencasa.com”>
<meta name=”description” content=”Prácticas y ejercicios de HTML”>
<meta name=”generator” content=”aprendoencasa.es”>
<meta name=”keywords” content=”ejercicios, practicas, programacion, html, etc”>
<meta http-equiv=”refresh” content=”400”>
<meta http-equiv=”content-type” content=”text/html; charset=ISO-8859-1”>
</head>
<body>
</body>
</html>
Un saludo y gracias por vuestra visita!!!
