HTML5 e Wordpress

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.