HTML5 - Web future

Primi passi             

Sinceramente non trovo facile dare un percorso organico allo studio di qualcosa che ha così tante sfaccettature e può essere approcciato in tanti modi diversi. Io credo che se guardate a vari testi professionali sull'argomento vedrete davvero tanti modi significativamente diversi di esporre l'argomento... io ci provo poi vediamo...

Una prima logica che si può cercare è il tentativo di dividere semantica e rappresentazione. Questo è un aspetto interessante che permette di attribuire un conformazione logica ad un codice normalmente piuttosto (molto) confuso. Ovviamente c'è da tenere presente il codice preesistente, le applicazioni sviluppate con le vecchie logiche, insomma non è che si può dare un colpo di spugna al passato. Vecchio e nuovo convivo e conviveranno a lungo per cui meglio non illudersi di poter sviluppare solo col nuovo standard. Ma se vi sarà possibile farlo apprezzerete sicuramente questo aspetto. Allo scopo di perseguire questa finalità inoltre alcuni elementi già in uso in HTML4 sono stati ridisegnati e ne vedremo alcuni.

Tutto ciò è molto astratto. Proviamo allora a vedere come si costruisce una pagina di base incominciando così a discutere degli elementi minimi necessari.

Ogni pagina HTML5 ha tra i suoi elementi un tag con un elemento che chiama doctype. Precisamente:

<!DOCTYPE HTML>

Questo è l'avviso al browser la pagina nasce assecondando HTML5. Anche senza fornire la versione. Questo deve essere il primissimo elemento di una pagina Web moderna. Si tratta evidentemente non di un tag vero e proprio bensì ha valenza di istruzione fornita al browser. Rispetto ad HTML 4.01 è importantissimo annotare che  HTML5 non è basato su SGML (Standard Generalized Markup Language) ovvero la sua sintassi, per quanto simile, si è sganciata da esso, al contrario del suo predecessore. In questo modo non è necessario definire un DTD (Document Type Definition) come risultava obbligatorio nello standard precedente. Ricordiamo che DTD definisce le componenti ammesse in una pagina XML o SGML e derivate. Il nostro nuovo standard ne fa a meno quindi nel doctype non abbiamo più l'obbligo di specificare il DTD di riferimento.
Per completare la nostra conoscenza di doctype precisiamo che non è case sensitive e non ha tag di chiusura che, visto lo scopo, non serve.
Tipicamente segue poi il tag

<HTML>

che costituisce il punto d'inizio vero e proprio della pagina fungendo da perimetro, fino al suo punto finale caratterizzato dal tag di chiusura

</HTML>

per tutto il contenuto. Anche questo tag non è case sensitive. Possiamo quindi definire la pagina minima:

  Esempio 2.1
1
2
3
<!DOCTYPE HTML>
<HTML>
</HTML>

Il terzo elemento che è possibile trovare, ovviamente all'interno dei tag appena visti, è

<HEAD> con la sua chiusura </HEAD>

Anche HEAD non è case sensitive. Questa sezione a sua volta contiene dei metadati tipicamente, è presente almeno la coppia

<TITLE></TITLE>

che specifica al suo interno il titolo della pagina che compare nella barra della finestra del browser.
Altri metadati li vediamo qui di seguito

<base>

che non ha tag corrispondente di chiusura. Questo metadato fornisce un url di base per tutta la pagina per recuperare informazioni ad uso del URL relativi all'interno della pagina eventualmente con relativo target. Deve esistere un solo tag <base> all'interno della pagina. Vediamo con un esempio:

  Esempio 2.2
1
2
3
4
5
6
7
<!doctype html>
<html>
<head><base href="http://www.raskrjal.net/" target="_blank" /> </head>
<body>
<img src="bb.png" alt="chess" width="24" height="39" />
</body>
</html>

In questo caso l'URL definito alla riga 3 viene applicato su quello definito alla 5 (la sorgente dell'immagine). Qualunque URL viene aperto poi in una nuova finestra per effetto della definizione _blank definito sempre alla riga 3. Utile in qualche caso.
Più nota forse è il classico "meta". Esso ha una serie di attributi che vediamo nella tabella seguente:

Attributo Valori possibili Descrizione
charset character_set Specifica la codica per il documento
content text E' il valore associato a http-equiv o name
http-equiv content-type
default-style
refresh
Fornisce l'header http per il valore di content
name application-name
author
description
generator
keywords
specifica il nome del metadata

charset è stato semplificato in HTML5 e diventa alternativo al valore content-type di http-equiv per esprimere il set di caratteri in uso.

Esempio:

<head>
<meta charset="UTF-8" />
<meta http-equiv="refresh" content="30">
<meta name="author" content="raskrjal"/>
<meta name="description" content="test"/>
</head>

Va peraltro detto che esistono dei metadati addizionali che si possono usare la cui lista, variabile nel tempo è reperibile ad esempio qui:
http://wiki.whatwg.org/wiki/MetaExtensions
Piuttosto usata ad esempio è il metadato "robot" che specifica come la pagina dovrebbe essere tratta dai motori di ricerca. Altri dati interessanti che potrete inserire sono relativi a keywords del sito, programma che ha generatore la pagina ecc... Imparerete comunque nel tempo ad utilizzare questi importanti elementi descrittivi e che possono essere utilizzati dai motori di ricerca per attribuire un posto nell'ambito dei loro rankings. Peraltro, giusto per non cadere nell'equivoco, gli stessi motori di ricerca danno meno peso rispetto al passato a questi dati in quanto ne è stato fatto un notevole abuso. Se volete far crescere i vostri siti in termini di visibilità seguite le guide esposte sui siti dei motori stessi.

Infine, nella nostra pagina minimale, abbiamo la coppia

<BODY></BODY>

all'interno della quale si sviluppa il codice vero e proprio della pagina. Questo tag ha subito una evoluzione profonda rispetto alla sua versione standard 4.01. In particolare i seguenti attributi sono considerati obsoleti mentre i loro effetti possono ottenuti tramite CSS3:

- alink
- background
- bgcolor
- link
- margintop
- marginbottom
- marginleft
- marginright
- marginwidth
- text
- vlink


Naturalmente si possono ancora usare, i browser continuano a supportarli ma, come detto, se sviluppate con HTML5 in testa dovete cercare di non adoperarli. Quanto meno rinunciare ad essi vi aiuterà ad abituarvi al nuovo standard.
Eccoci quindi alla prima pagina di prova completa:

  Esempio 2.3
1
2
3
4
5
6
7
8
9
10
<!doctype html>
<html>
<head>
<title>Test</title>
<meta name="author" content="raskrjal.net"/>
</head>
<body>
Hello, World!
</body>
</html>

Non un grande risultato, non è diverso poi da quanto si faceva in passato ma è un inizio!

Non c'è molto da provare a questo punto ma se volete potete approfondire i discorsi relativi ai singoli tag con l'ampia documentazione che troverete senza problemi in rete, molto utile è ad esempio il sito di W3CSchools per dirne uno che a me piace molto ma insomma, troverete senza probloemi di tutto e di più..