El elemento <head> es un contenedor de metadatos (datos de datos).

Los metadatos son datos sobre el propio documento HTML. Los metadatos no se visualizan cuando se muestra una página web en el navegador.

En los metadatos definirás el título de documentos, los estilos utilizados, enlaces, scripts empleados y algunas otras informaciones.

Las etiquetas HTML que puedes emplear para definir metadatos son: <title>, <style>, <meta>, <link>, <script> y <base>.

¿Puedo omitir las etiquetas <html> y <body>?

En HTML5, puedes omitir las etiquetas <html>, <body> y <head>.

El siguiente código HTML5 es totalmente válido:

<!DOCTYPE html>
<title>Título de la página</title>
<h1>Esto es un encabezamiento</h1>
<p>Esto es un párrafo.</p>

Sin embargo, yo no te aconsejo que omitas las etiquetas <html> y <body>. El elemento <html> muestra el origen del documento, además es el lugar indicado para que declares el lenguaje del documento:

<!DOCTYPE html>
<html lang="es-ES">

Que especifiques el lenguaje es importante para facilitar la accesibilidad y correcta clasificación de tu web de algunas aplicaciones, como son por ejemplo, los motores de búsqueda.

Si omites <html> y <body> puedes hacer que falle, por código mal escrito, el software DOM/XML.

Por último la omisión de <body> puede provocar errores en navegadores antiguos como IE9.

Omitiendo <head>

En HTML5, puedes omitir también la etiqueta <head>.

Por defecto, los navegadores interpretarán cualquier elemento anterior a la etiqueta <body>, como parte del HEAD.

Si lo deseas, pueden reducir la complejidad del código HTML, omitiendo la etiqueta <head>:

Ejemplo

<!DOCTYPE html>
<html>
<title>Título de la página</title>
<body>
<h1>Esto es un encabezamiento</h1>
<p>Esto es un párrafo.</p>
</body>
</html>

El elemento HTML <title>

Con el elemento <title> defines el título del documento.

El elemento <title> es imprescindible en cualquier documento HTML/XHTML.

Utilizando el elemento <title>:

Mostrarás un título en la pestaña del navegador.
Proporcionarás un título para la página web cuando sea añadida a favoritos.
Darás un título a la página cuando aparezca en los resultados de una búsqueda en los motores de búsqueda.

El elemento HTML <style>

Deberás utilizar el elemento <style> para definir la información sobre los estilos del documento HTML.

En el interior del elemento <style> especificarás como serán mostrados por el navegador los elementos visibles de tu página web.

Ejemplo:

<!DOCTYPE html>
<html>
<title>Título de la página</title>
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
<body>
  <h1>Esto es un encabezamiento</h1>
  <p>Esto es un párrafo.</p>
</body>
</html>

El elemento HTML <link>

Mediante el elemento <link> definirás el enlace a un recurso externo.
El elemento <link> es muy utilizado para acceder a hojas de estilo.

Ejemplo:

<!DOCTYPE html>
<html>
<title>Título de la página</title>
<link rel="stylesheet" href="mystyle.css">
<body>
  <h1>Esto es un encabezado</h1>
  <p>Esto es un párrafo.</p>
</body>
</html>

El elemento HTML <meta>

Utilizarás el elemento <meta> para especificar una descripción, las palabras clave, el autor, y algunas otras informaciones de la página.

Los metadatos son utilizados por los navegadores (le indican cómo mostrar el contenido), por los motores de búsqueda (palabras clave), y por otros servicios web.

Para indicar las palabras claves

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

Para especificar un descripción del contenido de la página

<meta name="description" content="Tutorial gratuito de HTML y CSS">

Para definir el juego de caracteres utilizado

<meta charset="UTF-8">

Para indicar el autor de la página

<meta name="author" content="Jorge Lamarque">

Para recargar la página, por ejemplo cada 60 segundos

<meta http-equiv="refresh" content="60">

Ejemplo

<!DOCTYPE html>
<html>
<title> Utilización de metadatos </title>
<meta name="description" content="Tutorial web gratuito">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Jorge Lamarque">
<meta charset="UTF-8">
<body>
<p>Toda la información meta va antes de la etiquera body.</p>
</body>
</html>

El elemento HTML <script>

Debes utilizar el elemento <script> para definir código Java-Script que deberá ejecutarse del lado del cliente.

Ejemplo

El siguiente script muestra el texto “¡Hola Java-Script!” en un elemento HTML con el id=”demo”, al hacer clic en un botón.

<!DOCTYPE html>
<html>
<title>Webdisenia .:. Ejemplo Java-Script</title>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "¡Hola Java-Script!";
}
</script>
<body>
<h1>Mi página web</h1>
<p id="demo">Un párrafo</p>
<button type="button" onclick="myFunction()">Clic aquí</button>
</body>
</html>

El elemento HTML <base>

La etiqueta <base>, te permite especificar una URL por defecto y un destino por defecto para todos los enlaces relativos de la página web.

Ejemplo

<!DOCTYPE html>
<html>
<title>Webdisenia .:. Ejemplo metadatos</title>
<base href="http://www.webdisenia.com/images/" target="_blank">
<body>
<img src="html5.png">
<p>
Como se ha especificado una URL base, el navegador busca "html5.png" en "http://www.webdisenia.com/images/html5.png"
</p>
<p><a href="http://www.webdisenia.com">Webdisenia</a>
</p>
<p>
El enlace anterior se abre en una ventana nueva, ya que el destino target especificado en base es "_blank".
</p>
</body>
</html>