Hubo un error de script en esta página. Mientras los editores del sitio lo solucionan, puedes ver una parte del contenido más abajo.

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Uno de los trabajos principales de HTML es dar estructura de texto y significado (también conocida 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 agregando encabezados y párrafos, enfatizando palabras, creando listas y más.

Prerrequisitos: Familiaridad básica con HTML, tal y como se describe en Getting started with HTML.
Objetivo: Aprender a marcar una página básica de texto para darle estructura y significado, incluidos párrafos, encabezados, listas, é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 estás leyendo 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 facilita la experiencia de lectura y se disfruta más.

En HTML, cada párrafo tiene que ser envuelto en un elemento <p>, como este:

<p>I am a paragraph, oh yes I am.</p>

Cada título tiene que ser envuelto en un elemento de título:

<h1>I am the title of the story.</h1>

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

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. Sólo necesitas considerar unas pocas buenas prácticas mientras creas la estructura:

  • Preferentemente debes únicamente usar un <h1> por página — este es el nivel de título superior, y todos los demás se situan por debajo de él jerárquicamente.
  • Asegúrate 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 séis niveles de títulos disponibles, debes procurar no usar más de tres por página, a menos que sientas la necesidad. Los documentos con muchos niveles (por ejemplo, una jerarquía de títulos muy profunda) se volverá difícil de manejar y dirigir. 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 marcha para este artículo (una buena receta de hummus). Debes guardar una copia de este archivo en tu ordenador ya que lo necesitarás para los ejercicios prácticos después. El <body> de este documento actualmente contiene varias partes de contenido — no están marcadas de ninguna manera pero está separadas 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 ¡gran pedazo!

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 para dar la estructura de contenido, por lo que el navegador no sabe lo qué es encabezado y lo qué es párrafo. Además, es fundamental para:

  • Atraer y mantener la atención: Los usuarios que miran una página web tienden a escanear rápidamente para encontrar contenido relevante, a menudo solo leen los encabezados para comenzar (usualmente pasamos muy poco tiempo en una página web). Si no pueden ver nada útil en unos segundos, es probable que se sientan frustrados e ir a otro lugar.
  • SEO: Los motores de búsqueda que indexan su página consideran el contenido de los títulos como palabras clave importantes para influir en el ranking de búsqueda de la página. Sin encabezados, su página tendrá un rendimiento bajo en términos de {{ glosario }} (optimización del motor de búsqueda).
  • Accesibilidad: Las personas con discapacidad visual severa habitualmente no leen páginas web; en lugar de ello, las escuchan. Ésto lo hacen con un software llamado screen reader (lector de pantallas). Éste software proporciona acceso rápido a un contenido textual dado. Entre las variadas técnicas empleadas, proporcionan un esquema del documento al leer los encabecamientos, permitiendo a los usuarios encontrar la información que quieren rápidamente. Si no hay cabeceras disponibles, se verán obligados a ecuchar el documento entero.
  • Aplicar CSS y JS: Para estilizar contenido con CSS, o que haga cosas interesantes con JavaScript, necesitas tener elementos envolviendo el contenido relevante para que CSS/JavaScript puedan efectivamente apuntar a él.

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

Aprendizaje Activo: Dando estructura a nuestro contenido

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

Si comete un error, puede reiniciar el ejemplo con el botón Reset. Si se estanca, pulse el botón Show solution para ver la respuesta..

¿Por qué necesitamos semántica?

La semantica esta incrustada en todo lo que nos rodea — Nos basamos on experiencias previas para saber la funcion de cada objeto cotidiano; cuando miramos un objeto, sabemos cual es la funcion que cumplen. Por Ejemplo, esperamos que la luz roja del semámaforo signifique "alto", y la luz verde que signifique "continúe". Las cosas se complican rapidamente si la semantica incorrecta es aplicada (¿habrá algun pais que use la luz roja para indicar "continúe"? Espero que no).

De manera similar, necesitamos asegurarnos de que estamos utilizando los elementos adecuados, dando a nuestro contenido su significado correcto, funcion, o apariencia adecuada.  En este mismo sentido el elemento <h1> es un elemento semantico, que da al texto al que envuelve la funcion (o significado) de "un titular de primer rango en tu pagina"

<h1>Éste es un titular de primer rango</h1>

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

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

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

Éste es un elemento <span>. No tiene semántica. Se usa para envolver contenido cuando se quiere aplicar CSS sobre él (o hacer algo con ello en JavaScript) sin darle ningún significado extra (encontrará más sobre éste tipo de elemento más adelante en el curso). Hemos aplicado CSS sobre él para que parezca un titular de primer rango, pero al no tener valor semántico, no tendrá ninguna de las ventajas añadidas descritas anteriormente. Es una buena idea usar el elemento HTML apropiado para la tarea.

Listas

Ahora volvamos nuestra atención a las listas. Las listas están en todos los aspectos de nuestra vida — desde la lista de compra a la lista de direcciones que sigues inconscientemente para llegar a tu casa cada día, o ¡las listas de instrucciones que estás siguiendo es estos tutoriales! Las listas están en todos lados en la Web también y tenemos tres tipos diferentes para preocuparnos.

Desordenadas

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

leche
huevos
pan
hummus

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

<ul>
leche
huevos
pan
hummus
</ul>

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

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

Aprendizaje activo: Marcando una lista desordeanda.

Trate de editar el ejemplo siguiente para crear su propia lista HTML desordenada.

Ordenadas

Las listas ordenadas son aquellas en las que el orden de los elementos importa. Tomemos una lista de direcciones como ejemplo:

Conduzca hasta el final de la calle
Gire a la derecha
Siga recto a través de las dos primeras rotondas
Gire a la izquierda en la tercera rotonda
El colegio está a su derecha, 300 metros más adelante

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

<ol>
  <li>Conduzca hasta el final de la calle</li>
  <li>Gire a la derecha</li>
  <li>Siga recto a través de las dos primeras rotondas</li>
  <li>Gire a la izquierda en la tercera rotonda</li>
  <li>El colegio está a su derecha, 300 metros más adelante</li>
</ol>

Aprendizaje activo: Marcando una lista ordenada

Intente editar el siguiente ejemplo para crear su propia lista ordenada en HTML.

Aprendizaje activo: Marcando nuestra página de receta

Llegados a éste punto del artículo, tiene toda la información necesaria para marcar nuestra página de ejemplo con la receta. Puede escoger entre guardar una copia local de nuestro archivo inicial text-start.html y trabajar sobre él, o hacerlo sobre nuestro ejemplo editable de abajo. Hacerlo de manera local probablemente sea mejor, puesto que podrá guardar sus progresos, mientras que si lo hace sobre el ejemplo editable, los cambios se perderán la próxima vez que cargue la página. Ambos métodos tienen pros y contras.

Si se estanca, siempre puede presionar el botón Show solution, o comprobar nuestro ejemplo completo text-complete.html en github repo.

Listas anidadas

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

<ol>
  <li>Remove the skin from the garlic, and chop coarsely.</li>
  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
  <li>Add all the ingredients into a food processor.</li>
  <li>Process all the ingredients into a paste.</li>
  <li>If you want a coarse "chunky" humous, process it for a short time.</li>
  <li>If you want a smooth humous, process it for a longer time.</li>
</ol> 

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

<ol>
  <li>Remove the skin from the garlic, and chop coarsely.</li>
  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
  <li>Add all the ingredients into a food processor.</li>
  <li>Process all the ingredients into a paste.
    <ul>
      <li>If you want a coarse "chunky" humous, process it for a short time.</li>
      <li>If you want a smooth humous, process it for a longer time.</li>
    </ul>
  </li>
</ol>

Intente volver atrás al anterior ejemplo activo y actualice la lista como ésta.

É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, acentuámos ciertas palabras, alterando 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 diferente significado:

Me alegro de que no llegues tarde.

Me alegro de que no llegues tarde.

La primera frase suena realmente aliviada de que la persona no llegase tarde. Por contra, la segunda suena sarcástica o pasivo-agresiva, expresando molestia porque la persona llegó algo tarde.

En HTML usamos el elemento <em> (emphasis) para marcar la relevancia. Así mismo se hace el documento más interesante al leerlo y es reconocido por los lectores de pantalla de tal forma que lo expresan con diferentes tonos de voz. El estilo de letra italica es el que aplica el navegador por defecto, pero no debes utilizar esta etiqueta solamente para establecer el estilo italica. 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, usualmente al hablar lo hacemos con una voz más grave y escritas las escribimos en negritas. 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. Así mismo hacemos el documento más útil, de nueva cuenta estos elementos son reconocidos por los lectores de pantallas 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 usao 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>

Active learning: Let's be important!

In this active learning section, we have provided an editable example. Inside it, we'd like you to try adding emphasis and strong importance to the words you think need them, just to have some practice.

Cursiva, negrita, subrayado...

The elements we've discussed so far have clearcut associated semantics. The situation with <b> (bold), <i> (italic), and <u> (underline) is somewhat more complicated. They came about so people could write bold, italics, or underlined text in an era when CSS was still supported poorly or not at all. Elements like this, which only affect presentation and not semantics, are known as presentational elements and should no longer be used, because as we've seen before, semantics is so important to accessibility, SEO, etc.

HTML5 redefined <b>, <i> and <u> with new, somewhat confusing, semantic roles.

Here's the best rule of thumb: it's likely appropriate to use <b>, <i>, or <u> to convey a meaning traditionally conveyed with bold, italics, or underline, provided there is no more suitable element. However, it always remains critical to keep an accessibility mindset. The concept of italics isn't very helpful to people using screen readers, or to people using a writing system other than the Latin alphabet.

  • <i> is used to convey a meaning traditionally conveyed by italic: Foreign words, taxonomic designation, technical terms, a thought...
  • <b> is used to convey a meaning traditionally conveyed by bold: Key words, product names, lead sentence...
  • <u> is used to convey a meaning traditionally conveyed by underline: Proper name, misspelling...

A kind warning about underline: People strongly associate underlining with hyperlinks. Therefore, on the Web, it's best to underline only links. Use the <u> element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the Web. The example below illustrates how it can be done.

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

<!-- foreign words -->
<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>

<!-- a known misspelling -->
<p>
  Someday I'll learn how to <u>spel</u> better.
</p>

<!-- Highlight keywords in a set of instructions -->
<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>

Resumen

That's it for now! This article should have given you a good idea of how to start marking up text in HTML, and introduced you to some of the most important elements in this area. There are a lot more semantic elements to cover in this area, and we'll look at a lot more in our 'More Semantic Elements' article, later on in the course. In the next article, we'll be looking in detail at how to create hyperlinks, possibly the most important element on the Web.

Etiquetas y colaboradores del documento

Colaboradores en esta página: jadiosc, dcarmal-dayvo, Owildfox, Myuel, dmipaguirre, Dany07, welm
Última actualización por: jadiosc,