Logo de JSCamp

La Estructura Básica de HTML

Al finalizar esta clase serás capaz de:

  • ✅ Entender la estructura fundamental de un documento HTML
  • ✅ Conocer la función de las etiquetas <head> y <body>
  • ✅ Implementar metadatos esenciales para tu página web
  • ✅ Crear una base sólida para tu primera página web

🧠 La Cabeza del Documento: <head>

La etiqueta <head> es como el cerebro de tu documento HTML. Contiene información crucial que no es visible para el usuario, pero que es fundamental para el funcionamiento de la página.

💡 Dato importante: Si pones texto directamente en <head>, no aparecerá en la página. Su función es describir el documento, no mostrarlo.

📋 Elementos esenciales del <head>

1. Codificación de caracteres

<meta charset="UTF-8" />

¿Para qué sirve?

  • Permite mostrar correctamente tildes, eñes, símbolos y emojis
  • Sin esto verías caracteres extraños como ñ en lugar de ñ

2. Viewport para dispositivos móviles

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

¿Para qué sirve?

  • Hace que tu página se vea bien en móviles y tablets
  • Es fundamental para el diseño responsive
  • Le dice al navegador cómo escalar la página en diferentes pantallas

3. Título de la página

<title>DevJobs - Inicio</title>

¿Para qué sirve?

  • Aparece en la pestaña del navegador
  • Se muestra en los resultados de Google
  • Debe ser descriptivo y único para cada página

4. Descripción para buscadores

<meta
  name="description"
  content="Encuentra las mejores ofertas de trabajo para desarrolladores en DevJobs."
/>

¿Para qué sirve?

  • SEO: Google la usa en los resultados de búsqueda
  • Aparece como el texto descriptivo debajo del título
  • Debe ser atractiva y resumir el contenido de la página

🔍 Ejemplo práctico: Si buscas “midudev” en Google, la descripción que aparece debajo del título proviene de esta metaetiqueta.

👁️ El Cuerpo del Documento: <body>

La etiqueta <body> es donde vive todo el contenido visible de tu página web. Es lo que los usuarios realmente ven e interactúan.

🎨 ¿Qué va dentro de <body>?

Tipo de contenidoEjemplos
TextoPárrafos, títulos, listas
MultimediaImágenes, videos, audio
InteractivosFormularios, botones, enlaces
EstructuraNavegación, secciones, artículos

🏗️ Construcción del marcado

En <body> es donde construiremos toda la estructura de DevJobs:

  • Header con navegación
  • Secciones de contenido
  • Formularios de búsqueda
  • Listado de trabajos
  • Footer

📝 Estructura completa básica

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>DevJobs - Inicio</title>
    <meta
      name="description"
      content="Encuentra las mejores ofertas de trabajo para desarrolladores en DevJobs."
    />
  </head>
  <body>
    <!-- Aquí va todo el contenido visible -->
    <h1>¡Hola mundo!</h1>
    <p>Este es mi primer documento HTML.</p>
  </body>
</html>

Sobre el atributo lang

El atributo lang="es" en la etiqueta <html> es importante por varias razones:

  • Accesibilidad: Los lectores de pantalla usan el valor de lang para pronunciar correctamente el contenido según el idioma. Sin este atributo, un lector de pantalla podría pronunciar palabras en español con acento inglés, por ejemplo.
  • SEO: Los motores de búsqueda usan lang para entender el idioma del contenido y mostrar tu página a usuarios que buscan en ese idioma.
  • Navegadores: Algunos navegadores pueden ofrecer traducción automática basándose en el atributo lang.

Ejemplos de valores comunes:

  • lang="es" - Español
  • lang="en" - Inglés
  • lang="fr" - Francés
  • lang="pt" - Portugués

Importante: Si tienes contenido en diferentes idiomas dentro de la misma página, puedes usar lang en elementos específicos: <p lang="en">Hello world</p> dentro de una página en español.