Textos fundamentales HTML

This translation is incomplete. Please help translate this article from English

Uno de los trabajos principales de HTML es dar estructura de texto y significado (también conocido como semántica), de forma que un navegador pueda mostrarlo correctamente. Este articulo explica la forma en que se puede usar HTML para estructurar una página de texto añadiendo encabezados y párrafos, efectos de énfasis en palabras, listas y más.

Prerrequisitos: Familiarizarse con el HTML básico, tal y como se describe en Empezar con el HTML.
Objetivo: Aprender a marcar una página de texto básica para darle estructura y significado, incluidos párrafos, encabezados, listas, efectos de énfasis y citas.

Conceptos básicos: Encabezados y párrafos

Los textos más estructurados están compuestos por títulos y párrafos, independientemente de si lees una historia, un periódico, un libro de texto, una revista, etc.

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

El contenido estructurado simplifica la experiencia lectora y se disfruta más.

En HTML, cada párrafo tiene que estar delimitado por un elemento <p>, como en este ejemplo:

<p>Soy un párrafo, desde luego que lo soy.</p>

Cada título tiene que estar delimitado por un elemento de título:

<h1>Yo soy el título de la historia.</h1>

Hay seis elementos de título: <h1><h2><h3><h4><h5>, and <h6>. Cada elemento representa un nivel de contenido diferente en el documento; <h1> representa el título principal, <h2> representa el subtítulo, <h3> representa el subtítulo del subtítulo, y así sucesivamente.

Cómo establecer la estructura jerárquica

Como ejemplo, en una historia, <h1> representaría el título de la historia, <h2> representaría el título de cada capítulo y <h3> las diferentes secciones del capítulo, y así sucesivamente.

<h1>The Crushing Bore</h1>

<p>By Chris Mills</p>

<h2>Chapter 1: The Dark Night</h2>

<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p>

<h2>Chapter 2: The eternal silence</h2>

<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p>

<h3>The specter speaks</h3>

<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p>

Realmente es a tu elección lo que cada elemento involucrado represente, siempre y cuando la jerarquía tenga sentido. Solo es necesario que tengas en cuenta unas pocas buenas prácticas mientras creas la estructura:

  • Preferentemente debes usar solo un <h1> por página; este es el nivel de título superior, y todos los demás se sitúan por debajo de él en la jerarquía.
  • Asegúrate de que usas los títulos en el orden correcto en la jerarquía. No uses los <h3> para representar subtítulos, seguidos de los <h2> para representar los subtítulos de los subtítulos; eso no tiene sentido y provocará resultados extraños.
  • De los seis niveles de títulos disponibles, debes procurar no usar más de tres por página, a menos que creas que es realmente necesaria. Los documentos con muchos niveles (por ejemplo, una jerarquía de títulos muy profunda) son de difícil manejo y navegación. En esos casos, se recomienda, si es posible, separar el contenido en varias páginas.

¿Por qué necesitamos estructura?

Para responder a esta cuestión, echemos un vistazo a text-start.html; el apartado inicial de nuestro ejemplo en curso para este artículo (una buena receta de hummus). Debes guardar una copia de este archivo en tu ordenador porque después la necesitarás para los ejercicios prácticos. El cuerpo (<body>) de este documento incluye varios elementos de contenido que no están marcadas de ninguna manera pero están separados por marcas de párrafo (Enter/Return para continuar en la siguiente línea).

Sin embargo, cuando abres el documento en tu navegador, verás que el texto aparece como un ¡una masa enorme!

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

Esto se debe a que no hay elementos que den estructura al contenido, por lo que el navegador no sabe qué es un encabezado y qué es un párrafo. Además, es fundamental para:

  • Atraer y mantener la atención: Los usuarios que miran una página web tienden a escanearla con rapidez para encontrar el contenido relevante que hay en ella, a menudo empiezan por leer los encabezados para comenzar (solemos pasar muy poco tiempo en una página web). Si no pueden ver nada útil en unos segundos, es probable que se sientan frustrados y se vayan a otro sitio.
  • SEO: Los motores de búsqueda que indizan tu página consideran el contenido de los títulos como palabras clave importantes, e infuyen en el ranking de búsqueda de la página. Sin encabezados, tu página tendrá un rendimiento bajo en términos de optimización del motor de búsqueda SEO.
  • Accesibilidad: Las personas con discapacidad visual severa no suelen leer páginas web; en lugar de ello, las escuchan. Lo hacen con un software llamado screen reader (lector de pantallas). Este software proporciona acceso rápido a un contenido textual. Entre las diversas técnicas que emplean, leen los encabezados para proporcionar un esquema del documento que permite a los usuarios encontrar rápidamente la información que quieren. Si no hay encabezados disponibles, se ven obligados a escuchar el documento entero.
  • Aplicar CSS y JS: Para aplicar estilos al contenido con CSS, o para que haga cosas interesantes con JavaScript, necesitas tener elementos que delimiten el contenido relevante para que CSS/JavaScript puedan focalizarse en este efectivamente.

Por lo tanto, debemos dar a nuestro contenido una estructura definida.

Aprendizaje Activo: Dar estructura a nuestro contenido

Pasemos directamente a un ejemplo inmediato. En el ejemplo de abajo, añade en el campo Entrada elementos al texto en bruto para que en el campo Salida aparezca como un encabezado y dos párrafos.

Si cometes un error, puedes reiniciar el ejemplo con el botón Reiniciar. Si te encallas, pulsa el botón Mostrar la solución para ver la respuesta...

¿Por qué necesitamos semántica?

Contamos con la semántica para todo lo que nos rodea. Nos basamos en experiencias previas para conocer la función de cada objeto cotidiano; cuando miramos un objeto, sabemos cuál debe ser su función. Por ejemplo, contamos con que la luz roja del semámaforo signifique «alto», y la luz verde que signifique «continúa». Las cosas se complican con rapidez si se aplica una semántica incorrecta (¿habrá algún país que use la luz roja para indicar «continúa»? Esperemos que no).

De manera similar, debemos asegurarnos de que utilizamos los elementos adecuados y damos a nuestro contenido el significado y la función correctos, o apariencia adecuada.  En este mismo sentido, el elemento <h1> es un elemento semántico que da al texto al que delimita la función (o significado) de «un titular de primer rango en tu página».

<h1>Este es un titular de primer rango</h1>

Por defecto, el navegador le asignará una fuente de gran tamaño para darle el aspecto de un titular (aunque podría darle el estilo que quisiera usando CSS). Lo más importante es que su valor semántico se va a usar de diferentes maneras, por ejemplo, por los motores de búsqueda y los lectores de pantalla (como se mencionó antes).

Por otra parte, podrías hacer que cualquier elemento parezca un titular de primer rango. Considera el siguiente código:

<span style="font-size: 32px; margin: 21px 0;">¿Es este un titular de primer rango?</span>

Este es un elemento <span>. No tiene semántica. Se usa para delimitar contenido cuando se le quiere aplicar CSS (o tratarlo con JavaScript) que no proporciona ningún significado extra (encontrarás más información sobre este tipo de elemento más adelante en el curso). Hemos aplicado CSS este elemento para que parezca un titular de primer rango, pero al no tener valor semántico, no tiene ninguna de las ventajas añadidas que hemos descrito antes. Es una buena idea usar el elemento HTML apropiado para la tarea.

Listas

Ahora volvamos nuestra atención hacia las listas. Las listas están en todos los aspectos de nuestra vida: desde la lista de compra a la lista de instrucciones que sigues inconscientemente para llegar a casa todos los días, o las listas de instrucciones que sigues en estos tutoriales. Las listas están en todos lados en la web también y hay tres tipos diferentes de las que nos vamos a ocupar.

Listas desordenadas

Las listas desordenadas se usan para marcar listas de artículos cuyo orden no es importante. Tomemos como ejemplo una lista de la compra:

leche
huevos
pan
hummus

Cada lista desordenada comienza con un elemento <ul> (unordered list) que delimita todos los artículos de la lista:

<ul>
leche
huevos
pan
hummus
</ul>

El siguiente paso es delimitar cada artículo de la lista con un elemento <li> (list item).

<ul>
  <li>leche</li>
  <li>huevos</li>
  <li>pan</li>
  <li>hummus</li>
</ul>

Aprendizaje activo: Marcar una lista desordeanda.

Edita el ejemplo siguiente para crear tu propia lista HTML desordenada.

Listas ordenadas

Las listas ordenadas son aquellas en las que el orden de los elementos importa. Tomemos como ejemplo una lista de instrucciones para seguir un itinerario:

Conduce hasta el final de la calle
Gira a la derecha
Sigue derecho por las dos primeras rotondas
Gira a la izquierda en la tercera rotonda
El colegio está a la derecha, 300 metros más adelante

La estructura de marcado es la misma que para las listas desordenadas, excepto que debe delimitar los elementos de la lista con una etiqueta <ol> (ordered list), en lugar de <ul>:

<ol>
  <li>Conduce hasta el final de la calle</li>
  <li>Gira a la derecha</li>
  <li>Sigue derecho por las dos primeras rotondas</li>
  <li>Gira a la izquierda en la tercera rotonda</li>
  <li>El colegio está a tu derecha, 300 metros más adelante</li>
</ol>

Aprendizaje activo: Marcar una lista ordenada

Edita el siguiente ejemplo para crear tu propia lista ordenada en HTML.

Aprendizaje activo: Marcar la página de tu receta

Llegados a este punto del artículo, tienes toda la información necesaria para marcar la página de ejemplo con tu receta. Puedes escoger entre guardar una copia local del archivo inicial text-start.html y trabajar en él, o hacerlo sobre el ejemplo editable de abajo. Probablemente sea mejor trabajar en local porque podrás guardar tus progresos, mientras que si lo haces sobre el ejemplo editable, los cambios se perderán la próxima vez que cargues la página. Ambos métodos tienen pros y contras.

Si te encallas, siempre puedes pulsar el botón Mostrar la solución o comprobar el ejemplo completo text-complete.html en github repo.

Listas anidadas

Es perfectamente correcto anidar una lista dentro de otra. Puede que quieras tener subelementos bajo elementos de rango superior. Tomemos la segunda lista de nuestro ejemplo de la receta:

<ol>
  <li>Pelar el ajo y picarlo a trozos gruesos.</li>
  <li>Quitar las semillas y el tallo del pimiento, y cortarlo a trozos gruesos.</li>
  <li>Meter todos los alimentos en una picadora.</li>
  <li>Picar todos los ingredientes hasta conseguir una pasta.</li>
  <li>Picar poco tiempo para obtener un hummus de textura “gruesa”.</li>
  <li>Picar durante más tiempo si se desea obtener un hummus de textura más suave.</li>
</ol> 

Puesto que los dos últimos elementos están estrechamente relacionados con el elemento anterior (se leen como subinstrucciones u opciones que encajan bajo ese elemento), puede tener sentido anidarlos dentro de su propia lista desordenada e introducir esa lista bajo el cuarto elemento. Tendría el aspecto siguiente:

<ol>
  <li>Pelar el ajo y picarlo a trozos gruesos.</li>
  <li>Quitar las semillas y el tallo del pimiento, y cortarlo a trozos gruesos.</li>
  <li>Meter todos los alimentos en una picadora.</li>
  <li> Picar todos los ingredientes hasta conseguir una pasta.
    <ul>
      <li>Picar poco tiempo para obtener un hummus de textura “gruesa”.</li>
      <li>Picar durante más tiempo si se desea obtener un hummus de textura más suave.</li>
    </ul>
  </li>
</ol>

Vuelve al ejemplo anterior y reescribe la lista de este modo.

Énfasis e importancia

En el lenguaje humano, a menudo enfatizamos ciertas palabras para alterar el significado de una frase, y a menudo queremos destacar ciertas palabras como importantes o diferentes en algún sentido. HTML provee de variados elementos semánticos que nos permiten destacar contenido textual con tales efectos, y en ésta sección veremos los más comunes.

Énfasis

Cuando queremos dar énfasis al lenguaje hablado, acentuamos ciertas palabras y alternamos sutilmente el significado de lo que decimos. De manera similar, en el lenguaje escrito ponemos palabras en cursiva para destacarlas. Por ejemplo, las dos frases siguientes tienen significados diferentes:

Me alegro de que no llegues tarde.

Me alegro de que no llegues tarde.

La primera frase suena aliviada porque la persona no llega tarde. Por contra, la segunda suena sarcástica y algo pasivo-agresiva, expresa molestia porque la persona ha llegado tarde.

En HTML usamos el elemento <em> (emphasis) para marcar la relevancia. El documento logra entonces transmitir una lectura más interesante y además así lo reconocen los lectores de pantalla, que lo expresan con un tono de voz diferente. El navegador aplica por defecto el estilo de letra itálica, pero no debes utilizar esta etiqueta solamente para establecer el estilo de letra itáliza. Para usar ese estilo, debes utilizar únicamente la etiqueta del elemento <span> y algo de CSS u otra etiqueta con el elemento <i> (ver abajo).

<p>Me <em>alegro</em> de que no llegues <em>tarde</em>.</p>

Importancia

Para enfaztizar palabras importantes al hablar solemos emplear una voz más grave, y al escribir lo hacemos en estilo negrita. Por ejemplo:

Este líquido es altamente tóxico.

Cuento contigo. ¡No llegues tarde!

En HTML usamos el elemento <strong> (importancia fuerte) para marcar tales expresiones. El documento resulta entonces más útil, y de nuevo los lectores de pantalla reconocen estos elementos y el tono de voz cambia a uno más fuerte. El estilo negrita es el que aplican los navegadores por defecto, pero no debes usar esta etiqueta solamente para aplicar este estilo. Para hacer eso usa el elemento <span> y CSS, o un elemento  <b> (ver abajo).

<p>Este líquido es <strong>altamente tóxico</strong>.</p>

<p>Cuento contigo. <strong>¡No llegues tarde!</strong></p>

Puedes anidar elementos de enfasis dentro de elementos de importancia y viceversa si lo deseas:

<p>Este líquido es <strong>altamente tóxico</strong> —
si lo bebes, <strong>podrías <em>morir</em></strong>.</p>

Aprendizaje activo: ¡Seamos importantes!

En esta sección de aprendizaje activo, te proporcionamos un ejemplo editable. Practica un poco añadiendo algo de énfasis e importancia a las palabras que creas que lo necesitan.

Cursiva, negrita, subrayado...

Los elementos que hemos comentado hasta ahora tienen una semántica asociada clara. Las situaciones con <b> (negrita), <i> (cursiva), y<u> (subrayado) son algo más complicadas. Surgieron para que las personas pudieran escribir textos en negrita, cursiva o subrayado en un tiempo en el que pocos navegadores o ninguno admitían el CSS. Elementos como estos, que solo afectan a la presentación y no a la semántica, se conocen como elementos de presentación y no deberían usarse porque, como hemos visto, la semántica es muy importante para la accesibilidad y el SEO, entre otros aspectos.

HTML5 redefinió los elementos <b>, <i><u> con roles semánticos nuevos algo confusos.

Esta es la regla de oro: iel uso de <b>, <i> o <u> resulta adecuado cuando transmiten el significado que suele transmitir el uso tradicional de las negritas, itálicas o el subrayado, si no hay ningún otro elemento que resulte más adecuado. Sin embargo, siempre resulta crítico mantener una actitud orientada a la accesibilidad. El concepto de itálica no es demasiado útil para las personas que usan lectores de pantalla o para las personas que utilizan un sistema de escritura distinto del alfabeto latino.

  • <i> se usa para transmitir el significado que tradicionalmente transmite la itálica: extrangerismos, clasificaciones taxonómicas, conceptos técnicos, un pensamiento...
  • <b> se usa para transmitir el significado que tradicionalmente transmite la negrita: palabras clave, nombres de productos, sentencias...
  • <u> se usa para transmitir el significado que tradicionalmente transmite el subrayado: nombres propios, errores ortográficos...

Una observación prudente acerca del subrayado: La gente suele asociar estrechamente el subrayado con los hiperenlaces. Por ello en web es mejor reservar el subrayado para los enlaces. Utiliza el elemento &lt;u&gt; cuando resulte apropiado semánticamente, pero considera usar CSS para cambiar el subrayado por defecto por algo más adecuado en web. El ejemplo siguiente ilustra cómo puedes hacerlo.

<!-- nombres científicos -->
<p>
  The Ruby-throated Hummingbird (<i>Archilocus colubris</i>)
  is the most common hummingbird in Eastern North America.
</p>

<!-- extrangerismos -->
<p>
  The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
  <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
</p>

<!-- un error ortográfico reconocido -->
<p>
  Someday I'll learn how to <u>spel</u> better.
</p>

<!-- Palabras clave destacadas en una serie de instrucciones -->
<ol>
  <li>
    <b>Slice</b> two pieces of bread off the loaf.
  </li>
  <li>
    <b>Insert</b> a tomato slice and a leaf of
    lettuce between the slices of bread.
  </li>
</ol>

Pon a prueba tus habilidades!

Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Encuentra más ejercicios con los que comprobar que has retenido esta información antes de seguir adelante; consulta Pon a prueba tus habilidades: Prueba de conocimientos básicos de HTML.

Resumen

¡Eso es todo por ahora! Este artículo debería haberte dado una buena idea de cómo comenzar a marcar texto en HTML y presentado algunos de los elementos más importantes en este ámbito. Hay muchos más elementos semánticos para desarrollar en este ámbito, y veremos muchos más en nuestro artículo 'Más elementos semánticos', más adelante en el curso. En el siguiente artículo, veremos en detalle cómo crear hipervínculos, posiblemente el elemento más importante en la web.