Etiqueta HTML <address>
La etiqueta HTML <address> se usa para proporcionar información de contacto del propietario del sitio o del autor del artículo.
La etiqueta <address> proporciona información de contacto del autor o propietario de un documento o artículo. Puede contener una dirección de correo electrónico, un número de teléfono, una dirección física, un enlace al sitio del autor, cuentas en redes sociales, etc.
Esta página explica qué significa <address> semánticamente, dónde colocarla, el uso incorrecto más común que se debe evitar y cómo combinarla con <footer>.
Qué significa realmente <address>
Lo más importante es entender que <address> no es un contenedor genérico para cualquier dirección postal. Marca específicamente los datos de contacto de:
- el ancestro más cercano
<article>— es decir, el autor de ese artículo, o - el documento en su conjunto, cuando su ancestro más cercano es el elemento
<body>— es decir, el propietario de la página.
Por tanto, el alcance de un bloque <address> depende de dónde se coloque:
- Dentro de
<body>(habitualmente dentro del<footer>de la página) → hace referencia al autor o propietario del documento completo. - Dentro de un
<article>→ hace referencia al autor de ese artículo.
No uses <address> para una dirección postal arbitraria que simplemente forme parte del contenido de la página — por ejemplo, una dirección de correo dentro de una entrada de blog, la ubicación de un lugar en una página de eventos o la dirección de una tienda en la descripción de un producto. Esos no son datos de contacto del autor o propietario del documento o artículo, por lo que deben ser texto sin formato (o estar envueltos en un <p>). El uso incorrecto de <address> hace que el marcado transmita información falsa a las tecnologías de asistencia y a los motores de búsqueda.
Sintaxis
La etiqueta <address> se usa en pares. El contenido va entre las etiquetas de apertura (<address>) y cierre (</address>).
La mayoría de los navegadores añaden un salto de línea antes y después del elemento y renderizan el texto en cursiva. Puedes sobrescribir ese estilo con CSS.
Ten en cuenta que <address> no debe contener encabezados (<h1>–<h6>), elementos de sección como <article> o <section>, ni otros elementos <address>, <header> o <footer>.
Información de contacto a nivel de documento
Cuando la información de contacto se aplica a toda la página, coloca <address> dentro del <body> — normalmente dentro del pie de página:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<address>
Author: W3docs team<br />
<a href="mailto:[email protected]">Contact Author</a>
</address>
</body>
</html>Autor de un artículo
Para marcar los datos de contacto del autor de un artículo concreto, coloca <address> dentro del elemento <article> de ese artículo (normalmente dentro del <footer> del artículo). Este es el uso canónico y semánticamente correcto de la etiqueta:
<!DOCTYPE html>
<html>
<head>
<title>Article author</title>
</head>
<body>
<article>
<h2>Understanding Semantic HTML</h2>
<p>Semantic elements describe their meaning to both the browser and the developer...</p>
<footer>
<p>Posted on June 17, 2026.</p>
<address>
Written by Jane Doe.<br />
Contact: <a href="mailto:[email protected]">[email protected]</a><br />
<a href="https://example.com/jane">example.com/jane</a>
</address>
</footer>
</article>
</body>
</html>Uso de <address> en el pie de página
Cuando los datos del autor o propietario pertenecen a todo el sitio, puedes incluir <address> junto con otra información dentro del <footer> de la página. En este caso, la dirección es información de contacto del propietario del sitio — que es exactamente para lo que sirve <address>. Una dirección postal corporativa ordinaria sin contexto de autor o propietario no pertenecería a <address>:
<!DOCTYPE html>
<html>
<head>
<style>
.header{
height: 40px;
padding: 20px 20px 0;
background: #e1e1e1;
}
.main-content{
height: 60vh;
padding: 20px;
}
footer{
padding: 10px 20px;
background: #666666;
color: white;
}
a{
color: #00aaff;
}
</style>
</head>
<body>
<div class="header">Header / Menu</div>
<div class="main-content">
<h1>Main content</h1>
<p>This is some paragraph. </p>
</div>
<footer style="display:flex; justify-content:space-between; align-items:flex-end;">
<p style="margin:0;">Company © W3docs. All rights reserved.</p>
<address>
Contact us: <a href="mailto:[email protected]">[email protected]</a>
</address>
</footer>
</body>
</html>Atributos
La etiqueta <address> no tiene atributos específicos del elemento. Solo admite los Atributos Globales y los Atributos de Evento.