Per “for­mat­ta­zio­ne HTML” si intende il processo di strut­tu­ra­zio­ne dei contenuti delle pagine web (come testi e immagini) mediante tag HTML. Usati cor­ret­ta­men­te, questi tag per­met­to­no di rap­pre­sen­ta­re i contenuti in modo chiaro, ordinato e ac­cat­ti­van­te.

De­fi­ni­zio­ne: cosa significa “for­mat­ta­zio­ne HTML”?

Il lin­guag­gio di markup HTML mette a di­spo­si­zio­ne gli strumenti di base per strut­tu­ra­re i diversi elementi di un sito. I singoli elementi possono essere sistemati con i tag HTML con la co­sid­det­ta “for­mat­ta­zio­ne HTML”, che consente di definire in che modo i testi, le immagini e il resto sono vi­sua­liz­za­ti in un documento HTML. I tag per­met­to­no ad esempio di definire titoli e creare paragrafi e liste.

Quali sono gli scopi della for­mat­ta­zio­ne HTML?

La for­mat­ta­zio­ne HTML consente di ot­ti­miz­za­re sia la struttura sia l’aspetto visivo dei diversi elementi di un sito web. Con una for­mat­ta­zio­ne corretta non soltanto si migliora la leg­gi­bi­li­tà dei testi, ma si facilita anche la na­vi­ga­zio­ne degli utenti. Inoltre, la for­mat­ta­zio­ne HTML è utile per l’ot­ti­miz­za­zio­ne per i motori di ricerca: un sito internet chiaro e ben strut­tu­ra­to risulta più com­pren­si­bi­le ai crawler dei motori di ricerca (programmi che ana­liz­za­no i contenuti delle pagine web).

Consiglio

Nella nostra guida “Imparare l’HTML: l’ampio tutorial per prin­ci­pian­ti” forniamo le in­for­ma­zio­ni di base sul lin­guag­gio di markup HTML.

Quali tipi di tag sono di­spo­ni­bi­li per la for­mat­ta­zio­ne HTML?

Nella for­mat­ta­zio­ne HTML si distingue tra tag fisici e logici (in inglese: “physical tag” e “logical tag”):

  • I tag fisici de­ter­mi­na­no l’aspetto preciso di un elemento di una pagina. De­fi­ni­sco­no come devono essere rap­pre­sen­ta­ti 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 con­si­de­ra­no però il contesto semantico.
  • I tag logici de­fi­ni­sco­no il si­gni­fi­ca­to di un elemento, con­tri­buen­do alla struttura semantica di un sito web. Con­sen­to­no a motori di ricerca, browser e tec­no­lo­gie assistive di com­pren­de­re meglio i contenuti. Un esempio è il tag HTML <em>, che viene usato per en­fa­tiz­za­re una parte del testo, spesso in corsivo.
Web Hosting
Diventa il n°1 della rete con il provider di hosting n°1 in Europa
  • Di­spo­ni­bi­li­tà garantita al 99,99%
  • Dominio, SSL ed e-mail inclusi
  • As­si­sten­za 24/7 in lingua italiana

I tag più im­por­tan­ti per la for­mat­ta­zio­ne HTML

Il lin­guag­gio HTML mette a di­spo­si­zio­ne un’ampia gamma di tag per for­mat­ta­re i contenuti dei siti web, che spaziano dalla strut­tu­ra­zio­ne di interi layout di pagina alla modifica di singoli elementi. Nella nostra guida sui tag HTML trovi un riepilogo dei comandi più im­por­tan­ti. Di seguito ci con­cen­tria­mo sui tag per la for­mat­ta­zio­ne HTML del testo e sulle loro funzioni:

Tag HTML De­scri­zio­ne
<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 vi­sua­liz­za 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 se­le­zio­na­ta viene sot­to­li­nea­ta.
<h1> - <h6> Questi tag servono per creare titoli secondo il principio seguente: più piccolo è il numero, maggiore è la di­men­sio­ne 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 in­gran­di­re.
<small> Usato per ridurre le di­men­sio­ni del carattere di una sezione.
<sup> Questo tag è uti­liz­za­to per rap­pre­sen­ta­re un testo in apice, ad esempio nell’equazione e = mc².
<sub> È il tag per vi­sua­liz­za­re 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 evi­den­zia­re lo sfondo di parole, frasi e porzioni di testo con un colore.
Acquista e registra il tuo dominio con il provider n°1 in Europa
  • Domain Connect gratuito per una con­fi­gu­ra­zio­ne facile del DNS
  • Cer­ti­fi­ca­to SSL Wildcard gratuito
  • Pro­te­zio­ne privacy inclusa

For­mat­ta­zio­ne HTML: esempi di utilizzo

La for­mat­ta­zio­ne HTML offre tan­tis­si­me pos­si­bi­li­tà per strut­tu­ra­re e rap­pre­sen­ta­re i testi e gli altri elementi dei siti web. Per sfrut­tar­ne appieno le po­ten­zia­li­tà è im­por­tan­te sapere come si usano i vari tag HTML. Gli esempi di seguito ti mostrano il fun­zio­na­men­to di base.

Esempio di utilizzo 1: vi­sua­liz­za­re testo in grassetto

Per rap­pre­sen­ta­re 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>
html

Output:

Usando il tag giusto, il testo viene rap­pre­sen­ta­to in grassetto.

Esempio di utilizzo 2: en­fa­tiz­za­re porzioni di testo

Per sot­to­li­nea­re l’im­por­tan­za di un passaggio di testo sia per i lettori e le lettrici sia per i motori di ricerca e i browser, en­fa­tiz­za­lo con il tag HTML <strong>. Anche in questo caso so­li­ta­men­te la parte in­te­res­sa­ta è rap­pre­sen­ta­ta 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>
html

Output:

L’ultima parola della frase viene en­fa­tiz­za­ta.

Esempio di utilizzo 3: vi­sua­liz­za­re parole e parti di testo in corsivo

Per saltare subito all’occhio durante la lettura, non di rado le parole straniere sono rap­pre­sen­ta­te 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>
html

Output:

La parola seguente viene vi­sua­liz­za­ta in corsivo.

Esempio di utilizzo 4: sot­to­li­nea­re sezioni di testo

Na­tu­ral­men­te, la for­mat­ta­zio­ne HTML offre anche la pos­si­bi­li­tà di sot­to­li­nea­re 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>
html

Output:

Immagine: Formattazione HTML: esempio con testo sottolineato
For­mat­ta­zio­ne HTML: esempio con testo sot­to­li­nea­to.

Esempio di utilizzo 5: barrare parole

I contenuti inseriti all’interno del tag <strike> sono vi­sua­liz­za­ti barrati. Questo tag HTML è usato fra l’altro per segnalare in­for­ma­zio­ni 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>
html

Output:

Immagine: Formattazione HTML: esempio con testo barrato
For­mat­ta­zio­ne HTML: esempio con testo barrato.
Vai al menu prin­ci­pa­le