iSpazio DevResources 04: La struttura base di una pagina HTML 5

In qualità di Affiliato Amazon, iSpazio riceve una commissione dagli acquisti idonei senza alcun costo per voi. (info).

Bentornati ad un nuovo appuntamento di approfondimento per lo sviluppo web di iSpazio DevResources.

Advertising

Continuiamo il percorso intrapreso negli scorsi incontri in cui abbiamo affrontato nell’ordine una panoramica di HTML 5, la compatibilità con i browser del futuro standard ed una panoramica generale sul linguaggio HTML.

Da questo incontro inizieremo realmente ad addentrarci nelle varie parti del linguaggio di markup per eccellenza ed iniziamo subito occupandoci della struttura base di una pagina web scritta con HTML 5 e quindi dell’analisi dei Tag più importanti per la creazione di una struttura basilare ma solida!

I tag dei quali ci occuperemo in questa occasione sono quelli che determinano la “struttura portante” della pagina (tags che in realtà esistono già nelle versioni precedenti del linguaggio), descrivendo però sia le caratteristiche generali (per i meno esperti) sia le novità introdotte con HTML 5 (per gli interessati solo alle novità).

Questo è l’esempio della struttura base di una pagina HTML 5 che andremo a “scomporre” in questo e nel prossimo appuntamento:


<!DOCTYPE html>
<html>
<!-- Header della Pagina Web da non confondere con il nuovo tag header -->
<head>
<meta charset="utf-8" />
<title>Layout Generico HTML5</title>
<script>

document.write("Ciao Mondo!")

</script>
<link rel="stylesheet" href="style.css" />

<link rel="alternate" type="application/atom+xml" title="Feed per un mio sito" href="/feed/" />
</head>
<body>
<!-- Questo è il nuovo tag che identifica l'header della struttura della pagina -->
<header>
<!-- Tag per raggruppare i tag h1, h2, etc... -->
<hgroup>
<h1>Layout HTML5</h1>
<h2>Sottotitolo</h2>
</hgroup>
</header>
<!-- Questo è il nuovo tag che ospita la navigazione della pagina -->
<nav>
<ul>
<li>Home</li>
<li>Chi Sono</li>
<li>Contatti</li>
</ul>
</nav>
<!-- Questo è il nuovo tag che identifica un'intera sezione della pagina -->
<section>
<h1>My Article</h1>
<!-- Questo è il nuovo tag che identifica un'entità come un post di un blog della pagina -->
<article>
<p>Contentuto generico</p>
</article>
</section>
<aside>
<h2>Links</h2>
<ul>
<li><a href="../">Link 1</a></li>
<li><a href="../">Link 2</a></li>
<li><a href="../">Link 3</a></li>
</ul>
</aside>
<!-- Questo è il nuovo tag che identifica il footer della struttura della pagina -->
<footer>
<p>Contenuto del footer</p>
</footer>
</body>
</html>

Iniziamo a scomporre il nostro file:

<!DOCTYPE>

La dichiarazione DOCTYPE non è un tag HTML, bensì è un’istruzione che indica al browser quale è il linguaggio di markup con il quale è stata realizzata la pagina, e quindi consentirà al browser di comportarsi di conseguenza.

Nel passato erano disponibili svariati tipi di DocTypes (3 in HMTL 4.01) ma fortunatamente per tutti con l’avvento di HTML 5 la situazione è stata snellita riducendo il tutto ad un unica dichiarazione doctype e cioè semplicemente:

<!DOCTYPE html>

E’ importante specificare che questa istruzione debba essere sempre presente e deve essere sempre la prima indicata sul documento web.

Novità di HTML 5:

Semplificazione dell’istruzione a: <!DOCTYPE html>

<HTML>
La volta scorsa abbiamo spiegato che un documento HTML è costituito da una struttura ad albero. Bene, il tag <HTML> è la radice di questo albero!

Tutto il contenuto della pagina web viene quindi nidificato in questo tag, che con HTML 5 viene semplificato notevolmente dato che l’unico attributo utile (facoltativo) è semplicemente lang che consente di specificare la lingua del documento.
<html lang=”it”>…
</html>

Sono disponibili inoltre altri attributi (tra cui quelli globali di cui lang fa parte), ed uno di questi molto importante è manifest che verrà approfondito quando tratteremo le “offline web application”.

N.B. Per chi conosce lo standard attuale HTML o XHTML si renderà conto che non sono più necessari gli attributi di riferimento per XHTML.

Novità di HTML 5:

Semplificazione dell’istruzione a : <html>;
Rimozione degli attributi di riferimento ad XHTML (in ogni modo è attualmente possibile indicarli dato che rientrano comunque nella specifica HTML 5);
Indicazione della lingua del documento per mezzo di un unico attributo lang.

<HEAD>
Questo tag è comunemente quello successivo al tag <HTML> e può includere script o le indicazioni su dove e quali fogli di stile (CSS) utilizzare per rendere graficamente bella la nostra pagina.

Inoltre può contenere i METADATI della pagina, e cioè tutte le “informazioni” che riguardano il modo in cui la pagina deve essere letta ed interpretata (ma non il contenuto della pagina stessa).


<head>
<meta charset=utf-8" />
<title>Layout Generico HTML5</title>
</head>

Il tag <head> comunemente include i seguenti tag: <base>, <link>, <meta>,<script>, <style> e <title>.

<TITLE>
L’unico elemento necessario da nidificare in <head> è il tag <title>, che definisce il titolo del documento che è possibile vedere ad esempio sulla barra del titolo del browser.

<title>Layout Generico HTML5</title>

<META>
Un altro elemento di rilievo è sicuramente <META> che consente tipicamente di specificare il set di caratteri, la descrizione della pagina, parole chiave, autore del documento, la data dell’ultima modifica, e altri metadati.

Un occhio di riguardo lo diamo ad una delle caratteristiche importanti di questo tag che consente di gestire il set di caratteri con il quale deve essere interpretato il documento HTML.

Se pensiamo a quanti caratteri esistano tra tutte le lingue e simbologie del mondo ci rendiamo conto quanto sia difficile rappresentarle tutte (pensiamo semplicemente anche solo alle lingue orientali o medio orientali). Per questa ragione esistono svariati set di caratteri, e fino a prima dell’arrivo di HTML 5 era possibile indicarli per mezzo degli header http con tag di questo tipo:

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

Oggi la situazione è di gran lunga più semplice, dato che il nuovo standard ci consente di specificare il set di caratteri semplicemente attraverso l’attributo charset del tag <META>.

<meta charset="utf-8" />

Gli altri tipi di attributo del tag <META> sono:

– http-equiv: consente di specificare header http per il documento;

– name: consente di specificare caratteristiche descrittive della pagina come l’autore, il nome del documento, le keywords per i motori di ricerca, etc…

– content: specifica il contenuto del tag <meta> in relazione all’attributo name o http-equiv.

Novità di HTML 5:

Nuovo attributo charset che consente di indicare il set di caratteri del documento;
Non più supportato l’attributo schema dello standard HTML passato.

<STYLE>

Il tag <style> è utilizzato per indicare le informazioni di stile che il documento HTML deve avere. In questo tag è difatti possibile indicare regole CSS che consentono di definire come i vari elementi dell’intero documento devono essere renderizzati da un browser (quindi tutte le caratteristiche di colore, sfondo, margini, posizioni, etc…).

Come avevamo già accennato lo studio dei CSS esula dagli argomenti attualmente trattati, e non ci soffermeremo sull’argomento, ma alcune caratteristiche importanti del tag è utile indicarle.

Il tag <style> è possibile utilizzarlo non solo come figlio del tag <meta> ma anche all’interno dell’intero documento e come abbiamo su indicato consente di indicare delle regole CSS. Normalmente le regole CSS vengono applicate all’intero documento. A differenza del passato però con HTML 5 possono essere specificate delle regole CSS solo per una porzione del documento.

Il nuovo attributo scope se indicato in un tag <style> nidificato all’interno di un altro tag nel documento consente di localizzare le regole CSS solo per il tag che lo contiene e tutti i figli del tag stesso.

Eccovi un esempio:
...


<div>
<style type="text/css" scoped="scoped">
h1 {color:red}
p {color:blue}
</style>
<h1>This is a header</h1>
<p>This is a paragraph.</p>
</div>

...

In questo caso le regole CSS indicate verrano applicate soltanto al tag <div> (che spiegheremo in seguito) e a tutti i figli del <div>.

Gli altri attributi del tag <style> sono:

media: consente di indicare su quale media o device utilizzare gli stili indicati nel tag. In un documento HTML è difatti possibile indicare più stili da utilizzare a seconda del device utilizzato per navigare il documento stesso. Un esempio lampante è il proprio mac (chi di voi ha un pc alzi la mano!) o il proprio iPhone…beh a seconda degli stili disponibili sul documento il browser deciderà quali stili applicare scegliendo quello migliore in base all’attributo media indicato.
type: indica il tipo di MIME type del foglio di stile, ed in HTML 5 è un parametro facoltativo.

Novità di HTML 5:

Nuovo attributo scope che consente di localizzare l’uso di alcuni stili;
un maggiore numero di media supportati;
attributo type facoltativo.

<SCRIPT>

Il tag <script> consente di definire per mezzo di un linguaggio di scripting (comunemente javascript) un insieme di istruzioni che vengono usate all’interno delle pagine web per creare effetti non ottenibili con il solo linguaggio HTML, come ad esempio animazioni, gestione di immagini, controlli sui forms, etc…
<script> document.write("Ciao Mondo!") </script>

Come indicato per i CSS, anche javascript è un argomento ampio che tratteremo esclusivamente per le problematiche inerenti all’HTML 5 (che è uno standard definirei potenziato particolarmente grazie a javascript stesso).

Il caricamento degli script (come del resto quello di tutti gli elementi del browser) avviene sequenzialmente nell’ordine in cui è scritta la pagina web e quindi seguendo la struttura ad albero della pagina, partendo quindi dall’inizio del documento sino ad arrivare alla fine. Questo processo è definito parsing del documento HTML ed è utile conoscerlo per capire alcune funzioni degli attributi del tag in questione.

Anche in questo caso è comunque fondamentale evidenziare alcuni attributi del tag:

async: attributo introdotto con HTML 5 che consente di stabilire se lo script in questione viene eseguito in modalità asincrona o meno.Se indicato a false, il parsing della pagina da parte del browser non proseguirà sino a che lo script non sarà eseguito completamente, mentre se è indicato a true consentirà al browser di proseguire il parsing mentre lo script è in esecuzione.
type: indica il tipo di MIME type del foglio di style, ed in HTML 5 è un parametro facoltativo.
charset: definisce il set di caratteri usato nello script;
defer: indica che lo script non genererà alcun contenuto per la pagina, e che quindi sarà eseguito alla fine del caricamento della pagina.In questa occasione il parsing della pagina salterà a piè pari lo script, evitando di fermare il caricamento dell’intera pagina…al completamento del caricamento si occuperà dello script.
src: consente di definire un url per uno script memorizzato su un file esterno al documento web.

Novità di HTML 5:

Nuovo attributo async che consente il caricamento degli script in modalità asincrona;
attributo type facoltativo;
Non più supportato l’attributo schema dello standard HTML passato.

<LINK>

Il tag in questione consente “semplicemente” di indicare risorse esterne al documento e collegarle quindi al documento stesso, come ad esempio i fogli di stile relativi al documento, eventuali file di script esterni, feed rss, etc…
<link rel="stylesheet" href="style.css" /> <link rel="alternate" type="application/atom+xml" title="Feed per un mio sito" href="/feed/" />

E’ possibile utilizzare nel tag i seguenti attributi:

href: consente di specificare l’url della risorsa;
hreflang: consente di specificare la lingua della risorsa correlata;
media: indica il media o device per il quale la risorsa correlata è ottimizzata;
rel: indica la tipologia della risorsa correlata.E’ possibile correlare ad esempio una versione alternativa del documento (alternate) come una versione di stampa, traduzioni…o ad esempio i fogli di stile per descrivere come la pagina sarà renderizzata (stylesheet), o ancora la possibilità di indicare la favicon (cioè l’iconcina associata alla pagina web che viene visualizzata nella barra degli indirizzi dei vari browser), etc..
sizes: indica le dimensioni della risorsa correlata nel caso in cui fosse necessaria ad esempio per l’attributo rel valorizzato ad icon;
type: indica il MIME type della risorsa correlata (può essere omesso in alcuni casi come per le relazioni ai fogli di stile o gli script).

Novità in HTML 5:

Aggiunta dell’attributo sizes utile per indicare le dimensioni in pixel della risorsa correlata;
nuovi valori per l’attributo rel, che consentono di descrivere molti più tipi di risorse, e quindi rendere il documento HTML semanticamente e logicamente meglio descritto.
possibilità di omissione dell’attributo type in caso di relazioni a fogli di stile;

<BODY>

Il tag <body> definisce il corpo del documento.

All’interno di questo tag si sviluppa l’intero corpo del documento ospitando infatti tutto il contenuto del documento HTML come i testi, i collegamenti ipertestuali, immagini, liste, etc…

<body> … </body>

Dal prossimo appuntamento…

…ci occuperemo quindi di popolare il tag <body> con i tags semantici che HTML 5 ci mette a disposizione per costruire la struttura della pagina (</header>, </nav>, </section>, etc…), non trascurando però i tags più importanti e comuni (</img>, </p>, </div>, etc…) che ci consentono di costruire le pagine, come ad esempio le immagini, i paragrafi, etc…

Di certo gli argomenti possono essere ulteriormente approfonditi, ed è per questo che vi lascio un link per conoscere tutte le caratteristiche dei tags spiegati in questo articolo e di tutti gli attributi disponibili.
http://www.w3schools.com/html5/html5_reference.asp

Se avete dubbi, domande e perplessità, sarò felice di rispondervi tramite i commenti. Anche per questa settimana è tutto, e vi do appuntamento a lunedì prossimo con iSpazio DevResources per lo sviluppo Web.

Francesco Sciuti

Sai che siamo anche su Telegram? Unisciti al nostro canale iSpazio per ricevere le notifiche oppure Apple Italia per chattare con altri utenti. Scopri i migliori prodotti Tech in sconto su Amazon con il nostro canale OFFERTE iSpazio.