Elemento raíz y metadatos

En esta lección se comenta el preámbulo !DOCTYPE, el elemento raíz <html> y los elementos del bloque de metadatos <head>. El bloque de contenido <body> se comenta en la lección Secciones.

Preámbulo !DOCTYPE

El preámbulo !DOCTYPE es una etiqueta obligatoria:

<!DOCTYPE html>

En las versiones de HTML anteriores a HTML 5, su función era indicar la versión de HTML empleado en el documento. Cada versión y variante del HTML tenía definido su propio !DOCTYPE

Estos son algunos ejemplos de !DOCTYPE obsoletos:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

A partir de HTML 5 ya no existen las versiones de HTML, así que el !DOCTYPE no es realmente necesario. Pero como algunos navegadores aplican reglas especiales si el documento no incluye el !DOCTYPE, la recomendación HTML sigue manteniendo el preámbulo !DOCTYPE como obligatorio, pero simplificado al máximo.

Elemento raíz <html>

El elemento raíz de una página web es el elemento <html>, que abarca todo el documento excepto la declaración de tipo de documento inicial.

El elemento <html> contiene dos subelementos: el bloque de metadatos <head> y el bloque de contenido <body>.

Este es un ejemplo de documento HTML con dichos elementos:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>HTML</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="estilo.css">
</head>

<body>
  <p>Esta página web es una página HTML válida.</p>
</body>
</html>

Cabecera <head>

El elemento <head> contiene información de carácter general (metadatos) que no se muestra en la ventana del navegador. Esta información se recoge en los elementos <title>, <base>, <link>, <meta> y <style>.

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

El elemento <title> contiene el título del documento. Es un elemento obligatorio que debe contener únicamente texto. Normalmente, los navegadores muestran ese texto en la pestaña del navegador. Como las pestañas son pequeñas, se suele mostrar solamente el principio del texto. Situando el ratón sobre la pestaña se suele mostrar un cuadro de texto flotante con el título completo.

Este es el elemento <title> de esta página:

  <title>Metadatos. HTML. Páginas web HTML y hojas de estilo CSS. Bartolomé Sintes Marco</title>

Base de los enlaces: <base>

El elemento vacío <base> contiene una URL (mediante un atributo href) que sirve de referencia para el resto de URLs enlazadas en el resto del documento. Este elemento no se suele utilizar apenas.

Meta: <meta>

Los elementos vacíos <meta> no tienen un propósito definido. Pueden contener cualquier tipo de información, pero el agente que recibe la página web debe ser capaz de interpretar esa información.

Algunos elementos <meta> son interpretados correctamente por todos los agentes, por ejemplo el que indica el juego de caracteres de la página web:

  <meta charset="utf-8">

Otra etiqueta <meta> cuyo uso se ha extendido en los últimos años es la que indica a los sistemas de pantallas de alta densidad que deben usar como ancho del documento el ancho de pantalla del dispositivo.

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

Propiedades de estilo: <style>

El elemento <style> permite incluir en una página web declaraciones de estilo que se aplican al propio documento, como se explica en la lección Hojas de estilo en cascada. No se aconseja el uso de esta etiqueta y en este curso se recomienda utilizar siempre hojas de estilo independientes.