Indice dei contenuti
PARTE SECONDA: I NUOVI ELEMENTI HTML5
Per elementi strutturali, si intendono quegli elementi che vanno a costituire la struttura della pagina di un sito. In parole povere parliamo dell’ header, del footer, del body, ecc… che chi mastica un po’ di html già conosce.
Nell’HTML 5 ne sono stati introdotti di nuovi, arricchendo le possibilità di espansione delle pagine. I nuovi elementi sono utilizzabili e personalizzabili anche per favorire la fruibilità del sito a persone con determinate disabilità. Ma non solo: in ottica SEO, possiamo dire con certezza che i motori di ricerca sono sempre più addestrati a leggere e memorizzare le informazioni contenute nei nuovi elementi html5, le quali, se scritte avvalendosi dei microformati, diventeranno un punto di partenza privilegiato per iniziare a scalare la SERP.
Eh si, perché non dimenticate che questo Blog tratta principalmente della SEO, ed anche quando si parla di codice, il discorso va sempre riferito ad essa.
Studiare questi elementi, conoscerli bene, sapere dove andarli a posizionare e soprattutto sapere cosa metterci “dentro”, aiuta nella costruzione di una pagina ottimamente scansionabile dai motori di ricerca. Addentriamoci nel discorso…
I NUOVI ELEMENTI DEL CODICE HTML5
Tanto per capire definitivamente a cosa ci si riferisce quando si parla di elementi strutturali ecco lo specchietto di una pagina html5 con gli elementi indicati.
QUALE LA DIFFERENZA CON I VECCHI ELEMENTI
La differenza sembra non rilevante a prima vista ma in realtà i nuovi elementi HTML5 rappresentano una vera e propria rivoluzione nell’intendere la scrittura del codice. Più pulizia, più leggerezza delle pagine, maggiore versatilità e maggiori possibilità di sviluppare cose che in precedenza non si sarebbero potute sviluppare.
L’esempio più “terra terra”, può essere quello della semplicità di implementazione del codice a vantaggio della velocità di scrittura. Con le vecchie versioni HTML per creare un menù bisognava utilizzare un elemento non semantico come un div o uno span associandovi una classe o un id nella sintassi <div class=”nav”>. Con l’HTML5 basterà dichiarare un semplice <nav>.
INIZIAMO LA RASSEGNA DEI NUOVI ELEMENTI HTML5
<article>: Iniziamo dal tag <article> che per me è il più significativo ed adatto ad interpretare il modo di fare SEO attuale. Questo elemento è stato creato proprio per contenere il cuore delle pagine, ovvero i contenuti. All’interno dell’elemento article (che possiamo personalizzare attraverso l’uso di un css esterno come tutti gli altri elementi) metteremo i nostri contenuti più importanti e i nostri link alle risorse interne ed esterne.
<header>: E’ un semplice contenitore che può annoverare al suo interno altri elementi strutturali, l’intestazione della pagina, ecc… Non deve essere presente per forza ma, per una corretta implementazione della pagina web, sarebbe corretto utilizzarlo. Nell’header possiamo inserire anche un’introduzione a quello che sarà l’argomento della pagina oppure il nuovo elemento nav per il menù di navigazione.
<nav>: E’ l’elemento destinato “naturalmente” a contenere il nostro menù di navigazione principale. W3School lo definisce come un contenitore di un grande blocco di link di navigazione.
<aside>: L’aside è un’area destinata a contenuti “staccati” rispetto all’argomento principale della pagina. In essa possono essere inseriti altri menù di navigazione, link a risorse esterne correlate, badge social, la presentazione dell’autore, applicazioni web, informazioni sul profilo, ecc…
<section>: Definisce delle sezioni di un documento, come ad esempio i capitoli, intestazioni, piè di pagina, breadcumb, o qualsiasi altro tipo di sezione.
<footer>: Il footer è un elemento a piè di pagina. In una pagina ve ne possono essere più di uno. Di solito sono utilizzati per contenere informazioni sull’autore del sito o sul suo titolare. E’ una buona idea far si che contenga elementi per la geolocalizzazione dell’attività, come indirizzo, coordinate, ecc…. Spesso il footer è usato come spazio da dedicare ad un elenco di siti “amici”. Beh, se li mettete in ottica SEO, sappiate che tutti i link contenuti nel footer Google li considera meno di zero.
Con la descrizione dei principali elementi strutturali, siamo arrivati alla fine di questo secondo appuntamento con il codice HTML5.
Nel prossimo inizieremo ad analizzare i principali tag.
Ti manca la prima parte di “A scuola di HTML5”? ——-> Prima parte: A scuola di HTML 5
Terza ed ultima parte ——->Quali sono e a cosa servono i nuovi tag html5
