Curso HTML 10.4 Elementos de texto semántico (time, address, small, etc.)

10.4 Elementos de texto semántico

En HTML5 se introdujeron varios elementos que aportan significado (semántica) al contenido texto, mejorando la accesibilidad, el SEO y la comprensión por parte de máquinas (bots, lectores de pantalla). Entre ellos destacan:

1. <time>

El elemento <time> define fechas, horas o intervalos. Su atributo datetime usa el formato estándar ISO-8601 para que máquinas lo interpreten. Sin el atributo, el contenido sigue siendo visible para usuarios pero no es “parseable”.

• datetime=’YYYY-MM-DD’ → fecha.
• datetime=’HH:MM’ → hora.
• datetime=’YYYY-MM-DDThh:mm:ssZ’ → fecha completa con zona UTC.
• datetime=’YYYY-MM-DD/YYYY-MM-DD’ → rango.

Ejemplo:

    
    <p>
      Próxima conferencia:
      <time datetime='2024-09-15T10:00:00Z'>
        15 de septiembre de 2024, 10:00 UTC
      </time>.
    </p>
  

Si omitimos datetime, el contenido es meramente texto:

    <p>
      Fecha estimada de entrega:
      <time>principios de octubre</time>.
    </p>
  

2. <address>

El elemento <address> agrupa información de contacto del autor o responsable de la sección o documento. No debe usarse para marcar direcciones arbitrarias de estilo de diseño. Se suelen incluir:

• Nombre de persona o empresa.
• Dirección postal.
• Correo electrónico (mailto:).
• Teléfono.

Ejemplo de pie de página con datos de contacto:

    <footer>
      <address>
        <strong>Empresa ACME S.A.</strong><br>
        Calle Falsa 123, Piso 4<br>
        28080 Madrid, España<br>
        Email:
        <a href='mailto:info@acme.com'>info@acme.com</a><br>
        Tel. +34 912 345 678
      </address>
    </footer>
  

En caso de múltiples autores, cada uno podría ir en su propio <address> dentro de la sección correspondiente.

3. <small>

El elemento <small> reduce la jerarquía visual y semántica del texto. Suele emplearse para:

• Notas al pie y disclaimers.
• Información de copyright.
• Recordatorios legales.

Ejemplo con nota legal:

    <p>
      Bienvenido a nuestro sitio. Consulta los términos de uso antes de continuar.
      <small>
        &copy; 2024 ACME S.A. Todos los derechos reservados.
      </small>
    </p>
  

4. Otros elementos de texto semántico

Breve repaso de algunos complementarios:

• <abbr title=’HyperText Markup Language’>HTML</abbr>
  — Para indicar abreviaturas.

          <p>
            <abbr title='HyperText Markup Language'>HTML</abbr> es el lenguaje básico de la web.
          </p>
        

• <mark>…</mark>
  — Resalta texto, útil en búsquedas.

          <p>Resultado: <mark>semántico</mark></p>
        

• <del datetime=’2024-01-01′>texto antiguo</del>
  & y <ins datetime=’2024-02-01′>nuevo texto</ins>

          <p>
            Revisión:
            <del datetime='2024-01-01'>versión A</del>
            <ins datetime='2024-02-01'>versión B</ins>
          </p>
        

• <cite>Fuente</cite> y <q>texto citado</q>.

          <p>
            Según <cite>Smith y Jones (2023)</cite>:
            <q>La semántica es clave en HTML5</q>.
          </p>
        

• <strong>importante</strong> y <em>énfasis</em>.

          <p>
            <strong>Aviso:</strong> revisa el formulario antes de enviar.
          </p>
        

Buenas prácticas y consideraciones

• Usar cada elemento solo para su propósito semántico.
• Proporcionar atributos obligatorios (datetime para <time>, title para <abbr>).
• Evitar elementos de presentación (<span>, <div>) cuando exista un equivalente semántico.
• Comprobar acceso con lectores de pantalla y validación W3C.

De este modo, conseguimos un código más claro, accesible y optimizado para la indexación de contenido.