Un'occhiata alla giusta semantica HTML5

Se pianifichi attentamente la struttura dei tuoi documenti HTML, puoi farlo aiutare i computer a dare un senso al significato dei tuoi contenuti. La sintassi corretta è sicuramente importante, ma in pratica fornisce solo parser, motori di ricerca e tecnologie assistive con una serie di dati priva di significato.

Se si migliora il flusso di lavoro front-end prestando attenzione alla semantica, è possibile creare un contenuto di qualità superiore che attiri più visitatori. La semantica è il studio del significato, in un contesto più ampio è un ramo della logica e della linguistica.

Nel mondo dello sviluppo web parliamo di contenuto semantico quando i computer comprendono la struttura di un documento e il ruoli degli elementi al suo interno. Se vogliamo creare una semantica corretta, dobbiamo profondamente capire la struttura del nostro contenuto e il capacità di tecnologie frontend.

Quindi quali sono i benefici tangibili? Semantica corretta significa a più contenuto ricercabile che porta a a miglior posizionamento nei motori di ricerca. Aumentiamo anche l'accessibilità, in quanto tecnologie assistive come gli screen reader possono interpretare meglio il significato dei nostri contenuti.

Esistono diverse tecniche di sviluppo front-end che consentono agli sviluppatori di ottenere una struttura di pagina semantica. Questo post fornirà una breve introduzione ai tag HTML semantici e al concetto di struttura del documento.

Tag HTML semantici e non semantici

Il concetto di semantica non è così nuovo come sembra, esisteva molto prima dell'era di HTML5. Il termine del web semantico è stato coniato sin dal 2001 da Sir Tim Berners-Lee. Sotto “web semantico” intendeva una rete di dati che può essere elaborata dalle macchine.

Questo significa principalmente questo gli elementi HTML separati devono avere i loro ruoli strutturali distinguibili. Secondo la definizione di W3C “un elemento semantico descrive chiaramente il suo significato sia per il browser che per lo sviluppatore”.

Elementi semantici prima di HTML5

Gli elementi semantici esistevano anche prima di HTML5, nella maggior parte dei casi gli sviluppatori non lo sapevano alcuni dei tag che usavano erano in realtà semantici. Pensa al

o il tag.

I loro ruoli sono chiari sia per noi che per l'utente:

semplicemente contiene un modulo, proprio come contiene un'immagine. Nessuno metterà mai un tavolo o un titolo dentro e tag (o almeno speriamo così).

l'elemento e i relativi tag come le righe di tabella, le celle di tabella, ecc. sono anche tag semantici che esistevano prima di HTML5, tuttavia a causa del layout basato su tabella che è stato pesantemente utilizzato per molti anni, la maggior parte degli sviluppatori non li ha utilizzati nel modo semantico. Ciò ha portato a una rete che ha sacrificato la struttura logica per il layout.

Ordinato e liste non ordinate, paragrafi, tag di intestazione h1-h6 sono tutti elementi semantici che hanno preceduto HTML5.

Elementi non semantici

Gli elementi non semantici non hanno alcun significato speciale, le relazioni gerarchiche tra loro sono semplicemente illusorie. Gli esempi più utilizzati di tag HTML non semantici sono i

e il tag.

Se il tuo sito ha mai catturato l'orribile malattia di divitis, sai di cosa sto parlando. Sì. Le div non sono necessariamente sbagliate, ma divitis deve essere combattuto se vogliamo scrivere codice HTML manutenibile, modulare e significativo.

Smashing Magazine spiega magnificamente qual è il vero problema con l'uso eccessivo e irragionevole di

etichetta. L'essenza è che se noi includere un div all'interno di un div, sembra come se il div esterno sarebbe l'elemento genitore di quello interno, mentre In realtà, questo non è il caso.

Non c'è alcuna relazione tra i due, proprio come nel caso del tag che funziona allo stesso modo, solo sul livello inline.

Non farti prendere dal panico se ti senti ancora attaccato

-s e -s però, come non devi eliminarli completamente. Sono ancora la scelta migliore per raggruppare i contenuti esclusivamente a fini di stile e in altri casi di ultima istanza.

Semantica del testo in HTML5

HTML5 ha introdotto molti nuovi elementi semantici che rendono possibile la facile organizzazione dei contenuti. Non solo aiutano a organizzare i contenuti a livello dell'intero documento (vedi in dettaglio nella prossima sezione), ma anche all'interno di blocchi di testo, come i tag in linea.

Probabilmente i più comuni sono i tag semantici a livello di testo e , ma esistevano anche prima di HTML5. Tra i nuovi elementi semantici in linea possiamo trovare ad esempio il , tag per date-tempi leggibili dall'uomo, e per testo evidenziato.

Vedi questo elenco per tutti gli elementi semantici a livello di testo che sono attualmente in uso.

Struttura del documento in HTML5

La struttura del documento è la struttura di un documento HTML. Mostra come gli elementi sono correlati l'uno con l'altro. La struttura del documento è stata generata esclusivamente dagli elementi di mappatura, come intestazioni, titoli di tabelle, titoli di moduli e altri nelle versioni precedenti di HTML come HTML4.01 e XHTML.

In HTML5 l'algoritmo delineato è stato migliorato da nuovi elementi di sezione, vale a dire:

per sezioni raggruppate attorno a un tema specifico
per composizioni complete o autocontenute come un post sul blog o un widget
per blocchi di navigazione
per contenuto complementare come barre laterali.

C'è un quinto elemento di sezione in HTML5, ma non è nuovo, è il etichetta. Il

e anche i tag sono nuovi, ma non generano nuove sezioni in un documento, ma dividono il contenuto all'interno delle sezioni. Ciò significa che ogni elemento di sezionamento (corpo, articolo, sezione, nav e a parte) può avere la propria intestazione e il piè di pagina.

Suggerimenti per contenuti semanticamente strutturati

Se vogliamo creare una struttura del documento ben strutturata, dobbiamo prestare attenzione alle seguenti regole:

1. L'elemento di sezione più esterno è sempre il etichetta.

2. Le sezioni in HTML5 possono essere nidificate.

3. Ogni sezione ha una propria gerarchia di intestazioni. Ognuno di essi (anche la sezione nidificata più interna) può avere un h1 etichetta.

4. Mentre il contorno del documento è principalmente definito dai 5 elementi di sezione, ha anche bisogno di intestazioni appropriate per ogni sezione.

5. È sempre il primo elemento di intestazione (lascia che sia h1 o un tag di intestazione di livello inferiore) che definisce l'intestazione della sezione specificata. I seguenti tag di titolo all'interno della stessa sezione devono essere relativi a questo. (Se la prima intestazione è una h3 all'interno di un elemento di sezione, non aggiungere un h3 dopo).

6. Le sezioni definite dal

, e il i tag non appartengono al profilo principale del documento HTML, di solito non sono resi inizialmente dalle tecnologie assistive.

7. Ogni sezione (corpo, sezione, articolo, a parte, nav) può avere il proprio

e tag, che definisce l'intestazione (come logo, nome dell'autore, date, meta informazioni, ecc.) e il piè di pagina (copyright, note, link, ecc.) di quella sezione.

Esempio: una struttura semantica

Vediamo un esempio per una struttura semantica del documento per vedere più chiaramente come funziona. Il nostro codice di esempio risulterà nella seguente struttura del documento:

Ed ecco il codice con il corretto sezionamento semantico:

   Benvenuto sul nostro sito web!
 Ecco il nostro logo e lo slogan.
 
   Scegli il tuo interesse
 
  Menu 1
 Menu 2
 Menu 3
 
 
   Titolo dell'articolo
 Sottotitolo dell'articolo
 
  Prima parte logica (ad esempio "Teoria")
 Paragrafo 1 nella prima sezione
 Alcuni altri sottotitoli nella prima sezione
 Paragrafo 2 nella prima sezione
 
  Seconda parte logica (ad esempio "Esercizio")
 Paragrafo 1 nella seconda sezione
 Paragrafo 2 nella seconda sezione
 
  Autore Bio
 Paragrafo al piè di pagina dell'articolo
 
 
  Conosci meglio noi
  Post popolari
 ... 
 
  Partner
 ... 
 
  Testimonianze
 ... 
 
 
   Diritto d'autore
 Link ai social media

Se dai un'occhiata al frammento di codice sopra, vedrai che le intestazioni e i piè di pagina sono opzionali, possiamo scegliere liberamente se vogliamo usarli o meno, ma è consigliamo vivamente di includere sempre un'intestazione per ogni sezione, altrimenti la sezione sarà “Senza titolo” nel contorno del documento.

Fortunatamente ci sono molti ottimi strumenti su Internet che ci permettono di controllare il contorno del documento, questa volta useremo lo strumento Outliner di html5.org.

Se inseriamo il nostro snippet di codice nel modulo fornito dal locatore, e facciamo clic su “Descrivi questo!” pulsante, vedremo il seguente risultato:

Questo è il descrizione del documento del nostro codice di esempio, questo è il modo in cui i motori di ricerca lo vedono e gli screen reader lo leggono ai loro utenti ipovedenti. È semantico, ben strutturato e non è brutto “Senza titolo” sezioni in esso.

Se vuoi vedere come appare una sezione senza titolo in Outliner, elimina alcuni tag di intestazione nel codice di esempio.

Altri aspetti della semantica del Web

Tag HTML semantici e contorni di documenti sono solo una piccola parte della semantica web. Il contenuto di una pagina Web può essere reso ancora più significativo con l'aiuto del protocollo di accessibilità WAI-ARIA e dei dati strutturati che possono essere utilizzati insieme al protocollo RDFa, ai microdati o al markup JSON-LD.

Un'animazione in SVIL (Scalable Vector Graphics)

Un'occhiata alla grafica vettoriale scalabile (SVG)

Un Look in Premium WordPress Plugin