Curso HTML 4.4 Citas, código y otros elementos inline (q, blockquote, code, pre, mark)

Elemento

El elemento se utiliza para citas breves dentro de un párrafo. Inserta automáticamente comillas de apertura y cierre según el idioma del documento. Forma parte del flujo de texto inline.

• Uso básico: envuelve la cita breve.
• Atributo cite: URL de la fuente de la cita (metadato, no visible directamente).
• Anidamiento: al incluir otro dentro, el navegador alterna comillas simples y dobles.
• Soporte: HTML 4 y posteriores.

Ejemplo de cita breve con atributo cite y anidamiento:

<!-- Texto principal con una cita breve -->
<p>
  El autor afirma 
  <q cite='https://ejemplo.com/fuente'>
    La práctica hace al maestro, pero 
    <q>la constancia es la clave</q>
  </q> 
  en el aprendizaje.
</p>
  

Elemento

Para citas más extensas que ocupan su propio bloque. Su semántica deja claro que es un fragmento textual citado de otra fuente.

• Uso básico: bloque independiente con margen por defecto.
• Atributo cite: URL de dónde se extrajo la cita.
• Contenido: puede contener párrafos, listas, etc.
• Comportamiento: no añade comillas automáticamente.

Ejemplo de bloque de cita con dos párrafos y referencia:

<blockquote cite='https://ejemplo.com/articulo'>
  <p>
    En el corazón del desarrollo web está la semántica,
    pues permite a navegadores y tecnologías de asistencia
    comprender mejor el contenido.
  </p>
  <p>
    Además, mejora el SEO y facilita el mantenimiento a largo plazo.
  </p>
</blockquote>
  

Elemento

<p>
  Para iterar en JavaScript usamos 
  <code>for (var i = 0; i < 10; i++) { ... }</code> 
  y luego comprobamos el resultado.
</p>
  

<pre>
<code>
// Función recursiva para factorial
function factorial(n) {
    if (n <= 1) {
        return 1;  <!-- Caso base -->
    }
    return n * factorial(n - 1);  <!-- Llamada recursiva -->
}

console.log(factorial(5));  // Imprime 120
</code>
</pre>
  

<p>
  En esta guía hemos visto cómo utilizar 
  <mark>q</mark>, 
  <mark>blockquote</mark>, 
  <mark>code</mark>, 
  <mark>pre</mark> y 
  <mark>mark</mark> 
  para mejorar la semántica y accesibilidad de tu HTML.
</p>