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

Questa pagina contiene errori di script. Nell’attesa che vengano corretti dagli editori del sito, è possibile visualizzare qui di seguito una versione provvisoria dei contenuti.

Traduzione in corso.

Una delle funzioni principali dell'HTML è quella di dare struttura e significato ai testi (conosciuto anche come semantica) in modo che un browser possa visualizzarli correttamente. Questo articolo spiega il modo in cui l'HTML può essere usato per strutturare una pagina di testo aggiungendo titoli e paragrafi, enfatizzando parole, creando elenchi e altro.

Prerequisiti: Conoscenza di base dell'HTML, come spiegato in Getting started with HTML.
Obiettivi: Scopri come costruire una pagina di testo di base per dargli struttura e significato, inclusi paragrafi, intestazioni, elenchi, enfasi e citazioni.

Le basi: Intestazioni e paragrafi

Un testo più strutturato è composto da intestazioni e paragrafi, indipendentemente dal fatto che tu stia leggendo una storia, un giornale, un libro di testo del college, una rivista, ecc.

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

Il contenuto strutturato rende l'esperienza di lettura più facile e divertente.

In HTML, ogni paragrafo dev'essere racchiuso in un elemento <p>, in questo modo:

<p>Sono un paragrafo, oh si lo sono.</p>

Ogni intestazione dev'essere racchiuso in un elemento d'intestazione:

<h1>Sono il titolo della storia.</h1>

Ci sono sei elementi di intestazione — <h1>, <h2>, <h3>, <h4>, <h5>, e <h6>. Ogni elemento rappresenta un livello di contenuto differente nel documento; <h1> rappresenta l'intestazione principale, <h2> rappresenta i sottotitoli, <h3> rappresenta i sub-sottovoci, e cosi via.

Implementazione della gerarchia strutturale

Come esempio, in una storia, <h1> rappresenterebbe il titolo della storia, <h2> rappresenterebbe il titolo di ogni capitolo e <h3> rappresenterebbe le sottosezioni di ogni capitolo, e cosi via.

<h1>La noia schiacciante</h1>

<p>Di Chris Mills</p>

<h2>Capitolo 1: La notte scura</h2>

<p>Era una notte scura. Da qualche parte, un gufo ha bubolato. La pioggia si abbetté sul ...</p>

<h2>Capitolo 2: Il silenzio eterno</h2>

<p>Il nostro protagonista non poteva nemmeno un sussurro uscire dalla figura oscura ...</p>

<h3>Lo spettro parla</h3>

<p>Erano passate altre ore, quando tutto d'un tratto lo spettro si raddrizzò e esclamò: "Per favore abbi pietà della mia anima!"</p>

Dipende solo da te che cosa rappresentano esattamente gli elementi coinvolti, purché la gerarchia abbia un senso. Devi solo tenere a mente alcune buone pratiche mentre crei tali strutture:

  • Preferibilmente potresti usare un solo <h1> per ogni pagina — questa è l'intestazione di primo livello, e tutti gli altri siedono al di sotto di questo nella gerarchia.
  • Assicurati di utilizzare i titoli nell'ordine corretto nella gerarchia. Non usare  <h3> per rappresentare i sottotitoli, seguito da <h2> per rappresentare le sub-sottovoci — questo non ha senso e porterà a risultati inaspettati.
  • Dei sei livelli di intestazione disponibili, dovresti mirare a non utilizzare più di tre per pagina, a meno che tu non ritenga sia necessario. I documenti con molti livelli (ad esempio una gerarchia di intestazione profonda) diventano ingombranti e difficili da navigare. In tali occasioni, è consigliabile diffondere il contenuto su più pagine, se possibile.

Perché abbiamo bisogno di una struttura?

Per rispondere a questa domanda, diamo un'occhiata a  text-start.html — il punto di inizio del nostro esempio per questo articolo (un'ottima ricetta per l'hummus). Dovresti salvare una copia di questo file sul tuo computer, così come avrai bisogno di fare per gli esercizi più avanti. Il corpo di questo documento attualmente contiene molti pezzi di contenuto — non sono marcati in alcun modo, ma sono separati con degli a capo (Invio premuto per andare alla riga successiva).

Tuttavia, quando aprirai il documento nel tuo browser, vedrai che il testo apparirà come un blocco unico!

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

Questo succede perché non ci sono elemnti per dare una struttura al contenuto, così il browser non sa quale sia l'intestazione e quale sia il paragrafo. Inoltre:

  • Gli utenti che guardano una pagina web tendono a esaminarla velocemente per trovare contenuto rilevante, spesso leggendo solo le intestazioni da cui cominciare (di solito rimaniamo molto poco su una pagina web). Se non riescono a trovare qualcosa di utile in pochi secondi, probabilmente rimarranno frustrati e andranno da qualche altra parte.
  • i motori di ricerca che indicizzano la tua pagina considerano il contenuto delle intestazioni come importanti parole chiave per influenzare il posizionamento della pagina nella ricerca. Senza intestazioni, la tua pagina avrà una bassa performance in termini di {{ glossario }} (Search Engine Optimization).
  • Molti utenti con disabilità visiva spesso non leggono le pagine web; invece le ascoltano. Questo succede utilizzando un software chiamato  screen reader. Questo software fornisce dei modi per accedere velocemente ad un dato contenuto testuale. Tra le varie tecniche, forniscono uno schema del documento attraverso la lettura delle intestazioni, permettendo agli utenti di trovare velocemente le informazioni di cui hanno bisogno. Se le intestazioni non sono disponibili, saranno costretti ad ascoltare la lettura dell'intero documento.
  • Per dare uno stile al contenuto con {glossario("CSS")}}, o fargli fare cose interessanti con {{ glossario }}, hai bisogno di avere elementi intorno al contenuto, in modo che  CSS/JavaScript possano lavorarci sopra efficacemente.

Abbiamo quindi bisogno di dare al nostro contenuto un markup strutturale.

Apprendimento attivo: Dare una struttura al nostro contenuto

Approfondiamo con un esempio. Nell'esempio qui sotto, aggiungi degli elementi al testo nel campo Input in modo che appaia come un'intestazione e due paragrafi nel campo  Output.

In caso di errore, puoi sempre ripartire da zero usando il pulsante Reset. Se ti blocchi, premi il pulsante Show solution per vedere la risposta.

Perché abbiamo bisogno delle semantiche?

Le semantiche vengono utilizzate continuamente intorno a noi — ci affidiamo all'esperienza per predire la funzione degli oggetti che usiamo tutti i giorni; quando vediamo qualcosa, sappiamo quale sarà la sua funzione. Così, per esempio, ci aspettiamo che una luce rossa del semaforo significhi "fermati", e una luce verde significhi "vai".  Le cose diventano complicate rapidamente se vengono applicate le semantiche sbagliate (forse qualche Paese usa il rosso per dire "vai"? Spero di no.)

Sulla stessa falsariga, dobbiamo essere sicuri che stiamo usando gli elementi giusti, per dare al nostro contenuto il giusto significato, funzione o aspetto. In questo contesto l'elemento <h1> è anche un elemento semantico, che conferisce al testo che racchiude il ruolo (o il significato) di "intestazione di primo livello sulla tua pagina".

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

Per impostazione predefinita, il browser darà al suo font una dimensione grande per farlo apparire come un'intestazione (anche se potresti dargli uno stile per farlo apparire in qualsiasi modo tu voglia usando CSS). E' ancora più importante osservare che il suo valore semantico verrà usato in molti modi, ad esempio dai motori di ricerca e dagli screen reader (come spiegato in precedenza).

Dall'atro lato, potresti far sembrare qualsiasi elemento come un'intestazione di primo livello. Considera quanto segue:

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

Questo è un elemento <span>. non ha semantiche. Lo usi per includere contenuto quando vuoi applicargli il CSS (o lavorarci con JavaScript) senza dargli alcun ulteriore significato (troverai di più su questo argomento più avanti nel corso). Abbiamo applicato del CSS per farlo apparire come un'intestazione di primo livello, m dal momento che non ha valore semantico non avrà nessuna delle qualità extra descritte sopra. E' una buona idea usare per questo scopo l'HTML appropriato.

Liste

Ora rivolgiamo la nostra attenzione alle liste. Le liste sono ovunque nella nostra vita — dalla lista della spesa alle indicazioni che in maniera inconscia segui per tornare a casa tutti i giorni, alla lista di istruzioni che stai seguendo in questi tutorial! Le liste sono ovunque anche sul Web, e abbiamo tre tipi differenti di cui occuparci.

Unordered

Unordered lists are used to mark up lists of items for which the order of the items doesn't matter — let's take a shopping list as an example.

milk
eggs
bread
hummus

Every unordered list starts off with a <ul> element — this wraps around all the list items:

<ul>
milk
eggs
bread
hummus
</ul>

The last step is to wrap each list item in a <li> (list item) element:

<ul>
  <li>milk</li>
  <li>eggs</li>
  <li>bread</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.

Ordered

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

Nesting lists

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" hummus, process it for a short time.</li>
  <li>If you want a smooth hummus, 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" hummus, process it for a short time.</li>
      <li>If you want a smooth hummus, 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.

Emphasis and importance

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.

Emphasis

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>

Strong importance

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.

Italic, bold, underline...

The elements we've discussed so far have clearcut associated semantics. The situation with <b>, <i>, and <u> 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>Archilochus 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>

Summary

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.

 

In this module

 

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: Th3cG, robertsillo
Ultima modifica di: Th3cG,