Quando si crea un documento HTML ci sono degli elementi imprescindibili, che quindi non possono mancare all’appello. In questo approfondimento, non solo vedremo di cosa sto parlando, ma vedremo anche l’anatomia di un tag HTML e gli attributi. Questo approfondimento è quindi essenziale per capire tante cose di HTML, ma in fondo quale approfondimento non è importante quando si cerca di comprendere a pieno una tecnologia?
Gli elementi fondamentali in un documento HTML
Come menzionato all’inizio, ci sono degli elementi che non possono mancare nel documento HTML, nello specifico sono:
<!DOCTYPE html><html><head><body>
Cosa sono esattamente? Vediamoli uno per uno
Dichiarare il doctype
doctype non è un vero e proprio tag, ma è un nodo speciale chiamato, per l’appunto, doctype. La sua funzione è quella di comunicare al browser quale modalità di rendering utilizzare, nello specifico, quella standard.
Se omesso verrà usata un’altra modalità, la quirks mode. Includere doctype all’inizio del documento è fondamentale per evitare questa seconda modalità, ma esattamente qual è la differenza?
In passato le pagine web venivano scritte in due versioni: una per Netscape Navigator 4 e una per Internet Explorer 5.
Quando W3C rilasciò gli standard di HTML fu impossibile per i browser adottarli tralasciando quanto fatto fino ad allora. Il rischio era quello di rendere inaccessibile la stragrande maggioranza dei siti web dell’epoca.
Si giunse quindi alla soluzione di introdurre due modalità per trattare i siti. Uno per quelli nuovi compliant agli standard W3C e l’altra per i siti vecchi (legacy).
Ad oggi ci sono in realtà tre modalità:
- Quirks Mode: viene emulato il comportamento di Netscape Navigator 4 e Internet Explorer 5. Essenziale per supportare i siti sviluppati prima della diffusione degli standard.
- Limited-Quirks Mode: conosciuta anche come almost–standars è una modalità intermedia dove il supporto ai siti legacy è limitato.
- No-Quirks Mode: conosciuta anche come full standards è il comportamento standard previsto dalle specifiche di HTML e CSS.
La modalità viene definita dal browser. Se usiamo <DOCTYPE html> all’inizio del documento HTML comunichiamo la volontà di usare la standard mode (No-Quirks Mode).
Ometterlo attiverà la Quirks Mode o la Limited-Quirks Mode, dipende dalle logiche interne del browser.
Informazioni più esaustive sulle modalità del browser le puoi trovare qui.
Ci sono delle varianti del doctype, ma quello che abbiamo visto qui è quello specificato dallo standard di HTML 5, potrebbe succedere però che ti possa imbattere in un doctype simile a questo: <DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">, si tratta del doctype di HTML 4.01, utilizzato prima dell’arrivo della versione 5 di HTML nel gennaio 2008.
Continua dopo il banner
E così vuoi diventare un programmatore, il mio ebook dove do qualche consiglio ha chi si vuole lanciare nella carriera della programmazione. Diciamo che ho raccolto i consigli che avrei voluto sentirmi dire quando ho iniziato.
Scopri cosa contieneIl tag HTML
L’elemento HTML, chiamato anche radice (root) di un documento HTML è il genitore di <head> e <body>.
Essendo HTML rappresentato come un albero, il concetto di figlio, genitore e antenato è usato per descrivere meglio la relazione tra i vari elementi. Tornerà molto utile.
Oltre a contenere tutto il contenuto del documento, tranne doctype, è importante includerlo per poter dichiarare la lingua del documento stesso. Abbiamo la possibilità di omettere, ma ci precluderebbe questa funzionalità.
Per dichiarare la lingua di un documento possiamo usare l’attributo lang, cos’è un attributo lo capiremo meglio tra pochissimo.
1<html lang=”it-IT”>
2<!-- Contenuto -->
3</html>Il valore dell’attributo lang sono le due o tre lettere del codice ISO della lingua seguite dalla regione. La regione è opzionale, ma consigliata, dato che la stessa lingua può cambiare parecchio tra regioni. Un esempio è l’inglese britannico e l’inglese americano, oppure lo spagnolo iberico (di spagna) e quello latino (del sud america). Questo attributo non è limitato esclusivamente ad <html>, ma può essere usato per contrassegnare una parte della pagina in un’altra lingua diversa da quella principale.
Il tag <head>
Conosciuto anche come metadata header, <head> contiene tutti i metadati del sito o della web application. Anche in questo caso ci sono delle informazioni chiave che non possono mancare. Nello specifico:
- encoding: il tag
<meta>che fornisce indicazioni sul tipo di encoding del documento, quello che il browser prende in considerazione per stabilire in che modo il documento è stato codificato, come visto nell’approfondimento su come il browser interpreta HTML. L’encoding standard dei browser è windows-1252, ma è pratica comune definire l’encoding con la codifica UTF-8. - title: titolo del documento HTML, usato dal browser per nominare la tab e usato dai motori di ricerca per la parte cliccabile del risultato di ricerca.
- viewport: meta tag che ci aiuta ad ottenere la responsiveness dei siti web
Altre informazioni che possiamo dichiarare:
- css: attraverso il tag
<link>possiamo collegare un file di stile esterno, oppure attraverso il tag<style>possiamo scrivere CSS direttamente in HTML. - link: il tag
<link>ha 25 valori differenti dell’attributoreled è quindi impiegato per diversi scopi (es. collegare CSS esterni, dichiarare una pagina canonica, alternativa in caso di siti multilingua o per dichiarare la favicon del sito) - script: il tag
<script>ci permette di includere JavaScript direttamente HTML se il codice JS viene posto tra il tag di apertura e chiusura, ma attraverso l’attributosrcpossiamo collegare un file JavaScript esterno (es.<script src=”file.js”></script>) - base: usato molto di rado,
<base>può essere trovato solo nella head di un documento HTML e permette di definire un link e un target di default. In questo modo tutti i link relativi avranno come base l’URL definito con l’ausilio del tag<base>.
Il tag <body>
Avremo modo di affrontare il contenuto di body durante il resto del corso, ma per ora ti basti sapere che si tratta di quella parte del documento che contiene la parte visibile della pagina web. Ciò che l’utente effettivamente vede.
Anatomia di un tag HTML
Fino ad ora abbiamo parlato di tag, ma esattamente di cosa si tratta?
HTML fornisce varie tipologie di tag, come: metadati, sezioni, testo, form, interattivi, media e scripting.
Gli elementi HTML sono delimitati da dei tag, scritti usando le parentesi angolari < e >.
I tag di chiusura hanno lo stesso nome del tag di apertura, ma preceduto da uno slash.
Differenza tra tag ed elemento in HTML
Spesso tag ed elemento sono termini utilizzati come sinonimi, ma hanno significato differente:
- tag = è quello contrassegnato con le parentesi angolari
<e>. - elemento = è la coppia di tag di apertura e chiusura e il contenuto tra di essi, inclusi anche eventuali ulteriori tag annidati.
Il permissivismo di HTML
Se omettessimo un tag di chiusura, quest’ultimo verrà dedotto. Questo comportamento sappiamo che ha origine nell’ultima fase di parsing (tree construction) quando durante la creazione del DOM il parser cerca di creare un codice il più corretto possibile.
Può capitare comunque che la chiusura non venga aggiunta in automatico, questo si tradurrà nel rendering di una pagina con un aspetto inaspettato.
In generale una best practice è quella che, anche se possibile, è sempre meglio evitare di omettere i tag di chiusura.
Tipi di elementi HTML
Un'ulteriore suddivisione che possiamo fare in HTML sono i differenti tipi di elementi. HTML ne conta due per l’esattezza e sono:
- Elementi non sostituiti
- Elementi sostituiti e vuoti
Elementi non sostituiti
Paragrafi, heading, listati, grassetti, italici, ecc. sono tutti elementi non sostituiti. Ciò significa che l’elemento ha un tag di apertura, uno di chiusura e il contenuto è influenzato dal tipo di tag usato.
Elementi sostituiti o vuoti
Gli elementi sostituiti sono rimpiazzati da degli oggetti, come ad esempio immagini (<img />) e input (<input />).
Elementi sostituiti e vuoti sono due concetti che vengono, anche in questo caso, confusi.
Gli elementi vuoti sono rappresentati da un solo tag (definito auto-chiudente).
Di elementi vuoti ce ne sono diversi, come: <br />, <hr />, <img />, <input />, <link /> e <meta />.
Ma non tutti gli elementi sostituiti sono vuoti, di tag con controparti di chiusura abbiamo: <video>, <picture>, <object> e <iframe>.
Attributi dei tag HTML
Con il tag <html> abbiamo visto l’attributo lang. Scritti in formato nome=”valore”, dove il valore può essere opzionale, forniscono informazioni addizionali sull’elemento.
Non viene visualizzato a video, ma permette di modificare il modo in cui un elemento viene renderizzato.
Gli attributi si definiscono solo nei tag di apertura.
Perché gli elementi appaiono così?
Gli elementi hanno degli stili di default, questi sono imposti dallo user-agent (aka browser). Alcuni aspetti sono imposti dalla specifica di HTML, mentre su altri i browser hanno maggior libertà.
Oggi la differenza è minima, mentre in passato lavorare su browser differenti era molto più difficile.
La semantica
I tag che usiamo hanno un significato e devono quindi essere scelti con attenzione.
Per significato si intende un significato semantico. Definito anche come ruolo (role). Questo concetto verrà affrontato più nel dettaglio mano a mano che affronteremo i vari tag.
Caricamento...
Diventiamo amici di penna? ✒️
Iscriviti alla newsletter per ricevere una mail ogni paio di settimane con le ultime novità, gli ultimi approfondimenti e gli ultimi corsi gratuiti puubblicati. Ogni tanto potrei scrivere qualcosa di commerciale, ma solo se mi autorizzi, altrimenti non ti disturberò oltre.
Se non ti piace la newsletter ti ricordo la community su Discord, dove puoi chiedere aiuto, fare domande e condividere le tue esperienze (ma soprattutto scambiare due meme con me). Ti aspetto!