3) Texto y semántica

Ejemplos (izquierda) y vista gráfica (derecha) con colores relacionados por etiqueta.

Leyenda de colores (etiqueta → color)
h1–h6 p strong em mark small time abbr cite q blockquote address code pre kbd samp br hr span div a

Etiqueta: <h1>–<h6>

<h1>Título principal</h1>
<h2>Subtítulo</h2>

Etiqueta: <p> + en línea

<p>
  Texto con
  <strong>importancia</strong>,
  <em>énfasis</em>,
  <mark>resaltado</mark>,
  <small>nota</small>,
  <time datetime="2026-02-12">12/02/2026</time>,
  <abbr title="Cascading Style Sheets">CSS</abbr>
  y un salto<br>de línea.
</p>

Etiqueta: <a>

<a href="#destino" title="Ir a la sección destino">Ir al destino</a>

Etiquetas: <q> y <cite>

<p>
  Cita corta: <q>Menos es más</q> — <cite>Mies van der Rohe</cite>
</p>

Etiqueta: <blockquote>

<blockquote cite="https://ejemplo.com">
  La educación es el arma más poderosa.
</blockquote>

Etiqueta: <address>

<address>
  Contacto: <a href="mailto:info@ejemplo.com">info@ejemplo.com</a>
</address>

Etiqueta: <code>

<p>Usa <code>display: flex;</code> para layout.</p>

Etiqueta: <pre>

<pre>Línea 1
  Línea 2 (con espacios)
</pre>

Etiqueta: <kbd>

<p>Presiona <kbd>Ctrl</kbd> + <kbd>S</kbd> para guardar.</p>

Etiqueta: <samp>

<pre><samp>Salida: Operación completada</samp></pre>

Etiqueta: <hr>

<hr>

Etiquetas genéricas: <div> y <span>

<div>
  Texto con <span>un fragmento</span> en línea.
</div>

Vista gráfica (misma paleta)

Cada etiqueta se muestra con el mismo color que en los ejemplos.

h1: Título principal
h2: Subtítulo

p: Texto con strong, em, mark, small, , abbr y un salto
de línea.

a: Ir al destino

q: Menos es más — cite: Mies van der Rohe

blockquote: La educación es el arma más poderosa.
address: Contacto: info@ejemplo.com

code: display: flex; 

pre: Línea 1
  Línea 2 (con espacios)

kbd: Ctrl + S 

samp: Salida: Operación completada
hr:
div: Texto con span: un fragmento en línea.
Destino (#destino) — punto de referencia del enlace <a>.