Il template HTML


Lezione 5 / 29

Il template HTML

Di Valerio Vacca


HTML html5

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 o esterne 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.

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. 

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.