Estructura de un documento HTML

Como se ha indicado en la parte de introducción, un documento HTML está formado por un conjunto de etiquetas que especifican la estructura y dotan de contenido al documento. La disposición de las etiquetas deben seguir unas pequeñas normas que son comunes a todos los documentos HTML. Así, un documento se compondrá de tres partes:

  1. Una declaración de tipo de documento o doctype
  2. Una sección de cabecera, delimitada entre las etiquetas <head> y </head>
  3. Un cuerpo, donde se incluirá el contenido real del documento, delimitado por las etiquetas <body> y </body>

A continuación se muestra un ejemplo de código donde se puede apreciar la estructura básica de un documento HTML5.



<!doctype html>
<html>
<head>
<title>Estructura de un documento HTML</title>
</head>
<body>
<h1>Estructura de un documento HTML</h1>
<p>Como se ha indicado en la parte de introducción, un documento HTML está formado por un conjunto de etiquetas...</p>
</body>
</html>

Doctype o declaración de tipo de documento

Se trata de un elemento obligatorio que debe aparecer justo al principio de un documento html (antes de la etiqueta <html>). En versiones anteriores a HTML 5 esta declaración era más compleja, con una forma parecida a lo siguiente:



<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xthml1/DTD/xthml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" >

Sección de cabecera o HEAD

Contiene información sobre el propio documento o «metadatos» (datos sobre los datos). Esta información no va a ser visible para el navegador (salvo el elemento <title>) pero es de gran importancia para otras herramientas como robots de búsqueda, herramientas de indexación, etc. Además, aquí figurarán los enlaces a hojas de estilo CSS y ficheros con código javascript.

Algunos elementos que aparecerán en esta sección son:

  • <title> o título del documento: Será el texto que aparecerá en la barra superior del navegador cuando el usuario visite la página.
  • <address>: proporciona información sobre el creador de la página.
  • <meta>: permite especificar metadatos.
  • <link>: se utiliza para describir los mecanismos y organizar la navegación del documento. También permite apuntar a documentos alternativos.

Cuerpo del documento o BODY

Aquí se ubicará el contenido de la página con la información que será visualizada por el navegador del usuario.