Tag HTML: i comandi più importanti in sintesi
La redazione di IONOS9 mins
Con i comandi HTML costruite un sito web chiaro, depositando le informazioni più importanti per tutti i browser. Oltre ai tag HTML per la struttura di base, ve ne sono altri che possono essere utilizzati per aggiungere contenuti multimediali, creare moduli o impostare il carattere tipografico.
Cosa sono i tag HTML?
Se volete imparare l’HTML o scrivere il vostro codice, i tag HTML sono probabilmente lo strumento più importante ed efficace. I comandi HTML vengono utilizzati per inviare informazioni ai diversi browser. Il sito web viene quindi strutturato nel miglior modo possibile e può essere visualizzato da qualsiasi browser grazie alle informazioni depositate.
I tag HTML vengono presentati con un tag iniziale e uno finale. Sono racchiusi tra parentesi angolari e contengono le informazioni desiderate, con il tag finale contrassegnato da una barra. La combinazione di tag iniziale, informazioni e tag finale è chiamata elemento. È possibile assegnare un attributo HTML all’elemento che contribuisce a fornire ulteriori informazioni.
Qui potete vedere un esempio della struttura di un tag HTML:
<h1>Questo è un titolo</h1>Il tag HTML <h> contraddistingue i titoli.
Esistono moltissimi tag HTML diversi e probabilmente non vi serviranno tutti. Inoltre, alcuni di questi non vengono più utilizzati dall’introduzione di HTML 5 e di HTML 5.1. Anche per questo è utile avere sempre a portata di mano un riepilogo dei comandi HTML più importanti. Di seguito vi esponiamo i comandi HTML più comuni, organizzati in tabelle e ordinati per categorie.
Tag HTML per la struttura di base di un documento
I seguenti tag HTML strutturano i siti web e costituiscono la base di tutti gli altri elementi del documento.
| Tag HTML | Descrizione |
| <!DOCTYPE> | Questo tag HTML determina il tipo di documento. |
| <html> | Questo tag HTML definisce un documento come documento HTML. |
| <head> | I metadati del documento vengono inseriti nella sezione <head>. |
| <title> | Con questo comando HTML viene creato il titolo del documento, che viene visualizzato anche nella barra del titolo del browser. |
| <body> | <body> è l’area principale e include il contenuto che viene visualizzato nel browser. |
| <nav> | È l’area di navigazione di un sito web. |
| <section> | Gli elementi possono essere combinati in un gruppo attraverso <section>. |
| <article> | <article> è l’area di contenuto di un sito web. |
| <header> | <header> definisce l’intestazione di una pagina o di una sezione. |
| <footer> | Il piè di pagina di una pagina o di una sezione è definito da <footer>. |
La struttura di base di un sito web con i tag HTML
La struttura di base di un sito web può apparire come nell’esempio seguente:
<!DOCTYPE html>
<html>
<head>
<title>Il titolo del vostro sito web</title>
</head>
<body>Qui potete inserire testo o immagini.</body>
</html>Comandi HTML per configurare un sito web
Esistono numerosi tag HTML con i quali potete suddividere e sviluppare singole aree o l’intera pagina.
| Tag HTML | Descrizione |
| Da <h1> a <h6> | I titoli vengono creati con i diversi tag h. Più piccolo è il numero, più grande è il titolo. |
| <p> | <p> contrassegna i paragrafi. |
| <br> | Con il tag HTML <br> viene forzata un’interruzione di riga. |
| <hr> | <hr> crea una linea di demarcazione visiva che appare tra due contenuti. |
Tag HTML per la struttura di un documento
Un esempio di utilizzo dei tag HTML strutturali:
<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 tipografico
Potete cambiare il carattere tipografico del vostro documento con diversi comandi HTML.
| Tag HTML | Descrizione |
| <b> | Singole parole, frasi o paragrafi vengono scritti in grassetto. |
| <i> | Singole parole, frasi o paragrafi vengono scritti in corsivo. |
| <u> | La parte racchiusa in questo tag viene sottolineata. |
| <s> | Il testo preso in considerazione viene barrato. |
| <sup> | Con il tag HTML <sup> si possono mettere i caratteri in apice, come ad esempio 1°. |
| <sub> | Con il tag HTML <sub> si possono visualizzare i caratteri in pedice, come ad esempio H2O. |
Modificare il testo del documento
Un esempio di regolazione del carattere tipografico con i comandi HTML:
<body>
<p>Qui c’è un esempio di testo e<i>questa parte viene scritta in corsivo</i>.</p>
</body>Per modificare il colore dei caratteri, è meglio utilizzare il CSS. Sulla nostra Digital Guide trovate un tutorial sul CSS esaustivo.
Evidenziare e contrassegnare i paragrafi
Per formattare o contrassegnare i paragrafi, si utilizzano in particolare i seguenti tag HTML:
| Tag HTML | Descrizione |
| <strong> | Con <strong> potete evidenziare dei paragrafi. |
| <em> | Con <em> vengono evidenziati dei frammenti di testo. |
| <q> | Con <q> contrassegnate le citazioni all’interno di un testo. |
| <blockquote> | <blockquote> contrassegna un intero paragrafo come una citazione. |
Formattazione con un tag HTML
Di seguito trovate 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 potete anche inserire elenchi e tabelle. Di seguito trovate i tag HTML appositi:
| Tag HTML | Descrizione |
| <table> | Con il tag HTML <table> viene definita una tabella. |
| <caption> | <caption> definisce il titolo di una tabella. |
| <tr> | Con <tr> si etichettano le righe di una tabella. |
| <td> | <td> definisce una cella in particolare di una tabella. |
| <th> | La cella di intestazione di una tabella è definita tramite <th>. |
| <ol> | Con <ol> si crea un elenco numerato. |
| <ul> | Con <ul> sia crea un elenco puntato non ordinato. |
| <li> | <li> indica le singole voci dell’elenco. |
| <dl> | <dl> designa un elenco di definizioni. |
| <dt> | <dt> definisce un termine o una posizione in un elenco di definizioni. |
| <dd> | <dd> è una descrizione di definizione all’interno di un elenco. |
Un elenco in linguaggio HTML
Di seguito potrete 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>Incorporare file multimediali in un documento HTML
Diversi tag HTML vi consentono di inserire immagini, video e file audio in un documento e di formattarli. Di regola si può accedere ai file multimediali tramite un URL. Di seguito trovate i comandi HTML più comuni:
| Tag HTML | Descrizione |
| <img> | Il tag HTML <img> contrassegna un’immagine. |
| <map> | Tramite <map> potete integrare una mappa nel documento. |
| <audio> | <audio> vi consente di includere contenuti audio. |
| <video> | Con <video> potete aggiungere contenuti video. |
Inserire un’immagine con un comando HTML
Se desiderate includere contenuti multimediali, dovete utilizzare anche gli attributi HTML src per le fonti e alt per il testo alternativo. 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 vostro documento HTML, utilizzate i seguenti comandi HTML:
| Tag HTML | Descrizione |
| <form> | Con <form> create un modulo. |
| <input> | <input> viene utilizzato per la gestione degli inserimenti nel modulo. |
| <button> | Tramite <button> aggiungete un pulsante. |
| <select> | Con <select> create un menu a discesa con diverse opzioni. |
Creare un modulo
Vi mostriamo con un esempio come creare un modulo:
<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 vi mostriamo come aggiungere un pulsante:
<body>
<h2>Qui viene posizionato il pulsante</h2>
<button type="button">Clic</pulsante>
</body>Inserire collegamenti ipertestuali su documenti HTML
Utilizzate i seguenti tag HTML per creare collegamenti ipertestuali (o link) nel vostro documento:
| Tag HTML | Descrizione |
| <a> | Con <a> si determina il collegamento ipertestuale. |
| <link> | <link> crea il collegamento tra il documento e una fonte esterna. |
| <nav> | Con <nav> vengono creati link per la navigazione. |
Collegamenti ipertestuali tramite tag HTML
Nell’esempio seguente vi illustriamo come creare collegamenti ipertestuali in un documento HTML:
<body>
<h2>Contatto</h2>
<p>Contattateci <a href="mailto:mail@esempio.it">tramite e-mail</a>.</p>
</body>Altri comandi HTML importanti
Esistono numerosi altri tag HTML che facilitano il lavoro e che si possono utilizzare in un editor HTML. Ve ne presentiamo una piccola selezione:
| Tag HTML | Descrizione |
| <style> | Con il tag HTML <style> inserite i codici CSS che definiscono l’aspetto del sito web. |
| <div> | Con il tag HTML <div> designate i paragrafi di un documento. |
| <label> | Potete usare il tag HTML <label> in combinazione con il tag <input> per definire un campo di testo. |
| <iframe> | Il tag HTML <iframe> vi consente di incorporare contenuti esterni nel vostro sito web. |
| <!-- … --> | <!-- … --> vi consente di includere commenti nel codice HTML. |
Individuale anziché ordinario: con le diverse soluzioni web di IONOS potete creare un sito web personalizzato, esattamente secondo le vostre aspettative. Se avrete bisogno di aiuto, il nostro team di esperti sarà a vostra disposizione.
