No. 6 de 22 de articulos. HTML5

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.

Pulsa en el enlace “mas” situado un poco más adelante para seguir leyendo el articulo…

El formato de la etiqueta es el siguiente:

<head>
  … elementos o etiquetas que componen el encabezado del documento html….
</head

Entre las etiquetas destacables 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. Tambien 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 busqueda 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 busqueda para la pagina, mientras que otros tipos de datos podrian 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 Latin. 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 estan 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>


Navegacion SeriesAnterior en la serie...Siguiente en la serie...

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies