L'HTML, o HyperText Markup Language, è il linguaggio di markup standard per descrivere la struttura dei documenti visualizzati sul web. L'HTML consiste in una serie di elementi e attributi che vengono utilizzati per eseguire il markup di tutti i componenti di un documento al fine di strutturarlo in modo significativo.
I documenti HTML sono fondamentalmente un albero di nodi, compresi gli elementi HTML e i nodi di testo. Gli elementi HTML forniscono la semantica e la formattazione dei documenti, tra cui la creazione di paragrafi, elenchi e tabelle e l'incorporamento di immagini e controlli dei moduli. Per ogni elemento possono essere specificati più attributi. Molti elementi possono avere contenuti, inclusi altri elementi e testo. Gli altri elementi sono vuoti e il tag e gli attributi ne definiscono la funzione.
Esistono diverse categorie di elementi, tra cui metadati, sezioni, testo, semantica in linea, modulo, interattivo, contenuti multimediali, componenti e scripting. Tratteremo la maggior parte di questi argomenti nel corso della serie. Ma prima, cos'è un elemento?
Elementi
L'HTML consiste in una serie di elementi, che puoi utilizzare per racchiudere o aggregare diverse parti dei contenuti in modo che appaiano o agiscano in un determinato modo. Gli elementi HTML sono definiti da tag, scritti utilizzando parentesi angolari (< e >).
Il titolo della pagina è un'intestazione di livello 1 per la quale utilizziamo il tag <h1>. Il titolo effettivo, "Machine Learning Workshop", è il contenuto del nostro elemento. I contenuti vanno tra il tag di apertura e quello di chiusura. L'intero elemento (il tag di apertura, il tag di chiusura e il contenuto) è l'elemento.
Il tag di chiusura è lo stesso del tag di apertura, preceduto da una barra.
Elementi e tag non sono la stessa cosa, anche se molte persone utilizzano questi termini in modo intercambiabile. Il nome del tag è il contenuto tra parentesi. Il tag include le parentesi. In questo caso, <h1>. Un "elemento" è i tag di apertura e chiusura e tutti i contenuti tra questi tag, inclusi gli elementi nidificati.
<p>This paragraph has some
<strong><em>strongly emphasized</em></strong>
content</p>
Questo elemento paragrafo ha altri elementi nidificati al suo interno. Quando nidifichi gli elementi, è importante che questi siano correttamente nidificati. I tag HTML devono essere chiusi nell'ordine inverso del quale sono stati aperti. Nell'esempio precedente, osserva che <em> viene aperto e chiuso all'interno dei tag <strong> di apertura e chiusura e che <strong> è sia aperto sia chiuso all'interno dei tag <p>.
I browser non visualizzano i tag. I tag vengono utilizzati per interpretare i contenuti della pagina.
L'HTML è molto tollerante. Ad esempio, se omettiamo i tag di chiusura </li>, i tag di chiusura sono impliciti.
<ul>
<li>Blendan Smooth
<li>Hoover Sukhdeep
<li>Toasty McToastface
</ul>
Anche se è valido non chiudere un <li>, non è buona norma. Il campo </ul> di chiusura è obbligatorio. Se il tag di chiusura dell'elenco non ordinato viene omesso, il browser proverà a determinare dove terminano le voci dell'elenco e degli elementi dell'elenco, ma potresti non essere d'accordo con la decisione.
La specifica di ogni elemento indica se il tag di chiusura è obbligatorio o meno. "Nessuno dei due tag è omesso" nella specifica significa che sono necessari sia un tag di apertura sia un tag di chiusura. La specifica fornisce un elenco di tutti i tag di chiusura obbligatori.
Se <em> o <strong> nell'esempio precedente non sono stati chiusi, il browser potrebbe chiudere o meno l'elemento. Se non chiudi un <em>, i contenuti potrebbero essere visualizzati in modo diverso da quanto previsto. Se </ul> viene omesso e il tag successivo è un tag di chiusura per il contenitore principale dell'elenco, hai fortuna. Se, invece, si tratta di un tag di apertura <h1>, il browser presumerà che l'intestazione faccia parte dell'elenco, compresa l'ereditarietà degli stili. Alcuni tag di chiusura omessi causano problemi di maggiore entità: la mancata chiusura di alcuni tag, ad esempio <script>, <style>, <template>, <textarea> e <title>, provoca l'interruzione dei contenuti successivi, come mostrato nell'esempio seguente.
Il fatto che alcuni contenuti siano involontariamente in corsivo o con un titolo rientrato non distruggerà la tua attività. Se la maggior parte dei tuoi contenuti non ha lo stile in un'area di testo 200 x 300 perché hai dimenticato di aggiungere un elemento </textarea> o non viene mostrata affatto perché hai dimenticato di chiudere una </style>, il sito è inutilizzabile.
In alcuni casi, i browser includono elementi anche se i tag non sono presenti nel markup. Poiché gli elementi possono essere impliciti, un elemento può esistere anche quando i tag non sono presenti. Il browser aggiungerà <body></body> intorno ai tuoi contenuti e <tbody></tbody> intorno alle righe della tabella, anche se non lo aggiungi. Detto questo, sebbene sia valido omettere i tag, non farlo. Inoltre, come già accennato, assicurati che siano nidificati correttamente. Il vostro futuro come gestore del markup e chiunque lavori sul vostro codebase ti ringrazierà.
Esistono due tipi di elementi: sostituiti e non sostituiti.
Elementi non sostituiti
Il paragrafo, l'intestazione e gli elenchi sottoposti a markup nella sezione precedente non sono stati sostituiti Gli elementi non sostituiti sono circondati da tag di apertura e chiusura (a volte facoltativi) e possono includere testo e altri tag come elementi secondari. Questi tag di inclusione possono trasformare una frase o un'immagine in un link ipertestuale, trasformare una frase in un'intestazione, enfatizzare le parole e così via.
Elementi sostituiti ed nulli
Gli elementi sostituiti vengono sostituiti da oggetti, ad esempio un widget di Graphic User Interface (UI) nel caso della maggior parte dei controlli del modulo o un file immagine raster o scalabile nel caso della maggior parte delle immagini. Essendo sostituiti da oggetti, ciascuno ha un aspetto predefinito. A seconda del tipo di oggetto e del browser, gli stili applicabili sono limitati. Ad esempio, la maggior parte dei browser consente uno stile limitato dei widget UI e degli pseudo-elementi correlati. Nel caso di immagini raster, altezza, larghezza, ritaglio e filtri vengono eseguiti facilmente con CSS, ma non con molto altro. D'altra parte, le grafiche vettoriali scalabili, che utilizzano un linguaggio di markup basato su XML simile a HTML, sono completamente scalabili (a meno che non contengano immagini raster). Inoltre, sono completamente personalizzabili. Tieni presente che la possibilità di assegnare uno stile a un SVG incorporato dal CSS collegato al file HTML che lo incorpora dipende da come è configurato il file SVG.
In questo esempio, i due elementi sostituiti <img> e <input> vengono sostituiti da contenuti non testuali: rispettivamente, un'immagine e un oggetto Graphic User Interface.
<input type="range">
<img src="switch.svg" alt="light switch">
Output del codice HTML precedente:
Gli elementi sostituiti e quelli vuoti vengono spesso confusi. Gli elementi Void sono tutti elementi che si chiudono automaticamente e sono rappresentati da un unico tag. Ciò significa che non esiste un tag di chiusura per un elemento void. Facoltativamente, puoi includere una barra alla fine del tag, che viene trovata da molte persone per semplificare la lettura del markup. Proseguendo con l'esempio, chiudiamo autonomamente il tag con una barra:
<input type="range"/>
<img src="switch.svg" alt="light switch"/>
La barra alla fine è vecchia scuola: è un modo per indicare che l'elemento si chiude automaticamente e che non esiste un tag di fine o chiusura corrispondente.
Gli elementi Void non possono contenere contenuti di testo o elementi nidificati. Gli elementi non validi includono, tra gli altri, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <source>, <track> e <wbr>.
La maggior parte degli elementi sostituiti sono elementi vuoti, ma non tutti. Gli elementi video, picture, object e iframe vengono sostituiti, ma non sono nulli. Possono contenere tutti altri elementi o testo, quindi hanno tutti un tag di chiusura.
La maggior parte degli elementi void viene sostituita, ma non tutti, come abbiamo visto con base, link, param e meta. Perché avere un elemento void, che non può avere contenuti, che non viene sostituito e quindi non mostra nulla sullo schermo? Per fornire informazioni sui contenuti. Le informazioni sono fornite dagli attributi degli elementi.
Attributi
Probabilmente avrai notato che gli esempi <img> e <input> contenevano più elementi del tag di apertura. Questi bit aggiuntivi delle coppie nome/valore separate da spazi (anche se a volte l'inclusione di un valore è facoltativa) sono denominati attributi. Gli attributi sono ciò che rende l'HTML così incredibilmente potente. In questa serie parleremo di centinaia di attributi e valori degli attributi, ma qui ne parleremo in generale e come includerli.
Gli attributi forniscono informazioni sull'elemento. L'attributo, come il resto del tag di apertura, non viene visualizzato nei contenuti, ma aiuta a definire l'aspetto del contenuto per gli utenti vedenti e non vedenti (tecnologie per la disabilità e motori di ricerca).
Gli attributi vengono visualizzati solo nel tag di apertura. Il tag di apertura inizia sempre con il tipo di elemento. Il tipo può essere seguito da zero o più attributi, separati da uno o più spazi. La maggior parte dei nomi degli attributi è seguita da un segno uguale che emette il valore dell'attributo, racchiuso tra virgolette di apertura e chiusura.
In questo esempio abbiamo un link di ancoraggio con due attributi. Questi due attributi hanno convertito il contenuto "Registration" in un link di ancoraggio interno che scorre fino all'attributo id="register" nella scheda del browser corrente quando viene fatto clic sul link, toccato o attivato con la tastiera o un altro dispositivo.
Gli attributi definiscono il comportamento, i collegamenti e la funzionalità degli elementi. Tratteremo altri attributi nella sezione Attributi di questa serie. Per ora, tieni presente che alcuni attributi sono globali, cioè possono essere visualizzati all'interno del tag di apertura di qualsiasi elemento. Alcune si applicano solo a più elementi ma non a tutti, mentre altre sono specifiche per gli elementi e pertinenti solo a un singolo elemento.
La maggior parte degli attributi sono coppie nome/valore. Gli attributi booleani, il cui valore è true, false o uguali al nome dell'attributo, possono essere inclusi solo come attributo: il valore non è necessario.
<img src="switch.svg" alt="light switch" ismap />
Questa immagine ha tre attributi: src, alt e ismap. L'attributo src viene utilizzato per specificare la posizione dell'asset immagine SVG. L'attributo alt fornisce un testo alternativo che descrive i contenuti dell'immagine. L'attributo ismap è booleano e non richiede un valore. Questo serve solo a spiegare cosa sono gli attributi. Tratteremo questi attributi in modo più dettagliato nella sezione immagini.
Anche se le virgolette non sono sempre obbligatorie, a volte lo sono. Se il valore include uno spazio o caratteri speciali, è necessario inserire le virgolette. Per questo motivo, è sempre consigliata la citazione. Uno o più spazi tra gli attributi se il valore dell'attributo è tra virgolette non sono in realtà obbligatori, ma per sicurezza e per leggibilità, le virgolette e gli spazi sono consigliati e apprezzati.
Il codice HTML non è sensibile alle maiuscole, ma alcuni valori degli attributi lo sono. I valori definiti nella specifica non fanno distinzione tra maiuscole e minuscole. Le stringhe che non sono definite come parole chiave sono generalmente sensibili alle maiuscole, inclusi i valori id e class.
Tieni presente che se il valore di un attributo è sensibile alle maiuscole nel codice HTML, lo sarà quando viene utilizzato come parte di un selettore di attributi in CSS e in JavaScript.
Per semplificare la lettura del markup, è consigliabile, ma non obbligatorio, eseguire il markup del codice HTML utilizzando lettere minuscole per tutti i nomi degli elementi e degli attributi all'interno dei tag e citare tutti i valori degli attributi. Se senti mai il termine "markup in stile XHTML", questo e gli elementi vuoti che si chiudono autonomamente con una barra alla fine sono questi.
Aspetto degli elementi
L'aspetto predefinito degli elementi semantici viene impostato dai fogli di stile dello user agent. A questo scopo la maggior parte dei browser utilizza fogli di stile reali, mentre altri li simulano nel codice. Il risultato finale è lo stesso. Sebbene alcuni vincoli sui fogli di stile dello user agent siano impostati dalla specifica HTML, i browser hanno una grande latitudine, il che significa che esistono alcune differenze tra i browser.
L'elemento scelto, e di conseguenza i tag che utilizzi, devono essere appropriati per i contenuti visualizzati, in quanto i tag hanno un significato semantico. La semantica, o role, di un elemento è importante per le tecnologie per la disabilità e, in alcuni casi, per i motori di ricerca. Il codice HTML deve essere utilizzato per strutturare i contenuti, non per definirne l'aspetto. L'aspetto è il regno dei CSS. Sebbene molti elementi che alterano l'aspetto dei contenuti, come <h1>, <strong> e <em>, abbiano un significato semantico, l'aspetto in genere può essere modificato con gli stili dell'autore.
<h1>This header has both <strong>strong</strong> and <em>emphasized</em> content</h1>
Elemento, attributi e JavaScript
Il DOM (Document Object Model) è la rappresentazione dei dati della struttura e dei contenuti del documento HTML. Man mano che il browser analizza l'HTML, crea un oggetto JavaScript per ogni elemento e sezione di testo incontrati. Questi oggetti sono denominati nodi, rispettivamente: nodi elemento e nodi di testo.
È disponibile un'interfaccia per definire la funzionalità di ogni elemento HTML. L'API HTML DOM fornisce l'accesso e il controllo di ogni elemento HTML tramite il DOM, fornendo interfacce per l'elemento HTML e per tutte le classi HTML che ne ereditano. L'interfaccia HTMLElement rappresenta l'elemento HTML e tutti i relativi nodi discendenti. Tutti gli altri elementi la implementano tramite un'interfaccia che ne eredita. Ogni interfaccia ereditaria ha un costruttore, metodi e proprietà. Tramite le proprietà HTMLElement ereditate, puoi accedere a ogni attributo globale, nonché agli eventi input, pointer, transition e animation. Tramite il sottotipo di un singolo elemento, ad esempio HTMLAnchorElement e HTMLImageElement, puoi accedere a metodi e valori degli attributi specifici dell'elemento.
Verifica le tue conoscenze
Verifica la tua conoscenza del codice HTML
Gli elementi HTML vengono utilizzati per definire gli stili.
Seleziona gli elementi sostituiti.
<img><p><ul><input>Seleziona tutte le affermazioni vere.