I tag HTML (HyperText Markup Language) sono elementi utilizzati per definire la struttura e il contenuto di una pagina web. Ogni tag HTML ha un significato specifico e viene utilizzato per indicare come il contenuto dovrebbe essere visualizzato nel browser.
Struttura di base di un tag HTML:
Un tag HTML è racchiuso tra parentesi angolari < >. La maggior parte dei tag ha una forma di apertura e di chiusura:
<nome_tag>contenuto</nome_tag>Alcuni tag sono “auto-chiudenti” o “autocontenuti” e non richiedono un tag di chiusura, ad esempio <img />.
Categorie principali di tag HTML:
1. Tag di struttura e semantica:
<html>: Il tag radice che racchiude tutto il contenuto della pagina web.<head>: Contiene metadati sulla pagina, come il titolo, i link ai fogli di stile e gli script.<title>: Definisce il titolo della pagina web, visualizzato nella barra del titolo del browser.<body>: Contiene il contenuto visibile della pagina, come testi, immagini, link, ecc.<header>: Utilizzato per contenere il contenuto di intestazione introduttivo o di navigazione.<footer>: Contiene il contenuto di chiusura della pagina, come informazioni di copyright, link ai termini di servizio, ecc.<section>: Definisce una sezione tematica del contenuto.<article>: Rappresenta un’unità autonoma di contenuto che potrebbe essere distribuita o riutilizzata.<div>: Un contenitore generico per raggruppare altri elementi.<main>: Indica il contenuto principale della pagina.<nav>: Usato per contenere i link di navigazione della pagina.
2. Tag di testo e formattazione:
<h1>–<h6>: Definiscono i titoli e sottotitoli, dove<h1>è il titolo più importante e<h6>il meno importante.<p>: Rappresenta un paragrafo di testo.<br />: Inserisce una interruzione di riga.<hr />: Inserisce una linea orizzontale per separare contenuti.<strong>: Indica un testo di forte importanza, di solito visualizzato in grassetto.<em>: Indica un’enfasi su un testo, di solito visualizzato in corsivo.<b>: Applica il grassetto al testo, senza aggiungere importanza semantica.<i>: Applica il corsivo al testo, senza aggiungere importanza semantica.<ul>: Crea una lista non ordinata (puntata).<ol>: Crea una lista ordinata (numerata).<li>: Rappresenta un singolo elemento di una lista.<blockquote>: Indica una citazione estesa.<code>: Definisce un blocco di codice.
3. Tag per link, immagini e media:
<a>: Crea un link ipertestuale.<img />: Inserisce un’immagine.<video>: Inserisce un file video.<audio>: Inserisce un file audio.<source>: Definisce le risorse multimediali per<video>e<audio>.
4. Tag per form e input:
<form>: Definisce un modulo per l’invio dei dati.<input />: Campo di input per dati vari, come testo, password, ecc.<button>: Definisce un pulsante cliccabile.<textarea>: Campo per l’inserimento di testo multilinea.<label>: Etichetta per un elemento di input.<select>: Crea un menu a tendina.<option>: Definisce un’opzione all’interno di un menu<select>.<fieldset>: Raggruppa elementi di un form.<legend>: Fornisce una descrizione per il contenuto di un<fieldset>.
5. Tag di metadati e SEO:
<meta />: Fornisce metadati sulla pagina, come charset, descrizione, parole chiave, ecc.<link />: Collega la pagina ad altre risorse esterne, come i fogli di stile CSS.<style>: Inserisce stili CSS direttamente nella pagina.<script>: Inserisce o collega script JavaScript alla pagina.
