Fundamentos de HTML y CSS

Teoría: Estructura básica de un documento HTML

Cuando creamos una página web, necesitamos seguir una estructura específica para que los navegadores puedan interpretarla correctamente. En esta lección, aprenderemos sobre la estructura básica de un documento HTML y la función de cada una de sus etiquetas esenciales.

A continuación, puedes ver un ejemplo de la estructura mínima que debe tener cualquier página web:

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

Aunque este código parece simple, cada línea tiene un propósito. Vamos a explorarlas una por una.

Declaración del tipo de documento

La primera línea del documento HTML es <!DOCTYPE html>. Su función es informar al navegador que el archivo usa HTML5, la versión más reciente de este lenguaje.

<!DOCTYPE html>

No es una etiqueta HTML como las demás y no se muestra en la página; simplemente indica que estamos usando la versión estándar de HTML.

La raíz del documento

Todo el contenido de la página se encuentra dentro de la etiqueta <html>.

<html lang="es">
  ...
</html>

Aquí el atributo lang="es" indica que la página está escrita en español. Definir el idioma es importante porque ayuda a los buscadores y lectores de pantalla a interpretar el contenido correctamente.

Otros ejemplos de valores para lang:

IdiomaCódigo
Inglésen
Alemánde
Francésfr
Rusoru

Información de la página

Entre las etiquetas <head> y </head> colocamos información que no se muestra directamente en la página, pero que es útil para el navegador y los buscadores.

Codificación de caracteres: <meta charset="UTF-8">

Este elemento le indica al navegador cómo interpretar los caracteres del texto:

<meta charset="UTF-8">

La codificación UTF-8 permite representar correctamente caracteres especiales como tildes (á, é, í, ó, ú) y símbolos específicos de otros idiomas.

Título de la página

El título de la página es el texto que aparece en la pestaña del navegador:

<title>Mi primera página</title>

Por ejemplo, si abrimos la página en un navegador, veremos el siguiente resultado:

Ejemplo del título en el navegador

Contenido visible de la página

Todo lo que el usuario puede ver en la página debe estar dentro de la etiqueta <body>. Esto incluye textos, imágenes, botones, enlaces y cualquier otro elemento visual.

Veamos una estructura sencilla con contenido dentro del <body>:

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

En este ejemplo el <body> contiene:

  • Un título principal (<h1>).
  • Una lista de temas sobre maquetación y CSS (<ul>).

Resumen

  • <!DOCTYPE html> indica que estamos usando HTML5.
  • <html> es la etiqueta que engloba toda la estructura del documento.
  • El atributo lang="es" define el idioma de la página.
  • Dentro de <head> ponemos información que no se muestra directamente pero que es esencial, como:
    • <meta charset="UTF-8"> para definir la codificación de caracteres.
    • <title> para establecer el título de la pestaña del navegador.
  • El contenido visible de la página debe estar dentro de <body>. Aquí se incluyen todos los elementos que los usuarios pueden ver e interactuar, como encabezados, párrafos, imágenes, enlaces y botones.
NavegaciónTeoría

Completado

0 / 18