Qué es HTML: etiquetas, atributos y tu primer archivo, desde cero

HTML (HyperText Markup Language, lenguaje de marcado de hipertexto) es el idioma con el que se escribe el contenido de todas las páginas web. No es un lenguaje de programación: no hace cuentas ni toma decisiones. Lo que hace es marcar qué es cada trozo de texto: esto es un título, esto un párrafo, esto un enlace, esto una imagen. El navegador lee esas marcas y dibuja la página.

La etiqueta: la pieza básica

Una marca de HTML se llama etiqueta y se escribe entre los signos < y >. La mayoría van en pareja, rodeando el contenido:

<p>Me gusta el café.</p>

• <p> es la etiqueta de apertura: «aquí empieza un párrafo».
• Me gusta el café. es el contenido.
• </p> es la etiqueta de cierre: igual que la de apertura, pero con una barra /.

Las tres partes juntas forman un elemento. Cada etiqueta tiene un nombre corto en inglés: p de paragraph (párrafo), h1 de heading 1 (título de primer nivel), a de anchor (enlace).

Elementos dentro de elementos

Los elementos se pueden meter unos dentro de otros. Esto se llama anidar:

<p>Me gusta <strong>mucho</strong> el café.</p>

<strong> marca un texto importante (el navegador lo pone en negrita) y está dentro del párrafo. La regla de oro: lo último que abres es lo primero que cierras. <p><strong>…</p></strong> está mal, porque cierra el párrafo antes que lo que tiene dentro, y el navegador tendrá que adivinar qué querías.

Atributos: información extra

Algunas etiquetas necesitan datos adicionales, que se escriben dentro de la etiqueta de apertura como atributos: un nombre, un signo = y un valor entre comillas.

<a href="https://developer.mozilla.org/es/">Aprende en MDN</a>

El atributo href dice adónde lleva el enlace; el texto entre las etiquetas es lo que se ve y se pulsa. Si un elemento lleva varios atributos, se separan con espacios.

Elementos vacíos

Unos pocos elementos no tienen contenido ni etiqueta de cierre, porque insertan algo en vez de rodear texto. Se llaman elementos vacíos:

<img src="imagenes/gato.jpg" alt="Un gato dormido en el sofá">

src indica dónde está la imagen (una ruta relativa) y alt la describe para quien no puede verla, por ejemplo con un lector de pantalla. Otro elemento vacío es <br>, un salto de línea.

Tu primer archivo HTML

Abre el Bloc de notas o tu editor, escribe esto y guárdalo como index.html en una carpeta nueva (en el Bloc de notas, con Tipo: Todos los archivos y codificación UTF-8):

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Mi primera página</title>
  </head>
  <body>
    <h1>¡Hola!</h1>
    <p>Esta es mi primera página web. Me gusta <strong>mucho</strong> aprender.</p>
    <a href="https://developer.mozilla.org/es/">Aprende más en MDN</a>
  </body>
</html>

Ahora haz doble clic en el archivo: se abre en tu navegador con un título grande, un párrafo y un enlace. Lo que acabas de escribir es la estructura que tiene cualquier página web:

• <!doctype html>: le dice al navegador que es HTML moderno.
• <html lang="es">: envuelve todo y dice que la página está en español.
• <head>: datos sobre la página que no se ven dentro de ella. <meta charset="utf-8"> hace que las tildes y la ñ salgan bien, y <title> es el texto de la pestaña.
• <body>: todo lo que se ve.

Lo que el navegador ignora

• Los espacios y saltos de línea de más. Puedes sangrar el código para leerlo mejor: el navegador junta los espacios seguidos en uno solo. Para separar párrafos se usa otro <p>, no líneas en blanco.
• Los comentarios: lo que escribas entre <!-- y --> no se muestra. Sirven para dejarte notas.

Si necesitas escribir los signos < o > como texto, usa < y >; para &, escribe &. Si no, el navegador creerá que empiezas una etiqueta.

Mira el HTML de cualquier web

• Ctrl + U muestra el código fuente de la página en la que estás.
• F12 (o clic derecho > Inspeccionar) abre las herramientas para desarrolladores: al pasar el ratón por el código, se ilumina la parte de la página que le corresponde.

Mirar cómo están hechas otras páginas es una forma excelente de aprender. Ya tienes el contenido; para cambiar colores, tamaños y márgenes necesitas CSS. Con las dos cosas, haz tu primera página web completa.