English version



 


Tutorial: Estructura de un documento HTML


En este tutorial se mostrará la estructura de un documento HTML (lenguaje de marcas hipertextual) y como se divide, así como el tipo de información que se puede insertar en cada una de estas divisiones. También se definirá el tipo de documento y las bases para diseñar un documento HTML compatible con el código XHTML (lenguaje de marcas hipertextual extensible).

Un documento HTML está básicamente separado en dos segmentos: el encabezado (tag HTML head) y el cuerpo (tag HTML body), ambos contenidos por el tag html. Le agregas a esto una declaración de tipo de documento en la parte superior y obtienes la estructura básica de documento para una página web.

La declaración !DOCTYPE

Todo documento HTML correctamente escrito comienza con una declaración básica que define el tipo del mismo. Esta declaración se hace mediante el tag HTML !DOCTYPE y es la primera cosa que debe aparecer en todo el documento. Esto indica al agente procesador (como por ejemplo, navegadores, motores de búsqueda, etc.) a qué estándar supuestamente obedece el documento que está a punto de procesar.

Una declaración típica para un documento correctamente escrito de acuerdo con el estándar XHTML 1.0 Strict debería hacerse de la siguiente manera:

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

Para ver declaraciones de otros tipos de documentos, ver la referencia para el tag HTML !DOCTYPE.

El contenedor principal: tag html

El tag html actúa como un contenedor para todo el documento. Con la excepción del tag HTML !DOCTYPE cada carácter del documento debería situarse en medio de los tags html de apertura y cierre. El tag html puede también ser usado para definir el lenguaje del documento mediante el atributo "lang".

Al escribir código XHTML hay dos cosas por considerar. La primera es que el atributo "lang" (para todos los tags que lo acepten) recibe una diferente denominación: "xml:lang". Esto no significa que los códigos de lenguaje sean diferentes, solo el nombre del atributo cambia. La segunda cosa por considerar, es que el atributo "xmlns" también debe ser definido para el tag html. Un documento normal compatible con XHTML 1.0 Strict debería tener esta definición básica:

Comienzo del 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">
<head>
...Contenido del encabezado...
</head>
<body>
...Contenido del cuerpo...
</body>
</html>
Fin del código
 

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

El encabezado del documento

El encabezado de un documento HTML actúa como contenedor para mucha información particular que es definida mediante un grupo de tags. Toda la información contenida en el encabezado del documento es cargada antes que el resto, por estar definida antes que el segmento del cuerpo. Dado que todo el contenido del encabezado de un documento es información no visual (a excepción del título), el encabezado se carga antes que el documento pueda ser mostrado, lo cual puede ser útil para definir muchas características que necesiten ser precargadas (por ejemplo, scripts).

El encabezado se encuentra encerrado por el tag HTML head y contiene algunas de estas definiciones de tags:

Nota que sólo hemos descrito brevemente los tags listados anteriormente. Puedes encontrar más información acerca del uso de los mismos en los recursos especificados para cada uno. Observa este ejemplo de encabezado:

Comienzo del código<head>
<title>El c&oacute;digo HTML explicado</title>
<meta name="keywords" lang="es" content="HTML, c&oacute;digo, explicaci&oacute;n" />
<meta name="description" lang="es" content="Explicaci&oacute;n completa del c&oacute;digo HTML." />
<meta name="Autor" content="Juan Rodr&iacute;guez" />
<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>
Fin del código
 

El cuerpo del documento

El cuerpo de un documento HTML es el contenedor para la parte visual del mismo. Todas las cosas escritas aquí serán mostradas cuando el documento sea finalmente graficado. La mayoría de los tags pueden ser insertados en el cuerpo del documento (dentro del tag HTML body) y darán forma a los aspectos visuales del mismo.


Próximo tutorial: Vínculos en HTML >>


Saltar opciones al pie  |   Send to a friend Enviar a un amigo  |  Publicar en del.icio.us Publicar en del.icio.us

Publicar en Digg.com Publicar en Digg.com  |  Archivar en Furl Archivar en Furl  |  Agregar a Yahoo! MyWeb Agregar a Yahoo! MyWeb

Saltar declaraciones W3C | 

XHTML 1.0 Strict Válido  |  CSS Válido ¿Por qué confiar en nosotros? Haz click en las imágenes de la izquierda para ver que tan seriamente escribimos nuestras propias páginas, luego haz tu elección.

Icono de conformidad con el Nivel Triple-A, de las Directrices de Accesibilidad para el Contenido Web 1.0 del W3C-WAI Este sitio web da su mejor esfuerzo por lograr el nivel de conformidad Tiple-A, de las Directrices de Accesibilidad para el Contenido Web 1.0 del W3C-WAI. Si encuentras algún detalle o error que hayamos pasado por alto, no dudes en comunicárnoslo.

El poder de la Web se encuentra en su universalidad. El acceso por parte de todos más allá de la discapacidad es un aspecto esencial. -- Tim Berners-Lee, Director del W3C e inventor de la World Wide Web

 Enlázanos  |  Contáctanos  |  Más allá de HTML  |  Herramientas y recursos  |  Mapa del sitio  |  Webmaster