Comprendere ogni tag HTML è fondamentale per implementare il tuo codice HTML.
Usa questa guida come riferimento per i tag HTML standard e su come usarli.
Cosa sono i tag HTML?
I tag HTML sono semplici istruzioni che dicono al browser come formattare il testo. Puoi usare i tag per formattare il corsivo, le interruzioni di riga, gli oggetti, gli elenchi puntati e molto altro.
Questi tag risiedono nell’HTML (o linguaggio a marcatori per ipertesti) di ogni pagina web. Insomma, l’HTML è il linguaggio delle pagine web.
Come fanno le pagine web a leggere i tag HTML?
I server leggono il codice HTML per comprendere e renderizzare il contenuto. Leggono l’HTML da cima a fondo, un po’ come fai tu ora con questa guida.
Puoi usare quanti tag vuoi per formattare il contenuto. Tuttavia, ci sono alcuni tag HTML essenziali e alcune regole da seguire.
Un tag HTML deve contenere tre parti:
- Un tag iniziale, che inizierà con un simbolo < >
- Il contenuto, cioè le brevi istruzioni su come visualizzare l’elemento sulla pagina
- Un tag finale, che finirà con un simbolo </ >
Tuttavia, alcuni tag HTML possono restare aperti. Questo vuol dire che il tag HTML non deve per forza chiudersi con un simbolo </ >. I tag non chiusi vengono di solito usati per i metadati o gli a capo.
Che differenza c’è tra attributi e tag HTML?
Anche se questa guida riguarda i tag HTML, è importante conoscere la differenza tra tag HTML, elementi e attributi.
Un elemento HTML è un elemento sulla pagina, cioè fa parte del contenuto della pagina. Un tag HTML determina il modo in cui appare l’elemento HTML. Un attributo HTML descrive le caratteristiche di quell’elemento.
Di seguito spieghiamo come interagiscono gli elementi, i tag e gli attributi:
- I tag HTML contengono istruzioni su come visualizzare un elemento sulla pagina. Iniziano con un < e finiscono con un > e precedono e seguono il contenuto dell’elemento. (per esempio <b> Bold tag </b>)
- Gli elementi HTML sono il contenuto sulla pagina che si trova all’interno dei tag. (<b> Bold tag </b>)
- Gli attributi HTML forniscono informazioni aggiuntive sugli elementi HTML e compaiono all’interno del tag HTML (per esempio <html lang=”it-IT”>).
| Tipo | Tag HTML | Elementi HTML | Attributi HTML |
| Contiene | Istruzioni su come visualizzare un elemento sulla pagina | Il contenuto sulla pagina da visualizzare | Informazioni aggiuntive sugli elementi sulla pagina |
| Aspetto | Inizia con < e finisce con > | Contenuto all’interno di un tag HTML | Compare nel tag iniziale prima di qualsiasi elemento |
Esempi di tag HTML
<p> Paragraph Tag </p>
<p> e </p> sono i tag HTML e “Paragraph Tag” è l’elemento HTML, cioè il testo sulla pagina.
Questo tag formatta qualsiasi testo tra il tag iniziale <p> e il tag finale </p> come paragrafo standard o corpo di testo principale.
<h2> Heading Tag </h2>
In quest’esempio, <h2> e </h2> sono i tag HTML e “Heading Tag” è l’elemento HTML ovvero l’intestazione sulla pagina.
Questo tag formatta qualsiasi testo tra il tag iniziale <h2> e il tag finale </h2> come intestazione 2 (un tipo di sottotitolo).
<b> Bold tag </b>
In questo caso <b> e </b> sono i tag HTML e “Bold tag” è l’elemento HTML, vale a dire il testo sulla pagina.
Questo tag formatta qualsiasi testo tra il tag iniziale <b> e il tag finale </b> in grassetto.
<i> Italic Tag </i>
In questo caso <i> e </i> sono i tag HTML e “Italic tag” è l’elemento HTML (il testo sulla pagina).
Questo tag formatta qualsiasi testo tra il tag iniziale <i> e il tag finale </i> in corsivo.
<u> Underline Tag</u>
In questo caso <u> e </u> sono i tag HTML e “Underline tag” è l’elemento HTML, vale a dire il testo sulla pagina.
Questo tag formatta qualsiasi testo tra il tag iniziale <u> e il tag finale </u> in sottolineato.
I tag HTML più comuni
Esistono circa 100 tipi diversi di tag HTML da usare per le pagine web. Ecco una lista di quelli più comuni:
| Tag | Tipo | Cos’è |
| <p> | Tag di testo HTML | Paragrafo |
| <h1> | Tag di testo HTML | Intestazione 1 |
| <h2> | Tag di testo HTML | Intestazione 2 |
| <h3> | Tag di testo HTML | Intestazione 3 |
| <h4> | Tag di testo HTML | Intestazione 4 |
| <h5> | Tag di testo HTML | Intestazione 5 |
| <h6> | Tag di testo HTML | Intestazione 6 |
| </strong> | Tag di testo HTML | Grassetto |
| <em> | Tag di testo HTML | Enfasi |
| <abbr> | Tag di testo HTML | Abbreviazione |
| <address> | Tag di testo HTML | Informazioni di contatto |
| <bdo> | Tag di testo HTML | Sovrascrivi la direzione corrente del testo |
| <blockquote> | Tag di testo HTML | Contenuto da altra fonte |
| <cite> | Tag di testo HTML | Titolo dell’opera, libro, sito web |
| <q> | Tag di testo HTML | Citazione inline |
| <code> | Tag di testo HTML | Visualizza una parte del codice di programmazione |
| <ins> | Tag di testo HTML | Testo inserito |
| <del> | Tag di testo HTML | Testo eliminato dal documento |
| <dfn> | Tag di testo HTML | Termine definito in una frase/locuzione |
| <kbd> | Tag di testo HTML | Input tastiera |
| <pre> | Tag di testo HTML | Testo preformattato |
| <samp> | Tag di testo HTML | Esempio di output da un programma per computer |
| <var> | Tag di testo HTML | Nome di variabile usato in contesto matematico o di programmazione |
| <br> | Tag di testo HTML | A capo singolo |
| <div> | Tag di testo HTML | Divisione |
| <a> | Tag di testo HTML | Tag ancora per un link |
| <base> | Tag di testo HTML | Url di base per tutti gli Url relativi all’interno del documento |
| <img> | Tag immagine e oggetto HTML | Immagine |
| <area> | Tag immagine e oggetto HTML | Area di una mappa immagine |
| <map> | Tag immagine e oggetto HTML | Mappa immagine |
| <param> | Tag immagine e oggetto HTML | Parametro per un elemento <Object> |
| <object> | Tag immagine e oggetto HTML | Incorpora un oggetto |
| <ul> | Tag lista HTML | Lista non ordinata |
| <ol> | Tag lista HTML | Lista ordinata |
| <li> | Tag lista HTML | Lista |
| <dl> | Tag lista HTML | Lista descrittiva |
| <dt> | Tag lista HTML | Termine in lista descrittiva |
| <dd> | Tag lista HTML | Definizione/Descrizione di un termine in lista descrittiva |
Per una lista completa degli oltre 100 elementi HTML puoi visitare questa utile guida di javaTpoint.
Come controllare i tag HTML
Se sulle tue pagine ci sono già dei tag HTML e vuoi controllare se vengono usati correttamente, puoi farlo controllando l’HTML della pagina. Per farlo ti basta il browser.
Per visualizzare l’HTML della pagina, devi:
- Cliccare con il tasto destro sulla pagina web in Google Chrome
- Fare clic su ”Ispeziona”
- Troverai il codice HTML in un riquadro sul lato o in fondo alla pagina
- Usa Ctrl + F per trovare tag o elementi particolari
Per controllare se il tuo sito usa correttamente i tag HTML puoi fare un audit SEO del tuo sito. Tool esterni come il tool Site Audit possono controllare se i tag HTML di base e gli attributi sono corretti e se le tue pagine usano troppi HTML.
Per eseguire un audit della SEO con il tool Site Audit, devi prima creare un progetto per il tuo dominio. Se ne hai già uno, dalla dashboard del progetto seleziona l’opzione “Site Audit”:
Il tool ti inviterà a inserire il tuo dominio target e a configurare le eventuali impostazioni aggiuntive:
Usa le impostazioni per determinare la portata del crawling, per disattivare gli URL o fornire accessi aggiuntivi al sito web. Seleziona “Avvia Site Audit”. Il tool ti notificherà quando l’audit è terminato.
Al completamento, verrai reindirizzato al report panoramica di Site Audit, in cui potrai avere una panoramica di qualità su tutte le problematiche del sito:
Seleziona la scheda “Issues” per visualizzare più nel dettaglio qualsiasi criticità di HTML. Il tool fornisce anche suggerimenti su come risolverle:
Considerazioni finali
Comprendere l’HTML non dev’essere per forza complicato. Grazie al cheat sheet di questa guida dovresti riuscire a identificare e implementare i tag HTML delle tue pagine web.
Ti servono altri consigli sugli attributi HTML e come sistemarli? Prova la nostra guida Attributi HTML.
Per ulteriori informazioni su come fare l’audit del sito e controllare il suo HTML puoi consultare la pagina Come fare un audit della SEO in 18 passi.