Tag HTML: la cheat sheet
Ultimo aggiornamento
Struttura del documento
Ogni pagina HTML parte da questo scheletro.
| Elemento | Cosa fa |
|---|---|
<!DOCTYPE html> | Dichiara il documento come HTML5 (prima riga) |
<html lang="en"> | Elemento radice; lang imposta la lingua |
<head> | Metadati: titolo, link, script, non visibili nella pagina |
<meta charset="UTF-8"> | Codifica dei caratteri (da includere sempre) |
<meta name="viewport" content="width=device-width, initial-scale=1"> | Ridimensionamento responsive su mobile |
<title> | Titolo della pagina mostrato nella scheda del browser e nei risultati di ricerca |
<body> | Tutto ciò che è visibile nella pagina va qui |
Testo e titoli
| Elemento | Cosa fa |
|---|---|
<h1> … <h6> | Titoli, <h1> il più importante (uno per pagina) |
<p> | Paragrafo di testo |
<br> | Interruzione di riga (senza tag di chiusura) |
<hr> | Separatore tematico / linea orizzontale |
<strong> | Testo importante (grassetto) |
<em> | Testo enfatizzato (corsivo) |
<span> | Contenitore inline per dare stile a una parte di testo |
<code> | Codice inline |
<pre> | Testo preformattato (mantiene gli spazi) |
<blockquote> | Blocco di testo citato |
Link e immagini
| Elemento | Sintassi |
|---|---|
| Link | <a href="https://coddy.tech">Coddy</a> |
| Aprire in una nuova scheda | <a href="..." target="_blank" rel="noopener"> |
| Ancora (salto a un id) | <a href="#section">Jump</a> |
| Immagine | <img src="cat.png" alt="A cat" width="200"> |
| Immagine responsive | <img src="..." srcset="..." sizes="..."> |
| Figura con didascalia | <figure><img ...><figcaption>…</figcaption></figure> |
Liste
| Elemento | Cosa fa |
|---|---|
<ul> | Lista non ordinata (puntata) |
<ol> | Lista ordinata (numerata) |
<li> | Elemento della lista (dentro <ul> o <ol>) |
<dl> | Lista di descrizioni |
<dt> / <dd> | Termine / descrizione |
Tabelle
| Elemento | Cosa fa |
|---|---|
<table> | Contenitore della tabella |
<thead> / <tbody> / <tfoot> | Gruppi di intestazione, corpo e piè di tabella |
<tr> | Riga della tabella |
<th> | Cella di intestazione (grassetto, centrata) |
<td> | Cella di dati |
colspan / rowspan | Unire celle su più colonne / righe |
Form e input
I mattoni di qualsiasi form che raccoglie dati.
| Elemento | Sintassi / scopo |
|---|---|
| Form | <form action="/submit" method="post"> |
| Campo di testo | <input type="text" name="q" placeholder="Search"> |
| Email / password | <input type="email">, <input type="password"> |
| Checkbox / radio | <input type="checkbox">, <input type="radio"> |
| Numero / data | <input type="number">, <input type="date"> |
| Etichetta | <label for="q">Search</label> |
| Su più righe | <textarea rows="4"></textarea> |
| Menu a tendina | <select><option>One</option></select> |
| Pulsante | <button type="submit">Send</button> |
| Campo obbligatorio | <input required> |
Tag semantici e di layout
Usali al posto dei generici <div>, così browser, screen reader e motori di ricerca capiscono la tua pagina.
| Elemento | Cosa rappresenta |
|---|---|
<header> | Parte alta di una pagina o sezione (logo, navigazione) |
<nav> | Link di navigazione |
<main> | Il contenuto principale (uno per pagina) |
<section> | Un raggruppamento tematico di contenuti |
<article> | Contenuto autonomo (post, card) |
<aside> | Barra laterale / contenuto correlato |
<footer> | Parte bassa di una pagina o sezione |
<div> | Contenitore di blocco generico (senza significato) |
Attributi globali comuni
| Attributo | Cosa fa |
|---|---|
id | Identificatore univoco di un elemento |
class | Uno o più nomi di classe (per CSS / JS) |
style | CSS inline (da usare con moderazione) |
title | Testo del tooltip al passaggio del mouse |
data-* | Attributo dati personalizzato, ad esempio data-id="42" |
hidden | Nasconde l'elemento |
Tutti i tag e gli attributi HTML che usi, raggruppati per funzione. Questa cheat sheet di HTML copre lo scheletro della pagina, testo e link, immagini e media, liste, tabelle, form e i tag semantici che danno significato al tuo markup.
È tutto HTML5 standard e funziona in ogni browser moderno. Copia un tag oppure apri il playground HTML per modificarlo con un'anteprima dal vivo, senza configurare nulla. Stai costruendo la tua prima pagina? Il corso interattivo gratuito di HTML di Coddy parte dalle basi.
Domande frequenti sulla cheat sheet di HTML
Questa cheat sheet di HTML è gratuita?
Sì. Questa cheat sheet di HTML è gratuita e non richiede registrazione. Salvala nei preferiti e torna quando devi controllare un tag o un attributo.
Qual è la differenza tra <section> e <div>?
<section> è un tag semantico: dice a browser e screen reader che il suo contenuto è un gruppo tematico con un significato, e di solito ha un titolo. <div> non ha alcun significato ed è solo un contenitore generico per lo stile o gli script. Scegli un tag semantico (<section>, <article>, <nav>) quando ce n'è uno adatto, e ripiega su <div> solo quando non c'è.Tutti i tag HTML hanno bisogno del tag di chiusura?
Quasi tutti sì (
<p>...</p>), ma alcuni elementi "void" no, perché non possono contenere nulla: <img>, <br>, <hr>, <input>, <meta> e <link>. In HTML5 puoi scriverli con o senza la barra finale.Posso esercitarmi con l'HTML online?
Sì. Apri il playground HTML per scrivere HTML nel browser con un'anteprima dal vivo, senza installare nulla. Quando vuoi un percorso strutturato, il corso interattivo gratuito di HTML di Coddy ti insegna tag, form e layout passo dopo passo.
Questa cheat sheet va bene per chi inizia?
Sì. Parte dallo scheletro della pagina e dai tag di tutti i giorni che userai per primi, poi passa a form e markup semantico, così puoi usare le prime sezioni fin dal primo giorno.
Risorse correlate
Altre cheat sheet
