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.
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.
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>
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>.
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>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.
Los elementos vacíos <link> enlazan a otros documentos para diferentes fines. El uso más habitual es para enlazar a hojas de estilo, aunque puede tener muchos usos.
Este es un ejemplo de enlace <link> a una hoja de estilo:
<link rel="stylesheet" href="estilo.css">Nota: En versiones anteriores de HTML, los enlaces a las hojas de estilo debían contener el atributo type con el valor text/css, el tipo MIME correspondiente a las hojas de estilo, pero en HTML no es necesario incluir este atributo.
Este es un ejemplo de enlace <link> a un favicon:
<link rel="icon" href="favicon.ico">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">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.