Teoría
Teoría

Entidades HTML

En la nueva entrada queremos mencionar algunas etiquetas. Y queremos que en el navegador se vean igual que en el código: por ejemplo, <h1> o <p>. No es tan sencillo como parece.

HTML reserva algunos caracteres para su sintaxis. Por ejemplo, el signo menor que (<) puede iniciar una etiqueta, así que el navegador puede interpretar lo que sigue como código HTML en lugar de mostrarlo como texto.

¿Cómo podemos mostrar caracteres especiales, como mayor que y menor que, en el texto de la página? Podemos sustituirlos por referencias de caracteres con nombre, también llamadas entidades HTML.

Son secuencias que empiezan con un ampersand (&) y terminan con punto y coma (;). Por ejemplo, menor que se puede escribir como <, de «less than», y mayor que como >, de «greater than»:

&lt;ul&gt;
&lt;/ul&gt;

En el navegador, este código se verá así:

Hay muchas otras entidades, como ©, «, » y §. Puedes consultar la lista completa en esta página.

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 seis. No entendí nada</h1> <p>Hoy visité varios sitios para ver cómo estaban hechos. Encontré unas citas y dos etiquetas que no conocía: cite y blockquote.</p> <p>No entendí en qué se diferencian. Cerré el navegador. Ya lo investigaré mañana.</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; }

ObjetivosRealizado

En el primer párrafo, escribe la entidad < antes de cite y > después.
Haz lo mismo con blockquote: escribe < antes y > después.