Texto y contenido

El texto es la materia prima más común de cualquier página web, y HTML tiene un vocabulario rico para darle estructura y significado. No todos los elementos de texto son iguales: algunos definen bloques — unidades independientes que ocupan su propia línea y crean espacio visual antes y después (<h1>, <p>) — y otros son inline — fragmentos que fluyen dentro de un bloque y le agregan significado semántico a una porción del texto (<strong>, <em>, <abbr>).

La distinción no es solo técnica. Cuando el autor envuelve un término en <abbr title="Cascading Style Sheets">CSS</abbr>, no solo informa al navegador que ese texto es una abreviatura: también le da contexto a los lectores de pantalla para anunciarlo correctamente, y a los motores de búsqueda para entender qué significa esa sigla en ese contexto. El elemento correcto comunica intención de manera que una clase CSS nunca puede.

El error más frecuente al aprender HTML es usar los elementos de texto por su apariencia por defecto — <h1> porque es grande y negrita, <strong> porque es negrita — en lugar de por su significado. Los estilos por defecto del navegador son orientativos, pero lo que realmente importa es la semántica: el aspecto visual se controla con CSS, el significado se declara con el elemento HTML correcto.

Cómo funciona

Elementos de bloque de texto

Los bloques de texto definen la jerarquía y el flujo del contenido. Los encabezados (<h1> a <h6>) estructuran la página como un índice: <h1> es el título principal (uno por página), <h2> son las secciones, <h3> las subsecciones, y así en cascada. Esta jerarquía es crítica para la accesibilidad — los lectores de pantalla permiten navegar por encabezados — y para el SEO. Los párrafos (<p>) son la unidad básica de texto prosa.

Énfasis e inline semántico

Los elementos inline no crean bloques — fluyen dentro del párrafo o encabezado que los contiene. Cada uno tiene un significado preciso:

• <strong> — importancia o urgencia. Por defecto se muestra en negrita, pero su función es semántica, no visual.
• <em> — énfasis que cambia el sentido de la oración (en lenguaje hablado, sería la palabra que se acentúa). Por defecto, cursiva.
• <mark> — texto resaltado o marcado como relevante en el contexto actual (resultados de búsqueda, fragmento seleccionado).
• <small> — texto de letra pequeña: notas al pie, avisos legales, atribuciones.
• <abbr> — abreviatura o sigla. El atributo title expande su significado.
• <time> — fecha u hora legible por máquina. El atributo datetime da el valor en formato ISO.
• <sub> — subíndice tipográfico (fórmulas químicas, notas al pie numeradas).

Control de flujo de texto

<br> es un salto de línea dentro de un párrafo — no es un mecanismo de espaciado. Su uso legítimo es contenido donde el salto de línea es semántico: una dirección postal, estrofas de un poema. Para crear espacio entre bloques, el camino correcto es CSS (margin), no <br> repetidos.

<hr> es una separación temática entre bloques de contenido. Visualmente aparece como una línea horizontal, pero su significado es “cambio de tema” — no decorativo.

Entidades HTML

Las entidades son secuencias de escape para caracteres que de otro modo serían ambiguos en HTML. Las más comunes: < para <, > para >, & para &,   para un espacio de no separación. En documentos UTF-8, la mayoría de los caracteres especiales (acentos, ñ, emoji) se pueden escribir directamente sin escaparlos.

Cuándo usar qué

<p>
  <strong>Atención:</strong> la especificación de
  <abbr title="Cascading Style Sheets">CSS</abbr> fue publicada el
  <time datetime="1996-12-17">17 de diciembre de 1996</time>.
  La versión actual, <em>CSS3</em>, se desarrolla en módulos independientes.
</p>