HTML

HTML: estructura y contenido

Antes de maquetar un cartel decides la jerarquía: qué es el titular, qué es el subtítulo, qué es información secundaria.

¿Cuánto sabes de HTML?

📘 Teoría

Introducción

Antes de maquetar un cartel decides la jerarquía: qué es el titular, qué es el subtítulo, qué es información secundaria. HTML hace exactamente eso con el contenido de una web: dice qué es cada cosa. El aspecto vendrá después, con CSS.

Elementos, etiquetas y atributos

HTML se escribe con etiquetas entre < y >. La mayoría van en pareja: una de apertura y otra de cierre (con /). Todo junto forma un elemento:

<p>El diseño es inteligencia hecha visible.</p>

<p> es la etiqueta de apertura; </p> la de cierre.
p significa paragraph (párrafo).
Lo de dentro es el contenido del elemento.

Algunos elementos no tienen contenido ni cierre, como la imagen:

<img src="img/cartel.jpg" alt="Cartel del festival con tipografía roja sobre fondo negro">

src y alt son atributos: información extra del elemento, siempre en la etiqueta de apertura, con la forma nombre="valor".

El esqueleto de un documento HTML

Toda página empieza igual. Apréndete este esqueleto (el editor puede escribirlo por ti tecleando ! y pulsando Tab, pero debes entender cada línea):

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lucía Márquez · Diseño gráfico</title>
    <link rel="stylesheet" href="css/estilos.css">
  </head>
  <body>
    <!-- Aquí va todo lo que se ve en la página -->
  </body>
</html>

Línea	Qué hace
`<!DOCTYPE html>`	Indica que es un documento HTML moderno.
`<html lang="es">`	Raíz del documento. `lang="es"` indica el idioma: lo usan los lectores de pantalla y los buscadores.
`<head>`	Información sobre la página que no se ve en ella.
`<meta charset="UTF-8">`	Codificación: para que tildes y eñes se vean bien.
`<meta name="viewport" …>`	Para que la página se adapte a móviles.
`<title>`	Título de la pestaña del navegador y de los resultados de búsqueda.
`<link rel="stylesheet" …>`	Enlaza la hoja de estilos CSS.
`<body>`	El contenido visible.
`<!-- … -->`	Un comentario: el navegador lo ignora. Sirve para dejar notas.

Fíjate en la indentación (sangría): cada elemento que está dentro de otro se desplaza dos espacios. No es obligatoria para el navegador, pero sí para las personas.

Texto

<h1>Lucía Márquez</h1>
<h2>Sobre mí</h2>
<p>Diseñadora gráfica especializada en <strong>identidad visual</strong>
   y <em>tipografía</em>.</p>

<h1> a <h6>: encabezados, de más a menos importante. Una página tiene normalmente un solo <h1>, y los niveles no se saltan (no pases de h2 a h4).
<p>: párrafo.
<strong>: importancia (se ve en negrita). <em>: énfasis (se ve en cursiva).

⚠️ Atención. Elige el encabezado por su importancia, no por su tamaño. Si quieres un h2 más pequeño, lo cambiarás con CSS. Los lectores de pantalla usan los encabezados como índice de la página.

Listas

<ul>
  <li>Identidad visual</li>
  <li>Cartelería</li>
  <li>Diseño editorial</li>
</ul>

<ol>
  <li>Briefing</li>
  <li>Bocetos</li>
  <li>Arte final</li>
</ol>

<ul> = lista sin orden (viñetas), <ol> = lista ordenada (números), <li> = cada elemento de la lista.

Enlaces

<a href="proyectos.html">Ver mis proyectos</a>
<a href="https://www.easdsevilla.es">Mi escuela</a>
<a href="mailto:hola@ejemplo.es">Escríbeme</a>

El atributo href indica el destino: otra página del proyecto (ruta relativa), otra web (URL completa) o un correo (mailto:). El texto del enlace debe decir adónde lleva: evita "pincha aquí".

Imágenes

<img src="img/cartel-festival.jpg"
     alt="Cartel del Festival de Otoño: tipografía condensada roja sobre fondo negro"
     width="800" height="1131">

src: ruta de la imagen.
alt: texto alternativo. Describe la imagen para quien no la ve (personas ciegas, imagen que no carga, buscadores). Es obligatorio. Si la imagen es solo decorativa, alt="".
width y height: tamaño original en píxeles. Ayudan a que la página no "salte" mientras carga.

Estructura semántica

Semántico significa "con significado". En lugar de meter todo en cajas genéricas, HTML tiene elementos que dicen qué papel cumple cada zona de la página:

<body>
  <header>
    <h1>Lucía Márquez</h1>
    <nav>
      <ul>
        <li><a href="index.html">Inicio</a></li>
        <li><a href="proyectos.html">Proyectos</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h2>Sobre mí</h2>
      <p>…</p>
    </section>
    <article>
      <h2>Cartel Festival de Otoño</h2>
      <img src="img/cartel-festival.jpg" alt="…">
    </article>
  </main>

  <footer>
    <p>© 2026 Lucía Márquez</p>
  </footer>
</body>

Elemento	Qué es
`<header>`	Cabecera (de la página o de una sección).
`<nav>`	Navegación principal.
`<main>`	El contenido principal. Solo uno por página.
`<section>`	Una sección temática, normalmente con su encabezado.
`<article>`	Un contenido con sentido propio (un proyecto, una noticia).
`<footer>`	Pie.
`<div>`	Caja genérica sin significado. Úsala solo para agrupar con fines de estilo.

Una estructura semántica es más accesible, se posiciona mejor en buscadores y es más fácil de maquetar y mantener.

Validar tu HTML

El navegador intenta mostrar la página aunque tenga errores, así que muchos fallos pasan desapercibidos. Comprueba tus páginas con el validador oficial del W3C: validator.w3.org (pestaña Validate by Direct Input, pega tu código).

Errores frecuentes

Olvidar cerrar etiquetas o cerrarlas en otro orden: <p><strong>texto</p></strong> ✗ → <p><strong>texto</strong></p> ✓.
Imágenes sin alt o con alt="imagen" (no describe nada).
Usar <h3> porque "se ve del tamaño que quiero".
Varios <h1> o varios <main>.
Espacios, mayúsculas o tildes en las rutas.