La Etiqueta ADDRESS

La etiqueta <address> se utiliza para marcar información de contacto en un documento HTML, ya sea del autor del contenido, de una organización o de un artículo específico. Es un elemento semántico clave para estructurar datos de contacto de manera clara.

Sintaxis básica

<address>
  <!-- Información de contacto -->
</address>

• Es un elemento en bloque (ocupa todo el ancho disponible).

• Puede contener texto, enlaces, u otros elementos HTML.

Casos de uso

Información del autor de la página

<address>
  Escrito por: <a href="mailto:autor@ejemplo.com">Juan Pérez</a><br>
  Sigue al autor en <a href="https://twitter.com/autor">Twitter</a>.
</address>

Datos de contacto empresariales

<address>
  TechCorp S.A.<br>
  Calle Innovación 456<br>
  Ciudad Digital<br>
  Teléfono: <a href="tel:+123456789">+123 456 789</a>
</address>

Contacto específico para un artículo

<article>
  <h2>Guía de SEO</h2>
  <p>Contenido del artículo...</p>
  <address>
    Dudas técnicas: <a href="mailto:soporte@web.com">Equipo de Soporte</a>
  </address>
</article>

Reglas importantes

Usos correctos

• Contacto del autor del documento.

• Información de contacto relacionada con el contenido principal (ej: empresa dueña del sitio).

• Dentro de <article> para contactos específicos de ese contenido.

Usos incorrectos

• Direcciones postales genéricas sin contexto de contacto.

• Listas de direcciones no vinculadas al autor o propietario del sitio:

<!-- Incorrecto -->
<address>
  Dirección de un cliente: Calle Falsa 123 <!-- No es contacto del autor -->
</address> 

Accesibilidad

Los lectores de pantalla reconocen el elemento como información de contacto.

Buenas prácticas:

• Usar <br> para saltos de línea en direcciones físicas.

• Incluir enlaces clicables (mailto:, tel:) cuando sea relevante:

<address>
  <a href="mailto:contacto@empresa.com">contacto@empresa.com</a><br>
  <a href="tel:+573001234567">+57 300 123 4567</a>
</address>

Estilización con CSS

Por defecto, los navegadores aplican font-style: italic al contenido de <address>. Puedes personalizarlo: 

address {
  font-style: normal;
  background-color: #f8f9fa;
  padding: 1rem;
  border-left: 3px solid #3498db;
}

address a {
  color: #2c3e50;
  text-decoration: none;
}

address a:hover {
  text-decoration: underline;
}

SEO y semántica

Los motores de búsqueda reconocen la información de contacto estructurada con <address>.

 Mejora la visibilidad:

• Incluye palabras clave relevantes (ej: "Contacto", "Soporte técnico").

• Usa datos estructurados con Schema.org si es necesario:

<address itemscope itemtype="http://schema.org/Organization">
  <span itemprop="name">TechCorp</span><br>
  Teléfono: <span itemprop="telephone">+123 456 789</span>
</address> 

Errores comunes

Usar para cualquier dirección postal

<!-- Incorrecto -->
<address>
  Casa de Harry Potter: 4 Privet Drive, Little Whinging <!-- Ficcional -->
</address>

Anidar contenido no relacionado

<!-- Incorrecto -->
<address>
  <h3>Nuestros Servicios</h3> <!-- No es información de contacto -->
  <p>Diseño web y marketing digital</p>
</address> 

Múltiples elementos <address> redundantes

<!-- Redundante -->
<address>Contacto: info@web.com</address>
<address>Soporte: soporte@web.com</address>

<!-- Correcto -->
<address>
  General: <a href="mailto:info@web.com">info@web.com</a><br>
  Soporte: <a href="mailto:soporte@web.com">soporte@web.com</a>
</address>

Ejemplos prácticos

Ejemplo 1: Footer de página web

<footer>
  <address>
     © 2023 TechCorp<br>
     Carrera 10 #25-30, Bogotá<br>
     <a href="mailto:contacto@techcorp.co">contacto@techcorp.co</a><br>
     <a href="https://www.techcorp.co">www.techcorp.co</a>
  </address>
</footer>

Ejemplo 2: Autor de un blog

<article>
  <h2>Inteligencia Artificial en 2023</h2>
  <p>...contenido del artículo...</p>
  <address>
    Autor: <a href="https://linkedin.com/in/ana-garcia">Ana García</a><br>
    Revisado por: <a href="mailto:equipo@ia.com">Equipo de IA</a>
  </address>
</article>

Comparación: <address> vs <div>

Característica	<address>	<div>
Semántica	Define información de contacto	Contenedor genérico sin significado
Uso recomendado	Autor/propietario del documento	Agrupación visual o estructural
Estilo predeterminado	Cursiva (en la mayoría de navegadores)	Sin estilo específico

Conclusión:

La etiqueta <address> es esencial para estructurar información de contacto relevante de manera semántica. Úsala para:

• Identificar al autor/propietario del contenido.

• Proporcionar datos de contacto profesionales.

• Mejorar la accesibilidad y el SEO.

¡Evita usarla como un contenedor genérico para direcciones arbitrarias!