Documentazione HTML
Guida di riferimento a HTML concisa e ricca di esempi. Leggi il concetto, guarda il codice e poi mettilo in pratica in un percorso Coddy.
Inizia un percorso guidato di HTMLPrimi passi
- Doctype`<!DOCTYPE html>` è la prima riga di ogni documento HTML. Dice al browser di mostrare la pagina in modalità standard invece che in quirks mode. Impara la sintassi, cosa attivano i vecchi doctype e come controllare la modalità.
- Tag HTMLI tag HTML marcano il contenuto così il browser sa cos'è ogni parte: un titolo, un paragrafo, un link, un'immagine. Scopri come funzionano tag ed elementi, quali tag non hanno un tag di chiusura, come funziona l'annidamento e quali tag userai di più.
- Attributi HTMLGli attributi aggiungono informazioni a un elemento HTML: dove porta un link, cosa mostra un'immagine, quale classe CSS si applica. Impara la sintassi, gli attributi globali che ogni elemento accetta, class e id, gli attributi booleani e gli attributi data-*.
- CommentiUn commento HTML è testo tra <!-- e --> che il browser non mostra. Impara la sintassi, i commenti su più righe, come commentare il codice, la scorciatoia dell'editor, perché i commenti non si possono annidare e perché non sono mai privati.
- DivIl tag <div> è un contenitore a blocco generico, senza un significato proprio. Impara a raggruppare contenuti con il div, a dargli stile con una classe, a costruire layout con div e flexbox, e quando è meglio un tag semantico o un pulsante.
- SpanIl tag <span> è un contenitore inline generico: racchiude qualche parola dentro una riga così puoi darle uno stile o usarla in uno script senza spezzare la riga. Scopri come usarlo, in cosa è diverso da div e quando è meglio un tag più specifico.
Testo
- Titoli (h1-h6)L'HTML ha sei livelli di titolo, da <h1> a <h6>, che danno alla pagina la sua struttura. Scopri le dimensioni predefinite, come ordinare i titoli, quanti tag h1 usare, come cambiarne la dimensione con il CSS e come li usano i lettori di schermo.
- Andare a capoUsa <br> per andare a capo dentro un blocco di testo. Scopri quando <br> è la scelta giusta e quando è meglio un paragrafo, come mantenere gli a capo del testo, come far spezzare le parole lunghe con <wbr> e come impedire che una riga vada a capo.
- SpaziI browser riducono a uno qualsiasi sequenza di spazi in HTML. Scopri come aggiungere spazi in più con , cosa fa uno spazio indivisibile, come mantenere spazi e tabulazioni con <pre> e white-space e quando la spaziatura con il CSS è lo strumento migliore.
- Grassetto e corsivoMetti il testo in grassetto in HTML con <strong> o <b>, e in corsivo con <em> o <i>. Scopri quale tag usare e quando, come unire grassetto e corsivo e come ottenerli invece con il CSS.
- Sottolineato e barratoSottolinea il testo in HTML con <u> o con text-decoration di CSS, e barralo con <s> o <del>. Scopri cosa significa ogni tag, come <ins> e <del> segnano le modifiche e perché sottolineare un testo che non è un link confonde chi legge.
- Apice e pediceScrivi testo in apice con <sup> e in pedice con <sub>: esponenti, numeri ordinali, rimandi alle note e formule chimiche. Scopri gli usi comuni, come evitare che allarghino le righe e quando è meglio un carattere Unicode o MathML.
- Linea orizzontaleDisegna una linea orizzontale in HTML con il tag <hr>. Scopri cosa significa, come cambiarne colore, spessore, larghezza e stile con il CSS, come creare un separatore con del testo al centro e come fare una linea verticale.
- Centrare il testoCentra il testo in HTML con la proprietà CSS text-align: center. Scopri dove metterla, perché non funziona su uno span, come centrare il testo in verticale in un riquadro, come allinearlo all'inizio, alla fine o su entrambi i bordi e come far rientrare i paragrafi.
Link e immagini
- Link (a href)Come l'elemento <a> crea i link: l'attributo href, URL assoluti e relativi, saltare a una sezione della pagina con #id, link di download, schede cliccabili e gli errori che li rompono.
- Link in una nuova schedaAggiungi target="_blank" a un link per aprirlo in una nuova scheda. Questa pagina spiega rel="noopener" e noreferrer, come avvisare gli utenti che un link apre una nuova scheda, gli altri valori di target e come farlo da JavaScript.
- Link email (mailto)Crea un link che apre una nuova email con href="mailto:", compila oggetto, corpo, cc e bcc, codificali correttamente e crea link per chiamare con tel: e sms:.
- Pulsante con linkIl modo giusto per creare un pulsante che porta a un'altra pagina è un link con lo stile di un pulsante. Scopri perché un pulsante dentro un link e la navigazione con onclick non funzionano bene, quando è giusto un pulsante di un form e come dare stile e disattivare i pulsanti link.
- ImmaginiCome inserire un'immagine in HTML con il tag <img>: src e alt, impostare le dimensioni con width e height, immagini responsive, ritagliare con object-fit, didascalie con figure, lazy loading e lo spazio sotto le immagini.
Elenchi e tabelle
- ListeCome creare liste in HTML: elenchi puntati con <ul>, elenchi numerati con <ol> (start, reversed, lettere e numeri romani), liste annidate, liste di descrizione e come personalizzare o togliere i punti elenco con il CSS.
- TabelleCome creare una tabella in HTML: righe con <tr>, celle con <td>, celle di intestazione con <th> e scope, didascalie, thead, tbody e tfoot, righe a strisce e tabelle che scorrono sugli schermi piccoli.
- Bordi tabellaCome aggiungere i bordi a una tabella HTML con il CSS: linee singole con border-collapse, border-spacing, solo linee tra le righe, solo bordi interni, angoli arrotondati e perché l'attributo border è obsoleto.
- Colspan e rowspanUnisci le celle di una tabella su più colonne con colspan e su più righe con rowspan. Impara a contare le celle perché la tabella resti regolare, a creare intestazioni raggruppate e a mantenere leggibili per i lettori di schermo le tabelle con celle unite.
Moduli
- FormCome creare un form in HTML: l'elemento form, gli attributi name, action e method (GET o POST), raggruppare con fieldset e legend, la validazione integrata con required e pattern e gestire l'invio in JavaScript.
- Tipi di inputTutti i tipi del tag <input> di HTML in un solo posto: text, email, password, number, range, date e time, color, file, hidden e gli altri, con cosa valida ognuno, la tastiera che apre sui telefoni e gli attributi che condividono.
- Pulsante (button)Come creare un pulsante in HTML con l'elemento <button>: i tre tipi (submit, button, reset), inviare un valore con il form, pulsanti disattivati, icone e uno stile CSS che conserva il contorno di focus.
- CheckboxCome creare una checkbox in HTML con <input type="checkbox">: etichette, l'attributo checked, cosa invia il form quando è selezionata e quando no, gruppi di checkbox, seleziona tutto con lo stato indeterminate e lo stile.
- Radio buttonCome funzionano i radio button in HTML: raggrupparli con l'attributo name, una scelta predefinita con checked, gruppi obbligatori, leggere il valore selezionato in JavaScript, il comportamento da tastiera e lo stile come cerchi personalizzati o schede.
- Menu a tendina (select)Come creare un menu a tendina in HTML con <select> e <option>: valori, un'opzione predefinita o segnaposto, required, gruppi di opzioni, selezione multipla, leggere e impostare il valore in JavaScript e dare uno stile alla freccia.
- TextareaCome creare un campo di testo su più righe con <textarea>: rows e cols, testo predefinito tra i tag, ridimensionamento e crescita automatica, maxlength con un contatore di caratteri, gli a capo nel testo inviato e lo stile.
- Label HTMLCome l'elemento <label> dà un nome a un campo di un modulo: collegarlo con for e id o racchiudendo il campo, l'area cliccabile più grande per checkbox e radio, suggerimenti e messaggi di errore, etichette nascoste e gli errori che rompono il collegamento.
HTML semantico
- HTML semanticoHTML semantico significa scegliere i tag in base a cosa è il contenuto, non a come appare. Scopri i tag semantici di layout (header, nav, main, article, aside, footer), cosa danno a screen reader e motori di ricerca e come controllare la struttura della pagina.
- HeaderL'elemento <header> contiene l'introduzione di una pagina o di una sezione: un logo, un titolo, la navigazione, la firma dell'autore. Impara a creare l'header di un sito, in cosa <header> è diverso da <head> e dai titoli, come usarlo dentro gli articoli e come renderlo fisso.
- FooterL'elemento <footer> chiude una pagina o una sezione: copyright, contatti, link, informazioni sull'autore. Impara a creare il footer di un sito con colonne di link, a tenerlo in fondo a una pagina corta e a usare i footer dentro gli articoli.
- NavL'elemento <nav> indica un blocco di link di navigazione principali. Scopri come costruire una barra di navigazione con <nav> e una lista, come indicare la pagina corrente, come etichettare più nav nella stessa pagina e come creare un menu a comparsa per mobile.
- SectionL'elemento <section> raggruppa contenuti su un unico tema sotto un proprio titolo. Scopri quando usare <section>, quando è meglio <article> o <div>, come si annidano i tre elementi e come una section con un nome diventa un landmark.
Head e meta tag
- Tag titleL'elemento <title> dà il nome alla pagina nella scheda del browser, nei preferiti e nei risultati di ricerca. Scopri dove va, quanto deve essere lungo, in cosa si differenzia da <h1> e dall'attributo title, e come cambiarlo con JavaScript.
- Meta viewportIl meta tag viewport dice ai telefoni di impaginare la pagina alla larghezza dello schermo invece che a una larghezza da desktop. Scopri il tag standard, cosa fa ogni valore, perché il CSS responsive dipende da lui e quali valori evitare.
- RedirectReindirizza una pagina verso un'altra con un tag meta refresh in HTML puro, con JavaScript o sul server. Scopri la sintassi del meta refresh, come aggiornare una pagina in automatico, perché un redirect 301 lato server è la scelta migliore e cosa fanno i motori di ricerca con ciascuno.
- FaviconUna favicon è la piccola icona nella scheda del browser. Impara il tag link che la aggiunge, quali file e dimensioni fornire (ICO, SVG, PNG, apple-touch-icon), come creare una favicon SVG o emoji, come cambiarla con JavaScript e perché continua a comparire quella vecchia.
- Attributo langL'attributo lang dice a browser, screen reader e strumenti di traduzione in che lingua è scritto il contenuto. Scopri dove metterlo, quali codici usare (en, it, pt-BR), come indicare una frase in un'altra lingua e le cose visibili che cambia.
Media ed elementi interattivi
- Tag iframeL'elemento <iframe> mostra un'altra pagina web dentro la tua. Impara gli attributi che servono (src, title, width, height), come incorporare video di YouTube e mappe, come rendere un iframe responsive, come sandbox limita quello che può fare e perché alcuni siti si rifiutano di caricarsi dentro un iframe.
- Tag videoL'elemento <video> riproduce file video con il player integrato del browser. Impara il markup, gli attributi che contano (controls, autoplay, muted, loop, playsinline, poster, preload), i formati alternativi con <source>, i sottotitoli con <track>, le dimensioni responsive e come controllare la riproduzione con JavaScript.
- Tag audioL'elemento <audio> riproduce file audio con il player integrato del browser. Impara il markup, gli attributi (controls, autoplay, loop, muted, preload), quali formati usare, perché l'autoplay con il sonoro viene bloccato e come creare il tuo pulsante play con JavaScript.
- Details e summaryGli elementi <details> e <summary> creano una sezione espandibile senza JavaScript: il summary è sempre visibile e cliccandolo si mostra o si nasconde il resto. Impara il markup, gli attributi open e name, le fisarmoniche, lo stile della freccia e l'evento toggle.
