Cos’è la formattazione HTML?
Per “formattazione HTML” si intende il processo di strutturazione dei contenuti delle pagine web (come testi e immagini) mediante tag HTML. Usati correttamente, questi tag permettono di rappresentare i contenuti in modo chiaro, ordinato e accattivante.
Definizione: cosa significa “formattazione HTML”?
Il linguaggio di markup HTML mette a disposizione gli strumenti di base per strutturare i diversi elementi di un sito. I singoli elementi possono essere sistemati con i tag HTML con la cosiddetta “formattazione HTML”, che consente di definire in che modo i testi, le immagini e il resto sono visualizzati in un documento HTML. I tag permettono ad esempio di definire titoli e creare paragrafi e liste.
Quali sono gli scopi della formattazione HTML?
La formattazione HTML consente di ottimizzare sia la struttura sia l’aspetto visivo dei diversi elementi di un sito web. Con una formattazione corretta non soltanto si migliora la leggibilità dei testi, ma si facilita anche la navigazione degli utenti. Inoltre, la formattazione HTML è utile per l’ottimizzazione per i motori di ricerca: un sito internet chiaro e ben strutturato risulta più comprensibile ai crawler dei motori di ricerca (programmi che analizzano i contenuti delle pagine web).
Nella nostra guida “Imparare l’HTML: l’ampio tutorial per principianti” forniamo le informazioni di base sul linguaggio di markup HTML.
Quali tipi di tag sono disponibili per la formattazione HTML?
Nella formattazione HTML si distingue tra tag fisici e logici (in inglese: “physical tag” e “logical tag”):
- I tag fisici determinano l’aspetto preciso di un elemento di una pagina. Definiscono come devono essere rappresentati il testo e altri elementi a livello visivo. Alcuni esempi sono il tag
<b>per il testo in grassetto e<i>per il corsivo. I tag HTML fisici non considerano però il contesto semantico. - I tag logici definiscono il significato di un elemento, contribuendo alla struttura semantica di un sito web. Consentono a motori di ricerca, browser e tecnologie assistive di comprendere meglio i contenuti. Un esempio è il tag HTML
<em>, che viene usato per enfatizzare una parte del testo, spesso in corsivo.
- Disponibilità garantita al 99,99%
- Dominio, SSL ed e-mail inclusi
- Assistenza 24/7 in lingua italiana
I tag più importanti per la formattazione HTML
Il linguaggio HTML mette a disposizione un’ampia gamma di tag per formattare i contenuti dei siti web, che spaziano dalla strutturazione di interi layout di pagina alla modifica di singoli elementi. Nella nostra guida sui tag HTML trovi un riepilogo dei comandi più importanti. Di seguito ci concentriamo sui tag per la formattazione HTML del testo e sulle loro funzioni:
| Tag HTML | Descrizione |
|---|---|
<b>
|
Tag fisico che consente di scrivere una parola, una frase o un passaggio di testo in grassetto. |
<strong>
|
Questo tag HTML logico mette in evidenza parti del testo sia a livello visivo sia per i browser. |
<i>
|
Tag fisico che visualizza in corsivo singole parole, frasi o passaggi. |
<em>
|
Questo tag logico serve per mettere in evidenza singoli passaggi di testo, spesso in corsivo. |
<u>
|
La parte selezionata viene sottolineata. |
<h1> - <h6>
|
Questi tag servono per creare titoli secondo il principio seguente: più piccolo è il numero, maggiore è la dimensione del carattere usata per il titolo. |
<p>
|
Questo tag consente di creare paragrafi. |
<big>
|
Con questo tag HTML si indica una porzione di testo da ingrandire. |
<small>
|
Usato per ridurre le dimensioni del carattere di una sezione. |
<sup>
|
Questo tag è utilizzato per rappresentare un testo in apice, ad esempio nell’equazione e = mc². |
<sub>
|
È il tag per visualizzare caratteri in pedice. Un esempio è la formula dell’acqua, H2O. |
<ins>
|
Questo tag indica che è stato inserito un testo in un documento. |
<del>
|
Il tag segnala che è stato eliminato del testo da un documento. |
<strike>
|
Questo tag è usato per barrare singoli passaggi di testo. |
<mark>
|
È il tag che consente di evidenziare lo sfondo di parole, frasi e porzioni di testo con un colore. |
- Domain Connect gratuito per una configurazione facile del DNS
- Certificato SSL Wildcard gratuito
- Protezione privacy inclusa
Formattazione HTML: esempi di utilizzo
La formattazione HTML offre tantissime possibilità per strutturare e rappresentare i testi e gli altri elementi dei siti web. Per sfruttarne appieno le potenzialità è importante sapere come si usano i vari tag HTML. Gli esempi di seguito ti mostrano il funzionamento di base.
Esempio di utilizzo 1: visualizzare testo in grassetto
Per rappresentare una parola o una parte di testo in grassetto, usa il tag HTML <b>. È un tag fisico che cambia solo l’aspetto della sezione a cui è applicato.
<!DOCTYPE html>
<html>
<head>
<title>Esempio di testo in grassetto</title>
</head>
<body>
<p>Usando il tag giusto, il <b>testo viene rappresentato in grassetto</b>.</p>
</body>
</html>Output:
Usando il tag giusto, il testo viene rappresentato in grassetto.
Esempio di utilizzo 2: enfatizzare porzioni di testo
Per sottolineare l’importanza di un passaggio di testo sia per i lettori e le lettrici sia per i motori di ricerca e i browser, enfatizzalo con il tag HTML <strong>. Anche in questo caso solitamente la parte interessata è rappresentata in grassetto.
<!DOCTYPE html>
<html>
<head>
<title>Esempio di enfasi di un passaggio di testo</title>
</head>
<body>
<p>L’ultima parola della frase viene <strong>enfatizzata</strong>.</p>
</body>
</html>Output:
L’ultima parola della frase viene enfatizzata.
Esempio di utilizzo 3: visualizzare parole e parti di testo in corsivo
Per saltare subito all’occhio durante la lettura, non di rado le parole straniere sono rappresentate in corsivo nei testi. In questo caso si ricorre al tag HTML <i>.
<!DOCTYPE html>
<html>
<head>
<title>Esempio di testo in corsivo</title>
</head>
<body>
<p>La parola seguente viene visualizzata in <i>corsivo</i>.</p>
</body>
</html>Output:
La parola seguente viene visualizzata in corsivo.
Esempio di utilizzo 4: sottolineare sezioni di testo
Naturalmente, la formattazione HTML offre anche la possibilità di sottolineare parole o interi passaggi, ossia di inserire una linea sotto il testo. Per farlo serve il tag <u>.
<!DOCTYPE html>
<html>
<head>
<title>Esempio di testo sottolineato</title>
</head>
<body>
<p><u>Sottolineare</u> una parola è utile in varie situazioni.</p>
</body>
</html>Output:
Esempio di utilizzo 5: barrare parole
I contenuti inseriti all’interno del tag <strike> sono visualizzati barrati. Questo tag HTML è usato fra l’altro per segnalare informazioni obsolete o non più valide.
<!DOCTYPE html>
<html>
<head>
<title>Esempio di testo barrato</title>
</head>
<body>
<p>L’offerta è valida solo fino al <strike>1° novembre</strike> 1° dicembre.</p>
</body>
</html>Output:
