Ciao a tutti! Oggi introduco un concetto molto importante, ovvero il concetto di semantica. Prima di tutto, dobbiamo sapere che la semantica è quel ramo della linguistica che studia il significato delle singole parole e dei testi nel loro insieme.

Con l’arrivo di HTML 5 sono stati introdotti nuovi tag, definiti appunto tag semantici. Tramite il loro utilizzo l’aspetto estetico delle pagine web non cambia di molto, ma permettono ai motori di ricerca (ad esempio Google) di capire in maniera ancora più precisa il tipo di testo che hanno di fronte: ad esempio se si tratta di un testo, di un titolo, di una data e così via. Pertanto la loro applicazione risulta essere molto importante per quanto riguarda il significato della struttura della pagina.

Vediamo ora in dettaglio i singoli tag semantici.


1

Da come potete vedere dall’esempio, la pagina è suddivisa dai tag semantici seguenti:

  1. Header
  2. Nav
  3. Article
  4. Section
  5. Aside
  6. Footer

HEADER

Il tag <header> si utilizza all’inizio della pagina e racchiude il logo e molte volte anche il menù di navigazione e il search.

NAV

All’interno dell’elemento <nav> è presente il menù principale del sito web. Il tag <nav> lo troviamo all’interno del tag header oppure subito sotto (come ho mostrato sopra). Tuttavia, a seconda della grafica possiamo trovare il menù a destra oppure a sinistra della pagina; dipende molto dalla scelta di noi web designer! 🙂

ARTICLE

Article è uno dei tag semantici più ricorrenti, infatti al suo interno troveremo il contenuto principale della pagina nella sua interezza: ovvero sarà costituito da un titolo, da un paragrafo, da immagini e anche dall’autore. Nel nostro esempio l’article è costituito dal titolo “Gli amici a quattro zampe” (con le diverse section “Gatti” “Cani” e “Cavie”).

SECTION

La section descrive più in dettaglio un topic inerente al tema generale dell’article (nel nostro caso tre sottocategorie di amici a quattro zampe).

ASIDE

L’aside è quella parte della pagina web che si trova solitamente a sinistra o a destra dell’article. All’interno saranno presenti contenuti secondari e indipendenti dal resto della pagina (solitamente viene utilizzata per inserire annunci pubblicitari, per visualizzare l’archivio degli articoli di un blog oppure per inserire commenti o note).

FOOTER

Infine, il footer chiude la struttura della pagina e può contenere i principali contatti e social network della’autore del sito (e molte volte anche le indicazioni in riferimento ai cookies).

Se utilizzerete questi tag semantici sarà molto più facile migliorare l’indicizzazione del vostro sito e quindi di aumentare il numero delle pagine visualizzati e dei visitatori.

Al prossimo articolo… e ricordatevi:

Practice makes perfect! 😉

 




Add Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.