Tag HTML: i comandi più importanti in sintesi
Con i comandi HTML costruisci 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.
- Editor facile e intuitivo con supporto IA
- Immagini e testi d'effetto in pochi secondi
- Dominio, indirizzo e-mail e certificato SSL inclusi
Cosa sono i tag HTML?
Se vorresti imparare l’HTML o scrivere il tuo 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 solitamente rappresentati 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 puoi vedere un esempio della struttura di un tag HTML:
<h1>Questo è un titolo</h1>Non tutti gli elementi HTML consistono in un tag di apertura e uno di chiusura. I cosiddetti Self-closing Tags (chiamati anche tag vuoti) sono elementi HTML che non necessitano di contenuto tra un tag di apertura e chiusura. Pertanto, consistono solo di un singolo tag, per esempio <br> per un’interruzione di riga. Si chiudono quindi da soli e sono sintatticamente completi senza un tag di chiusura separato.
Esistono moltissimi tag HTML diversi e probabilmente non ti 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 ti esponiamo i comandi HTML più comuni, organizzati in tabelle e ordinati per categorie. I comandi mostrati qui sono tutti supportati nella versione HTML attuale 5.2 e nello standard conosciuto come HTML Living Standard. Quest’ultimo rappresenta lo stato attuale delle tecnologie web ed è aggiornato continuamente.
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>
|
Questo comando HTML memorizza il titolo del documento, che viene mostrato anche nella barra del titolo del browser. |
<body>
|
<body> è l’area principale e include il contenuto che viene visualizzato nel browser.
|
<nav>
|
Si tratta dell’area di navigazione di un sito web. |
<section>
|
Con <section> è possibile raggruppare gli elementi in un gruppo.
|
<article>
|
<article> è l’area con i contenuti di un sito web.
|
<header>
|
<header> definisce l’intestazione di una pagina o di una sezione.
|
<footer>
|
Con <footer> viene definita la parte inferiore di una pagina o di una sezione.
|
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 configurare un sito web
Esistono numerosi tag HTML con i quali puoi suddividere e sviluppare singole aree o l’intera pagina.
| Tag HTML | Descrizione |
|---|---|
<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> si forza un’interruzione di riga.
|
<hr>
|
<hr> genera una linea divisoria ottica che appare tra due contenuti.
|
<div>
|
Con il tag HTML div è possibile raggruppare blocchi di contenuti correlati. |
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
Puoi cambiare il carattere tipografico del tuo 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 visualizzati in corsivo. |
<u>
|
La parte racchiusa viene sottolineata. |
<s>
|
Il testo considerato viene barrato. |
<sup>
|
Con il tag HTML <sup> si possono mettere i caratteri in apice, come ad esempio 1°.
|
<sub>
|
Con <sub> si possono visualizzare i caratteri in pedice, come ad esempio H2O.
|
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 trovi un tutorial esaustivo sul CSS.
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> puoi evidenziare determinate sezioni.
|
<em>
|
Con <em> vengono evidenziati frammenti di testo.
|
<q>
|
Con <q> contrassegni le citazioni all’interno di un testo.
|
<blockquote>
|
<blockquote> contrassegna un intero paragrafo come citazione.
|
<code>
|
<code> formatta una sezione come codice di programma.
|
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:
| 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 specifica cella in una tabella.
|
<th>
|
Con <th> si definisce la cella d’intestazione di una tabella.
|
<ol>
|
Con <ol> si crea un elenco numerato.
|
<ul>
|
Con <ul> si 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 definitoria all’interno di un elenco.
|
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>Incorporare file multimediali in un documento HTML
Diversi tag HTML ti 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 trovi i comandi HTML più comuni:
| Tag HTML | Descrizione |
|---|---|
<img>
|
Il tag HTML img contrassegna un’immagine. |
<map>
|
Con <map> è possibile incorporare una mappa nel documento.
|
<audio>
|
<audio> ti permette di incorporare contenuti audio.
|
<video>
|
Con <video> aggiungi contenuti video.
|
Se desideri includere contenuti multimediali, devi 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 tuo documento HTML, utilizza i seguenti comandi HTML:
| Tag HTML | Descrizione |
|---|---|
<form>
|
Con <form> crei un modulo.
|
<input>
|
<input> viene utilizzato per la gestione degli inserimenti nel modulo.
|
<button>
|
Tramite <button> aggiungi un pulsante.
|
<select>
|
Con <select> crei menu a discesa con diverse opzioni.
|
<option>
|
<option> rappresenta un elemento all’interno di un menu a discesa.
|
Creare un modulo
In pratica, crei un modulo come mostrato di seguito. Nota che vengono utilizzati attributi aggiuntivi per specificare, ad esempio, la richiesta HTTP desiderata (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 aggiungere un pulsante:
<body>
<h2>Qui viene posizionato il pulsante</h2>
<button type="button">Clic</button>
</body>Inserire collegamenti ipertestuali su documenti HTML
Utilizza i seguenti tag HTML per creare collegamenti ipertestuali (o link) nel tuo 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.
|
Inoltre, l’attributo href nel link viene utilizzato per specificare l’indirizzo di destinazione. 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 importanti
Esistono numerosi altri tag HTML che facilitano il lavoro e che si possono utilizzare in un editor HTML. Te ne presentiamo una piccola selezione:
| Tag HTML | Descrizione |
|---|---|
<style>
|
Con il tag HTML style inserisci codici CSS che definiscono l’aspetto del sito web. |
<label>
|
Il tag HTML <label> viene utilizzato con il tag <input> e definisce un campo di testo.
|
<iframe>
|
Il tag HTML iframe ti consente di incorporare contenuti esterni nel tuo sito web. |
<!-- … -->
|
<!-- … --> ti permette di inserire commenti nel codice HTML.
|
Individuale anziché ordinario: con le diverse soluzioni web di IONOS puoi creare un sito web personalizzato, esattamente secondo le tue aspettative. Se avrai bisogno di aiuto, il nostro team di esperti sarà a tua disposizione.
MyWebsite Now Starter è lo strumento pensato per i principianti che vogliono creare un sito web in modo intuitivo. Include dominio e indirizzo e-mail.