Il sito per imparare gratuitamente a fare pagine Web

La Struttura HTML5

Questa guida è stampabile in modo agevole dalla sua apposita voce: "Download PDF", presente nel menù laterale:
 


Andrea Bianchi © www.web-link.it   Guida HTML 5 - Ver. 1.1.1 

La struttura di un documento HTML5 è composta da un contenitore <html> e due sezioni ben distinte: una parte iniziale denominata testa <head> ed una parte centrale denominata corpo <body>

Nella testa (head) vanno inseriti soltanto quei comandi che forniscono informazioni ai motori di ricerca, quali: meta comandi, titolo, ecc. oltre a tutto il codice che deve essere letto con una certa priorità: script, dichiarazioni di style, ecc. ecc.
Nel corpo (body) va inserito tutto il resto. Tutti questi elementi necessitano del relativo elemento di chiusura: </html>, </head> e </body>

Riassumendo: una struttura tipo in HTML5 potrebbe essere questa:

<!DOCTYPE html>
<html lang="it">
  <head>
<meta charset="xxxxx">
codice per il server: meta comandi, script, fogli di style, ecc.
  </head>
  <body>
Codice per visualizzare: testo, immagini, moduli, ecc.
  </body>
</html>

HTML5 introduce nuovi tag, ne abolisce altri che considera obsoleti, semplifica alcune regole ma ne complica altre perchè pretende il rispetto della semantica di quel determinato tag, in parole povere un tag creato per una determinata funzione farà soltanto quella senza alcun compromesso, gli attributi, e qualsiasi altra cosa relativa alla sezione di quel tag, vengono demandati ai fogli di style che con HTML5 non sono più opzionali ma diventano parte integrante del codice.

Questa guida non è adatta ad un principiante... o forse si adatta meglio solo al principiante?
Questo è un dubbio che mi viene mentre valuto le novità, mi chiedo infatti se per me sarebbe più semplice non fare paragoni con quanto appreso da html precedenti o se invece certi meccanismi sono più chiari proprio per quanto appreso fino ad oggi? Ognuno di voi farà le proprie valutazioni.

Bene, con questi dubbi e queste premesse, vediamo subito nel listato sopra la prima differenza rispetto ad HTML e/o XHTML precedenti: la riga di prologo, il doctype, viene semplificato e ridotto drasticamente, da un ipotetico:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">

Si passa ad un semplicissimo:

<!DOCTYPE html>
 

Il tag html richiede l'attributo lang che forse in pochi usavano con html precedenti, serve a specificare in quale lingua è scritta la pagina web, nel nostro esempio it sta per Italiano.

HTML5 introduce nuovi tags, vediamone alcuni che servono per definire la struttura, e sono: article, aside, footer, header, hgroup, mark, nav, section, time.

Questi nuovi tags, a differenza di: html, body ed head, possono essere ripetuti più volte nella stessa pagina dal momento che non definiscono la struttura vera e propria ma servono a delimitare delle zone all'interno della pagina stessa, immaginiamo ad esempio la pagina web di un blog, per ogni nuova notizia ci sarà un header ed un footer (testa e piede) ma saranno riferiti a quella notizia e non all'intera pagina, quindi:

<!DOCTYPE html>
<html lang="it">
  <head>
<meta charset="xxxxx">
codice per il server: meta comandi, script, fogli di style, ecc.
  </head>
  <body>

<header> Intestazione sezione del documento </header>
<footer>Terminazione sezione del documento </footer>



<header> Intestazione sezione del documento </header>
<footer>Terminazione sezione del documento </footer>


  </body>
</html>

Più avanti saranno brevemente spiegati tutti quanti, per il momento è sufficiente capire il meccanismo e la struttura. I più attenti si saranno accorti di un meta tag relativo al charset, per altro molto semplificato rispetto a quello usato con html precedenti. Questo meta è importantissimo perchè definisce la codifica dei caratteri usati, per esempio: utf-8 dove non serve più inserire http-equiv e content, anche se continua ad esserci compatibilità ed html5 riconoscerebbe le forme estese dei metatags usati in versioni precedenti.

<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta charset="utf-8">

Questo meta comando va inserito come primo tag subito dopo head, per un discorso legato ad un aspetto tecnico di certi browser che hanno una capienza molto ristretta (512 byte) per bufferizzare le istruzioni, ne consegue che potrebbe non essere letto o non essere gestito correttamente se inserito in altro punto del listato. Il charset specifica la codifica dei caratteri permettendo così di usare caratteri speciali come le vocali accentate, simboli e lettere usate per altre lingue senza creare alterazioni.

Lo stesso paragrafo sopra senza la codifica che riconosce le vocali accentate della nostra lingua italiana:

charset

All'interno di <head> metteremo il titolo, il richiamo ad uno script: modernizr.js che è la libreria che serve per testare se il browser che visita le nostre pagine è in grado di supportare certe funzioni di html5, il richiamo al foglio di style esterno: foglio.css ed una dichiarazione di style interna, il tutto anche per mostrare come sono stati semplificati i tags per richiamare queste parti di codice rispetto ad html precedenti.

<!DOCTYPE html>
<html lang="it">
  <head>
<meta charset="utf-8">
<title>La mia prima pagina HTML5</title>
<script src="modernizr.js"></script>
<link rel="stylesheet" href="foglio.css">
<style>
header, footer, article {display: block;}
</style>
  </head>
  <body>

<header><h1>Intestazione sezione del documento</h1></header>
<article><p>Testo dell'articolo</p></article>
<footer>Terminazione sezione del documento </footer>



<header><h1>Intestazione sezione del documento</h1></header>
<article><p>Testo dell'articolo</p></article>
<footer>Terminazione sezione del documento </footer>


  </body>
</html>
/* Foglio di style esterno */

p {font-family: Verdana, sans-serif;}
h1 {font-size: 12px; font-weight: bold;}

Piccola nota: chi avesse fatto uso di xhtml dove alcuni tags, come quelli dei meta o del link rel, venivano chiusi sulla stessa riga dalla barra finale: /> in HTML5 restano validi ma non più obbligatori, in pratica è possibile farne uso o meno senza che vengano considerati errore, che ci siano o no va bene ugualmente, stessa cosa dicasi per <br> o <br />

Esercitatevi, se avete compreso questo meccanismo, allo stesso modo potete inserire qualsiasi altro tag di HTML, siete pronti per passare alle lezioni successive.



Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.

Forum di web-link


Andrea Bianchi