Wordpress ha cominciato a supportare più pienamente HTML5 dalla versione 3.2 con la release del tema TwentyEleven. Seppure lodevole a livello di iniziativa volta a diffondere il nuovo standard, tuttavia l'HTML5 generato da Wordpress non è valido. In questo articolo analizzeremo la struttura del tema predefinito di Wordpress evidenziandone le modifiche apportate.
Supporto ad Internet Explorer
Le versioni 6, 7 ed 8 di Internet Explorer non supportano HTML5. Per questo motivo il tema TwentyEleven usa lo script di Remy Sharp per permettere a questi browser di riconoscere i nuovi elementi HTML5:
<!--[if lt IE 9]>
<script src="http://sito.it/wp-content/themes/twentyeleven/js/html5.js" type="text/javascript"></script>
<![endif]-->
Tale script esegue un ciclo for
su un array contenente tutti i nomi degli elementi HTML5 e quindi usa il metodo DOM createElement()
per permettere ad Internet Explorer di generare correttamente tali elementi a livello dell'albero del documento.
A livello CSS vengono assegnati vari ID all'elemento html
tramite commenti condizionali:
<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html id="ie8" dir="ltr" lang="en-US">
<![endif]-->
Questo permette al nostro CSS di assegnare degli stili diversi in base alla versione di Internet Explorer che si desidera supportare.
Nuovo profilo XFN
L'elemento meta
usato nei temi precedenti non è più valido in HTML5, così viene usato un elemento link
al suo posto:
<head>
<title>...</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
</head>
Nuovi meta tag
I nuovi meta tag usati da Wordpress riguardano la codifica delle pagine ed il supporto per il mobile:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
</head>
Per avere un quadro più approfondito sui nuovi meta tag per il mobile, si consulti questo articolo.
Titolo e tagline
Il titolo del sito e la relativa tagline sono ora inseriti in un elemento header
e hgroup
:
<header id="branding" role="banner">
<hgroup>
<h1 id="site-title">...</h1>
<h2 id="site-description">Just another WordPress site</h2>
</hgroup>
</header>
Si noti l'attributo role
di WAI-ARIA che dimostra come anche l'accessibilità venga presa nella debita considerazione. Per una descrizione approfondita dei vari role di WAI-ARIA, si consultino le specifiche.
Si noti anche il valore scelto per l'attributo ID: branding
è una proposta di Andy Clarke per una marcatura più semantica e riusabile.
Navigazione
La navigazione delle pagine è ora affidata all'elemento nav
:
<nav id="access" role="navigation">
...
</nav>
Notate ancora il role WAI-ARIA.
Nuova struttura dei post
La struttura dei post è stata modificata utilizzando l'elemento article
:
<article>
<header>
<h1 class="entry-title">...</h1>
<div class="entry-meta">...</div>
<div class="comments-link">...</div>
</header>
<div class="entry-content">...</div>
<footer class="entry-meta">...</footer>
</article>
Come si può notare, all'interno di article
sono stati usati anche header
e footer
, incrementando così la semantica della struttura.
Nuova colonna laterale
Nella colonna laterale, solitamente usata per i widget, viene ora usato l'elemento aside
:
<div id="secondary" class="widget-area" role="complementary">
<aside id="archives" class="widget">
...
</aside>
<!-- altri <aside>/widget -->
</div>
Nuovo footer
Nel piè di pagina viene ora utilizzato l'elemento footer
:
<footer id="colophon" role="contentinfo">...</footer>
Conclusione
Nonostante permangano dei dubbi circa la scelta di produrre marcatura non valida, probabilmente dovuta al fatto che allo stadio attuale dello standard HTML5 alcune regole sintattiche relative a determinati attributi e ai loro valori non siano ancora definite con precisione, Wordpress ha certamente dimostrato di voler abbracciare il nuovo standard HTML5.
Si nota, tuttavia, una certa resistenza nell'utilizzare appieno la gamma di elementi fornita dal nuovo standard, come testimonia il fatto che l'elemento section
non ha sostituito alcuni dei div
presenti. Ma il margine di crescita è ampio.