Paradiso Per Designer E Sviluppatori

Un'occhiata alla giusta semantica HTML5

Se pianifichi attentamente la struttura dei tuoi documenti HTML, puoi 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 senza senso.

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 è lo 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 i ruoli degli elementi al suo interno . Se vogliamo creare una semantica corretta, dobbiamo comprendere a fondo la struttura dei nostri contenuti e le capacità delle tecnologie di frontend.

Quindi quali sono i benefici tangibili? Semantica corretta significa un contenuto più ricercabile che porta ad un miglior posizionamento nei motori di ricerca . Aumentiamo anche l'accessibilità, in quanto le 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 pagine 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.

Ciò significa principalmente che 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 erano consapevoli del fatto che alcuni dei tag utilizzati 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ì).

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 era molto usato per molti anni, la maggior parte degli sviluppatori non li utilizzava modo semantico. Ciò ha portato a una rete che ha sacrificato la struttura logica per il layout .

Elenchi ordinati e non ordinati, paragrafi, i tag di intestazione h1-h6 sono tutti elementi semantici che hanno preceduto l'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 della divitis, sai di cosa sto parlando. Sì. Le div non sono necessariamente sbagliate, ma la divitis deve essere combattuta 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 includiamo un div all'interno di un div, appare come se il div esterno fosse l'elemento genitore di quello interno, mentre in realtà non è questo il caso .

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

Non farti prendere dal panico se ti senti ancora attaccato

-s e -s però, dato che non è necessario 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 una 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 tag in linea.

Probabilmente i tag semantici a livello di testo più popolari sono e , ma esistevano anche prima di HTML5. Tra i nuovi elementi semantici in linea possiamo trovare ad esempio il , etichetta per i tempi di data 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 dalla mappatura di elementi 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 autonome come un post sul blog o un widget
per i blocchi di navigazione
per contenuti complementari 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 sezione (corpo, articolo, sezione, nav e 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 titolo. Ciascuno di essi (anche la sezione nidificata più interna) può avere un tag h1 .

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 es. "Teoria") 
Paragrafo 1 nella prima sezione
Alcuni altri sottotitoli nella prima sezione 
Paragrafo 2 nella prima sezione
Seconda parte logica (ad es. "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 è vivamente consigliato includere sempre un'intestazione per ogni sezione, altrimenti la la sezione sarà "Senza titolo" nella struttura 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 sul pulsante "Struttura questo!", Vedremo il seguente risultato:

Questo è lo schema 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 contiene nessuna sezione "senza titolo".

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.

Icone realistiche di app per iOS per la tua ispirazione

Generalmente, quando guardiamo i progetti di icone per le app iOS, non prestiamo molta attenzione a questo, soprattutto dopo che ci siamo abituati a guardarlo quotidianamente. Tuttavia, come tutte le cose coinvolte nel design, ci sono molti dettagli e considerazioni che devono essere prese quando si progettano queste icone

(Consigli tecnici e di design)

Dovresti lavorare per te?

Dopo aver lavorato per un periodo di tempo compreso tra 9 e 5, è naturale pensare di smettere e iniziare da soli. La maggior parte di noi la sogna solo, preferendo lo stipendio mensile e le ferie piuttosto che gli interminabili orari di lavoro e rischi che gli imprenditori dovranno prendere .Tuttavia, se trovi che è tempo per te di fare una mossa nella tua attività, prenditi 5 minuti per guardare questa infografica per aiutarti a decidere se quella mossa è una buona idea . Ti

(Consigli tecnici e di design)

Articoli Interessanti

Fotografia di matrimonio: 20 migliori fotografi e i loro capolavori

Crea grafica dall'aspetto professionale in modo facile con Canva

Google Music: 7 cose che dovresti sapere

Come assumere e costruire una squadra formidabile