Las dos partes principales de un documento HTML

Un documento HTML se compone de dos secciones fundamentales: head (cabeza) y body (cuerpo). Cada una cumple una función distinta: el head contiene metadatos para navegadores y buscadores (no visible para el usuario), mientras que el body alberga el contenido que el visitante ve en pantalla. El documento debe estar correctamente estructurado para que los navegadores lo interpreten y muestren adecuadamente.

Estructura básica de un documento HTML

<!DOCTYPE html>
<html>
  <head>
    <!-- Información para navegador y buscadores -->
  </head>
  <body>
    <!-- Contenido visible para el lector -->
  </body>
</html>

Ambas etiquetas (<head> y <body>) deben estar dentro de la etiqueta raíz <html> y cerrarse correctamente con </head> y </body>.

Contenido del <head>

En la cabeza se incluyen:

• <title>: título de la página (aparece en la pestaña del navegador).
• <meta>: autor, palabras clave, descripción para SEO.
• <link>: vincula recursos externos como hojas de estilo CSS.
• <style>: estilos CSS internos.
• <script>: scripts que se ejecutan en el navegador del visitante.

Si falta la sección head, el navegador igualmente muestra el contenido del body, pero se pierden metadatos importantes.

Contenido del <body>

El cuerpo contiene el marcado visible: párrafos (<p>), enlaces (<a>), encabezados (<h1> a <h6>), secciones (<section>), imágenes, formularios, etc. También se colocan aquí scripts del lado del servidor. Sin body, el navegador no renderiza nada.

Declaración DOCTYPE

La declaración <!DOCTYPE html> (en HTML5) debe ser la primera línea del documento, fuera de la etiqueta html. Indica al navegador la versión de HTML usada para renderizar correctamente la página. Aunque se puede omitir, su ausencia puede causar modo "quirks" y visualización incorrecta.