La formattazione del testo è un aspetto importante della creazione di pagine web. L'HTML fornisce una serie di tag per formattare il testo in modo chiaro e leggibile per gli utenti. In questa lezione, parleremo dei tag di intestazione paragrafo, grassetto, corsivo e citazioni.
I tag di intestazione
I tag di intestazione, o header tag in inglese, sono elementi HTML utilizzati per indicare la struttura gerarchica del contenuto di una pagina web. Ci sono sei tipi di tag di intestazione: h1, h2, h3, h4, h5 e h6.
Il tag h1 rappresenta il titolo principale della pagina e dovrebbe essere usato solo una volta all'interno di ogni pagina web. Gli altri tag di intestazione, h2, h3, h4, h5 e h6, sono utilizzati per indicare i titoli di sezioni o sottosezioni del contenuto della pagina, in ordine gerarchico.
Oltre ad indicare la struttura della pagina, i tag di intestazione sono importanti anche per l'accessibilità del sito. Infatti, gli utenti con disabilità visive utilizzano spesso lettori di schermo per navigare in una pagina web e i tag di intestazione permettono loro di comprendere la struttura del contenuto e di accedere alle sezioni che li interessano in modo più efficiente.
È importante utilizzare i tag di intestazione in modo corretto e coerente all'interno di una pagina web per migliorare la comprensione del contenuto da parte degli utenti e per favorire la sua indicizzazione da parte dei motori di ricerca.
I tag span
Il tag <span> è un elemento HTML utilizzato per applicare uno stile o una classe CSS ad una parte di testo all'interno di un altro elemento. Ad esempio, supponiamo di voler evidenziare una parola all'interno di un paragrafo. Possiamo utilizzare il tag <span> per selezionare quella specifica parola e applicare un colore di sfondo ad essa.
Ecco un esempio:
<p>Il mio sito ha <span style="background-color: yellow;">molte pagine</span> senza immagini.</p>In questo esempio, il testo "molte pagine" è stato selezionato utilizzando il tag <span>. È stato applicato uno stile CSS al tag <span> per definire un colore di sfondo giallo. Quando il browser visualizza la pagina, la parola "prodotti biologici" sarà evidenziata con un colore di sfondo giallo.
Si può anche definire uno stile CSS per il tag <span> in un file CSS esterno o utilizzare una classe CSS in modo da poter riutilizzare lo stesso stile per più elementi <span> all'interno della pagina. Ad esempio:
<style>
.highlight {
background-color: yellow;
}
</style>
<p>Il mio sito ha <span class="highlight">molte pagine</span> senza immagini.</p>In questo esempio, abbiamo definito una classe CSS chiamata "highlight" con un colore di sfondo giallo. Abbiamo poi applicato questa classe al tag <span> per evidenziare la parola "molte pagine".
Tag paragrafo
Il tag paragrafo HTML, rappresentato dal tag <p>, viene utilizzato per definire un blocco di testo che rappresenta un paragrafo. Questo significa che il testo all'interno del tag <p> viene visualizzato su una nuova riga e viene inserito uno spazio vuoto prima e dopo il testo del paragrafo. Ad esempio, il codice HTML seguente definisce un paragrafo che contiene del testo:
<p>Questo è un paragrafo di esempio.</p>Grassetto
Il tag grassetto, rappresentato dal tag <strong> o dal tag <b>, viene utilizzato per evidenziare parti del testo che devono essere visualizzate in grassetto. Ad esempio, il codice HTML seguente definisce una frase con una parola in grassetto:
<p>Questa è una <strong>parola in grassetto</strong>.</p>Corsivo
Il tag corsivo, rappresentato dal tag <em> o dal tag <i>, viene utilizzato per evidenziare parti del testo che devono essere visualizzate in corsivo. Ad esempio, il codice HTML seguente definisce una frase con una parola in corsivo:
<p>Questa è una <em>parola in corsivo</em>.</p>Citazioni
Il tag citazione HTML, rappresentato dal tag <blockquote>, viene utilizzato per citare il testo di un'altra fonte all'interno della pagina web. Ad esempio, il codice HTML seguente definisce una citazione:
<blockquote>
<p>Questa è una citazione di esempio.</p>
<cite>Autorità della citazione</cite>
</blockquote>Nel codice sopra, il tag <blockquote> definisce il blocco di testo che rappresenta la citazione e il tag <cite> definisce l'autorità della citazione.
Pedice
Il testo in pedice può essere realizzato utilizzando il tag <sub>. Ad esempio, il codice HTML seguente definisce una formula chimica con il numero di ossidazione in pedice:
<p>La formula del solfato di rame (II) è CuSO<sub>4</sub>.</p>Codice all'interno di un paragrafo HTML:
Il testo di codice può essere visualizzato all'interno di un paragrafo HTML utilizzando il tag <code>. Ad esempio, il codice HTML seguente definisce un paragrafo con il codice di esempio:
<p>Il codice per la funzione somma in JavaScript è <code>function sum(a, b) { return a + b; }</code>.</p>Barrato e sottolineato
Il testo barrato può essere realizzato utilizzando il tag <del>, mentre il testo sottolineato può essere realizzato utilizzando il tag <u>. Ad esempio, il codice HTML seguente definisce un paragrafo con una parola barrata e una sottolineata:
<p>La parola <del>cancellata</del> e la parola <u>sottolineata</u> sono entrambe esempi di formattazione del testo.</p>È importante notare che la formattazione del testo dovrebbe essere utilizzata in modo parsimonioso, in modo da non appesantire la pagina web o rendere difficile la lettura del contenuto. Inoltre, l'uso di tag semantici appropriati per la formattazione del testo è essenziale per garantire l'accessibilità e l'indicizzazione del contenuto da parte dei motori di ricerca.