Lenguaje HTML/Estructura de un documento HTML

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>
<html>
  <head>
    <!-- 
      Contiene los metadatos, configuraciones, enlaces a recursos externos 
      y el título del documento que procesa el navegador. 
    -->
  </head>
  <body>
    <!-- 
      Contiene toda la estructura y elementos visuales de la interfaz 
      con los que interactúa el usuario final. 
    -->
  </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).

Elemento doctype

El elemento doctype define el tipo de documento. Su único propósito es evitar que el navegador cambie al denominado «modo de compatibilidad» (en inglés quirks mode) al renderizar un documento; es decir, el doctype <!doctype html> garantiza que el navegador se esfuerce al máximo por seguir las especificaciones pertinentes, en lugar de utilizar un modo de renderizado diferente que sea incompatible con algunas de dichas especificaciones.

<!doctype html>

Elemento html

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

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

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

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

Si queremos crear nuestra primera página web en HTML, con el título «Mi primera página», y el texto «Hola mundo», el código sería el siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi primera página</title>
</head>
<body>
    <p>Hola mundo</p>
</body>
</html>