Citas, Abreviaturas y Comentarios
Aprende a citar fuentes externas con <blockquote> y <q>, documentar tu código con comentarios <!-- --> y definir abreviaturas con <abbr>.
Citas en HTML: <blockquote> y <q>
HTML5 cuenta con elementos semánticos específicos para citar textos o frases provenientes de otras fuentes:
-
<blockquote cite="URL">: Define una sección que es una cita larga proveniente de otra fuente. Los navegadores suelen aplicarle una sangría automática por la izquierda. El atributociteopcional almacena la URL de origen de la cita. -
<q>: Cita corta en línea dentro de un párrafo. El navegador inserta automáticamente las comillas tipográficas correspondientes al idioma del documento.
Abreviaturas, Obras y Contacto
| Etiqueta | Uso | Ejemplo de Código |
|---|---|---|
<abbr> |
Abreviatura o sigla. Su atributo title despliega la definición completa al pasar el ratón. |
<abbr title="World Health Organization">WHO</abbr> |
<address> |
Información de contacto del autor de la página (email, teléfono, dirección física). Se renderiza en cursiva. | <address>[email protected]</address> |
<cite> |
Define el título de una obra creativa (libro, película, software o pintura). | <cite>El Quijote</cite> de Cervantes |
<bdo> |
Bi-Directional Override: fuerza la dirección de lectura con dir="rtl" (de derecha a izquierda). |
<bdo dir="rtl">Texto al revés</bdo> |
Comentarios en HTML
Los comentarios te permiten escribir notas explicativas en tu código o desactivar fragmentos de marcado durante las pruebas. Comienzan con <!-- y terminan con -->:
<!-- Este es un comentario: no se muestra en la pantalla del usuario -->
<p>Este párrafo sí se mostrará.</p>
<!-- <button>Botón temporalmente desactivado para pruebas</button> -->⚡ Citas, Abreviaturas y Comentarios en Acción
Pasa el cursor sobre la sigla HTML y observa las comillas automáticas del elemento <q>:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Citas y Abreviaturas</title>
<style>
body { font-family: Arial, Helvetica, sans-serif; padding: 25px; line-height: 1.6; background: #fafafa; }
.card { background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 25px; max-width: 550px; }
blockquote {
margin: 20px 0;
padding: 12px 20px;
background: #f3f4f6;
border-left: 4px solid #6366f1;
font-style: italic;
color: #374151;
}
</style>
</head>
<body>
<!-- Tarjeta de presentación de citas académicas -->
<div class="card">
<h2>Citas y Fuentes de Información</h2>
<p>
Como solía decir Tim Berners-Lee:
<q>La Web no conecta máquinas, conecta personas.</q>
</p>
<blockquote cite="https://www.w3.org/Consortium/">
"El poder de la Web está en su universalidad. El acceso por parte de todos, independientemente de la discapacidad, es un aspecto esencial."
</blockquote>
<p>
El lenguaje estándar es
<abbr title="HyperText Markup Language versión 5">HTML5</abbr>, mantenido por el
<abbr title="World Wide Web Consortium">W3C</abbr>.
</p>
<hr style="border: 0; border-top: 1px solid #e5e7eb;">
<address>
Escrito por <strong>Equipo Pedagógico de Kilopolis</strong><br>
Soporte: <a href="mailto:[email protected]">[email protected]</a><br>
Campus Digital, 2026.
</address>
</div>
</body>
</html>¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.🚀 ¿Quieres dominar Manual Completo de HTML5 y crear proyectos reales?
Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.
🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.