Saltar al contenido principal
Codigo Heroe
Tarea anterior
Marcado de texto avanzado11/19
A la lista de tareas
  1. 1. Conectar y quitar hojas de estilo
  2. 2. La etiqueta ul: listas no ordenadas
  3. 3. La etiqueta ol: listas ordenadas
  4. 4. Los atributos start y reversed
  5. 5. Listas anidadas
  6. 6. Las etiquetas dl, dt y dd: listas de descripciones
  7. 7. La etiqueta pre: texto preformateado
  8. 8. Entidades HTML
  9. 9. La etiqueta code: fragmentos de código
  10. 10. Combinar pre y code
  11. 11. La etiqueta q: citas dentro de una oración
  12. 12. La etiqueta blockquote: citas en bloque
  13. 13. La etiqueta br: saltos de línea
  14. 14. Las etiquetas sub y sup: subíndices y superíndices
  15. 15. La etiqueta time: fechas y horas
  16. 16. Las etiquetas em e i: énfasis y texto diferenciado
  17. 17. Las etiquetas strong y b: importancia y atención
  18. 18. Las etiquetas del e ins: marcar cambios
  19. 19. Las etiquetas div y span: contenedores para estilos
Siguiente tarea
  • Matriz de skills
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

La etiqueta q: citas dentro de una oración

Resulta que las etiquetas de la entrada anterior servían para marcar citas. Nos viene muy bien, porque ahora necesitamos citar unas palabras en el texto del blog.

HTML tiene varias etiquetas para citas. La más sencilla es <q>, de «quote». Se usa para marcar citas dentro de una oración. El navegador agrega las comillas al texto automáticamente, así que no hace falta escribirlas a mano.

Si conoces la dirección web de la fuente, puedes indicarla en el atributo cite:

La especificación dice: <q cite="https://www.w3.org/TR/html52/">El elemento q representa contenido en línea citado de otra fuente</q>.

No confundas el atributo cite con la etiqueta <cite>. La etiqueta es una «versión ampliada» del atributo cite. Además de la dirección de la fuente, puede indicar el título de la obra citada o el nombre de la persona u organización de la que procede el texto. El navegador muestra <cite> en cursiva.

Cuando usamos <q> y <cite> juntos, pueden aparecer uno junto al otro:

<p>Como dijo <cite>Charles Bukowski</cite>: <q>Un intelectual habla de forma complicada sobre algo sencillo; un artista describe algo complicado con palabras sencillas.</q></p>

La etiqueta <cite> también puede usarse sin una cita:

<p>¿Cuál es tu Doctor favorito de la serie <cite>Doctor Who</cite>?</p>
  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Sitio de un principiante en desarrollo web</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <p>Blog</p> <nav> Inicio </nav> </header> <main> <article> <h1>Día siete. Cupcake me dio una tarea</h1> <p>Hoy vino Cupcake y me dio una tarea algo peculiar. Una gatita se mudó junto a su casa y él no sabe componer canciones. Por eso me pidió que buscara una gran obra para cantársela.</p> <p>Como se suele decir, para un buen gato, hasta febrero es primavera (sabiduría popular).</p> </article> <aside> Tu anuncio podría estar aquí </aside> </main> <footer> Pie de página </footer> </body> </html>
CSS
body { padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; } h1 { font-size: 20px; line-height: normal; } nav { color: #888888; } aside { margin: 20px 0; color: #c4c4c4; }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0
    1. Envuelve el texto para un buen gato, hasta febrero es primavera en <q>.
    Codigo Heroe

    © 2023-2026, codigoheroe.com