Lenguaje HTML/Estructura de un documento HTML

De Wikilibros, la colección de libros de texto de contenido libre.
Ir a la navegación Ir a la búsqueda
← El código Estructura de un documento HTML Formateo de texto →

En esta sección conoceremos los cuatro elementos básicos que forman la estructura de un documento HTML. Pero antes de nada veamos el esqueleto de un documento HTML vacío:

<!DOCTYPE>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

La primera línea está reservada al DOCTYPE (tipo de documento), después viene el documento HTML, que está dividido en dos secciones: head (cabecera) y body (cuerpo).

DOCTYPE[editar]

Define el tipo de documento.
Este elemento, que muchos webmasters obvian (incorrectamente), le indica al navegador la versión y tipo de HTML empleado en el documento. De esta forma, el navegador usará el modelo de renderización adecuado al tipo de documento.

Para HTML 4.01 existen 3 tipos de DOCTYPE:

  • strict: este DOCTYPE es el que contiene la definición de HTML recomendada por el W3C.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
  • transitional: este DOCTYPE es igual al strict, más algunos elementos y atributos antiguos que han quedado obsoletos, pero que se conservan para mantener la compatibilidad.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
  • frameset: este DOCTYPE es igual al transitional más los elementos específicos para la creación de marcos.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
        "http://www.w3.org/TR/html4/frameset.dtd">

Para HTML 5 existe un formato unificado:

<!DOCTYPE html>

De no poner el DOCTYPE, el navegador interpretará el código HTML escrito tal y como le parezca mejor. Se obtendrán resultados imprevistos e inconsistentes que podrían variar incluso entre dos versiones de un mismo navegador. Por lo tanto, lo mejor es poner siempre el DOCTYPE correcto.

Elemento html[editar]

Delimita el documento HTML, indicando al navegador el comienzo y fin del mismo.
Sus etiquetas son: <html> (siempre al comienzo despues del DOCTYPE) y </html> (siempre al terminar el documento)
Ambas etiquetas son opcionales pero se recomienda usarlas de todos modos.

Elemento head[editar]

En inglés, head significa cabeza y su función es delimitar la cabecera del documento.
Sus etiquetas son: <head> y </head>. Al igual que las etiquetas <html></html>, ambas son opcionales pero se recomienda su uso.
La cabecera es la sección apropiada para incluir información sobre el documento, la mayoría de la cual no será mostrada a los lectores. Para incluir esta información tenemos diversos elementos, de momento solo comentaremos el más importante:

Elemento title[editar]

Indica el título del documento. En general, los navegadores modernos lo muestran en la barra de título de la ventana.
Sus etiquetas son: <title> y </title> (ambas obligatorias), por ejemplo:

<html>
  <head> 
    <title>Turismo en sudamérica</title>
  </head>
  ...
</html>

Elemento body[editar]

Delimita el cuerpo del documento.
Aquí van todos los contenidos que queremos mostrar a los lectores de nuestra página (texto, imágenes, etc...)
Sus etiquetas son: <body> y </body>, para delimitar el comienzo y el fin, respectivamente, del cuerpo de nuestro documento.

Continuando con el documento de arriba:

...
<body>
  El turismo en sudamérica...
</body>
...

La etiqueta <body> puede tener los siguientes atributos:

  • text="..." color del texto
  • link="..." color de enlaces no visitados
  • vlink="..." color de enlaces visitados
  • alink="..." color del link activo
  • bgcolor="..." color del fondo
  • background="..." imagen de fondo

Ejemplo[editar]

Si queremos crear nuestra primera página web en HTML 4.01 estricto, con un título original "Mi primera página", y un texto igualmente original "Hola mundo", el código sería el siguiente:

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Mi primera página</title>
  </head>
  <body>
    <p>Hola mundo</p>
  </body>
</html>