{"id":164026,"date":"2024-05-19T09:00:00","date_gmt":"2024-05-19T07:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/struttura-pagina-html-doctype-head-body\/"},"modified":"2024-05-19T09:00:00","modified_gmt":"2024-05-19T07:00:00","slug":"struttura-pagina-html-doctype-head-body","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/struttura-pagina-html-doctype-head-body\/","title":{"rendered":"Struttura di una Pagina HTML: DOCTYPE, Head e Body Spiegati"},"content":{"rendered":"

Ogni pagina web che visiti, indipendentemente dalla sua complessit\u00e0, si basa su una struttura fondamentale<\/strong> composta da pochi elementi essenziali. Comprendere questa struttura \u00e8 il secondo passo fondamentale dopo aver capito cos’\u00e8 l’HTML<\/a>. In questo articolo analizzeremo nel dettaglio ogni componente di una pagina HTML valida: dalla dichiarazione DOCTYPE<\/strong> alle sezioni head<\/strong> e body<\/strong>.<\/p>\n

La Dichiarazione DOCTYPE: Il Punto di Partenza<\/h2>\n

La prima riga di ogni documento HTML moderno deve essere la dichiarazione DOCTYPE<\/strong>. Si scrive come <!DOCTYPE html><\/code> e ha una funzione specifica: comunica al browser quale versione di HTML si sta utilizzando e come deve interpretare il documento. Senza questa dichiarazione, il browser potrebbe entrare in modalit\u00e0 quirks mode<\/strong>, un comportamento di compatibilit\u00e0 retrograda che pu\u00f2 causare problemi nella visualizzazione della pagina.<\/p>\n

La dichiarazione <!DOCTYPE html><\/code> \u00e8 quella utilizzata per HTML5<\/strong> ed \u00e8 notevolmente pi\u00f9 semplice rispetto alle versioni precedenti. In HTML 4.01, ad esempio, era necessario specificare anche il DTD (Document Type Definition) con un URL lungo e complesso. La semplicit\u00e0 della dichiarazione attuale \u00e8 uno dei tanti miglioramenti introdotti con HTML5.<\/p>\n

\u00c8 importante notare che il DOCTYPE non \u00e8 un tag HTML<\/strong> vero e proprio: \u00e8 un’istruzione per il browser. Non ha un tag di chiusura, non pu\u00f2 contenere attributi aggiuntivi e non fa parte del DOM (Document Object Model) della pagina. Deve sempre essere posizionata come primissima riga del documento, prima di qualsiasi altro elemento, compreso il tag <html><\/code>.<\/p>\n

L’Elemento Root: Il Tag <html><\/h2>\n

Subito dopo il DOCTYPE, troviamo il tag <html><\/code>, noto come elemento root<\/strong> (radice) del documento. Questo tag racchiude l’intero contenuto della pagina web e rappresenta il nodo principale dell’albero DOM. Tutto ci\u00f2 che compone la pagina \u2014 metadati, contenuti, script e stili \u2014 deve essere contenuto all’interno dell’elemento <html><\/code>.<\/p>\n

L’attributo pi\u00f9 importante dell’elemento root \u00e8 lang<\/code>, che specifica la lingua principale<\/strong> del documento. Ad esempio, <html lang=\"it\"><\/code> indica che il contenuto \u00e8 in italiano. Questo attributo \u00e8 fondamentale per l’accessibilit\u00e0<\/strong> (gli screen reader lo utilizzano per selezionare la voce corretta), per il SEO<\/strong> (i motori di ricerca lo usano per la classificazione linguistica) e per le funzionalit\u00e0 del browser come la traduzione automatica.<\/p>\n

L’elemento <html><\/code> contiene esattamente due elementi figlio diretti: <head><\/code> e <body><\/code>. Questa struttura \u00e8 obbligatoria e invariabile in ogni documento HTML valido. Nessun altro elemento dovrebbe essere inserito come figlio diretto del tag <html><\/code> al di fuori di questi due.<\/p>\n

La Sezione Head: Il Cervello della Pagina<\/h2>\n

La sezione <head><\/code> contiene tutti i metadati<\/strong> del documento, ovvero informazioni che non vengono visualizzate direttamente nella pagina ma che sono essenziali per il suo corretto funzionamento. Per un approfondimento completo su questa sezione, puoi consultare il nostro articolo dedicato a cos’\u00e8 l’HTML Head<\/a>.<\/p>\n

Gli elementi principali che si inseriscono nella sezione head includono:<\/p>\n