Estructura de un documento HTML

Estructura de un documento HTML

Estructura de un documento HTML

La estructura de un documento HTML consta básicamente de cuatro partes:

1. La declaración del tipo de documento.
2. Inicio y fin del código
3. La cabeza del documento.
4. El cuerpo del documento.

Estructura de un documento HTML

Estructura básica de un documento HTML
Estructura básica de un documento HTML

1. Declaración del tipo de documento (Document Type Definition o DTD)

La primera línea de código para una página web es lo que se denomina la declaración del tipo de documento, o DTD.

Con la llegada de la versión 5 de HTML, declarar el tipo de documento es cuestión de solo un símbolo y dos palabras. Basta indicar que es de tipo HTML mediante la instrucción:

<!DOCTYPE HTML>

Con esta instrucción, el navegador sabe que el contenido del documento debe interpretarse como una página web (HTML) que está realizada utilizando las instrucciones propias de la versión 5 del lenguaje.

Previo a la versión 5 de HTML, la declaración del documento era con una sentencia mas larga, donde se tenía que especificar si se utilizaría HTML o XHTML, así como si se utilizaría el lenguaje de forma Transicional o Estricta.

Como un poco de historia, en la versión 3.2 del lenguaje HTML (La primera versión desarrollada y estandarizada por el W3C, en Enero de 1997) contenía algunas etiquetas y atributos para dar formato a los elementos del documento. Por ejemplo, existía la etiqueta <font></font>, con la que se podía dar formato como tipo de letra y tamaño al texto:

<font face=”Arial” size=”2″ color=#000000″>Texto color negro</font>

En el mismo año, en Diciembre, el W3C liberó la versión 4 de HTML, donde se omitieron las etiquetas y atributos que daban formato a los objetos de la página, favoreciendo el uso de los Estilos en Cascada (CSS).

Sin embargo, era posible seguir utilizando algunas de estas etiquetas y atributos, pero era necesario declarar el documento como de tipo Transicional. En caso de omitir estas etiquetas y atributos, se declaraba como Estricto.

La utilización correcta de estos términos es necesaria para que los navegadores muestren de manera adecuada el contenido de la página.

HTML

Versión 5:
<!DOCTYPE HTML>

Versión 4 Transicional
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

Versión 4 Estricto:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

XHTML

Versión Transicional:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

Versión Estricto:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

En caso que se vaya a trabajar en un documento realizado con anterioridad y se haya utilizado en este la declaración de documento para HTML 4 o XHTML, solo hay que contemplar que si es Estricto, no se deberá dar formato a las instrucciones mediante atributos. De hecho, aunque sea Transicional, es mucho mejor utilizar estilos en cascada.

Si el documento fuese XHTML, en las instrucciones que no se cierran, como <hr>, <br> e <img>, es necesario colocar al final de la instrucción un espacio en blanco seguido de una diagonal, siendo una especie de autocierre:

<hr />, <br /> e <img />.

Esto debería realizarse incluso con HTML 5, sin embargo no es considerado error omitirlo.

2. Inicio y fin del código <html></html>

El inicio y el fin del código de la página se determina con la apertura y cierre de la instrucción html: <html> </html>. Todo lo que se encuentra entre la apertura y cierre de esta es el código de la página.

3. La cabeza del documento <head></head>

En el bloque <head></head> se incluyen las instrucciones especiales para el Navegador, como pueden ser el juego de caracteres que utiliza la página, los datos del autor, el título de la página, instrucciones para los motores de búsqueda o el llamado de archivos para que realicen algo en la página, por ejemplo los archivos de Estilos en Cascada.

En esta parte del documento debemos colocar algunas instrucciones de forma predeterminada:

Metadatos
<meta>

Es indispensable indicar el juego de caracteres que utilizaremos mediante la instrucción meta y el atributo charset, el estándar actual es UTF-8:

<meta charset=”utf-8″>

Dado que nuestro idioma cuenta con acentos, eñes y diéresis, es de gran importancia emplear el atributo charset de manera correcta, para que no aparezcan símbolos extraños en vez de alguno de los elementos propios del español.

Hasta hace algunos años, era común utilizar otro juego de caracteres: iso-8859-1, que es el juego de codificación del Alfabeto Latino, también identificado como Western Latin 1. Era el juego de caracteres estándar para nuestra región antes de HTML 5, de forma que en sitios realizados con anterioridad podríamos encontrar la siguiente línea:

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>

Con este juego de caracteres, las palabras acentuadas, eñes y caracteres especiales dentro del código de una página web debían escribirse con el nombre de la entidad asignado por The International Standards Organization (ISO).

Los caracteres más comunes son:

Á -> &Aacute;
É -> &Eacute;
Í -> &Iacute;
Ó -> &Oacute;
Ú -> &Uacute;
á -> &aacute;
é -> &eacute;
í -> &iacute;
ó -> &oacute;
ú -> &uacute;
Ñ -> &Ntilde;
Ñ -> &ntilde;
Ü -> &Uuml;
Ü -> &uuml;

De forma que para escribir la palabra árbol en código, sería : &aacute;rbol

Título
<title></title>

En medio del bloque de la instrucción title se incluye el título de la página, el cual aparece en la pestaña o barra superior del navegador:

Título de una página web
Título de una página web

4. Cuerpo del documento <body></body>

En medio del bloque de la instrucción body ingresamos todas las instrucciones que dan la estructura y contenido de la página web.

A diferencia de las instrucciones que se incluyen dentro del bloque de la instrucción head, lo que se incluye dentro de body es visible en la pagina web.

Buena práctica

Comentarios

Es altamente recomendable escribir comentarios dentro de nuestro código. Estos comentarios no son visibles en la página, pero nos sirven para dejar recordatorios de cómo y por qué realizamos algo.

Su estructura de entrada es un signo de menor que, seguido por un signo de admiración que se cierra y dos guiones medios (<!- –).

A continuación va el comentario

Cierra con dos guiones medios seguidos por un signo de mayor que (– ->).

See the Pen comentario by Miguel Méndez (@codigo-web) on CodePen.0

Si la página es muy pequeña y tiene poco código, quizá no tenga demasiado sentido poner comentarios, pero a medida que crece en complejidad, pasa algún tiempo, o alguien más la revisa o modifica, el haber dejado comentarios ahorrará tiempo y esfuerzo.

Padres e hijos

Al ir escribiendo el código de la página, se van formando bloques con las etiquetas. En el siguiente ejemplo, se encuentra la etiqueta <body> </body> envolviendo un título (<h1></h1>) y un párrafo (<p></p>):

Padres e Hijos
Padres e Hijos

Así, la etiqueta <body></body> se dice que es el padre de <h1></h1> y de <p></p>, por tanto <h1></h1> y <p></p> son hermanos.

Es una buena práctica indentar (dejar un espacio en blanco a la izquierda, utilizando la tecla Tab) el código de los hijos con relación al padre:

Indentado
Indentado

De esta forma, a simple vista, se puede revisar qué elementos son hijos de qué elemento. Esto, aunado con comentarios, logra facilitar la lectura del código.

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.
¿Te fue útil el artículo? Por favor ayúdanos a difundirlo compartiéndolo a través de tus redes sociales.

Autor: Miguel Méndez

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.

Déjanos un comentario

Sé el primero en comentar

avatar
wpDiscuz