html5 - semantica

Che cos’è la semantica? E perché è importante quando si costruisce una pagina web?Andiamo a vedere le risposte a queste importanti domande.

Semantica e HTML5

Partiamo dal concetto di semantica, la semantica è il ramo della linguistica che si occupa dello studio dello significato delle parole.

Ma cosa c’entra la semantica con l’HTML?  Nelle prime versioni di HTML non c’era una regola generale per nominare gli elementi ed ognuno usava i nomi che voleva, questo rendeva difficile per i motori di ricerca indicizzare correttamente il contenuto delle pagine. Indicizzare una pagina  significa capire esattamente a cosa corrisponde ogni singolo elemento tipo  una sezione o un titolo. HTML5 ha così introdotto una serie di elementi semantici per aiutare sia i motori di ricerca che gli sviluppatori,  è stato per così dire creato un linguaggio universale, dove ogni sviluppatore viene portato ad usare gli stessi nomi per gli stessi elementi, non è obbligatorio, ma è buona pratica imparare questi concetti e di conseguenza usarli.

I l fatto di avere un struttura da seguire comporta diversi vantaggi:

  • Gli elementi semantici aiutano i crawlers  dei motori di ricerca a capire a cosa corrispondono gli elementi che compongono una pagina web. I crawlers detti anche spiders sono dei robot che lavorano nei motori di ricerca e sfogliano continuamente pagine web per capirne il contenuto e per poi poter offrire il miglior risultato all’utente quando fa una ricerca.
  • E’ molto importante per la web accessibility  in quanto semplifica la navigazione tra le pagine per le tecnologie assistive come gli screen readers.
  •  I motori di ricerca tengono in considerazione come una pagina viene strutturata, avere una buona struttura aumenta la qualità della pagina  e di conseguenza la SEO, così  si ottiene più visibilità nelle ricerche degli utenti.
  • Il sito diventa più facile da mantenere, se tutti usiamo un sistema universale per strutturare le pagine web quando avremo a che fare con il codice di altri sviluppatori incontreremo meno difficoltà a capirne la struttura.

Gli elementi semantici

In questo articolo vedremo solo alcuni elementi semantici, ovvero quelli che si usano più spesso, la lista sarebbe molto più lunga perché ci sono elementi semantici dedicati per ogni sezione. Ci sono elementi dedicati alle liste, al testo, alle immagini ai file multimediali, e via dicendo.

HTML5 Semantic Element

Tutti gli elementi semantici si trovano all’interno del tag body, nell’immagine il body è la cornice in nero. Gli elementi semantici principali sono:

  • Header: quando viene messo come primo elemento all’interno dell’elemento body è la parte più in alto della pagina, la parte che solitamente contiene il logo, il nome del sito web, la barra di navigazione e volendo altri elementi come link alle pagine social media. Se dovessimo paragonare l’elemento header  ad un quotidiano sarebbe la testata.
  • Nav: l’elemento <nav> fa riferimento alla barra di navigazione, un insieme di link che guidano l’utente nelle principali sezioni del sito web. La maggior parte delle volte questo elemento è posizionato all’interno dell’header.
  • Main: l’elemento <main> racchiude la parte principale della pagina, qui  inseriamo tutti gli elementi che svolgono il ruolo primario. Logo, informazioni sul copyright, collegamenti etc. non dovrebbero esser inclusi nell’elemento main.
  • Section: l’elemento <section> rappresenta una sezione indipendente della pagina che contiene a sua volta altri elementi. Di solito è preceduto da un heading  che descrive il contenuto della sezione.
  • P: l’elemento <p> fa riferimento ad un paragrafo nel testo.
  • Article:  anche l’elemento <article> come <section> è una parte  di contenuto autonomo, la differenza sta nel fatto che <article> non si usa solo per far riferimento al contenuto principale, ma si può utilizzare anche per contenuti secondari. Può essere usato per un post su un forum, un articolo di giornale, per dei widget o la scheda di un prodotto. L’header  può anche essere messo all’interno di altri elementi, come <article>, in questo caso diventa l’informazione più importante.
  • Figure:  l’elemento <figure> si utilizza per inserire immagini con la didascalia. All’interno del tag <figure> inseriremo il tag <img> per l’immagine e il tag <figcaption> per la didascalia.
  • Aside: <aside> rappresenta la parte di pagina indirettamente correlata al contenuto principale: è la parte dove inseriamo informazioni aggiuntive, un contenuto secondario che di solito viene messo a lato della pagina. In questo elemento si aggiungono le pubblicità, dei links o, se stiamo creando un post, informazioni riguardo l’autore.
  •  Footer: l’elemento <footer> è quello che troviamo sul fondo della pagina, contiene il copyright, link alla pagina della privacy policy, alla pagina dei termini d’uso, l’email, e via dicendo.

Quanto detto in forma di codice:

!DOCTYPE html>
<html>
  <head>
    <title>Elementi Semantici</title>
  </head>
  <body>
    <header>
        <h1>Logo</h1>
        <nav> 
          <ul>
            <li>Home</li>
            <li>Blog</li>
            <li>Contatti</li>
          </ul>
        </nav>
    </header>
      <main> 
        <section>
          <h1>Sezione</h1>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
            consequuntur saepe culpamolestiae delectus repudiandae quam dolores
            eum laudantium porro.
          </p>
          <article> 
            <h2>Articolo</h2>
            <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae
              laboriosam dolor, sapiente accusamus aut iure rerum asperiores
              repudiandae soluta amet incidunt totam quibusdam cum tenetur
              natus? Incidunt repudiandae aspernatur veniam?
            </p>
            <figure>
              <img src="scoiattolo.jpg" alt="scoiattolo su un tronco" /> 
              <figcaption>Scoiattolo su un tronco</figcaption> 
            </figure>
          </article>
        </section>
      </main>
      <aside>
        <p>Autore: <cite>Paolo Rossi</cite></p> 
      </aside>
    <footer> 
      <p>&copy 2021</p>
    </footer>
  </body>
</html>

La struttura non deve per forza essere in questo modo, possiamo togliere o aggiungere elementi, ad esempio possiamo mettere due article e togliere l’aside, fare due o tre sections, etc. La pagina viene strutturata di volta in volta in base alle esigenze.

Per questo tutorial è tutto, ricordati che per lavorare con il web ci vuole tanta pratica e che Everyday is a Learning day.


Guarda il video:

Scarica il file del video.

Articoli simili