HTML - Tags Reference

Ciao, futuri sviluppatori web! Sono entusiasta di essere il vostro guida in questo emozionante viaggio attraverso il mondo dei tag HTML. Come qualcuno che ha insegnato scienze informatiche per molti anni, posso dirvi che comprendere i tag HTML è come imparare l'alfabeto dello sviluppo web. Allora, entriamo nel dettaglio!

Cos'è un Tag HTML?

I tag HTML sono i mattoni fondamentali delle pagine web. Sono come il codice segreto che dice ai browser come visualizzare il contenuto. Immagina di costruire una casa - i tag HTML sono i mattoni, le finestre e le porte che danno struttura alla tua pagina web.

Per esempio, vediamo un tag HTML semplice:

<p Questo è un paragrafo.</p>

Qui, <p> è il tag di apertura, e </p> è il tag di chiusura. Tutto ciò che c'è tra i due è il contenuto che verrà visualizzato come un paragrafo sulla tua pagina web.

Perché sono importanti?

I tag HTML sono importanti perché danno significato e struttura al tuo contenuto. Senza di loro, la tua pagina web sarebbe solo un groviglio di testo! Aiutano i browser a comprendere cosa ogni piece di contenuto dovrebbe essere, sia esso un'intestazione, un paragrafo, un'immagine o un link.

Elenco dei Tag HTML con Esempi

Esploriamo alcuni dei tag HTML più comuni. Fornirò esempi e spiegazioni per ogni categoria.

Tag HTML di Base

Questi sono la base di ogni documento HTML.

Tag	Descrizione	Esempio
`<!DOCTYPE>`	Definisce il tipo di documento	`<!DOCTYPE html>`
`<html>`	L'elemento radice di una pagina HTML	`<html>...</html>`
`<head>`	Contiene informazioni meta sul documento	`<head>...</head>`
`<title>`	Specifica un titolo per il documento	`<title>La Mia Prima Pagina Web</title>`
`<body>`	Definisce il corpo del documento	`<body>...</body>`

Ecco una struttura HTML di base:

<!DOCTYPE html>
<html>
<head>
<title>La Mia Prima Pagina Web</title>
</head>
<body>
<h1>Benvenuti sul mio sito web!</h1>
<p>Qui va tutto il mio contenuto.</p>
</body>
</html>

Questa struttura è come lo scheletro della tua pagina web. Tutto il resto che impareremo si adatterà dentro questo quadro di base.

Tag HTML di Formattazione

Questi tag ti aiutano a formattare il testo sulla tua pagina web.

Tag	Descrizione	Esempio
`<h1>` a `<h6>`	Intestazioni	`<h1>Intestazione Principale</h1>`
`<p>`	Paragrafo	`<p Questo è un paragrafo.</p>`
`<br>`	Interruzione di linea	`Linea 1<br>Linea 2`
`<strong>`	Testo in grassetto	`<strong>Importante!</strong>`
`<em>`	Testo evidenziato	`<em>Testo in corsivo</em>`

Vediamo questi in azione:

<h1>Benvenuti nel mio Ricettario</h1>
<h2>Ricetta: Biscotti al Cioccolato</h2>
<p Questi biscotti sono <strong>deliziosi</strong> e <em>facili da fare</em>!</p>
<p>Ingredienti:<br>
Farina<br>
Zucchero<br>
Gocce di cioccolato</p>

Questo esempio mostra come usare i tag di formattazione per strutturare una pagina di ricette. I tag <h1> e <h2> creano gerarchie di intestazioni, mentre <strong> e <em> evidenziano parole importanti.

Tag HTML per Form e Input

I form permettono agli utenti di inserire dati che possono essere inviati a un server per l'elaborazione.

Tag	Descrizione	Esempio
`<form>`	Definisce un form HTML	`<form>...</form>`
`<input>`	Controllo di input	`<input type="text" name="username">`
`<textarea>`	Controllo di input multilinea	`<textarea>Enter text here...</textarea>`
`<button>`	Bottone cliccabile	`<button type="submit">Invia</button>`

Ecco un esempio di form semplice:

<form action="/submit-recipe" method="post">
<label for="recipe-name">Nome della Ricetta:</label>
<input type="text" id="recipe-name" name="recipe-name"><br><br>

<label for="ingredients">Ingredienti:</label>
<textarea id="ingredients" name="ingredients"></textarea><br><br>

<button type="submit">Invia Ricetta</button>
</form>

Questo form permette agli utenti di inviare un nome di ricetta e gli ingredienti. L'attributo action specifica dove i dati del form dovrebbero essere inviati, e l'attributo method definisce come dovrebbero essere inviati.

Tag HTML per Immagini

Le immagini rendono le tue pagine web più visivamente accattivanti e informative.

Tag	Descrizione	Esempio
`<img>`	Incorpora un'immagine	`<img src="cookie.jpg" alt="Biscotto al cioccolato">`

Aggiungiamo un'immagine alla nostra pagina di ricette:

<h2>Biscotti al Cioccolato</h2>
<img src="cookie.jpg" alt="Un delizioso biscotto al cioccolato" width="300" height="200">
<p>Non ha un aspetto delizioso?</p>

L'attributo src specifica il file dell'immagine, mentre alt fornisce un testo alternativo per i lettori di schermo o se l'immagine non carica.

Tag HTML per Audio e Video

Questi tag ti permettono di incorporare contenuti multimediali nelle tue pagine web.

Tag	Descrizione	Esempio
`<audio>`	Incorpora un contenuto sonoro	`<audio src="recipe.mp3" controls></audio>`
`<video>`	Incorpora un contenuto video	`<video src="baking.mp4" controls></video>`

Ecco come potresti aggiungere un video di tutorial di cottura alla tua pagina di ricette:

<h3>Guarda il Processo di Cottura</h3>
<video src="cookie-baking.mp4" controls width="400" height="300">
Il tuo browser non supporta il tag video.
</video>

L'attributo controls aggiunge i controlli di riproduzione, pausa e volume al lettore video.

Tag HTML per Link

I link sono i fili che tessono insieme il web, permettendo agli utenti di navigare tra le pagine.

Tag	Descrizione	Esempio
`<a>`	Definisce un hyperlink	`<a href="https://www.example.com">Visita Example.com</a>`

Aggiungiamo alcuni link alla nostra pagina di ricette:

<p>Controlla le nostre <a href="recipes.html">altre ricette</a> o <a href="https://www.cookingchannel.com" target="_blank">visita Cooking Channel</a> per altre ispirazioni.</p>

L'attributo href specifica l'URL della pagina a cui il link va. L'attributo target="_blank" apre il link in una nuova scheda.

Tag HTML per Liste

Le liste aiutano a organizzare le informazioni in un formato chiaro e facile da leggere.

Tag	Descrizione	Esempio
`<ul>`	Lista non ordinata	`<ul>...</ul>`
`<ol>`	Lista ordinata	`<ol>...</ol>`
`<li>`	Elemento della lista	`<li>Elemento</li>`

Usiamo le liste per i nostri ingredienti e passaggi della ricetta:

<h3>Ingredienti:</h3>
<ul>
<li>2 tazze di farina per tutti gli usi</li>
<li>1 tazza di gocce di cioccolato</li>
<li>1/2 tazza di zucchero</li>
</ul>

<h3>Passaggi:</h3>
<ol>
<li>Unisci gli ingredienti secchi</li>
<li>Aggiungi gli ingredienti umidi</li>
<li>Riscalda a 350°F per 10-12 minuti</li>
</ol>

Questo esempio mostra come creare sia liste non ordinate (a pallini) che ordinate (numerate).

Tag HTML per Tabelle

Le tabelle sono ottime per visualizzare i dati in righe e colonne.

Tag	Descrizione	Esempio
`<table>`	Definisce una tabella	`<table>...</table>`
`<tr>`	Riga della tabella	`<tr>...</tr>`
`<th>`	Intestazione della tabella	`<th>Intestazione</th>`
`<td>`	Dato/cella della tabella	`<td>Dato</td>`

Creiamo una tabella per le informazioni nutrizionali dei nostri biscotti:

<h3>Informazioni Nutrizionali (per biscotto)</h3>
<table border="1">
<tr>
<th>Nutriente</th>
<th>Quantità</th>
</tr>
<tr>
<td>Calorie</td>
<td>150</td>
</tr>
<tr>
<td>Grasso</td>
<td>7g</td>
</tr>
<tr>
<td>Carboidrati</td>
<td>20g</td>
</tr>
</table>

Questo crea una tabella semplice con intestazioni e celle di dati. L'attributo border aggiunge dei bordi visibili alla tabella.

Tag HTML per Stile e Semantica

Questi tag aiutano a migliorare la struttura e l'aspetto della tua pagina web.

Tag	Descrizione	Esempio
`<div>`	Definisce una sezione nel documento	`<div>...</div>`
`<span>`	Contenitore inline per il testo	`<span style="color:red;">Testo rosso</span>`
`<header>`	Definisce un'intestazione per un documento o sezione	`<header>...</header>`
`<footer>`	Definisce un piè di pagina per un documento o sezione	`<footer>...</footer>`

Usiamo alcuni di questi tag per migliorare la struttura della nostra pagina di ricette:

<header>
<h1>Il Mio Ricettario</h1>
<nav>
<a href="index.html">Home</a> |
<a href="recipes.html">Ricette</a> |
<a href="about.html">Chi Sono</a>
</nav>
</header>

<main>
<article>
<h2>Biscotti al Cioccolato</h2>
<!-- Contenuto della ricetta qui -->
</article>
</main>

<footer>
<p>&copy; 2023 Il Mio Ricettario. Tutti i diritti riservati.</p>
</footer>

Questi tag semantici danno più significato alla struttura della tua pagina, il che è utile sia per i browser che per i motori di ricerca.

Tag HTML Meta

I tag meta forniscono metadati sul documento HTML. Vanno dentro la sezione <head>.

Tag	Descrizione	Esempio
`<meta>`	Specifica metadati sul documento HTML	`<meta charset="UTF-8">`

Ecco come potresti usare i tag meta:

<head>
<meta charset="UTF-8">
<meta name="description" content="Deliziosa ricetta per biscotti al cioccolato">
<meta name="keywords" content="biscotti, cottura, dessert">
<meta name="author" content="Gianna Rossi">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ricetta per Biscotti al Cioccolato</title>
</head>

Questi tag meta forniscono informazioni sul character encoding, la descrizione della pagina, le parole chiave, l'autore e le impostazioni del viewport per il design reattivo.

Tag HTML per Programmazione

Questi tag vengono usati per incorporare o fare riferimento a contenuti esterni o script.

Tag	Descrizione	Esempio
`<script>`	Definisce uno script client-side	`<script src="script.js"></script>`
`<noscript>`	Definisce un contenuto alternativo per utenti con script disabilitati	`<noscriptIl tuo browser non supporta JavaScript!</noscript>`

Ecco come potresti usare questi tag:

<head>
<script src="recipe-calculator.js"></script>
</head>
<body>
<!-- Altro contenuto -->
<noscript>
<p>Abilita JavaScript per usare il calcolatore di ingredienti.</p>
</noscript>
</body>

Il tag <script> collega a un file JavaScript esterno, mentre il tag <noscript> fornisce un messaggio per gli utenti che hanno JavaScript disabilitato.

Ecco tutto! Abbiamo coperto una vasta gamma di tag HTML, dalla struttura di base ai più avanzati elementi. Ricorda, il miglior modo per imparare è fare, quindi prova a creare le tue pagine web usando questi tag. Esperimenta, fai errori e impara da essi. È così che tutti i grandi sviluppatori web hanno iniziato!

Buon codice e che le tue pagine web siano sempre bellissime!

Credits: Image by storyset

Tutorial precedente:

HTML - Foglio di trappola

Prossimo tutorial:

HTML - Riferimento agli attributi