Jose J. Fernández Programador. Desarrollador web y SEO en León

Curso de HTML: el cabecero de un documento HTML

Jose J. Fernández

Curso HTML

0. La etiqueta <html>

Hemos visto la estructura de un documento HTML y hemos hablado de las etiquetas, pero nos quedaba concretar un par de puntos. Échale un ojo a la plantilla de documento HTML que manejábamos hasta ahora:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Título</title>
	</head>
	<body>
		<p>Este texto sí aparece en la página web. ¿Por qué no lo pruebas?</p>
	</body>
</html>

Si te das cuenta todo está dentro de la etiqueta html, pero nunca hemos dicho nada de ella. Es una etiqueta especial que sólo puede contener una etiqueta head y debajo una etiqueta body. Colocar primero body y luego head sería incorrecto, así como también lo sería la ausencia de cualquiera de las dos, o la inclusión de cualquier otra etiqueta. Más información sobre el elemento html.

1. Cabecero del documento: la etiqueta <head>

Todo documento HTML debe contener un cabecero donde se indican metadatos, es decir, información sobre el propio documento HTML. Se trata de información que en principio no va a mostrarse en el navegador cuando se visualice la página web, pero que describe de alguna manera al propio documento, su contenido o su formato.

A nosotros, como propietarios de la página web nos será de mucha utilidad conocer y controlar la información que incluímos en el cabecero, porque tendrá implicaciones directas sobre otros asuntos que son de nuestro interés, como el posicionamiento en buscadores de la página (salir más arriba en Google cuando la gente busca algo), la accesibilidad y otros parámetros. Los veremos más adelante en el curso.

Hay dos datos que tenemos que incluir obligatoriamente en el cabecero, siendo todos los demás opcionales: el título y la codificación de la página web. Sabemos lo que es el título, pero, ¿y la codificación? Hablamos de ella en la primera entrega del curso, ¿recuerdas todo eso de UTF-8, ANSI y demás? Lo veremos a continuación.

Más información sobre el elemento head.

2. Título de la página: etiqueta <title>

El título de la página es el texto que aparece como título de la pestaña en el navegador. Es una parte importante de la web, que sirve principalmente para describir la página con unas pocas palabras y para ayudar al posicionamiento de la misma. Esto último lo veremos mucho más en detalle en entregas posteriores del curso.

En el título debemos introducir sólo texto sin etiquetas, ya que éstas no tendrán utilidad práctica ni efecto alguno y sólo servirán para ensuciar la apariencia del texto.

3. Codificación: <meta charset="utf-8">

La codificación es el formato binario con el que un navegador interpreta la página. Si guardas una página web como UTF-8 (recuerda la introducción al curso) pero indicas otra codificación distinta en el cabecero, algunos caracteres, letras o símbolos podrían verse de forma incorrecta cuando alguien visita tu página web.

Imagina por ejemplo que las eñes (ñ) que hay en tu página el visitante las ve como Äè. Resulta confuso y difícil de leer, por eso nosotros vamos a asegurarnos de utilizar siempre UTF-8 tanto en el editor -que aprendiste a configurar en la introducción al curso- como en el cabecero del documento.

Mediante esta etiqueta cumplimos con otro de los requisitos de HTML 5, que es indicar la codificación de la página a fin de que todo el mundo la visualice correctamente. Como comentábamos antes, una buena práctica es utilizar siempre UTF-8, que funciona perfectamente para el español, inglés y otros muchos idiomas.

En la entrega anterior del curso habíamos visto que las etiquetas se abrían y que se cerraban. Entonces, ¿por qué esa etiqueta no va cerrada? La etiqueta meta es de las pocas que no se cierran en HTML 5. Fíjate también en que esta etiqueta lleva un atributo llamado charset, cuyo valor es la codificación que utilizamos, en este caso utf-8, pero podría ser ISO-8859-I u otra.

4. Un cabecero mínimo completo

A continuación, un ejemplo de cabecero mínimo completo, que no es sino el que teníamos en la introducción:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Título</title>
	</head>
	<body>
		<p>Este texto sí aparece en la página web. ¿Por qué no lo pruebas?</p>
	</body>
</html>

Fíjate en que la codificación se declara lo primero y después el título. No es realmente necesario que la codificación se declare en primer lugar (HTML no nos obliga a ello), pero sí es conveniente que sea así. Fíjate también en que la etiqueta <meta> no se cierra. Es correcto de esta manera.

Todos los elementos que veremos a continuación son opcionales, e incluirlos o no dependerá de si es necesario en la página web que estemos haciendo, pero en ningún caso será obligatorio.

5. Metadatos: la etiqueta <meta>

Hasta ahora hemos estado indicando el título de la página mediante la etiqueta <title>, pero es posible especificar muchos más metadatos sobre el documento, para lo cual utilizaremos entre otras etiquetas la etiqueta <meta>.

Algunos de los datos que podemos indicar son descripción y palabras clave.

La descripción no debe superar los 150 caracteres como recomendación general, y en las palabras clave incluiremos aquellas relacionadas con el tema principal sobre el que se escribe en la página.

Para indicar la descripción y las palabras clave con la etiqueta <meta> utilizaremos diferentes atributos (revisa la segunda entrega del curso si no recuerdas qué son los atributos): name y content.

Con el atributo name definimos qué dato contiene la metaetiqueta, y con content definimos el dato propiamente dicho. Vamos a ver un ejemplo en el que indicamos mediante etiquetas <meta> la descripción y las palabras clave de la página:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Título</title>
		<meta name="description" content="Curso online gratuito de HTML 5 desde lo básico hasta lo más avanzado.">
		<meta name="keywords" content="HTML5, curso, online, gratis, mooc, desarrollo web, página web, frontend, aprender">
	</head>
	<body>
		<p>Este texto sí aparece en la página web. ¿Por qué no lo pruebas?</p>
	</body>
</html>

Podemos indicar muchos más datos mediante esta etiqueta y más adelante veremos cómo usarlos para hacer que nuestra página web se lleve bien con las redes sociales, principalmente Facebook y Twitter.

6. Relaciones con otros documentos: la etiqueta <link>

A veces también nos interesará indicar que nuestra página web depende de otros documentos en la red o que tiene relación con éstos, como por ejemplo y de forma notable las hojas de estilo. Podemos indicar la dirección de una hoja de estilo mediante la etiqueta <link>. Veamos un ejemplo:

<link rel="stylesheet" href="default.css">

El atributo rel (de relationship) nos sirve para indicar qué tipo de relación guarda con nuestra página el documento al que enlazamos, y escribiendo stylesheet indicamos que se trata de una hoja de estilos CSS. Podríamos indicar otro tipo de relaciones, como versiones de la misma página en otros idiomas:

<link rel="alternate" href="/en" hreflang="en" type="text/html" title="English">

El elemento <link> no se cierra como puedes ver en el ejemplo, y más adelante lo utilizaremos para extender la funcionalidad de la web con herramientas como RSS (sindicación), iconos y otras cosas. Más información sobre el elemento link.

7. Estilo CSS: la etiqueta <style>

Aunque la mayoría de las veces que queramos modificar la presentación o estilo de la página enlazaremos hojas de estilo mediante la etiqueta <link> como vimos antes, también es posible -aunque no recomendable- incluir código CSS dentro de la propia página con la etiqueta <style>.

Esta etiqueta debe ir en el cabecero en la medida de lo posible, aunque funcionará correctamente si la colocamos en algún lugar del cuerpo del documento. Prueba el siguiente ejemplo donde todo el contenido de la página aparecerá en color rojo:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Título</title>
		<style>
			* {
				color: red;
			}
		</style>
	</head>
	<body>
		<p>Texto en color rojo debido a la etiqueta style del cabecero.</p>
	</body>
</html>

Por ahora no debes aprender el código CSS del ejemplo, ya que cuando terminemos el presente curso de HTML habrá un curso de CSS con el que podrás saberlo todo :)

8. Código Javascript: la etiqueta <script>

A veces nos interesará incluir código de programación en el lenguaje Javascript para ampliar la funcionalidad de nuestra página. Podemos hacerlo mediante la etiqueta <script> de la siguiente manera:

<script src="codigo.js"></script>

Es necesario el uso del atributo src siempre que queramos cargar un fichero externo a nuestra página web. En cambio, también podemos escribir ahí mismo el código Javascript tal y como hacíamos con la etiqueta <style>. También como ésta última, la etiqueta <script> debe ir siempre cerrada.

Veamos un ejemplo de código Javascript incrustado:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Título</title>
	</head>
	<body>
		<script>
			document.write("Hola desde Javascript");
		</script>
	</body>
</html>

Si copias ese código en un fichero html y lo abres en tu navegador podrás ver el texto que se escribe desde Javascript. Fíjate en que en este caso, no se indica el atributo src porque no estamos enlazando con un fichero Javascript externo, ya que el código está dentro de la página web.

Como la etiqueta <style>, <script> puede incluirse en el cabecero aunque no es un requisito. De hecho, es recomendable incluir los ficheros Javascript al final del documento, justo antes de cerrar la etiqueta <body> para acelerar la carga de la página cuando los visitantes la vean en su navegador.

Más información sobre el elemento script en la web de la W3C.

Siguiente entrega: Estructura: maquetación de una página en HTML 5

No se mostrará públicamente.

Un enlace a tu blog o página web.