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.
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.
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 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>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. |
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>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. |
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.
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. |
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>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. |
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>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. |
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>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. |
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>Di seguito vi mostriamo come aggiungere un pulsante:
<body>
<h2>Qui viene posizionato il pulsante</h2>
<button type="button">Clic</pulsante>
</body>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. |
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>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.
HTML5 rende l’inserimento dei video nei siti web più facile che mai. La nuova versione del linguaggio di markup definisce un tag nativo <video> e l’API (application programming interface) corrispondente. In alternativa, i gestori di siti web possono incorporare video sul proprio sito attraverso piattaforme di video hosting come YouTube o Vimeo.
I comandi Docker sono usati per controllare il Docker Engine sull’host locale. Una volta inseriti nella riga di comando, vengono tradotti in chiamate API. Possono essere utilizzati per gestire immagini, container e volumi. Chi lavora molto con Docker troverà sicuramente vantaggiosa una buona conoscenza dei comandi Docker.
Con i comandi Telnet potete controllare la connessione tra il vostro computer (fisso o portatile) e un sistema esterno, come ad esempio un web server. Per farlo, non solo è importante conoscere i comandi appropriati, ma anche le varie opzioni corrispondenti, perché i comandi Telnet sono efficaci solo quando vengono specificati da dei parametri.
Se desiderate includere dei link sul vostro sito web, potete utilizzare l’attributo HTML target per determinare dove deve aprirsi il link. In questo modo, decidete se le/gli utenti rimangono sul vostro sito web o se invece passeranno a un altro sito. In questo articolo potete scoprire come usare l’attributo HTML _target e cosa dovete tenere a mente nel farlo.
Il contrassegno DOCTYPE html deve essere collocato nella prima posizione dei documenti HTML e delle sottopagine. Con DOCTYPE chiarite quale sintassi e grammatica state utilizzando e i browser sanno immediatamente di che tipo di documento si tratta. La mancanza di questa indicazione può causare problemi di visualizzazione del sito web. Scoprite tutto quello che c’è da sapere su DOCTYPE html in...
Offri ai tuoi clienti servizi professionali e affidabili con l'hosting di IONOS.
Scopri i pacchetti
Dominio omaggio per un anno