Testo, Titoli e Paragrafi

Bentornato.

Nella lezione precedente hai imparato la struttura di un documento HTML.

Ora entriamo nel contenuto vero e proprio.

Testo.

Titoli.

Paragrafi.

Le cose che le persone leggono davvero.

Perché una pagina web senza testo organizzato è solo un muro di parole.

E nessuno vuole combattere un muro di parole prima di colazione.

Cosa Imparerai

In questa lezione imparerai:

• come funzionano i titoli in HTML;
• la differenza tra h1, h2, h3 e gli altri livelli;
• come scrivere paragrafi con p;
• come dare importanza al testo con strong ed em;
• quando usare br;
• quando usare hr;
• come rendere la struttura del testo chiara e leggibile.

Titoli in HTML

HTML ha sei livelli di titolo:

<h1>Titolo Principale</h1>
<h2>Titolo di Sezione</h2>
<h3>Titolo di Sottosezione</h3>
<h4>Titolo Più Piccolo</h4>
<h5>Titolo Ancora Più Piccolo</h5>
<h6>Il Titolo Più Piccolo</h6>

Il titolo più importante è h1.

Di solito una pagina dovrebbe avere un solo h1 principale.

Pensalo come il titolo della pagina.

Poi usi h2 per le sezioni principali, h3 per le sottosezioni e così via.

Come un libro:

Titolo del Libro
  Capitolo
    Sezione
      Parte più piccola

I titoli HTML non servono solo per la dimensione.

Descrivono la struttura.

Questo è importante per:

• lettori;
• screen reader;
• motori di ricerca;
• organizzazione della pagina;
• il tuo futuro te stesso che proverà a capire la pagina più tardi.

Una Buona Struttura di Titoli

Esempio:

<h1>Il Mio Blog di Viaggi</h1>

<h2>Viaggio a Roma</h2>
<p>Roma è piena di storia, cibo e persone che attraversano la strada come se avessero immunità diplomatica.</p>

<h2>Viaggio a Milano</h2>
<p>Milano è elegante, veloce e in qualche modo indossa sempre scarpe migliori delle tue.</p>

<h3>Luoghi Preferiti a Milano</h3>
<p>Il duomo, le gallerie e ogni posto dove il caffè arriva rapidamente.</p>

Questa struttura ha senso.

h1 è l’argomento della pagina.

Gli h2 sono sezioni principali.

h3 è una sezione più piccola dentro uno di quegli argomenti.

Una buona struttura è calma.

Una cattiva struttura è una borsa della spesa piena di tag.

Evitare di Saltare Livelli

Cerca di non saltare da h1 direttamente a h4.

Questo non è ideale:

<h1>La Mia Pagina</h1>
<h4>Piccola Sezione</h4>

Meglio:

<h1>La Mia Pagina</h1>
<h2>Piccola Sezione</h2>

I livelli dei titoli dovrebbero seguire un ordine logico.

Non perché il browser esploderà.

Non esploderà.

Ma perché il contenuto diventa più facile da capire.

E ci piace il contenuto che non si comporta come un puzzle inventato da un procione stanco.

Paragrafi

I paragrafi si creano con il tag p:

<p>Questo è un paragrafo.</p>

Un paragrafo è un blocco di testo.

Esempio:

<p>HTML ci aiuta a strutturare le pagine web in modo chiaro.</p>
<p>Ogni paragrafo dovrebbe contenere un’idea o un piccolo gruppo di idee collegate.</p>

Non mettere tutto il testo in un unico paragrafo gigante.

Questo fa male:

<p>Questo è un testo molto lungo con tante idee e senza pause e il lettore ora è intrappolato in un tunnel di parole senza uscita e senza caffè.</p>

Meglio:

<p>Questa è la prima idea.</p>
<p>Questa è la seconda idea.</p>
<p>Questa è la terza idea.</p>

Un testo leggibile è un testo amichevole.

Testo Importante

Usa strong per testo importante:

<p>Questo è <strong>molto importante</strong>.</p>

Il browser di solito mostra strong in grassetto.

Ma il significato è più importante dell’aspetto.

strong significa che il testo ha forte importanza.

Usalo quando qualcosa conta davvero.

Non ogni tre parole.

Se tutto è importante, niente è importante.

E la pagina inizia a urlare.

Testo Enfatizzato

Usa em per enfasi:

<p>Mi piace <em>davvero</em> HTML pulito.</p>

Il browser di solito mostra em in corsivo.

Ma anche qui, il significato conta.

em cambia l’accento della frase.

Esempio:

<p>Ho detto che mi piace HTML.</p>
<p>Ho detto che mi <em>piace</em> HTML.</p>

La seconda frase enfatizza la parola “piace”.

Tag minuscolo.

Sensazione diversa.

HTML è furbo così.

Interruzioni di Riga

Il tag br crea un’interruzione di riga:

<p>Prima riga<br>Seconda riga</p>

br non ha bisogno di tag di chiusura.

Può essere utile per:

• indirizzi;
• poesie;
• brevi interruzioni dove la pausa ha significato.

Esempio:

<p>
  Viktor Holovin<br>
  Vigevano, Italia<br>
  Web Developer
</p>

Non usare br solo per creare spazio tra sezioni.

Questo non va bene:

<p>Primo paragrafo.</p>
<br>
<br>
<p>Secondo paragrafo.</p>

Per lo spazio visivo, CSS è meglio.

HTML è per la struttura.

CSS è per l’aspetto.

Non far fare a HTML il lavoro di CSS.

Ha già un lavoro.

Linea Orizzontale

Il tag hr crea una separazione tematica:

<hr>

Rappresenta un cambio o una separazione nel contenuto.

Esempio:

<h2>Chi Sono</h2>
<p>Costruisco siti web e imparo tecnologie passo dopo passo.</p>

<hr>

<h2>Contatto</h2>
<p>Puoi contattarmi via email.</p>

Usa hr quando c’è una vera separazione nel contenuto.

Non usarlo solo perché la pagina sembra vuota.

Quella è decorazione.

CSS gestirà la decorazione più avanti.

Lascia che HTML rimanga dignitoso.

Crea una Pagina di Pratica

Crea un nuovo file:

touch text.html

Aggiungi questo:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pratica del Testo</title>
</head>
<body>
  <h1>Pratica del Testo</h1>

  <h2>Informazioni su Questa Pagina</h2>
  <p>Questa pagina mi aiuta a praticare titoli e paragrafi in HTML.</p>
  <p>Una buona struttura del testo rende una pagina più facile da leggere.</p>

  <h2>Nota Importante</h2>
  <p>HTML riguarda la <strong>struttura</strong>, non la decorazione.</p>
  <p>Lo sto imparando <em>passo dopo passo</em>.</p>

  <hr>

  <h2>Contatto</h2>
  <p>
    Viktor Holovin<br>
    Web Developer<br>
    Italia
  </p>
</body>
</html>

Aprilo nel browser.

Ora hai una pagina con titoli, paragrafi, enfasi, interruzione di riga e linea orizzontale.

Piccola pagina.

Pagina ben strutturata.

Molto rispettabile.

Errori Comuni

Usare i Titoli Solo per la Dimensione

Pensiero sbagliato:

<h1>Testo grande</h1>
<h6>Testo piccolo</h6>

I titoli non sono solo dimensioni del font.

Sono struttura.

Usali per organizzare il contenuto.

Troppi h1

Di solito una pagina dovrebbe avere un solo h1 principale.

Meglio:

<h1>La Mia Pagina</h1>
<h2>Chi Sono</h2>
<h2>Contatto</h2>

Non questo:

<h1>La Mia Pagina</h1>
<h1>Chi Sono</h1>
<h1>Contatto</h1>

La pagina non ha bisogno di tre re.

Uno basta.

Usare br per Layout

Non usare tanti br per creare spazio.

Male:

<br>
<br>
<br>

Useremo CSS più avanti per lo spazio visivo.

HTML deve descrivere significato.

Pratica

Crea una pagina su un hobby.

Deve includere:

• un h1;
• almeno due sezioni h2;
• una sottosezione h3;
• quattro paragrafi;
• un elemento strong;
• un elemento em;
• un hr;
• un esempio con br.

Argomenti possibili:

• karate;
• programmazione;
• yoga;
• viaggi;
• cucina;
• lingue.

Scegli qualcosa di reale se possibile.

Il testo reale è meglio del testo finto.

Il testo finto non ha anima.

Mini Sfida

Crea un file:

article.html

Costruisci una semplice pagina articolo.

Deve includere:

• title nella scheda del browser;
• titolo dell’articolo come h1;
• paragrafo introduttivo;
• tre sezioni con h2;
• una sottosezione con h3;
• parole enfatizzate;
• parole importanti;
• una linea orizzontale finale;
• un piccolo blocco autore/contatto con br.

Niente CSS.

Niente JavaScript.

Solo struttura testuale HTML pulita.

Riassunto

Oggi hai imparato che:

• HTML ha sei livelli di titolo da h1 a h6;
• h1 di solito è il titolo principale della pagina;
• i livelli dei titoli devono seguire un ordine logico;
• p crea paragrafi;
• strong indica testo importante;
• em indica testo enfatizzato;
• br crea un’interruzione di riga significativa;
• hr crea una separazione tematica;
• il testo HTML deve essere organizzato, leggibile e significativo.

Il testo è il cuore della maggior parte delle pagine web.

Se la struttura è chiara, la pagina migliora subito.

Anche prima che CSS arrivi con gli occhiali da sole.

Prossima Lezione

Nella prossima lezione impareremo liste e organizzazione.

Perché a volte il contenuto ha bisogno di ordine.

E a volte ha bisogno di punti elenco.

Punti elenco molto drammatici.