Nell'ultimo articolo, abbiamo esaminato una serie di nuovi elementi introdotti in HTML5 e come implementarli correttamente. In questo articolo, discuteremo di nuovo una serie di nuovi elementi, ma stavolta esamineremo solo quegli elementi HTML5 che rappresentano un cambiamento semantico significativo nel modo in cui strutturate i vostri siti. Questo articolo spiegherà come usare ciascuno di questi nuovi elementi in un modo che porterà molto sollievo al divino che affligge la struttura di tanti siti oggi.

Semantica?

Prima di iniziare, dovresti sapere che per semantica mi riferisco semplicemente all'utilizzo di tag e elementi HTML nel modo in cui erano destinati ad essere utilizzati. A differenza dei linguaggi di programmazione, che devono essere compilati per essere eseguiti, HTML non richiede compilatore (il browser tenta tutta l'interpretazione) e quindi offre una grande quantità di libertà per utilizzare un determinato elemento nel modo desiderato. Tuttavia, se sei un nuovo web designer probabilmente stai scoprendo che molte persone sono fanatici della semantica, e forse giustamente. Utilizzare le tabelle in cui non appartengono o gettano in giro

tag ogni volta che vuoi mettere in grassetto qualcosa potrebbe essere conveniente, ma rende il codice incredibilmente disordinato e difficile da leggere. Pertanto, guardiamo alle pratiche semantiche, cross-browser e HTML valide per portare unità e coerenza ai siti di tutto il web. Molti degli elementi HTML5 che vedremo saranno abbastanza semplici da interpretare semplicemente leggendo il nome, ma familiarizzare con il modo corretto di implementare questi elementi è assolutamente cruciale se si desidera creare siti di qualità professionale che funzionano in un numero dei principali browser.

Il problema

Dai un'occhiata a 100 siti Web diversi con layout quasi identici e troverai 100 diverse strutture e convenzioni di denominazione nell'HTML sottostante. Anche se un buon sviluppatore web nominerà il suo / la sua / lei

s in modo tale da essere facilmente comprensibili, le vaste possibilità possono portare a confusione sull'identificazione di sezioni di codice relativamente semplici e uniformi. Per questo motivo, HTML5 ci fornisce una serie di elementi che possono essere utilizzati per identificare e scegliere gli elementi che appaiono in quasi tutti i siti del Web come intestazioni, piè di pagina e menu di navigazione. Inoltre, a parte le convenzioni di denominazione incoerenti, il modo attuale di fare le cose può portare rapidamente a strutture div che hanno un sacco di peso in più rispetto ai semplici elementi HTML incorporati. Per illustrare, diamo un'occhiata a una struttura semplice che potresti trovare in HTML4.

<p>Qualche testo</p> <p>Qualche testo</p>

Puoi vedere come questo pezzo di codice relativamente semplice sia invaso dai div, il che può richiedere molto tempo per essere risolto, a causa di tutti i lanci necessari. Il CSS per lavorare con questo HTML dovrebbe contenere i seguenti selettori:

#nav_bar {} #main_header {} .side_bar {} #container {} .section {} #header {} .section p {} .footer {} #main_footer

Sebbene non sia così complicato come l'HTML prima, questo codice non è così semplice come potrebbe essere. Ora analizziamo come HTML5 ci aiuta a risolvere questo problema.

La soluzione

HTML5 ci consente di prendere quasi tutte le div personalizzate sopra e convertirle in elementi standard. Diamo un'occhiata al codice necessario per realizzare la stessa cosa in HTML5.

<p>Qualche testo</p> <p>Qualche testo</p>

E il corrispondente CSS:

nav {} header {} aside {} section {} footer {} sezione p {} #container {} #container header {} #container footer {}

C'è molto da discutere su questi esempi, quindi iniziamo con l'HTML. Si noti che il divario cronico è scomparso e al suo posto sono universalmente compresi e facilmente interpretabili. Ciò migliora notevolmente la leggibilità del codice. Uno dei miei animaletti quando legge il codice di qualcun altro sta rintracciando il corrispondente correttamente

e

tag. Questo può richiedere un tempo ridicolo se ci sono otto o dieci tag div di chiusura e senza etichetta. L'utilizzo di elementi standard fa molto per eliminare questo problema perché il tag di chiusura è più informativo (è più facile da trovare

piuttosto che localizzare un caso

quello appartiene a

).

Anche il CSS è stato semplificato. Ora possiamo semplicemente usare identificatori senza tag o periodi hash nella maggior parte dei casi, perché ci riferiamo a elementi supportati in modo nativo invece che a nomi univoci div. Si noti che nel nostro HTML questa volta siamo stati in grado di utilizzare lo stesso tag per tutti gli elementi di intestazione e piè di pagina (abbiamo lanciato la classificazione? Main?). Questo perché se vogliamo modellare le intestazioni all'interno del contenitore in modo diverso rispetto agli altri, possiamo semplicemente usare l'intestazione #container? per indirizzare solo gli elementi di intestazione all'interno del contenitore div (e possiamo essere sicuri che erediterà correttamente i tratti che vogliamo mantenere). Ora che abbiamo dato un'occhiata ai nuovi elementi strutturali, vediamo come utilizzarli singolarmente.

Il

Elemento

Si potrebbe inizialmente ipotizzare che l'intestazione si riferisca all'intestazione principale della pagina. Tuttavia, è davvero solo un elemento generico che può essere utilizzato più volte nel codice. Ecco un esempio:

<h2>Tutorial HTML5</h2> <p>Formazione HTML5 completamente gratuita</p> <ul> <li>Uno</li> <li>Due</li> <li>Tre</li> </ul> <h2>Tutorial CSS3</h2> <p>Formazione CSS3 completamente gratuita</p> <ul> <li>Uno</li> <li>Due</li> <li>Tre</li> </ul>

Di nuovo abbiamo sostituito quello che normalmente sarebbe stato un gruppo di div con tag di intestazione più semplici. È importante notare che poiché possiamo avere più tag di intestazione in un singolo file HTML, non dovresti pensare all'elemento di intestazione come a un sostituto di

, che rappresenta un div unico che appare solo una volta, ma piuttosto per

, che rappresenta un elemento che appare più volte.Questa è un'importante distinzione sia per ragioni semantiche sia per lo stile CSS e si applica a molti degli elementi di cui discuteremo.

Il

Elemento

La maggior parte delle cose che ho appena spiegato sull'elemento header si applicano anche all'elemento footer, il che significa che è generico e può essere inserito più volte nel codice. Ovviamente, i footer generalmente (anche se non sempre) vanno alla fine di una sezione di codice e contengono informazioni di natura secondaria come la data di pubblicazione, l'autore, le informazioni sul copyright, ecc. Tuttavia, ciò che accade nel footer è in gran parte tu. Ecco un rapido esempio che si basa su ciò che abbiamo visto con l'elemento header:

<h2>Tutorial HTML5</h2> <p>Formazione HTML5 completamente gratuita</p> <ul> <li>Uno</li> <li>Due</li> <li>Tre</li> </ul> 6 ore di tutorial gratuiti! <h2>Tutorial CSS3</h2> <p>Formazione CSS3 completamente gratuita</p> <ul> <li>Uno</li> <li>Due</li> <li>Tre</li> </ul> 4 ore di tutorial!

Il

Elemento

L'elemento section è un modo generico per separare parti del tuo sito. Ad esempio, supponiamo che un sito Web dell'evento sia suddiviso in "cosa?", "Quando" e "dove". Potresti usare

tag per rendere questa divisione nel tuo codice (di nuovo, pensa? class? not? id?). Usando il nostro esempio precedente, potremmo sostituire il? Tutslist? classe con elementi di sezione.

<h2>Tutorial HTML5</h2> <p>Formazione HTML5 completamente gratuita</p> <ul> <li>Uno</li> <li>Due</li> <li>Tre</li> </ul> 6 ore di tutorial gratuiti! <h2>Tutorial CSS3</h2> <p>Formazione CSS3 completamente gratuita</p> <ul> <li>Uno</li> <li>Due</li> <li>Tre</li> </ul> 4 ore di tutorial!

Si noti che le sezioni iniziano spesso con un elemento di intestazione e terminano con un elemento footer, anche se questo non è assolutamente necessario.

Il

Elemento

Ho brevemente menzionato l'elemento dell'articolo nel mio ultimo post, dimenticando completamente che lo stavo salvando per questo post. Tuttavia, un commentatore ha indicato con intelligenza alcune informazioni errate che dovremmo raddrizzare. Nonostante w3schools affermi che l'elemento dell'articolo è strettamente legato al contenuto esterno, w3.org afferma chiaramente che il suo vero scopo è quello di identificare una sezione del sito che è destinata a essere distribuibile in modo indipendente. Ad esempio, un post di blog come questo potrebbe essere indipendente e non dipende dal resto del contenuto del sito. Inoltre, questo post è qualcosa che in realtà vogliamo che altri siti discutano e colleghino. Le notizie, i post sul forum e le esercitazioni sono buoni esempi di questo tipo di contenuti. Applichiamo questo al nostro esempio in esecuzione.

<h2>Tutorial HTML5</h2> <p>Formazione HTML5 completamente gratuita</p> <h3>Tutorial HTML 1</h3> <p>Un sacco di buone informazioni</p> <h3>Tutorial HTML 2</h3> <p>Un sacco di buone informazioni</p> 6 ore di tutorial gratuiti! <h2>Tutorial CSS3</h2> <p>Formazione CSS3 completamente gratuita</p> <h3>Tutorial CSS 1</h3> <p>Un sacco di buone informazioni</p> <h3>Tutorial CSS 2</h3> <p>Un sacco di buone informazioni</p> 4 ore di tutorial!

Come puoi vedere, questo è un contenuto interno che può essere consultato esternamente, piuttosto che viceversa come sembra suggerire w3schools.

Il

Elemento

L'elemento nav fa riferimento a sezioni del tuo HTML contenenti collegamenti per scopi di navigazione come quello in una barra laterale o una striscia di pulsanti lungo la parte superiore di una pagina. Tuttavia, questo non si applica a tutti i gruppi di collegamenti di navigazione sulle tue pagine. Invece, riserva questo elemento per le principali fonti di navigazione sul tuo sito. w3.org fornisce l'esempio di una serie di collegamenti in un piè di pagina come una situazione che non meriterebbe un elemento di navigazione. Di nuovo, rivedremo il nostro esempio per includere il nuovo elemento.

Home Informazioni su HTML5 Tuts Contatti CSS3 Tuts <h2>Tutorial HTML5</h2> <p>Formazione HTML5 completamente gratuita</p> <h3>Tutorial HTML 1</h3> <p>Un sacco di buone informazioni</p> <h3>Tutorial HTML 2</h3> <p>Un sacco di buone informazioni</p> 6 ore di tutorial gratuiti! <h2>Tutorial CSS3</h2> <p>Formazione CSS3 completamente gratuita</p> <h3>Tutorial CSS 1</h3> <p>Un sacco di buone informazioni</p> <h3>Tutorial CSS 2</h3> <p>Un sacco di buone informazioni</p> 4 ore di tutorial!

Il

Elemento

L'ultimo elemento di cui discuteremo è a parte. Questo elemento è riservato al contenuto correlato, ma distintamente separato dal resto del contenuto della pagina. L'elemento aside può essere utilizzato per le virgolette, le pubblicità, gli elementi di navigazione, le barre laterali, ecc. Ad esempio, supponiamo di voler utilizzare la nostra navigazione dall'ultimo esempio e inserirla in una barra laterale:

<p>Informazioni generali</p> Home Informazioni su Contatto <p>Esercitazioni</p> Tutorial HTML5 Tuts CSS3 <h2>Tutorial HTML5</h2> <p>Formazione HTML5 completamente gratuita</p> <h3>Tutorial HTML 1</h3> <p>Un sacco di buone informazioni</p> <h3>Tutorial HTML 2</h3> <p>Un sacco di buone informazioni</p> 6 ore di tutorial gratuiti! <h2>Tutorial CSS3</h2> <p>Formazione CSS3 completamente gratuita</p> <h3>Tutorial CSS 1</h3> <p>Un sacco di buone informazioni</p> <h3>Tutorial CSS 2</h3> <p>Un sacco di buone informazioni</p> 4 ore di tutorial gratuiti!

Guarda Ma, No Div!

L'esempio sopra illustra la quantità eccezionalmente grande di codice che HTML5 ci consente di eseguire utilizzando solo elementi standard! Ogni pezzo di questo esempio è super facile da usare come target in CSS, immediatamente comprensibile da qualsiasi sviluppatore (almeno uno sviluppatore esperto di HTML5) e incredibilmente conciso rispetto alla quantità di codice richiesta in HTML4. E non c'è un div in vista.

Conclusione

Questo articolo descrive brevemente il concetto e l'importanza del codice semantico e discute le principali modifiche semantiche apportate da HTML5. Abbiamo scoperto come utilizzare correttamente sei nuovi elementi HTML5 incredibilmente utili: header, footer, section, article, nav e aside. Infine, abbiamo appreso come questi nuovi elementi possono essere utilizzati per creare codice ben strutturato e facilmente leggibile che evita l'uso eccessivo di div.

Per evitare confusione (e per evitare una raffica di commenti arrabbiati), dovrei chiarire che non c'è assolutamente nulla di sbagliato con le div.Personalmente utilizzo le div in modo molto liberale in ogni sito che creo e le trovo tra gli elementi più flessibili ed essenziali in HTML. Tuttavia, più è possibile sostituire le div singolarmente denominate con gli elementi denominati universalmente, più affidabile e accurato dal punto di vista degli standard.

Looking Ahead: Three Down, One to Go!

Il prossimo articolo sarà la finale della nostra serie su HTML5. Come probabilmente saprai a questo punto, nessuno di quello che ti ho mostrato è pronto per essere integrato in siti web per una visione pubblica diffusa. Tuttavia, il nostro prossimo articolo ti mostrerà vari trucchi per iniziare a utilizzare subito HTML5 e discutere di come dovresti preparare i tuoi siti per l'inevitabile aggiornamento!