Com'è strutturata una pagina HTML

Com'è strutturata una pagina HTML

Nel 1990 Tim Berners-Lee e Robert Cailliau gettarono le basi del protocollo HTTP e con esso la prima versione dell’Hypertext Markup Language, meglio conosciuto con l’acronimo HTML.

L’HTML è un linguaggio di “markup”, ovvero di marcatura che permette di indicare come disporre gli elementi grafici e testuali all’interno di una pagina web. A partire dalla sua nascita è diventato in breve tempo uno degli strumenti più semplici, potenti e versatili per la creazione di contenuti.

I tag e la struttura ad albero

La struttura base dell’HTML è formata da una serie di marcatori che prendono il nome di “tag”. Questi definiscono gli elementi strutturali contenuti nel documento e sono racchiusi tra parentesi angolari. La maggior parte dei marcatori ha tag di apertura (ad esempio: <body>) e di chiusura (contrassegnati da uno slash “/”, ovvero </body>). L’insieme dei tag conferisce la tipica struttura “ad albero” al documento HTML, in cui ogni tag è figlio di altri fino ad arrivare al tag genitore, ovvero quello principale. Un elemento si dice genitore (parent) quando contiene altri elementi, mentre si dice figlio (child) quando è contenuto in un altro elemento. Nel seguente esempio vediamo com’è strutturato un documento HTML:

<html>

<head>
<title> XODUS blog/Com’è strutturata una pagina HTML </title>
<meta name=”description” content=”descrizione del sito”>
<link href= “fogliodistileesterno.css” rel=”stylesheet” type=”text/css”>
<script language=”javascript” src=”script.js”></script>
</head>

<body>
<h1> Benvenuti nel blog di XODUS New Media</h1>
<p> In questo blog troverete informazioni di tecnologia, web marketing, web design e molto altro ancora. Veniteci a trovare!</p>
</body>

</html>

Come si può notare i tag principali di un documento HTML sono tre: il tag <html>, <head> e <body>. Vediamoli nel dettaglio.

Il tag html (<html>...</html>)

Il tag <html> rappresenta la radice di un documento HTML, è pertanto il tag cardine ovvero quello che indica al browser come deve interpretare il documento. Questo tag è quindi il contenitore di tutti gli altri tag, come <head> e <body>.

Il tag head (<head>...</head>)

Il tag <head> racchiude le informazioni a livello di documento, non necessariamente visibili agli utenti. Infatti, in questa sezione trovano posto tutti quei tag che impartiscono direttive al browser e ai motori di ricerca. Di seguito i principali elementi contenuti in <head>:

  • Il <title> indica il titolo della pagina, ovvero quello che solitamente viene visualizzato in cima alla finestra browser o all’interno del tab.
  • I <meta> vengono usati per istruire i browser e i motori di ricerca tramite metadati. Nello specifico possiamo indicare le parole chiave, l’autore della pagina web, l’ultima data di modifica dei contenuti e molto altro.
  • <script>, viene utilizzato per definire gli script client-side, come ad esempio JavaScript che viene utilizzato per dare dinamicità ai contenuti. Gli script possono essere incorporati nella pagina oppure collegati tramite file esterni.
  • Nel tag <head> troviamo anche i CSS (fogli di stile a cascata) che definiscono gli stili grafici di ogni elemento HTML presente nella pagina web. I CSS possono essere incorporati direttamente nel codice HTML con il tag <style type="text/css"></style>. La soluzione migliore però è quella di inserire un link ad un foglio di stile esterno utilizzando l’attributo href come nel seguente esempio: <link href="stile.css" rel="stylesheet" type="text/css">.

Il tag body (<body>...</body>)

Racchiude il corpo del documento, ovvero ciò che il browser effettivamente visualizzerà. Al suo interno possono essere inseriti i titoli, i paragrafi, le immagini, i suoni, i filmati, le tabelle, i link e quant’altro.

Siamo giunti al termine di questa prima lezione di HTML, nei prossimi articoli vedremo in dettaglio come lavorare nel tag <head> e <body>. Vi invitiamo a lasciarci i vostri commenti, suggerimenti e quant’altro attraverso il modulo di contatto oppure seguiteci sulla nostra pagina Facebook!

Valentina Lagorio

Possiamo esserti utili?

Ti è piaciuto questo articolo? Vuoi saperne di più? Non esitare a scriverci!

EMail   *
Nominativo/Azienda   *
Telefono
Messaggio   *
Vuoi iscriverti alla newsletter?
Accettazione Privacy Policy   *