La struttura di un documento html
La struttura di un documento HTML è composta da un contenitore <html> e due sezioni ben distinte, ossia la <head> e il <body>.
Immaginiamo la nostra semplice pagina HTML come un essere umano: è composto dalla testa (head) e dal corpo (body).
Più nel dettaglio nella metafora, l’head rappresenta il cervello del nostro essere, le conoscenze interne che daremo al nostro documento HTML; conterrà, quindi, tutte le meta-informazioni che occorrono ad un foglio html per funzionare (ad esempio link a file e fonti esterne, meta tag ecc). Il body, invece, rappresenta tutto quello che vedremo in maniera tangibile nel browser e dunque il contenuto informativo principale.
Abbiamo detto che nell’head, invece, ci saranno le meta-informazioni…Ma che cosa sono?
Facile! Le meta-informazioni sono tutte quelle informazioni aggiuntive che descrivono il contenuto principale. La meta-informazione è un info che sta dettagliando l ‘informazione principale.
Pensiamo ad un’ informazione qualsiasi: “l’ultima versione di html, ovvero html:5. è una vera rivoluzione!”; questa è l’informazione di base. A questa, però, noi possiamo aggiungere ulteriori dettagli: la data, l’autore e via discorrendo. Ecco: quelle info aggiuntive non sono altro che meta-informazioni. È più chiaro così, vero?
Tutti questi elementi, ovviamente, necessitano del relativo tag di chiusura: </html>, </head> e </body>.
Vediamo assieme un esempio di struttura HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
Il DOCTYPE è la prima dichiarazione di una pagina web scritta in linguaggio HTML e deve precedere sempre il tag <html> di apertura del documento.
Il DOCTYPE, a differenza degli altri, non è un tag ma una dichiarazione che indica al browser quale versione di HTML stiamo utilizzando in questo documento.
Nella <head> invece, troviamo dei “tag speciali”, definiti Meta Tag che non necessitano di chiusura.
I Meta Tag, detti anche metadati, sono dei Tag HTML che descrivono il contenuto della pagina ai motori di ricerca e ai visitatori del sito web.
È sempre nella <head> che andranno inserite le altre conoscenze di supporto alla creazione dei nostri siti (come ad esempio il collegamento a framework/librerie esterne o link alla nostra pagina di stile CSS).
Il title tag, infine, è quel tag che rappresenta il titolo della nostra pagina web, lo stesso titolo che apparirà nella pagina dei risultati dei motori di ricerca.
Ed è proprio il browser che userà il title tag, questa meta informazione, per inserire nella barra del browser di chrome, il titolo.
Ma dove creiamo i nostri lavori? Come già detto, ottime spalle per uno sviluppatore web sono gli editor di testo.
Non sentirti confuso su quale utilizzare, noi di Aulab ve ne abbiamo già consigliato uno: Visual Studio Code.
