Tag HTML: i comandi più im­por­tan­ti in sintesi

Con i comandi HTML co­strui­sci un sito web chiaro, de­po­si­tan­do le in­for­ma­zio­ni più im­por­tan­ti per tutti i browser. Oltre ai tag HTML per la struttura di base, ve ne sono altri che possono essere uti­liz­za­ti per ag­giun­ge­re contenuti mul­ti­me­dia­li, creare moduli o impostare il carattere ti­po­gra­fi­co.

Cosa sono i tag HTML?

Se vorresti imparare l’HTML o scrivere il tuo codice, i tag HTML sono pro­ba­bil­men­te lo strumento più im­por­tan­te ed efficace. I comandi HTML vengono uti­liz­za­ti per inviare in­for­ma­zio­ni ai diversi browser. Il sito web viene quindi strut­tu­ra­to nel miglior modo possibile e può essere vi­sua­liz­za­to da qualsiasi browser grazie alle in­for­ma­zio­ni de­po­si­ta­te.

I tag HTML vengono so­li­ta­men­te rap­pre­sen­ta­ti con un tag iniziale e uno finale. Sono racchiusi tra parentesi angolari e con­ten­go­no le in­for­ma­zio­ni de­si­de­ra­te, con il tag finale con­tras­se­gna­to da una barra. La com­bi­na­zio­ne di tag iniziale, in­for­ma­zio­ni e tag finale è chiamata elemento. È possibile assegnare un attributo HTML all’elemento che con­tri­bui­sce a fornire ulteriori in­for­ma­zio­ni.

Qui puoi vedere un esempio della struttura di un tag HTML:

<h1>Questo è un titolo</h1>

Esistono mol­tis­si­mi tag HTML diversi e pro­ba­bil­men­te non ti ser­vi­ran­no tutti. Inoltre, alcuni di questi non vengono più uti­liz­za­ti dall’in­tro­du­zio­ne di HTML 5 e di HTML 5.1. Anche per questo è utile avere sempre a portata di mano un riepilogo dei comandi HTML più im­por­tan­ti.

Di seguito ti esponiamo i comandi HTML più comuni, or­ga­niz­za­ti in tabelle e ordinati per categorie. I comandi mostrati qui sono tutti sup­por­ta­ti nella versione HTML attuale 5.2 e nello standard co­no­sciu­to come HTML Living Standard. Quest’ultimo rap­pre­sen­ta lo stato attuale delle tec­no­lo­gie web ed è ag­gior­na­to con­ti­nua­men­te.

Tag HTML per la struttura di base di un documento

I seguenti tag HTML strut­tu­ra­no i siti web e co­sti­tui­sco­no la base di tutti gli altri elementi del documento.

La struttura di base di un sito web può apparire come nell’esempio seguente:

<!DOCTYPE html>
<html>
<head>
<title>Il titolo del tuo sito web</title>
</head>
<body>Qui puoi inserire testo o immagini.</body>
</html>

Comandi HTML per con­fi­gu­ra­re un sito web

Esistono numerosi tag HTML con i quali puoi sud­di­vi­de­re e svi­lup­pa­re singole aree o l’intera pagina.

Un esempio di utilizzo dei tag HTML strut­tu­ra­li:

<body>
<h1>Qui c’è il titolo</h1>
<p>Qui c’è il corpo del testo.</p>
<h2>I sottotitoli dividono il contenuto</h2>
<p>Altro testo e nel mezzo <br> un’interruzione di pagina.</p>
</body>

Comandi HTML per il carattere ti­po­gra­fi­co

Puoi cambiare il carattere ti­po­gra­fi­co del tuo documento con diversi comandi HTML.

Un esempio di re­go­la­zio­ne del carattere ti­po­gra­fi­co con i comandi HTML:

<body>
<p>Qui c’è un esempio di testo e <i>questa parte viene scritta in corsivo</i>.</p>
</body>

Evi­den­zia­re e con­tras­se­gna­re i paragrafi

Per for­mat­ta­re o con­tras­se­gna­re i paragrafi, si uti­liz­za­no in par­ti­co­la­re i seguenti tag HTML:

Di seguito trovi un esempio di utilizzo di questi comandi HTML:

<body>
<p>Questo è il corpo del testo. <strong>Questa parte viene evidenziata</strong>.</p>
</body>

Creare elenchi e tabelle con i tag HTML

In un documento HTML puoi anche inserire elenchi e tabelle. Di seguito trovi i tag HTML appositi:

Di seguito potrai vedere come appare un elenco (non numerato) in un documento HTML:

<body>
<ul>
<li>Primo punto</li>
<li>Secondo punto</li>
<li>Terzo punto</li>
</ul>
</body>

In­cor­po­ra­re file mul­ti­me­dia­li in un documento HTML

Diversi tag HTML ti con­sen­to­no di inserire immagini, video e file audio in un documento e di for­mat­tar­li. Di regola si può accedere ai file mul­ti­me­dia­li tramite un URL. Di seguito trovi i comandi HTML più comuni:

Se desideri includere contenuti mul­ti­me­dia­li, devi uti­liz­za­re anche gli attributi HTML src per le fonti e alt per il testo al­ter­na­ti­vo. Di seguito un esempio:

<body>
<img src="img/immagineesempio.png" alt="Descrizione dell’immagine" />
</body>

Tag HTML per i moduli

Per includere un modulo nel tuo documento HTML, utilizza i seguenti comandi HTML:

Creare un modulo

In pratica, crei un modulo come mostrato di seguito. Nota che vengono uti­liz­za­ti attributi ag­giun­ti­vi per spe­ci­fi­ca­re, ad esempio, la richiesta HTTP de­si­de­ra­ta (nel nostro caso POST).

<body>
<form method="post" action="mailto:mail@esempio.it">
Nome: <input type="testo" name="nome" />
Password: <input type="password" name="password" />
</form>
</body>

Creare un pulsante

Di seguito ti mostriamo come ag­giun­ge­re un pulsante:

<body>
<h2>Qui viene posizionato il pulsante</h2>
<button type="button">Clic</button>
</body>

Inserire col­le­ga­men­ti iper­te­stua­li su documenti HTML

Utilizza i seguenti tag HTML per creare col­le­ga­men­ti iper­te­stua­li (o link) nel tuo documento:

Inoltre, l’attributo href nel link viene uti­liz­za­to per spe­ci­fi­ca­re l’indirizzo di de­sti­na­zio­ne. Ecco come inserire un link in un documento HTML:

<body>
<h2>Contatto</h2>
<p>Contattaci <a href="mailto:mail@esempio.it">tramite e-mail</a>.</p>
</body>

Altri comandi HTML im­por­tan­ti

Esistono numerosi altri tag HTML che fa­ci­li­ta­no il lavoro e che si possono uti­liz­za­re in un editor HTML. Te ne pre­sen­tia­mo una piccola selezione: