We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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.

Traducción en curso

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.
  • El 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).
  • La accesibilidad: Severely visually impaired people often don't read web pages; they listen to them instead. This is done with software called a screen reader. This software provides ways to get fast access to given text content. Among the various techniques used, they provide an outline of the document by reading out the headings, allowing their users to find the information they need quickly. If headings are not available, they will be forced to listen to the whole document read out loud.
  • Aplicar CSS y JS: To style content with CSS, or make it do interesting things with JavaScript, you need to have elements wrapping the relevant content, so CSS/JavaScript can effectively target it.

We therefore need to give our content structural markup.

Active learning: Giving our content structure

Let's jump straight in with a live example. In the example below, add elements to the raw text in the Input field so that it appears as a heading and two paragraphs in the Output field.

If you make a mistake, you can always reset it using the Reset button. If you get stuck, press the Show solution button to see the answer.

¿Por qué necesitamos semántica?

Semantics are relied on everywhere around us — we rely on previous experience to tell us what the function of everyday objects is; when we see something, we know what its function will be. So, for example, we expect a red traffic light to mean "stop", and a green traffic light to mean "go". Things can get tricky very quickly if the wrong semantics are applied (do any countries use red to mean "go"? I hope not.)

In a similar vein, we need to make sure we are using the correct elements, giving our content the correct meaning, function, or appearance. In this context the <h1> element is also a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page."

<h1>This is a top level heading</h1>

By default, the browser will give it a large font size to make it look like a heading (although you could style it to look like anything you wanted using CSS). More importantly, its semantic value will be used in multiple ways, for example by search engines and screen readers (as mentioned above.)

On the other hand, you could make any element look like a top level heading. Consider the following:

<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>

This is a <span> element. It has no semantics. You use it wrap content when you want to apply CSS to it (or do something to it with JavaScript) without giving it any extra meaning (You'll find more out about these later on in the course.) We've applied some CSS to it to make it look like a top level heading, but since it has no semantic value, it will not get any of the extra benefits described above. It is a good idea to use the relevent HTML element for the job.

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> 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)

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

Active learning: Marking up an unordered list

Try editing the live sample below to create your very own HTML unordered list.

Ordenadas

Ordered lists are lists in which the order of the items does matter — let's take a set of directions as an example:

Drive to the end of the road
Turn right
Go straight across the first two roundabouts
Turn left at the third roundabout
The school is on your right, 300 meters up the road

The markup structure is the same as for unordered lists, except that you have to wrap the list items in an <ol> (ordered list) element, rather than <ul>:

<ol>
  <li>Drive to the end of the road</li>
  <li>Turn right</li>
  <li>Go straight across the first two roundabouts</li>
  <li>Turn left at the third roundabout</li>
  <li>The school is on your right, 300 meters up the road</li>
</ol>

Active learning: Marking up an ordered list

Try editing the live sample below to create your very own HTML ordered list.

Active learning: Marking up our recipe page

So at this point in the article, you have all the information you need to mark up our recipe page example. You can choose to either save a local copy of our text-start.html starting file and do the work there, or do it in the editable example below. Doing it locally will probably be better, as then you'll get to save the work you are doing, whereas if you fill it in to the editable example, it will be lost the next time you open the page. Both have pros and cons.

If you get stuck, you can always press the Show solution button, or check out our text-complete.html example on our github repo.

Listas anidadas

It is perfectly ok to nest one list inside another one. You might want to have some sub-bullets sitting below a top level bullet. Let's take the second list from our recipe example:

<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> 

Since the last two bullets are very closely related to the one before them (they read like sub-instructions or choices that fit below that bullet), it might make sense to nest them inside their own unordered list, and put that list inside the current fourth bullet. This would look like so:

<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>

Try going back to the previous active learning example and updating the second list like this.

Énfasis e importancia

In human language, we often emphasise certain words to alter the meaning of a sentence, and we often want to mark certain words as important or different in some way. HTML provides various semantic elements to allow us to mark up textual content with such effects, and in this section, we'll look at a few of the most common ones.

Énfasis

When we want to add emphasis in spoken language, we stress certain words, subtly altering the meaning of what we are saying. Similarly, in written language we tend to stress words by putting them in italics. For example, the following two sentences have different meanings.

I am glad you weren't late.

I am glad you weren't late.

The first sentence sounds genuinely relieved that the person wasn't late. In contrast, the second one sounds sarcastic or passive-aggressive, expressing annoyance that the person arrived a bit late.

In HTML we use the <em> (emphasis) element to mark up such instances. As well as making the document more interesting to read, these are recognised by screen readers and spoken out in a different tone of voice. Browsers style this as italic by default, but you shouldn't use this tag purely to get italic styling. To do that, you'd use a <span> element and some CSS, or perhaps an <i> element (see below.)

<p>I am <em>glad</em> you weren't <em>late</em>.</p>

Importancia

To emphasize important words, we tend to stress them in spoken language and bold them in written language. For example:

This liquid is highly toxic.

I am counting on you. Do not be late!

In HTML we use the <strong> (strong importance) element to mark up such instances. As well as making the document more useful, again these are recognized by screen readers and spoken in a different tone of voice. Browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. To do that, you'd use a <span> element and some CSS, or perhaps a <b> element (see below.)

<p>This liquid is <strong>highly toxic</strong>.</p>

<p>I am counting on you. <strong>Do not</strong> be late!</p>

You can nest strong and emphasis inside one another if desired:

<p>This liquid is <strong>highly toxic</strong> —
if you drink it, <strong>you may <em>die</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: Myuel, dmipaguirre, Dany07, welm
Última actualización por: Myuel,