Elementos y atributos HTML: estructura de una página web

HTML etiqueta las partes de una página para que el navegador pueda construir su estructura. Un encabezado, un párrafo y un enlace tienen significados distintos, incluso antes de añadir estilos. HTML describe el contenido; CSS controla su apariencia y JavaScript añade comportamiento.

Lee un elemento

En <p>The workshop opens at noon.</p>, <p> es la etiqueta de apertura, la frase es el contenido y </p> es la etiqueta de cierre. El conjunto es un elemento de párrafo. La barra indica la etiqueta de cierre. Usa nombres de elementos en minúsculas para mantener la coherencia del código fuente, aunque HTML también acepta nombres en mayúsculas.

Un atributo añade información dentro de una etiqueta de apertura:

<a href="hours.html" title="Workshop opening hours">Opening hours</a>

Aquí href proporciona el destino y title proporciona texto informativo. Separa los atributos con espacios y pon sus valores entre comillas rectas. Su orden no cambia su significado. Las comillas mantienen unido un valor: class="intro note" da dos nombres de clase, mientras que class=intro note se interpreta como un valor de clase y un atributo separado llamado note.

Coloca elementos unos dentro de otros

Un párrafo puede contener una palabra con importancia destacada:

<p>Bring your <strong>booking number</strong>.</p>

Abre el párrafo, abre el elemento strong, cierra el elemento strong y después cierra el párrafo. Cierra primero el elemento que se abrió más recientemente. El párrafo es el padre y el elemento strong es su hijo. Los hijos y todo lo que contienen son descendientes. El navegador organiza estas relaciones en el DOM, un árbol del contenido de la página.

No todos los elementos pueden ir dentro de cualquier otro elemento. Por ejemplo, una lista no puede estar dentro de un párrafo. La sangría ayuda a ver el anidamiento, pero añadir espacios no puede hacer válida una relación padre-hijo que no lo es.

Reconoce tipos especiales de elementos y atributos

Los elementos vacíos no tienen contenido ni etiqueta de cierre. Algunos ejemplos son <img>, <br>, <hr>, <meta> y <link>. Escribe <br>, sin </br>. Una barra final en <br /> no tiene efecto en HTML.

Un atributo booleano está activado cuando está presente. En una lista ordenada, reversed hace que la numeración cuente hacia atrás. Escribir reversed="false" sigue dejando el atributo presente, por lo que la cuenta sigue siendo descendente. Elimina el atributo para desactivarlo.

Algunos atributos funcionan en distintos elementos:

Interpreta los espacios y comentarios del código fuente

En el texto normal, varios espacios, tabulaciones o saltos de línea del código fuente se reducen a un solo espacio. Escribir un párrafo en tres líneas del código fuente sigue produciendo un solo párrafo en pantalla. Usa elementos para expresar la estructura y sangría en el código fuente para facilitar su lectura.

Un comentario tiene este aspecto: <!-- Menu starts here -->. Está oculto en la página mostrada, pero es visible en el código fuente. Nunca pongas contraseñas ni información privada en comentarios. Los comentarios no se pueden anidar: el primer --> termina el comentario.

Una página completa separa la información sobre el documento del contenido que leen las personas. Empieza con una estructura básica pequeña y coherente y añade después el título y el contenido del cuerpo propios de la página.

Construye la estructura básica

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Opening Hours – Harbor Café</title>
  </head>
  <body>
    <h1>Harbor Café</h1>
    <p>Open every day except Monday.</p>
  </body>
</html>

<!DOCTYPE html> indica al navegador que use el modo de estándares, sus reglas normales de renderizado moderno. Es una declaración, no un elemento. Omitirla puede activar el modo de compatibilidad, que imita el comportamiento de navegadores antiguos y puede cambiar la disposición y los tamaños.

<html> es el elemento raíz. Sus dos elementos hijos son <head> y <body>. La cabecera contiene metadatos, información sobre la página. El cuerpo contiene el contenido visible. Un <h1> pertenece al cuerpo, aunque el navegador parezca recuperarse cuando lo pones en la cabecera.

Da identidad a la página

El <title> aparece en la pestaña del navegador, los marcadores y el historial. Los buscadores también pueden usarlo como título de un resultado. Da a cada página normal exactamente un título, dentro de la cabecera. Pon primero el tema específico, seguido del nombre del sitio, como «Horario de apertura, Café del Puerto». El <h1> visible y el título del documento son elementos separados con funciones distintas.

Coloca <meta charset="utf-8"> primero en la cabecera. La declaración completa debe estar dentro de los primeros 1024 bytes del archivo. Una declaración temprana permite al navegador descubrir cómo decodificar el texto antes de haber leído gran parte de la página.

La línea del área de visualización pide a los navegadores móviles que usen el ancho del dispositivo para la disposición y un zoom inicial de 1. Sin ella, muchos usan un área de visualización virtual ancha de escritorio y reducen el resultado, por lo que el texto parece pequeño. Esta línea prepara el documento para la disposición en móviles; los estilos de la página siguen determinando cómo se ajusta su contenido.

Conecta otros recursos de la página

Entre los elementos que suelen añadirse a la cabecera están:

<meta name="description" content="Fresh bread, coffee and lunch by the harbor.">
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="styles.css">
<script src="app.js" defer></script>

La descripción resume la página y puede aparecer en los resultados de búsqueda. El icono proporciona la imagen de la pestaña. El enlace a la hoja de estilo conecta un archivo CSS. El elemento script conecta JavaScript; defer retrasa su ejecución hasta que se haya analizado el documento. A diferencia de <link> y <meta>, <script> necesita una etiqueta de cierre incluso cuando su contenido está vacío.

Guarda un archivo de página web

Guarda texto sin formato en un editor de código con la extensión .html. Un procesador de textos puede añadir formato que no corresponde a un archivo de código fuente HTML. La página predeterminada de una carpeta se llama por convención index.html; la mayoría de los servidores web la envían cuando alguien solicita la dirección de la carpeta.

Elige nombres en minúsculas con guiones, como opening-hours.html. Los espacios se convierten en %20 en las URL y muchos servidores distinguen mayúsculas de minúsculas. Comprueba que el editor no haya guardado tu página como index.html.txt. Después de guardarla, abre el archivo HTML en el navegador y actualiza la página cuando hagas un cambio.

El idioma del texto y la forma en que se almacenan sus caracteres responden a preguntas distintas. Un navegador necesita ambos datos para presentar la página correctamente, sobre todo cuando el contenido incluye acentos o más de un sistema de escritura.

Indica el idioma del contenido

Escribe el idioma principal en el elemento raíz: <html lang="en">. Los lectores de pantalla pueden elegir la pronunciación a partir de esta información y los navegadores pueden usarla para la traducción y la ortografía. Una etiqueta de idioma comienza con un código de idioma. Una segunda parte opcional puede indicar una región o escritura.

La etiqueta describe el contenido, no la ubicación del visitante. uk significa ucraniano, así que no es la etiqueta del inglés del Reino Unido.

Marca un cambio de idioma en el elemento adecuado más cercano:

<p>Our host said <span lang="fr">bon appétit</span>.</p>

Solo la expresión francesa recibe pronunciación francesa. Para una cita completa, el idioma puede ir en su <blockquote>. Una página de derecha a izquierda también necesita su dirección base del texto, por ejemplo <html lang="ar" dir="rtl">. Las letras árabes siguen de derecha a izquierda sin ese atributo, pero la dirección base afecta a la alineación de los párrafos, la puntuación y el texto que mezcla direcciones.

Haz coincidir los bytes guardados y la declaración

Una codificación de caracteres asigna caracteres a bytes almacenados. UTF-8 puede representar todos los caracteres Unicode, incluidas las letras acentuadas, otros sistemas de escritura y los emojis. Los documentos HTML usan UTF-8.

Hay dos pasos: guardar el archivo real como UTF-8 en el editor y declarar <meta charset="utf-8"> al principio de la cabecera. La declaración indica al navegador cómo leer los bytes; no convierte un archivo guardado con otra codificación. Una declaración de codificación del servidor en su cabecera Content-Type tiene prioridad sobre el elemento meta.

Una incompatibilidad de codificación suele dejar una pista. El texto UTF-8 «Café» leído como Windows-1252 puede convertirse en «Café» porque los dos bytes de «é» se interpretan por separado. Un archivo Windows-1252 leído como UTF-8 puede mostrar en cambio «Caf�» porque el byte no es válido en UTF-8. Comprueba la codificación del editor y la información del documento recibido por el navegador antes de sustituir letras individuales.

Muestra caracteres que HTML usa como sintaxis

Para mostrar texto literal que parece una etiqueta, escribe referencias de caracteres:

<p>Use &lt;p&gt; for paragraphs.</p>

La página muestra la frase con

como texto literal. El < debe representarse como < para que el navegador no empiece una etiqueta. Cada referencia con nombre comienza con & y termina con ;.

Por ejemplo, 10 km mantiene el número y la unidad en la misma línea. Los caracteres acentuados normales pueden escribirse directamente en un archivo UTF-8; no necesitas una referencia distinta para cada acento.

Un navegador intenta mostrar una página incluso cuando su HTML es incorrecto. Esa útil recuperación puede ocultar errores, por lo que revisar una página implica examinar tanto el código fuente que escribiste como la estructura que construyó el navegador.

Compara el código fuente con el DOM

Ver código fuente de la página muestra el HTML recibido por el navegador. El panel Elementos o Inspector de las herramientas de desarrollo muestra el DOM, el árbol analizado que usa el navegador. Es posible que el navegador haya cerrado un elemento antes de tiempo o movido contenido a otro lugar durante el análisis.

Abre el inspector haciendo clic derecho en la página y eligiendo Inspeccionar, o usa el atajo de las herramientas de desarrollo de tu navegador. Selecciona un elemento mostrado y observa su padre y sus hijos. Después busca la misma zona en el código fuente. Las diferencias pueden explicar espacios inesperados, enlaces que se extienden demasiado o estilos aplicados a los elementos equivocados.

Sigue una reparación automática

Supongamos que escribes:

<p>Our soups:
  <ul>
    <li>Tomato</li>
    <li>Lentil</li>
  </ul>
</p>

Un párrafo admite contenido a nivel de texto, no una lista. Al llegar a <ul>, el navegador cierra el párrafo. La lista se convierte en un bloque separado. El </p> final no tiene ningún párrafo abierto que cerrar, por lo que el análisis puede crear un párrafo vacío adicional.

La corrección que necesitas pertenece al código fuente:

<p>Our soups:</p>
<ul>
  <li>Tomato</li>
  <li>Lentil</li>
</ul>

Mueve la etiqueta de cierre del párrafo antes de la lista. Ahora el DOM puede expresar la relación prevista sin recuperación de errores.

Usa un comprobador de HTML

El Nu Html Checker del W3C acepta la dirección de una página, un archivo cargado o HTML pegado. Informa de errores y advertencias con sus ubicaciones. Empieza por el primer error, corrígelo y ejecuta de nuevo el comprobador. Una sola comilla ausente puede provocar muchos mensajes posteriores, por lo que editar todas las líneas señaladas a la vez puede hacerte perder tiempo.

Por ejemplo, a <a href="about.html> le falta la comilla de cierre. El navegador puede tratar el marcado siguiente como parte del valor del atributo. Corregir la comilla puede eliminar varios errores posteriores. Del mismo modo, un </a> ausente puede hacer que texto no relacionado se una al enlace.

Busca especialmente:

• Elementos cerrados en el orden incorrecto o nombres mal escritos como <pargraph>.
• El mismo id usado dos veces en una página.
• Un <li> fuera de su lista.
• Una imagen sin atributo alt.
• Contenido visible colocado en la cabecera.

Comprueba el significado además de la sintaxis

Un resultado sin errores del comprobador te indica que el marcado probado sigue sus reglas. No puede decidir si «Haz clic aquí» es un texto de enlace útil o si el texto alternativo de una imagen da la información adecuada. Lee la página en orden y comprueba esas decisiones por ti mismo.

Antes de terminar una página, comprueba la declaración de tipo de documento, el idioma del documento, la declaración temprana de UTF-8 y el título específico. Revisa los niveles de encabezado, los identificadores únicos, las alternativas de las imágenes y los destinos de los enlaces. Abre la página en al menos dos navegadores y sigue sus enlaces. Una ruta relativa válida puede apuntar a un archivo que no existe, algo que una comprobación de sintaxis por sí sola no detectará.

Los encabezados dan a los lectores un mapa de la página. Los párrafos contienen frases relacionadas dentro de ese mapa. Elige sus elementos según la estructura del contenido y deja que CSS establezca su apariencia.

Crea un esquema de encabezados

HTML tiene seis niveles de encabezado, de <h1> a <h6>. Usa un <h1> para el tema principal de la página, <h2> para sus secciones principales y <h3> para las partes dentro de una sección <h2>. La mayoría de las páginas solo necesitan unos pocos niveles.

<h1>Growing Basil at Home</h1>
<p>Basil grows well on a sunny windowsill.</p>
<h2>Planting</h2>
<p>Sow the seeds 0.5 cm deep in moist soil.</p>
<h2>Care</h2>
<h3>Watering</h3>
<p>Water when the top of the soil feels dry.</p>
<h3>Harvesting</h3>
<p>Pick the top leaves first.</p>

Lee solo los encabezados. «Plantación» y «Cuidados» son secciones principales del mismo nivel. «Riego» y «Cosecha» pertenecen a «Cuidados». Este esquema sigue siendo útil cuando un lector de pantalla enumera los encabezados o cuando un lector repasa rápidamente la página.

Un encabezado solo puede bajar un nivel respecto al encabezado anterior: después de <h1>, usa <h2>, no <h3>. Al volver hacia arriba se pueden saltar varios niveles. Un <h2> después de un <h4> comienza una nueva sección principal. Los niveles de encabezado siguen todo el documento, incluido el contenido dentro de secciones y artículos.

El estándar HTML permite varios encabezados de nivel superior, pero un solo <h1> principal es el patrón habitual y claro. No elijas <h4> solo porque su texto predeterminado sea más pequeño. Un párrafo en negrita puede parecer un encabezado, pero no aparecerá en la lista de encabezados de un lector de pantalla.

Distingue un subtítulo de una sección

Un lema describe el encabezado al que acompaña; no introduce una sección nueva. Agrupa un encabezado y un subtítulo en <hgroup>:

<hgroup>
  <h1>Harbor Café</h1>
  <p>Fresh bread every morning</p>
</hgroup>

El párrafo sigue siendo un subtítulo. Convertirlo en <h2> lo situaría incorrectamente en el esquema de la página como una sección principal.

Usa párrafos para frases relacionadas

Un elemento <p> contiene un párrafo. Empieza un párrafo nuevo cuando cambie el tema o el paso de la explicación. Los navegadores añaden espacio visible alrededor de los párrafos de forma predeterminada.

Pulsar Intro en el código fuente HTML normal no crea un párrafo nuevo en pantalla. Del mismo modo, los elementos <p> vacíos no son una herramienta de espaciado. Mantén una estructura con significado y establece el espacio adicional con CSS.

Elige una separación según su significado

Para una dirección, <p>Harbor Café<br>12 Quay Street<br>Port Town</p> mantiene las líneas juntas como un solo párrafo. Repetir elementos <br> entre párrafos normales confunde la estructura del contenido con el espaciado. Una línea horizontal dibujada por <hr> expresa un cambio de tema; elígelo por ese significado, no solo para decorar la página.

Los elementos de texto indican al navegador qué significa una palabra o un fragmento. Su apariencia predeterminada en negrita, cursiva o con sangría es solo un estilo inicial. Elige primero el significado.

Distingue énfasis, importancia y atención

Cambiar el énfasis en «Sí cerré la puerta» cambia lo que el hablante está corrigiendo. La importancia destacada cumple otra función: una advertencia importa independientemente de cómo se pronuncie la frase. Usa CSS cuando solo quieras un estilo visual.

Marca las citas y sus fuentes

Una cita larga usa <blockquote>. Su atributo opcional cite indica la URL de la fuente, pero esa dirección no se muestra automáticamente. Pon una atribución visible fuera de la cita:

<blockquote cite="https://example.com/interview">
  <p>The garden is open to everyone.</p>
</blockquote>
<p>From <cite>A Conversation About the Garden</cite>.</p>

<cite> marca el título de una obra, no el nombre de una persona. Una cita corta dentro de una frase usa <q> y el navegador proporciona las comillas. No escribas un segundo par alrededor de las mismas palabras.

Una abreviación puede usar <abbr title="World Health Organization">WHO</abbr>. Escribe también su forma completa de manera visible la primera vez que aparezca. La información emergente por sí sola es difícil de consultar en pantallas táctiles y no es una explicación fiable para todos los lectores.

Muestra código y conserva su espaciado

<code> identifica un fragmento corto de código dentro de una frase. Para un bloque cuyos espacios y saltos de línea importan, combínalo con <pre>:

<pre><code>&lt;p&gt;Welcome.&lt;/p&gt;</code></pre>

El lector ve el marcado literal del párrafo. <pre> conserva el formato, pero no desactiva el análisis de HTML. Debes seguir representando < como < y el signo et como & cuando deban aparecer como texto. De lo contrario, un ejemplo de código puede interpretarse como marcado real de la página.

Marca fechas, notación y otros significados útiles

<sub> y <sup> expresan subíndices y superíndices cuando la notación los necesita: H<sub>2</sub>O y m<sup>2</sup>. No son herramientas para reducir el tamaño de texto que no tiene relación con esa función.

<time> conecta el texto legible de una fecha u hora con un valor legible por máquinas:

<time datetime="2026-03-14">March 14, 2026</time>

El valor de datetime usa año-mes-día. Una hora puede usar el valor de 24 horas 14:30, aunque el texto visible diga «2:30 p. m.».

Usa <mark> para texto resaltado por ser relevante en el contexto actual, como una coincidencia de búsqueda. <small> contiene comentarios secundarios o letra pequeña. Un <span> no tiene significado propio; es útil para un atributo de idioma o como punto de aplicación de estilos dentro de una línea.

Una lista real da una estructura común a elementos relacionados. Su marcado permite que los lectores oigan que entran en una lista y cuántos elementos contiene. El tipo de lista depende del significado de los elementos.

Elige el tipo de lista

Usa <ul> para elementos cuyo orden no cambia su significado, como los ingredientes. Usa <ol> para una secuencia o clasificación en la que el orden importa. Ambas contienen elementos de lista marcados con <li>.

<ol>
  <li>Boil the water.</li>
  <li>Add the pasta.</li>
  <li>Cook for 10 minutes.</li>
</ol>

Invertir estos pasos cambiaría las instrucciones, por lo que una lista ordenada es adecuada. Un navegador normalmente muestra números para <ol> y viñetas para <ul>. CSS puede cambiar esos marcadores; el significado de la lista sigue siendo el mismo.

No imites una lista escribiendo guiones y saltos de línea. Esos caracteres pueden parecer similares, pero no indican a un lector de pantalla que los elementos forman una lista. Un menú de navegación suele usar una lista no ordenada, mientras que una ruta de navegación usa una lista ordenada porque su recorrido tiene una secuencia.

Anida una lista dentro de su elemento

En el contenido normal de una lista, los elementos hijos directos de <ul> y <ol> son elementos <li>. No coloques un párrafo ni otra lista directamente entre ellos. El estándar también permite elementos de apoyo a scripts, pero estos no sustituyen a los elementos de lista.

Una lista anidada pertenece dentro del elemento que describe:

<ul>
  <li>Fruit
    <ul>
      <li>Apples</li>
      <li>Pears</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

Primero abre el elemento «Fruit». Añade su lista anidada, cierra esa lista y después cierra el elemento «Fruit». Ahora «Apples» y «Pears» están asociados estructuralmente a «Fruit». Colocar el <ul> interior después del </li> del padre haría perder esa relación. Un <li> también puede contener párrafos, enlaces e imágenes.

Controla la numeración con significado

Una lista ordenada puede continuar o invertir una cuenta:

reversed es booleano. Sigue activado en reversed="false"; elimínalo para volver a contar hacia arriba. Con type, los valores 1, a, A, i e I seleccionan formas habituales de numeración. Usa una forma de marcador con significado cuando el texto de otra parte haga referencia a una etiqueta concreta, como la cláusula «b».

Relaciona términos y descripciones

Una lista de descripciones usa <dl>, con <dt> para un término o nombre y <dd> para su descripción o valor:

<dl>
  <dt>Opening time</dt>
  <dd>08:30</dd>
  <dt>Closing time</dt>
  <dd>17:00</dd>
</dl>

Un término puede tener varias descripciones y varios términos pueden compartir una descripción. Un grupo puede estar contenido en un <div>. Usa esta estructura para relaciones entre nombres y valores, como un glosario o los detalles de un producto, en lugar de forzar esos pares en elementos de viñetas sin relación.

Un enlace conecta contenido con un destino. El navegador determina ese destino a partir de la dirección que pones en href, por lo que elegir el tipo correcto de URL forma parte de escribir el enlace.

Escribe un elemento de ancla

<a href="https://www.w3.org/">World Wide Web Consortium</a>

El elemento <a> es un ancla. Su href es el destino y su contenido es el texto del enlace en el que se puede hacer clic. Un ancla sin href es un marcador de posición, no un hiperenlace funcional. Una imagen también puede ser su contenido.

Una URL absoluta proporciona un esquema y un dominio, como en https://example.com/guide/. Úsala para enlazar a otro sitio web. A href="www.example.com" le falta el esquema, por lo que el navegador lo trata como una ruta relativa de archivo; no significa «abrir ese sitio web».

Parte de la carpeta actual

Una URL relativa parte de la ubicación de la página actual. Considera este sitio:

site/
  index.html
  about.html
  recipes/
    index.html
    soup.html
  images/
    logo.png

Desde la página de inicio, about.html llega a la página de información situada en la misma carpeta y recipes/soup.html entra en la carpeta de recetas. Desde recipes/soup.html, el mismo about.html buscaría dentro de recipes/, donde no existe ese archivo.

Sigue la ruta desde recipes/soup.html hasta el logotipo:

1. La carpeta inicial es recipes/.
2. ../ sube a la carpeta del sitio.
3. images/ entra en la carpeta de imágenes.
4. logo.png indica el nombre del archivo.

La ruta completa es ../images/logo.png. Cada ../ adicional sube una carpeta más. En cambio, index.html desde la página de la sopa llega al índice de recetas, no a la página de inicio del sitio.

Una URL relativa a la raíz comienza con /, como /about.html. En un servidor web parte de la raíz del sitio, sea cual sea la carpeta de la página actual. Al abrirla directamente desde el disco, esa barra se refiere a la raíz del sistema de archivos, por lo que no identifica la carpeta del sitio de tu proyecto. Usa rutas relativas normales para las páginas que también pruebas directamente desde el disco.

Las rutas usan barras inclinadas hacia delante y deben coincidir con los nombres de archivo y sus mayúsculas y minúsculas. Muchos servidores consideran Soup.html y soup.html archivos diferentes. Un enlace a una carpeta como recipes/ normalmente solicita a un servidor su archivo predeterminado, habitualmente index.html; al navegar directamente desde el disco puede mostrarse una lista de la carpeta.

Salta a una parte de una página

<a href="#watering">Watering</a>
<h2 id="watering">Watering</h2>

El fragmento comienza con # en la URL. El id del destino no tiene # y debe coincidir exactamente. Para otra página, combínalos: basil.html#watering. Un fragmento vacío # lleva al principio. #top también lleva al principio cuando no se encuentra ningún elemento que coincida.

Abre un destino de correo o teléfono

mailto:info@example.com pide a la aplicación de correo del visitante que redacte un mensaje. Se puede incluir un asunto como mailto:info@example.com?subject=Table%20booking, con el espacio codificado como %20. tel:+15555550123 proporciona un destino telefónico en formato internacional. El número de teléfono visible puede contener espacios aunque este href no los tenga.

Un enlace útil indica a una persona qué puede esperar antes de seguirlo. Su texto, destino y comportamiento de apertura funcionan juntos, incluso cuando el enlace se lee por separado en la lista de enlaces de un lector de pantalla.

Indica el destino

Compara estos enlaces:

Mantén el texto del enlace breve pero específico. Si dos enlaces tienen el mismo texto, haz que lleven al mismo destino. Una URL sin más suele ser más difícil de leer que una descripción, aunque una dirección de correo electrónico es un texto de enlace útil cuando la propia dirección es la información.

La información emergente de title no puede corregir una redacción visible poco clara. Es posible que los usuarios de pantallas táctiles nunca la vean y el acceso con teclado no es fiable. Pon la información importante sobre el destino en el contenido real del enlace.

Indica archivos y descargas

<a href="menu.pdf" download="harbor-cafe-menu.pdf">Lunch menu (PDF, 2 MB)</a>

El texto identifica el tipo y el tamaño del archivo. El atributo download pide al navegador que guarde el archivo y sugiere un nombre de archivo. No convierte una página en PDF. Para los enlaces normales a archivos web, el destino debe estar en el mismo origen para que se aplique download; también se admiten las URL especiales blob: y data:. La configuración del navegador y las cabeceras del servidor pueden afectar al comportamiento final, por lo que el atributo es una solicitud, no una garantía de un diálogo exacto.

Deja que las personas controlen las pestañas nuevas

Los enlaces normales se abren en el contexto de navegación actual, donde el botón Atrás puede volver a la página anterior. target="_blank" solicita una pestaña o ventana nueva. La nueva pestaña no tiene el historial para volver atrás de la pestaña original y es posible que el visitante no note el cambio.

Usa una pestaña nueva solo cuando tenga una finalidad clara y anúncialo en el texto:

<a href="https://example.com/archive" target="_blank" rel="noopener">Archive (opens in a new tab)</a>

Los navegadores modernos dan a los enlaces _blank la protección de noopener: la página abierta no puede usar window.opener para controlar la página original. Escribir rel="noopener" explícitamente también cubre el comportamiento de navegadores antiguos. noreferrer suprime además la información de referencia. nofollow comunica una relación para los buscadores, no un destino de navegación.

Haz comprensibles los enlaces de imagen y los enlaces más amplios

Cuando una imagen es el único contenido del enlace, su texto alternativo proporciona el nombre del enlace:

<a href="index.html">
  <img src="logo.png" alt="Harbor Café home page">
</a>

La información útil es adónde lleva el enlace. Describir solo los colores del logotipo no indicaría su destino.

Un ancla puede contener una tarjeta más amplia con un encabezado y un párrafo, pero no puede contener otro enlace ni un botón. Los controles interactivos anidados presentan destinos o acciones que compiten dentro de un mismo control.

Un enlace lleva a algún lugar: una página, un archivo o una sección de la página. Un botón realiza una acción, como abrir un menú. href="#" es un enlace al principio de la página; no sustituye a un botón que realiza una acción.

La navegación ayuda a las personas a encontrar tanto la página del sitio que desean como la parte que necesitan de una página larga. HTML puede identificar estos grupos para que quienes usan tecnología de apoyo los encuentren directamente.

Da una región a la navegación principal

Usa <nav> alrededor de un grupo principal de enlaces de navegación. Un menú del sitio suele contener una lista no ordenada:

<nav aria-label="Main">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="menu.html" aria-current="page">Menu</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Este marcado pertenece a la página del menú: aria-current="page" identifica el enlace a la página que se muestra en ese momento. En la página de contacto, mueve ese atributo al enlace de contacto. No marques el índice de una sección como página actual cuando el lector esté viendo otra página dentro de esa sección.

La lista pone a disposición de los lectores de pantalla el número y la agrupación de los enlaces. Sin CSS, los elementos del menú se apilan verticalmente. El elemento <nav> no los coloca automáticamente en una fila. Unos pocos enlaces no relacionados en el pie de página normalmente no necesitan una región de navegación propia.

Mantén los menús coherentes entre páginas

Usa los mismos elementos en el mismo orden y lugar en todo el sitio. En un sitio HTML estático, copiar el menú implica actualizar todas las copias cuando cambia su contenido.

Comprueba los destinos desde la carpeta real de cada página. Desde recipes/soup.html, el enlace de inicio es ../index.html; index.html llegaría al índice de recetas. Las palabras del menú pueden seguir siendo las mismas mientras cambian las rutas relativas. Un sitio alojado en un servidor puede usar rutas relativas a la raíz para evitar esa dependencia de las carpetas.

Crea una tabla de contenido

Una lista de contenido enlaza a encabezados de la página actual:

<nav aria-label="Contents">
  <ol>
    <li><a href="#planting">Planting</a></li>
    <li><a href="#care">Care</a></li>
  </ol>
</nav>
<h2 id="planting">Planting</h2>

Cada fragmento debe coincidir con un identificador único. Añade un encabezado correspondiente con id="care" para el segundo enlace. Cuando varias regiones de navegación tienen funciones diferentes, etiquetas como «Main» y «Contents» permiten distinguirlas a los usuarios de lectores de pantalla.

Una ruta de navegación es otro tipo de navegación. Muestra un recorrido como «Inicio › Recetas › Sopa de tomate». Usa <nav aria-label="Breadcrumb"> con una lista ordenada y coloca la página actual al final. El orden expresa el recorrido por el sitio.

Ofrece un acceso directo para saltar contenido repetido

Pon un enlace de salto al principio del cuerpo:

<a href="#main-content">Skip to main content</a>

Su destino es la región principal, escrita como <main id="main-content">. Los usuarios de teclado pueden seguir ese enlace para saltar un menú repetido. Mantén el identificador de destino único y escrito exactamente igual que en el fragmento. Un enlace de salto es una ayuda de navegación funcional incluso antes de que CSS cambie su presentación.

Una imagen en HTML sigue siendo un recurso independiente. La página indica al navegador qué archivo debe obtener, cuánto espacio debe reservar y qué texto puede sustituir a la imagen.

Añade una imagen

<img src="images/harbor.jpg" alt="Fishing boats moored in the harbor at sunset" width="1200" height="800">

<img> es un elemento vacío, por lo que no tiene etiqueta de cierre. src indica una dirección de archivo, con las mismas reglas de rutas que se usan para los enlaces. alt proporciona una alternativa textual. Si la imagen no aparece, comprueba la carpeta, las mayúsculas y minúsculas y la extensión del archivo en src. Una ruta .jpg no identifica un archivo .png y .JPG puede ser distinto de .jpg en un servidor.

Los bytes de la imagen no se almacenan dentro de este elemento HTML. El navegador descarga el archivo por separado. Cambiar el ancho en HTML no reduce el tamaño del archivo descargado.

Elige un formato adecuado para el contenido

Los navegadores principales actuales admiten WebP y AVIF. Elige una imagen según su contenido y el tamaño de archivo resultante, no solo por su extensión. La compresión con pérdida descarta algunos detalles para ahorrar espacio; la compresión sin pérdida conserva los datos originales de la imagen.

Reserva la forma correcta

Los atributos width y height son números enteros en píxeles CSS, sin unidad en el valor. Escribe width="1200", no width="1200px". Permiten al navegador reservar espacio antes de que llegue el archivo, lo que reduce los desplazamientos del diseño, en los que el texto salta al cargarse una imagen.

Una imagen de 1200 × 800 tiene una proporción de 3:2. Tanto width="1200" height="800" como width="600" height="400" la conservan. El segundo par reduce ambas dimensiones a la mitad. Un par de 600 × 600 fuerza un cuadrado y distorsiona la imagen. CSS puede controlar después las dimensiones mostradas y conservar la proporción.

Reduce el archivo antes de usarlo

Una foto de teléfono de 4000 × 3000 tiene 12 millones de píxeles y puede ocupar varios megabytes. Ajusta su tamaño cerca del mayor tamaño previsto de visualización y elige una compresión razonable antes de añadirla al sitio. De lo contrario, cada lector descarga el archivo grande aunque la página muestre una miniatura diminuta.

Para imágenes situadas más abajo en una página larga, loading="lazy" permite al navegador esperar hasta que el visitante se acerque a ellas. Mantén la carga normal para una imagen de portada o principal que sea visible de inmediato, ya que retrasarla puede hacer más lenta la primera vista de la página.

Usa imágenes que sean tuyas, para las que tengas permiso o que puedas reutilizar según su licencia, con los créditos exigidos. Guarda las imágenes del sitio en su propia carpeta para que los cambios en los archivos de otro sitio no las rompan. Las imágenes de contenido pertenecen al HTML; las texturas de fondo puramente decorativas suelen gestionarse con CSS.

El texto alternativo proporciona la información que una persona necesita cuando no puede ver una imagen. Una leyenda proporciona contexto visible para todos. La elección de ambos comienza por la finalidad de la imagen en esa página concreta.

Describe la información útil

Para una foto que ayuda a los lectores a comprender un lugar, describe lo que importa: alt="The café's terrace with six tables overlooking the harbor". Un inventario largo de cada objeto rara vez es útil. Normalmente no necesitas «Imagen de» porque los lectores de pantalla ya anuncian que se trata de una imagen. Sin embargo, el medio puede importar, como en «Acuarela del puerto».

El contexto cambia la alternativa útil. En una página de adopción, los detalles importantes podrían identificar a un perro. En la página para visitantes de un parque, la misma foto podría comunicar que los perros son bienvenidos en el césped. Pregúntate qué información perdería un lector si la imagen desapareciera.

Para un gráfico, indica su mensaje principal y coloca los datos detallados cerca. Por ejemplo, el texto alternativo puede indicar que las visitas al sitio web aumentaron de 1200 en enero a 3000 en marzo. El texto que lo rodea puede proporcionar las cifras completas. Un cartel fotografiado u otra imagen de texto necesita las palabras pertinentes en su alternativa.

Distingue imágenes informativas, decorativas y funcionales

Un valor alt vacío es una instrucción deliberada para omitir una imagen decorativa. Omitir el atributo es distinto: algunos lectores de pantalla pueden anunciar el nombre del archivo en su lugar. Usa un atributo alt en cada imagen que crees.

Un logotipo que es el único contenido de un enlace de inicio necesita un nombre de enlace útil, como «Página de inicio del Café del Puerto». El lector necesita conocer el destino, no solo que el logotipo contiene olas azules. title no es un sustituto: su información emergente no está disponible de forma fiable para usuarios de teclado, pantallas táctiles o lectores de pantalla.

Añade una leyenda con figure

<figure>
  <img src="images/old-harbor.jpg" alt="Sailing ships crowded along a stone quay" width="1000" height="667">
  <figcaption>The harbor around 1900. Photo: Port Town Archive.</figcaption>
</figure>

<figure> agrupa contenido independiente y su leyenda visible opcional. <figcaption> es el primer o último hijo de la figura, con una leyenda como máximo por figura. Una figura puede contener varias imágenes, un ejemplo de código, una cita o un diagrama; no se limita a fotografías.

En este ejemplo, el texto alternativo sustituye lo que muestra la fotografía. La leyenda proporciona la fecha y el crédito. Copiar toda la leyenda en el texto alternativo haría que un lector de pantalla repitiera ese texto sin explicar la imagen. Una leyenda que solo diga «Figura 1» tampoco sustituye a una descripción de la imagen.

Una página contiene regiones con funciones diferentes: una introducción, navegación, su contenido exclusivo e información complementaria. Los elementos semánticos dan nombre a esas funciones para que la estructura sea útil más allá de su disposición visual.

Nombra cada región

La cabecera de un sitio suele contener un logotipo y un menú. La cabecera de un artículo puede contener, en cambio, su encabezado, autor y fecha. Un pie puede incluir datos de contacto, enlaces relacionados o una línea de derechos de autor. Estos elementos identifican funciones, no un conjunto fijo de palabras.

Mantén diferenciado el contenido principal

Una página normal usa un solo <main> visible. Su contenido es exclusivo de la página, por lo que la navegación del sitio que se repite va fuera de él. No coloques main dentro de article, section, aside, header, footer o nav. Un artículo de receta puede ir dentro de main, no al revés.

Un aside es para material complementario relacionado solo indirectamente. Un conjunto de enlaces a recetas relacionadas puede ser un aside; un paso esencial de la receta no. El nombre «aside» no coloca el contenido en una columna lateral. Sin CSS, estas regiones normalmente se apilan en el orden del código fuente.

<body>
  <header>
    <p>Harbor Café</p>
    <nav>...</nav>
  </header>
  <main>
    <h1>Our Menu</h1>
    <p>Everything is baked fresh each morning.</p>
  </main>
  <aside>
    <h2>Today's special</h2>
    <p>Tomato soup with fresh bread.</p>
  </aside>
  <footer>
    <p>&copy; 2026 Harbor Café</p>
  </footer>
</body>

El contenido exclusivo de la página del menú está en main. La información del sitio que lo rodea queda fuera. El código fuente se lee con sentido de arriba abajo antes de añadir columnas, colores o posicionamiento.

Comprende los puntos de referencia

Un punto de referencia es una región que la tecnología de apoyo puede ofrecer como destino de navegación. Main y nav proporcionan puntos de referencia. Una cabecera a nivel de página proporciona el punto de referencia de cabecera y un pie a nivel de página proporciona el punto de referencia de información del contenido. Una cabecera o un pie anidado dentro de article, aside, main, nav o section no proporciona esos puntos de referencia a nivel de página.

Un aside normalmente tiene una función complementaria. Un aside anidado puede seguir teniendo esa función; anidarlo en un artículo no elimina por sí solo su significado. Úsalo solo para contenido complementario adecuado y mantén comprensibles las regiones de la página.

<search> identifica una región que contiene controles y resultados de búsqueda o filtrado. Crea un punto de referencia de búsqueda y es compatible con los navegadores principales actuales. Es distinto de nav: buscar contenido y elegir un enlace de navegación conocido son funciones diferentes.

Una cabecera no puede contener una cabecera ni un pie, y un pie no puede contener ninguno de los dos. Separa las regiones a nivel de página de las cabeceras y los pies que pertenecen a artículos individuales. Elegir los nombres adecuados proporciona una estructura útil incluso cuando todas las regiones parecen por ahora bloques normales.

Una elección semántica indica a los lectores qué es un bloque de contenido. Pregúntate cómo se relaciona el contenido con la página antes de elegir un contenedor; dos cajas que se parecen pueden necesitar elementos diferentes.

Comprueba si el contenido se entiende por sí solo

Un artículo es una composición independiente que podría compartirse o reutilizarse por separado. Una entrada de blog, una receta, una noticia o el comentario de un lector pueden cumplir esa condición. Un artículo suele tener su propio encabezado, pero tener un encabezado por sí solo no convierte un bloque en artículo.

Una sección agrupa un tema dentro de un conjunto mayor, normalmente con un encabezado. «Horario de apertura» y «Cómo encontrarnos» pueden ser secciones de una página de contacto. Si el bloque no tiene un tema claro y no puedes darle un encabezado que tenga sentido, probablemente section sea una elección incorrecta.

<article>
  <h2>Growing Basil at Home</h2>
  <section>
    <h3>Planting</h3>
    <p>Choose a sunny place for the pot.</p>
  </section>
  <section>
    <h3>Care</h3>
    <p>Check the soil regularly.</p>
  </section>
</article>

Aquí el artículo es una guía de cultivo completa, mientras que sus secciones dividen la guía en temas. Este ejemplo corresponde a una página cuyo <h1> principal aparece antes del artículo.

El anidamiento también funciona en la otra dirección. Una sección de «Últimas noticias» puede contener varios artículos independientes. Los comentarios pueden ser artículos anidados en el artículo al que responden. La relación entre los contenidos determina el anidamiento.

Mantén los niveles de encabezado en el esquema de la página

Una sección no reinicia los niveles de encabezado. Si una página usa <h1> para su tema y <h2> para un grupo temático, usa <h3> para los artículos dentro de ese grupo. No pongas un nuevo <h1> en cada sección anidada. Los navegadores y lectores de pantalla usan los niveles de encabezado que escribes realmente; un contenedor section no corrige un nivel omitido.

Usa contenedores neutros cuando ningún significado encaje

<div> es un contenedor de bloque neutro. <span> es un contenedor neutro dentro de una línea de texto. Proporcionan puntos de aplicación para una clase, un atributo de idioma o estilos posteriores sin atribuir una función especial al contenido.

<p>Try <span lang="fr">pain au chocolat</span> today.</p>

El span identifica el fragmento francés sin introducir un bloque nuevo. Construir toda la página con elementos div genéricos pierde funciones útiles, pero convertir cada div en una sección inventa temas que no existen.

Elige preguntándote qué hace el bloque:

1. ¿Es el contenido exclusivo de la página? Usa main como región exterior.
2. ¿Es un grupo principal de navegación? Usa nav.
3. ¿Podría ser una composición completa por sí sola? Considera article.
4. ¿Es una parte temática con encabezado? Considera section.
5. ¿Es contenido complementario relacionado indirectamente? Considera aside.
6. ¿Es solo un contenedor? Usa div, o span dentro del texto.

<address> también tiene un significado concreto: información de contacto del artículo más cercano o de la página. Un enlace de correo electrónico en el pie de contacto de un sitio puede ir ahí. Una dirección postal mencionada como hecho histórico o lugar de un evento no se convierte en información de contacto solo porque contenga el nombre de una calle.

Planifica las funciones y el orden de lectura antes de escribir una página completa. Un esquema de página sencillo nombra las regiones, mientras que un esquema de encabezados nombra el contenido que hay dentro. Juntos orientan la elección de elementos y su anidamiento.

Organiza el contenido

Para una página de receta, pon el nombre y el menú del sitio que se repiten en una cabecera, la receta en main y la información del sitio en un pie. La receta es independiente, por lo que un artículo encaja dentro de main. Su esquema es «Sopa de tomate» con «Ingredientes» y «Preparación» debajo.

La página siguiente está en una carpeta recipes/. Su página de inicio y la carpeta de imágenes están una carpeta más arriba:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tomato Soup – Harbor Café Recipes</title>
  </head>
  <body>
    <a href="#main-content">Skip to main content</a>
    <header>
      <p><a href="../index.html">Harbor Café</a></p>
      <nav>
        <ul>
          <li><a href="../index.html">Home</a></li>
          <li><a href="index.html">Recipes</a></li>
        </ul>
      </nav>
    </header>
    <main id="main-content">
      <article>
        <h1>Tomato Soup</h1>
        <p>Published <time datetime="2026-03-14">March 14, 2026</time></p>
        <figure>
          <img src="../images/tomato-soup.jpg" alt="A bowl of red tomato soup with a swirl of cream" width="1200" height="800">
          <figcaption>Ready in 30 minutes.</figcaption>
        </figure>
        <h2>Ingredients</h2>
        <ul>
          <li>1 kg ripe tomatoes</li>
          <li>1 onion</li>
          <li>500 ml vegetable stock</li>
        </ul>
        <h2>Method</h2>
        <ol>
          <li>Chop the onion and tomatoes.</li>
          <li>Simmer them in the stock for 20 minutes.</li>
          <li>Blend until smooth.</li>
        </ol>
      </article>
    </main>
    <footer>
      <p>&copy; 2026 Harbor Café</p>
    </footer>
  </body>
</html>

Sigue las decisiones del código

El enlace de salto es el primero del cuerpo y apunta al identificador único de la región principal. La cabecera contiene la identidad y la navegación del sitio que se repiten. El artículo de la receta tiene el único encabezado principal de la página, seguido de dos secciones <h2> del mismo nivel.

Los ingredientes usan una lista no ordenada porque cambiar su orden de presentación no cambia lo que se necesita. La preparación usa una lista ordenada porque los pasos forman una secuencia. El texto alternativo de la foto sustituye a la imagen; su leyenda proporciona contexto sobre la preparación.

../index.html sube a la página de inicio. index.html permanece en la carpeta de recetas. Ninguno de los enlaces del menú está marcado con aria-current="page", porque la página mostrada es la receta de sopa, no ninguno de los índices.

Comprueba la página terminada

Lee el código fuente de arriba abajo. Su orden debe funcionar para un usuario de teclado y un lector de pantalla antes de que CSS reorganice nada. Comprueba el título, el esquema de encabezados, la única región principal visible, las rutas de los enlaces y las alternativas de las imágenes. Ejecuta el comprobador de HTML y corrige sus mensajes; después prueba los enlaces y las imágenes en el navegador.

En varias páginas, mantén la misma cabecera, menú y pie repetidos. Da a cada página su propio título y encabezado principal, y ajusta las rutas relativas desde su carpeta. Después se pueden añadir colores, fuentes, espaciado y columnas mediante CSS sin cambiar las funciones que ya has establecido.