Curso de HTML / Dar significado al texto con em, strong, citas y code

Los elementos de texto de HTML indican por qué un pasaje se distingue del resto: em expresa énfasis, strong importancia y q o blockquote una cita. abbr identifica abreviaturas, code representa código y kbd entrada del usuario. Su función no se reduce a mostrar cursiva, negrita o una fuente monoespaciada.

Diferenciar énfasis e importancia

El énfasis modifica cómo debe entenderse una frase; la importancia señala una advertencia o una parte especialmente relevante. Observa cómo se distinguen el momento de guardar y la advertencia sobre la contraseña:

<p>Save the file <em>before</em> refreshing the browser.</p>

<p><strong>Do not share your password.</strong></p>

Los navegadores suelen mostrar em en cursiva y strong en negrita, pero esos estilos no definen los elementos. Para conseguir únicamente una apariencia, utiliza CSS. A la inversa, que una hoja de estilos quite la negrita no elimina la importancia que el marcado sigue expresando.

Una frase completa debe dejar claro el significado también en su contexto. No confíes en que todos los sistemas de lectura anuncien automáticamente el énfasis del mismo modo.

Marcar citas breves y citas en bloque

q corresponde a una cita dentro de una frase y blockquote a una cita que forma un bloque independiente. Los textos siguientes son instrucciones ficticias creadas para mostrar el marcado; no son declaraciones atribuidas a una persona real.

<p>The notice says <q>Save your changes</q>.</p>



<blockquote>

  <p>Plan the document structure before writing its content.</p>

</blockquote>

El navegador puede añadir las comillas de q. Evita escribir otro par alrededor sin comprobar el resultado. En una cita real, verifica las palabras y muestra la fuente mediante texto visible y, cuando proceda, un enlace. Un atributo cite no dibuja automáticamente una referencia bibliográfica para el lector.

Explicar abreviaturas de forma legible

Utiliza abbr para identificar una abreviatura. Desarrolla el término la primera vez en el texto, como en el ejemplo:

<p>HyperText Markup Language (<abbr title="HyperText Markup Language">HTML</abbr>) defines the structure of a web page.</p>

El atributo title puede aportar la expansión, pero no debe ser la única forma de conocerla. El lector no siempre dispone de un puntero para detenerse sobre la abreviatura y ver una ayuda. Una vez presentado el término, no hace falta repetir la expansión en cada aparición dentro del mismo contexto.

Distinguir código de acciones del usuario

code marca un fragmento de código o un nombre de archivo tratado como código; kbd representa una entrada que debe realizar el usuario. En este caso se diferencia el archivo que se guarda de las teclas utilizadas:

<p>Save <code>index.html</code> with <kbd>Ctrl</kbd>+<kbd>S</kbd>.</p>

Un bloque con espacios y saltos significativos puede colocar code dentro de pre. En este sitio los ejemplos utilizan <pre><code class="language-html">…</code></pre> para integrarse con el resaltador. La clase configura la presentación del ejemplo, pero no cambia el significado básico de esos elementos. Para mostrar signos de etiquetas como texto, aplica las referencias de caracteres de HTML.

Comprobar todos los elementos en un documento

Copia el siguiente ejemplo completo en text-semantics.html, guárdalo en UTF-8 y ábrelo con el navegador. No necesita archivos adicionales. El texto de cita vuelve a ser ficticio, utilizado solo para la práctica.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Text semantics practice</title>
</head>
<body>
  <h1>A short notice</h1>
  <p>Check the result <em>after</em> saving the file.</p>
  <p><strong>Keep the original file.</strong></p>
  <p>A fictional instruction reads <q>Save your changes</q>.</p>
  <p>This uses HyperText Markup Language (<abbr title="HyperText Markup Language">HTML</abbr>).</p>
  <p>Save with <kbd>Ctrl</kbd>+<kbd>S</kbd>.</p>
  <pre><code>&lt;p&gt;Example sentence&lt;/p&gt;</code></pre>
</body>
</html>

Localiza la palabra enfatizada, la advertencia, la cita y el desarrollo de HTML. En el último bloque debe aparecer el texto literal de una etiqueta <p>, no un párrafo nuevo interpretado dentro del ejemplo de código.

Sustituye temporalmente strong por span, guarda y recarga. Después restaura strong porque el mensaje sí es importante. La comparación ayuda a separar el aspecto inicial de la elección semántica. La referencia del elemento code de MDN detalla su uso; la revisión básica de accesibilidad aplica esta misma distinción al resto de la página.