En esta página

Estructura básica de un documento

10 min lectura TextoCap. 1 — Fundamentos de HTML

DOCTYPE

La declaración <!DOCTYPE html> le dice al navegador que versión de HTML estamos usando. En HTML5, esta declaración es muy simple y siempre va en la primera linea del documento.

El elemento html

El elemento <html> es el elemento raiz de toda página web. Todos los demas elementos deben ser descendientes de este elemento. El atributo lang es fundamental para accesibilidad.

Head y Body

El <head> contiene metadatos sobre el documento: título, charset, viewport, enlaces a CSS y scripts. Nada del <head> se muestra directamente en la página.

El <body> contiene todo el contenido visible de la página: textos, imagenes, enlaces, formularios, etc.

Meta tags importantes

Los meta tags proporcionan información sobre la página al navegador y a los motores de busqueda:

  • charset="UTF-8" — Codificacion de caracteres (soporta acentos, enes, etc.)
  • viewport — Configura el viewport para dispositivos móviles
  • description — Descripcion para motores de busqueda y redes sociales

Estructura semántica

En HTML5, usamos elementos semanticos como <header>, <main> y <footer> en lugar de <div> genérico. Esto mejora la accesibilidad y el SEO.

Práctica

  1. Construye un documento completo: Crea un archivo HTML con <!DOCTYPE html>, <html lang="es">, <head> (con charset, viewport, title y description) y un <body> con al menos un <header>, <main> y <footer>.
  2. Experimenta con meta tags: Cambia el contenido del <title> y la meta description, luego verifica que la pestana del navegador refleje el nuevo título.
  3. Enlaza una hoja de estilos: Agrega un <link rel="stylesheet" href="styles.css"> en el <head> y crea un archivo styles.css que cambie el color de fondo del <body>.

En la siguiente leccion veremos las etiquetas más usadas en HTML.

Buena práctica
Siempre incluye el atributo lang en el elemento html para accesibilidad e internacionalizacion.
html
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Descripcion de mi página">
  <title>Título de la página</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Mi sitio web</h1>
  </header>
  <main>
    <p>Contenido principal</p>
  </main>
  <footer>
    <p>Pie de página</p>
  </footer>
</body>
</html>