#03 Tu primera página HTML#03 Tu primera página HTML

Etiquetas: las marcas de HTML

HTML significa HyperText Markup Language, «lenguaje de marcado de hipertexto». Marcado quiere decir que marcas el texto para decir qué es cada trozo, igual que harías con un subrayador de colores en unos apuntes: amarillo para títulos, verde para definiciones…

En HTML, las marcas son las etiquetas: palabras entre los signos < y >.

<p>Me gusta el chocolate.</p>

Esto tiene tres partes:

Las tres juntas forman un elemento: el elemento párrafo. La p viene de paragraph, párrafo en inglés. Casi todas las etiquetas son abreviaturas de palabras inglesas, así que son más fáciles de recordar de lo que parece.

1
2
3

Elementos dentro de elementos

En el ejemplo anterior, <strong> está dentro de <p>. A esto se le llama anidar, y es la base de HTML: los elementos se meten unos dentro de otros como cajas o como muñecas rusas.

La regla es sencilla: lo último que abres es lo primero que cierras.

<!-- ✅ Bien: strong se abre dentro de p y se cierra antes que p -->
<p>Hoy hace <strong>mucho</strong> calor.</p>

<!-- ❌ Mal: las etiquetas se cruzan -->
<p>Hoy hace <strong>mucho calor.</p></strong>

Para ver bien qué está dentro de qué, se usa la sangría: los elementos de dentro se escriben un poco más a la derecha (dos espacios o una tabulación).

<body>
  <h1>Mi blog</h1>
  <p>Bienvenida a mi blog.</p>
</body>

Al elemento que contiene a otro se le llama padre, y al de dentro, hijo. En el ejemplo, <body> es el padre de <h1> y de <p>, que son hermanos entre sí. Este vocabulario familiar lo usarás mucho con CSS.

Atributos: información extra

Algunas etiquetas necesitan más información. Por ejemplo, un enlace necesita saber a dónde lleva. Esa información se añade con atributos, que se escriben dentro de la etiqueta de apertura:

<a href="https://es.wikipedia.org">Ir a Wikipedia</a>

• href es el nombre del atributo (de hypertext reference, la dirección del enlace).
• "https://es.wikipedia.org" es su valor, siempre entre comillas.
• Se escriben así: nombre="valor", y si hay varios, se separan con espacios.

1
2

Elementos vacíos

Unos pocos elementos no tienen contenido, así que no llevan etiqueta de cierre. Se llaman elementos vacíos. Por ejemplo, <br> hace un salto de línea e <img> muestra una imagen:

<p>Primera línea<br>Segunda línea</p>
<img src="gato.jpg" alt="Un gato dormido">

El esqueleto de toda página

Hasta ahora hemos escrito trozos sueltos. Una página completa necesita un esqueleto que siempre es igual. Apréndelo bien, porque lo escribirás al empezar cada proyecto:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primera página</title>
  </head>
  <body>
    <h1>¡Hola, mundo!</h1>
    <p>Esta es mi primera página web.</p>
  </body>
</html>

Línea por línea:

1
2
3
4
5
6
7
8
9
10
11
12

Errores típicos

• Olvidar cerrar una etiqueta. El navegador intenta arreglarlo, pero el resultado puede ser raro. Cierra siempre lo que abres.
• Cruzar etiquetas, como <p><strong>…</p></strong>. Cierra en orden inverso al que abriste.
• Poner contenido visible dentro de <head>. Los títulos y párrafos van en <body>.
• Olvidar las comillas de los atributos o usar comillas «curvas» copiadas de Word. Usa siempre comillas rectas: "…".
• Escribir <title> en el <body> pensando que es un título visible. Para el título visible de la página se usa <h1>.

Ejercicios

Ejercicio 1: arregla el anidamiento (fácil)

Este código tiene dos errores de anidamiento. Corrígelos.

1
2

<p>Me encanta <strong>el verano.</strong></p>
<p>Mi color favorito es el <strong>azul</strong>.</p>

Ejercicio 2: el esqueleto de memoria (medio)

Sin mirar arriba, escribe el esqueleto completo de una página en español con el título de pestaña «Mis aficiones», un <h1> y un párrafo. Después compara con la solución.

1

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mis aficiones</title>
  </head>
  <body>
    <h1>Mis aficiones</h1>
    <p>Me gusta leer, nadar y cocinar.</p>
  </body>
</html>

Ejercicio 3: encuentra las partes (medio)

En el código de abajo, identifica: una etiqueta de apertura, una de cierre, un atributo con su valor y un elemento vacío. Después, añade al enlace un atributo title con el texto «Abre el buscador».

1

<p>Busca lo que quieras en <a href="https://duckduckgo.com" title="Abre el buscador">DuckDuckGo</a>.<br>Es un buscador.</p>

Ficha resumen

• Elemento = etiqueta de apertura + contenido + etiqueta de cierre: <p>Hola</p>.
• Los elementos se anidan: lo último que abres es lo primero que cierras. Usa sangría para verlo claro.
• Los atributos añaden información en la etiqueta de apertura: nombre="valor".
• Los elementos vacíos no tienen cierre: <br>, <img>, <meta>.
• Esqueleto: <!DOCTYPE html> → <html lang="es"> → <head> (meta charset, meta viewport, title) + <body> (lo visible).

Glosario