HTML Course 3. Basic structure of an HTML document

1. Visión general de la estructura básica

Un documento HTML se compone de varias secciones anidadas que definen tanto metadatos como el contenido visible. Los bloques principales son:

• Declaración del tipo de documento (DOCTYPE)
• Elemento raíz <html> con atributo lang
• Sección de metadatos <head>
• Sección de contenido <body>

2. Declaración del tipo de documento (DOCTYPE)

Al inicio debe ir siempre la declaración que indica la versión de HTML:

<!DOCTYPE html>  <!-- HTML5 -->
  

Esta instrucción asegura que el navegador interprete el documento en modo estándar.

3. El elemento raíz <html>

Envuelve todo el contenido. Es importante indicar el lang para accesibilidad y motores de búsqueda:

<html lang='es'>
  

Opcionalmente pueden añadirse otros atributos, como dir='rtl' para idiomas de derecha a izquierda.

4. Metadatos en <head>

Aquí van los elementos que no se muestran directamente, pero configuran la página:

• <meta charset='UTF-8'>: codificación de caracteres
• <title>: título de la pestaña o ventana
• <meta name='viewport' content='width=device-width, initial-scale=1.0'>: responsive
• <link>: enlace a hojas de estilo externas (CSS)
• <script>: scripts que afecten al documento

<head>
  <!-- Define la codificación para caracteres especiales -->
  <meta charset='UTF-8'>

  <!-- Título que aparece en la pestaña del navegador -->
  <title>Mi Primera Página HTML</title>

  <!-- Ajuste para dispositivos móviles -->
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>

  <!-- Link a una hoja de estilo externa -->
  <link rel='stylesheet' href='styles.css'>

  <!-- Script que se carga antes del cierre del head -->
  <script src='head-script.js'></script>
</head>
  

5. Contenido visible en <body>

Dentro de <body> colocamos toda la estructura de la página:

• Encabezados (<h2>-<h6>)
• Párrafos, listas, tablas, formularios
• Imágenes, vídeos y otros medios
• Enlaces y botones
• Scripts que modifiquen el DOM al final

<body>
  <!-- Encabezado principal de la página -->
  <h2>Bienvenido a mi sitio</h2>

  <!-- Un párrafo descriptivo -->
  <p>Esta es una demostración de la estructura básica de un documento HTML.</p>

  <!-- Lista de navegación -->
  <ul>
    <li><a href='#inicio'>Inicio</a></li>
    <li><a href='#about'>Sobre mí</a></li>
    <li><a href='#contacto'>Contacto</a></li>
  </ul>

  <!-- Imagen con texto alternativo -->
  <img src='logo.png' alt='Logo de mi sitio'>

  <!-- Script al final para mejorar rendimiento -->
  <script src='main.js'></script>
</body>
  

6. Ejemplo completo mínimo

Una página HTML mínima y válida:

<!DOCTYPE html>
<html lang='es'>
<head>
  <meta charset='UTF-8'>
  <title>>Página Mínima</title>
</head>
<body>
  <p>¡Hola, mundo!</p>
</body>
</html>
  

7. Buenas prácticas

• Indentación consistente (2 o 4 espacios).
• Comentarios claros para cada sección.
• Especificar siempre charset y viewport.
• Colocar los scripts al final del <body> o con defer.
• Usar atributos semánticos (alt, title, lang).
• Evitar atributos obsoletos (por ejemplo, bgcolor en tablas).