# 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](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/cose-lhtml/) 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](https://www.ionos.it/digitalguide/online-marketing/marketing-sui-motori-di-ricerca/fondamenti-per-lottimizzazione-seo/): **un sito internet chiaro e ben strutturato** risulta più comprensibile ai crawler dei motori di ricerca (programmi che analizzano i contenuti delle pagine web).

Consiglio Nella nostra guida “[Imparare l’HTML: l’ampio tutorial per principianti](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/imparare-lhtml-lampio-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.

## 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](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/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:

<table>
  <thead>
    <tr>
      <th>Tag HTML</th>
      <th>Descrizione</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`<b>`</td>
      <td>Tag fisico che consente di scrivere una parola, una frase o un passaggio di testo in grassetto.</td>
    </tr>
    <tr>
      <td>`<strong>`</td>
      <td>Questo tag HTML logico mette in evidenza parti del testo sia a livello visivo sia per i browser.</td>
    </tr>
    <tr>
      <td>`<i>`</td>
      <td>Tag fisico che visualizza in corsivo singole parole, frasi o passaggi.</td>
    </tr>
    <tr>
      <td>`<em>`</td>
      <td>Questo tag logico serve per mettere in evidenza singoli passaggi di testo, spesso in corsivo.</td>
    </tr>
    <tr>
      <td>`<u>`</td>
      <td>La parte selezionata viene sottolineata.</td>
    </tr>
    <tr>
      <td>`<h1>` - `<h6>`</td>
      <td>Questi tag servono per creare titoli secondo il principio seguente: più piccolo è il numero, maggiore è la dimensione del carattere usata per il titolo.</td>
    </tr>
    <tr>
      <td>`<p>`</td>
      <td>Questo tag consente di creare paragrafi.</td>
    </tr>
    <tr>
      <td>`<big>`</td>
      <td>Con questo tag HTML si indica una porzione di testo da ingrandire.</td>
    </tr>
    <tr>
      <td>`<small>`</td>
      <td>Usato per ridurre le dimensioni del carattere di una sezione.</td>
    </tr>
    <tr>
      <td>`<sup>`</td>
      <td>Questo tag è utilizzato per rappresentare un testo in apice, ad esempio nell’equazione e = mc².</td>
    </tr>
    <tr>
      <td>`<sub>`</td>
      <td>È il tag per visualizzare caratteri in pedice. Un esempio è la formula dell’acqua, H2O.</td>
    </tr>
    <tr>
      <td>`<ins>`</td>
      <td>Questo tag indica che è stato inserito un testo in un documento.</td>
    </tr>
    <tr>
      <td>`<del>`</td>
      <td>Il tag segnala che è stato eliminato del testo da un documento.</td>
    </tr>
    <tr>
      <td>`<strike>`</td>
      <td>Questo tag è usato per barrare singoli passaggi di testo.</td>
    </tr>
    <tr>
      <td>`<mark>`</td>
      <td>È il tag che consente di evidenziare lo sfondo di parole, frasi e porzioni di testo con un colore.</td>
    </tr>
  </tbody>
</table>

## 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.

```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>
<div class="hash d-none" hidden>hash_4f37cae353c79d8e2af3dd4f642b00219e1a234c</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></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.

```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>
<div class="hash d-none" hidden>hash_4f37cae353c79d8e2af3dd4f642b00219e1a234c</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></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>`.

```html

<html>
<head>
    <title>Esempio di testo in corsivo</title>
</head>
<body>
    <p>La parola seguente viene visualizzata in <i>corsivo</i>.</p>
<div class="hash d-none" hidden>hash_4f37cae353c79d8e2af3dd4f642b00219e1a234c</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></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>`.

```html

<html>
<head>
    <title>Esempio di testo sottolineato</title>
</head>
<body>
    <p><u>Sottolineare</u> una parola è utile in varie situazioni.</p>
<div class="hash d-none" hidden>hash_4f37cae353c79d8e2af3dd4f642b00219e1a234c</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

**Output**:

[![Immagine: Formattazione HTML: esempio con testo sottolineato](https://www.ionos.it/digitalguide/fileadmin/_processed_/b/1/csm_sottolineare-parola-formattazione-html_fca22dafd9.webp "Formattazione HTML: esempio con testo sottolineato")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/sottolineare-parola-formattazione-html.png) Formattazione HTML: esempio con testo sottolineato. ### 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.

```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>
<div class="hash d-none" hidden>hash_4f37cae353c79d8e2af3dd4f642b00219e1a234c</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

**Output**:

[![Immagine: Formattazione HTML: esempio con testo barrato](https://www.ionos.it/digitalguide/fileadmin/_processed_/6/2/csm_testo-barrato-formattazione-html_5cf6eff4ed.webp "Formattazione HTML: esempio con testo barrato")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/testo-barrato-formattazione-html.png) Formattazione HTML: esempio con testo barrato.


This is a markdown version of: [https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/formattazione-html/](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/formattazione-html/) for AI/LLM consumption.