In questo articolo mostrerò come gestire il testo dal punto di vista dell’HTML. Se hai appena iniziato a scrivere codice per le pagine Web ti consiglio la lettura di questo articolo introduttivo: HTML: Sintassi e primi tag .
Intestazioni
Nell’HTML abbiamo sei livelli per le intestazioni
<h1> Intestazione principale </h1>
<h2> Intestazione di livello 2 </h2>
<h3> Intestazione di livello 3 </h3>
<h4> Intestazione di livello 4 </h4>
<h5> Intestazione di livello 5 </h5>
<h6> Intestazione di livello 6 </h6>

Paragrafi
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Sed in mollis eros, vel pulvinar erat.
Curabitur id ex a tellus lacinia pellentesque.
</p>
<p> Nunc gravida purus sit amet velit iaculis commodo.
Etiam quis arcu cursus, pharetra eros eu, bibendum nibh.
Curabitur risus nisi, porttitor eu fermentum sed,
vestibulum mattis ligula. Integer sit amet nulla pulvinar,
suscipit felis eget, tincidunt velit.
Donec dapibus dictum luctus.
</p>
Notiamo che non importa come formattiamo il paragrafo all’interno del tag p. Il risultato sarà in ogni caso il seguente. Questo prende il nome di white space collapsing.

Testo di esempio per utilizzarlo nei paragrafi
Spesso quando si crea un mock-up (prototipo) di un sito Web si utilizza del testo placeholder per rendere meglio l’idea di come saranno le diverse pagine. Prova ad immaginare un sito con tutti i tag ma vuoti…. direi proprio che non sarebbe un granché da presentare al nostro cliente. A fine articolo trovi il link ad un generatore di testo che potrai poi copiare ed incollare. La stessa tecnica viene utilizzata anche per le immagini.
Stili del testo
<p> Ecco un esempio del: <b>grassetto</b></p>
<p> Invece qui un esempio del <i>corsivo</i></p>
<p> <u>Il sottolineato</u></p>
<p> <strike>Il barrato</strike></p>
<p><tt>Qui stiamo scrivendo con una spaziatura fissa</tt></p>

Apice e pedice
<p> Lista della spesa: <br/>
H<sub>2</sub>O <br/>
Blocco appunti della Moleskin<sup>TM</sup>
</p>

TAG semantici
I tag semantici non modificano la struttura del documento web ma aggiungo informazioni extra alle pagine. Di seguito le implementazioni:
<p>
<strong>Attenzione:</strong> il <em>coding</em> è una cosa seria.
<!-- strong indica che la parola/frase ha una forte importanza -->
<!-- em indica che la parola/frase è enfatizzata-->
</p>
<blockquote cite="https://www.goodreads.com/author/quotes/92867.Linus_Torvalds">
Microsoft isn't evil, they just make really crappy operating systems
<br>
- LinusTorvalds
</blockquote>
<!-- blockquote per citazioni-->
<p>
L'<abbr title="Ingegnere">Ing.</abbr> Paolo Rossi lavora alla
<acronym title="National Aeronautics and Space Administration">NASA</acronym>
<!-- abbr per un'abbreviazione -->
<!-- acronym per un acronimo -->
</p>
<p><dfn>Ingegnere</dfn>: Laureato in ingegneria abilitato alla professione,
che soprintende al progetto e alla realizzazione di costruzioni
(edilizie, stradali, idrauliche, ecc.) oppure ad attività industriali:
i. edile, navale, elettronico, minerario, meccanico, nucleare.
<!-- dfn per le definizioni-->
</p>

Possiamo utilizzare il tag semantico address per contenere le informazioni di contatto dell’autore della pagina:
<address>
<p><a href="mailto:test@example.com">
test@example.com
</a>
</p>
<p>1600 Amphitheatre Pkwy, Mountain View, CA 94043, Stati Uniti</p>
</address>
