Tag HTML: i comandi più importanti in sintesi
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?
- Tag HTML per la struttura di base di un documento
- Comandi HTML per configurare un sito web
- Comandi HTML per il carattere tipografico
- Evidenziare e contrassegnare i paragrafi
- Creare elenchi e tabelle con i tag HTML
- Incorporare file multimediali in un documento HTML
- Tag HTML per i moduli
- Inserire collegamenti ipertestuali su documenti HTML
- Altri comandi HTML importanti
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.
Articoli simili
Comandi Docker
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.
Panoramica dei comandi Telnet
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.
Inserire video in un sito web
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.
_target: definire gli obiettivi dei link in HTML
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.
DOCTYPE html: definizione ed esempi
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…
Cos’è l’HTML (HyperText Markup Language)?
Creare un sito web dallo stile inconfondibile? È possibile grazie al linguaggio di markup HTML. Le peculiarità dell’HTML risiedono nella sua sintassi chiara e intuitiva e nell’essere un linguaggio open source gratuito. Esso rappresenta inoltre l’introduzione ideale al mondo della programmazione per chi non è del mestiere. Vi presentiamo le caratteristiche del linguaggio HTML e come funziona.
