Go to main content
Bypass navigation bar Referencia HTML Tags HTML Tutoriales HTML
Bypass language selection
Bypass location bar

Location: Inicio > Tutoriales HTML > La estructura de un documento HTML

Bypass main content

La estructura de un documento HTML

Con este tutorial aprenderás la estructura de un documento HTML y la forma en que se divide, así como la información que puedes poner en cada uno de esas divisiones. También estableceremos el tipo de documento y las bases para diseñar un documento HTML compatible con el estándar XHTML.

Páginas:12>
Bypass main content

Un documento HTML está básicamente separado en dos segmentos: el encabezado (elemento HTML head) y el cuerpo (elemento HTML body), ambos contenidos por el elemento html. A esto le agregas una declaración del tipo de documento al comienzo y obtienes la estructura básic para una página web.

La decalración !DOCTYPE

Todo documento HTML correctamente escrito comienza con una declaración que define qué tipo de documento es. Ésta declaración se realiza utilizando el tag HTML !DOCTYPE y es la primera cosa en todo el documento. Está pensada para indicar el agente procesador (por ejemplo, navegador, motor de búsqueda, etc.) bajo qué estándar está diseñado el documento que está a punto de procesar.

Una declaración de documento normal para un documento de acuerdo con el estándar XHTML 1.0 estricto (el más recomendado) debería lucir así:

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

Para ver otras declaraciones de documento refiérete a la descripción del tag HTML !DOCTYPE.

El contenedor principal: elemento html

El elemento html actúa como contenedor para todo el documento. Con la excepción del tag HTML !DOCTYPE cada caracter en el documento debe estar situado entre los tags de apertura y cierre del tag html. El elemento html puede tambien ser usado para definir el lenguaje del documento que contiene a través del atributo "lang".

Al escribir código XHTML existen dos cosas que se deben tomar en cuenta. La primera es que el atributo "lang" (para todos los tags que lo soportan) recibe una denominación diferente: "xml:lang" (los códigos de lenguaje siguen siendo los mismos). Como XHTML 1.0 no prohibe el uso del atributo "lang" podemos utilizar ambos con fines de compatibilidad (este no es el caso de XHTML 1.1 donde el atributo "lang" ha sido formalmente desaprobado y por lo tanto no es válido).

La segunda consideración es que el atributo "xmlns" también debe ser definido para el tag html. Un documento HTML común compatible con el estándar XHTML 1.0 Strict debería tener esta definición básica:

Código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
...Head's content...
</head>
<body>
...Body's content...
</body>
</html>

Subsecuentemente, el contenido del elemento html puede ser básicamente dividido en dos partes: el encabezado (elemento HTML head) y el cuerpo (elemento HTML body).

El encabezado del documento

El encabezado de un documento HTML actúa como un contenedor para información particular, la cual es definida a través de un set de elementos. Toda la información contenida en el encabezado del documeto es cargada primero, antes que cualquier otra cosa en el documento, ya que es definida antes que el cuerpo. Dado que todo en el encabezado de un documento HTML es información no visual (a excepción del título), el segmento de encabezado es cargado antes de que el documento pueda ser mostrado, lo cual puede ser útil para definir ciertas características que necesitan ser precargadas (por ejemplo, scripts u hojas de estilos).

El encabezado de un documento HTML está contenido por el elemento HTML head y puede contener algunos de estas definiciones:

  • El título del documento: describe brevemente sobre qué trata el documento. Lee más en la referencia del elemento HTML title.
  • Declaraciones de estilo: grupo de definiciones de clases (hojas de estilos) usadas por otros tags para establecer características visuales. Lee más acerca del elemento HTML style.
  • Scripts: conjunto de funciones declaradas dentro del elemento HTML script para proveer funcionalidad al documento.
  • Declaraciones "meta": declarados a través del tag HTML meta, establecen atributos y valores personalizados para el documento.
  • Vínculos globales: definidos usando el tag HTML link tag designa recursos relacionados al documento actual.

Nota que sólo hemos descripto brevemente los elementos listados arriba. Puedes encontrar más información acerca de su uso en los recursos especificados para cada uno.

Aquí tienes un ejemplo del encabezado de un documento usando los elementos anteriores:

Código
<head>
<title>El código HTML explicado</title>
<meta name="keywords" lang="es" content="HTML, código, explicación" />
<meta name="description" lang="es" content="Explicación completa del código HTML." />
<meta name="Author" content="Patrik Peterson" />
<style>
table {
border-width: 100%;
border-color: black;
}
</style>
<script>
function sum(amount) {
result += amount;
}
</script>
<link rel="index" href="../index.html" />
<link rel="print" href="printer.html" />
</head>
Páginas:12>

Diseño y desarrollo: Latitud29.com

Vínculos y logos|Contacto|Más allá de HTML|Herramientas y recursos|Mapa del sitio|Webmaster|Dona