Saltar al contenido principal

Texto

El lenguaje HTML permite estructurar el texto de una página web de forma semántica.

Encabezados

Los encabezados sirven para identificar las secciones de un documento e indicar su importancia relativa. El texto del encabezado debe ser claro y descriptivo.

Existen seis niveles de encabezado ( h1, h2, h3, h4, h5 y h6 ) y deben anidarse correctamente, es decir, respetando el orden lógico.

Ejemplo

Título 1

...

Título 2

...

Título 3

...

Título 3

...

Título 2

...
HTML
<h1>Título 1</h1>
...
    <h2>Título 2</h2>
    ...
        <h3>Título 3</h3>
        ...
        <h3>Título 3</h3>
        ...
    <h2>Título 2</h2>
    ...

Los usuarios de lectores de pantalla utilizan a menudo los encabezados para navegar dentro de una página web.

Aviso: Evita usar los encabezados para cambiar el tamaño del texto. Recuerda que HTML indica la estructura del contenido y que de la apariencia visual se encarga CSS.

Párrafos

Los párrafos nos permiten dividir el texto en fragmentos temáticos, facilitando así su lectura.

Es recomendable limitar los párrafos a una única idea principal, para que resulten más fáciles de comprender.

Ejemplo

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

HTML
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.</p>

Aviso: Evita el uso de párrafos vacíos para crear saltos de línea, los lectores de pantalla los leen como “en blanco”.

Listas

Las listas se utilizan para mostrar un conjunto de elementos consecutivos.

Listas no ordenadas

Las listas no ordenadas (ul) se utilizan cuando los elementos no tienen un orden específico.

Ejemplo
  • Peras
  • Manzanas
  • Melones
  • Sandías
HTML
<ul>
    <li>Peras</li>
    <li>Manzanas</li>
    <li>Melones</li>
    <li>Sandías</li>
</ul>

Listas ordenadas

Las listas ordenadas (ol) indican que los elementos siguen un orden progresivo o una secuencia.

Ejemplo
  1. Encender el ordenador
  2. Abrir el navegador
  3. Ir a la web de búsqueda
  4. Teclear el término a buscar
HTML
<ol>
    <li>Encender el ordenador</li>
    <li>Abrir el navegador</li>
    <li>Ir a la web de búsqueda</li>
    <li>Teclear el término a buscar</li>
</ol>

Listas de definición

Las listas de definición (dl) sirven para mostrar definiciones de palabras y se estructuran como término (dt) y definición (dd).

Ejemplo
HTML
Lenguaje de marcado para la elaboración de páginas web.
CSS
Lenguaje usado para definir y crear la presentación de páginas web.
YAML
Formato de serialización de datos legible por humanos.
HTML
<dl>
    <dt>HTML</dt>
    <dd>Lenguaje de marcado para la elaboración de páginas web.</dd>
    <dt>CSS</dt>
    <dd>Lenguaje usado para definir y crear la presentación de páginas web.</dd>
    <dt>YAML</dt>
    <dd>Formato de serialización de datos legible por humanos.</dd>
</dl>

Citas

Las citas pueden ser en línea, cuando aparecen dentro de un párrafo, o en bloque, cuando forman un párrafo.

Cita en línea

Ejemplo

El poeta dijo: En muchas ocasiones la lectura de un libro ha hecho la fortuna de un hombre, decidiendo el curso de su vida.

HTML
<p>El poeta dijo: <q>En muchas ocasiones la lectura de un libro
ha hecho la fortuna de un hombre, decidiendo el curso
de su vida.</q></p>

Cita en bloque

Ejemplo

El cuerpo humano es el carruaje; el yo, el hombre que lo conduce; el pensamiento son las riendas, y los sentimientos los caballos.

HTML
<blockquote><p>El cuerpo humano es el carruaje; el yo,
el hombre que lo conduce; el pensamiento son las riendas,
y los sentimientos los caballos.</p></blockquote>

Énfasis

Existen dos elementos estructurales para enfatizar las palabras:

  • Cursiva: <em>Texto</em>
  • Negrita: <strong>Texto</strong>

Idioma

Indicar el idioma ayuda a las aplicaciones de síntesis de voz, traducción y corrección de textos a presentar la información de forma correcta.

Identificamos el idioma mediante el atributo lang.

Ejemplo 1: Identifica el idioma de la página añadiendo el atributo lang a la etiqueta html.

HTML
<html lang="es">

Ejemplo 2: Marca los cambios de idioma usando el atributo lang en el elemento que engloba al texto.

HTML
<p>El lenguaje (<abbr lang="en" title="Hypertext Markup
Language">HTML</abbr>)...</p>

Nota: Los códigos de los idiomas siguen el estándar ISO 639.