Citas, abreviaturas y más
Estas etiquetas son menos conocidas, pero son justo las que la Actividad 2 pide además de todo lo anterior. Son perfectas para el contenido típico de un blog de noticias. No te preocupes si te suenan a "chino" al principio: son solo cinco etiquetas nuevas, y cada una tiene un uso muy concreto y fácil de recordar una vez que lo ves con un ejemplo.
En este módulo vas a...
- Citar frases largas y frases cortas dentro de un texto.
- Crear listas de descripción (término + definición).
- Marcar abreviaturas para que se puedan explicar al pasar el ratón.
- Escribir información de contacto correctamente.
- Marcar fechas y horas de forma que el navegador las entienda.
- blockquote
- Cita larga, en su propio bloque separado.
- q
- Cita corta, dentro de una frase.
- dl / dt / dd
- Lista de término + definición (como un mini-diccionario).
- abbr
- Sigla o abreviatura, con su significado al pasar el ratón.
- address
- Datos de contacto de quien escribe.
- time
- Una fecha o una hora.
Citas en bloque: <blockquote>
Cuando copias una frase larga de otra persona (por ejemplo, el testimonio de un alumno), usa <blockquote>. Suele ir en su propio párrafo, separado del resto del texto.
<blockquote>
<p>Este curso me ayudó a encontrar mi propio estilo como ilustradora.</p>
<footer>— Ana García, alumna del curso</footer>
</blockquote>
El atributo opcional cite="url" puede apuntar a la
fuente original de la cita.
Citas en línea: <q>
Cuando la cita es cortita y va dentro de una frase normal, usa <q> (de quote). El navegador añade las comillas automáticamente, así que tú no las escribas.
<p>Como dice nuestra fundadora, <q>crear es para todos</q>.</p>Listas de descripción: <dl>, <dt>, <dd>
Sirven para mostrar pares de "término" y su "definición" o "valor" — por ejemplo, las preguntas frecuentes de un curso, o una ficha técnica.
| Etiqueta | Significado |
|---|---|
<dl> | description list: envuelve toda la lista |
<dt> | description term: el término |
<dd> | description details: su definición |
<dl>
<dt>Duración</dt>
<dd>6 horas de vídeo</dd>
<dt>Nivel</dt>
<dd>Principiante</dd>
</dl>Abreviaturas: <abbr>
Marca una sigla o abreviatura con <abbr>
y su significado completo en el atributo title. Al
pasar el ratón por encima, aparecerá una pequeña ayuda.
<p>
Este sitio cumple los estándares del
<abbr title="World Wide Web Consortium">W3C</abbr>.
</p>Prueba a pasar el ratón sobre esta sigla: HTML.
Información de contacto: <address>
<address> envuelve los datos de contacto del autor de la página o del artículo: nombre, correo, enlace a redes sociales... No es solo para direcciones postales, a pesar del nombre.
<address>
Escrito por Ana García ·
<a href="mailto:ana@ejemplo.com">ana@ejemplo.com</a>
</address>Fechas y horas: <time>
<time> marca una fecha o una hora
de forma que un ordenador también pueda entenderla, gracias al
atributo datetime en formato estándar
(AAAA-MM-DD).
<p>Publicado el <time datetime="2026-03-04">4 de marzo de 2026</time></p>
El texto que se ve (4 de marzo de 2026) puede
escribirse como tú quieras; el atributo datetime es
la versión "para máquinas".
Practica: la ficha de una noticia
Convierte "6 de marzo de 2026" en un <time>
correcto, envuelve la firma en <address>, y
marca "CSS" como abreviatura de "Cascading Style Sheets".