Layout con HTML5 per SEO con senso semantico

Molti designer usano html o xhtml per separare o raggruppare elementi in livelli con div. Il problema è che se abbiamo 50 div separati ciascuno con la sua classe che definisce la struttura della pagina web, questo avrà senso per il progettista o il programmatore ma non per i motori di ricerca poiché non possono distinguere cosa sia ogni classe se è un'intestazione , sezione , articolo, piè di pagina, ecc.
Vantaggio HTML5 contro XHTMLHtml5 offre un vantaggio molto importante rispetto a xhtml tradizionale e cioè che ha dei tag per definire una struttura semantica.
Chiamiamo quel codice html semantico html dove la struttura ha senso per i motori di ricerca e quindi serve per il posizionamento SEO. Si tratta di ogni motore di ricerca essere in grado di capire cosa sia ogni parte di una pagina web, anche rimuovendo tutto il contenuto.
XHTML non ha tag che consentono di definire gruppi o blocchi di elementi con un senso semantico.
HTML5 risolve questo problema offrendo elementi e tag che ci consentono di definire la semantica della pagina web, alcuni dei quali sono header, footer, nav, hgroup, section e article, tra gli altri.
Successivamente definiremo i più importanti in senso semantico:

• intestazione: Definire il blocco dell'intestazione della pagina Web e racchiudere il contenuto dell'intestazione.
• navigatore: definisce un blocco che rappresenta un menu, quindi i motori di ricerca quando trovano questo tag sanno che è la struttura di navigazione.
• hgruppo: definire e raggruppare i titoli e quindi dare un'importanza diversa a ciascun titolo.
• sezione e articolo: Gli elementi precedenti che definiscono i livelli div> e sono sostituiti dai tag section e article, che hanno un senso più semantico quando si definiscono sezioni e articoli all'interno delle sezioni.
• a parte: definisce e raggruppa gli elementi tangenziali della pagina web. Cioè, contenuto che non è quello principale, come le colonne laterali o la barra laterale del web
• piè di pagina: definisce e raggruppa gli elementi nel piè di pagina della pagina web.

L'utilizzo di HTML5 non implica che l'XHTML non venga più utilizzato, sono comunque molto bravi ad organizzare la struttura e il raggruppamento degli elementi della pagina web o ad invocare Jquery, ricorda che HTML5 serve a dargli un senso semantico ma all'interno del blocco puoi continuare per utilizzare qualsiasi altro tag XHTML. Vediamo un esempio qui sotto

Sottotitolo
logo web

Possiamo vedere che con i livelli è stata definita la struttura e all'interno dell'intestazione dell'intestazione sono stati definiti un hgroup per raggruppare i titoli, oltre a un livello che contiene il logo.
Pertanto, i livelli XHTML ci consentono di definire la struttura della pagina Web per avere una migliore organizzazione per il programmatore, quindi XHTML ci aiuta a definire blocchi significativi per la struttura e HTML5 ci consente di creare blocchi significativi per i motori di ricerca e SEO. Come viene utilizzato il tag di sezione in HTML5 per SEO.
L'utilizzo del tag section è molto simile all'utilizzo di un div layer, con la differenza che section fornisce il senso semantico e tutti gli elementi racchiusi in section sono correlati alla semantica del web. È importante non usare la sezione per raggruppare elementi in nessun blocco perché abbiamo bisogno di avere elementi senza senso raggruppati per assegnare stili CSS o qualche effetto di programmazione.
Se il motivo per creare un blocco è applicare CSS o utilizzarlo dal codice con uno script, sarebbe meglio non utilizzare HTML5, poiché il blocco non ha contenuto semantico. In questo caso dobbiamo creare un blocco con il livello div di xhtml. Come visto nell'esempio sopra, il logo non ha senso utilizzare HTML5 poiché i CSS vengono utilizzati per visualizzare l'immagine.
Livello o sezione DIVUn modo di pensare alla rilevanza di ogni blocco per determinare se si tratta di un div layer o di una sezione, se sono il visitatore della pagina Web. Questo blocco mi fornisce informazioni utili? Se la risposta è sì, sarà una sezione, se non un livello.
Quando usiamo l'elemento articolo stiamo definendo un blocco che ha senso semantico e contenuto che i motori di ricerca possono scansionare. Il tag dell'articolo non fa necessariamente riferimento a una nota di testo, può essere un prodotto, immagini o un modulo.
Vediamo un semplice esempio di una pagina web e del suo codice in HTML5:

Honda Civic

Siccome all'interno dell'articolo possiamo mettere layer o paragrafi o altri elementi xhtml in alcuni casi il contenuto del web potrebbe avere un solo articolo e nel caso che la pagina abbia liste o cataloghi come nel caso precedente di Autos Online possiamo avere un articolo per ogni prodotto mostrato e anche una propria intestazione per dare maggiore rilevanza ai titoli.
Possiamo anche applicare stili css ad elementi HTML5, vediamo un semplice esempio per un blog online con HTML5 e CSS3.



 
Titolo 1
Inserito il 06 dicembre 2014 da Sergio - 3 commenti
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio …

Titolo 2
Inserito il 1 dicembre 2014 da Sergio - 20 commenti
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio …

Ciò dimostra che non sono solo elementi semantici, ma possono anche far parte del design e della struttura della pagina web.
Questo elemento serve a definire un blocco secondario all'interno della struttura della pagina web, è contenuto o dati che vogliamo mostrare al visitatore ma non è un contenuto principale.
Possiamo associare il tag a parte alle colonne laterali o comunemente note come Sidebar che avranno contenuto del menu di navigazione secondario, collegamenti ad altre pagine Web, moduli di accesso. Possiamo anche creare un a parte all'interno di un articolo, questo significa che ciò che è in un a parte è un complemento al contenuto dell'articolo ma non è una parte diretta di quel contenuto, ad esempio se abbiamo un articolo su alcune vendite e in un a parte pubblichiamo statistiche .
Infine, ricorda l'obiettivo di Layout:
Cos'è Layout una pagina web?Il layout di una pagina web consiste nel portare il design grafico nel codice html, individuando in css ogni elemento corrispondente tramite il codice nella pagina web.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo