Tag semantici

I tag semantici sono stati introdotti con l’HTML 5. Questo perché l’HTML si è evoluto sulla base del web semantico. I tag semantici come abbiamo già detto sono importanti per la SEO.

Analizziamo innanzitutto quali vantaggi ci sono nell’utilizzarli:

Innanzitutto la leggibilità del codice da parte dei motori di ricerca. I tag semantici hanno lo scopo di specificare ai motori di ricerca di cosa si sta parlando;

Miglioramento della leggibilità del codice durante la fase di progettazione, da parte del web-master;

Miglioramento della struttura della pagina web stessa, sia in fase di creazione che in fase di modifica.

Minore possibilità di fare errori nella struttura della pagina.


Vediamo quindi quali tag semantici si usano per strutturare una pagina web.

Elenchiamo alcuni tra i tag semantici più utilizzati

Il tag semantico header

Il tag <header>…</header> è utilizzato, come facilmente intuibile, per inserire all’interno elementi che si trovano in alto nella pagina web.

In genere fra i due tag si includono, il logo e/o una frase con i titoli h1, h2 e/o un’immagine, ecc…

Il tag semantico footer

Il tag <footer>…<footer> è utilizzato per inserire elementi in fondo alla pagina. Ad esempio si inserisce il copyright, l’autore del sito web, ecc…

Il tag semantico nav

Il tag <nav>…<nav> specifica che in quell’area ci sono gli strumenti di navigazione del sito, ovvero il menù. In sostanza in quell’area si collocano gli elementi del menù.

I tag semantici article

Il tag <article>…</article> è utilizzato per definire ad esempio un articolo di un blog o di una rivista. All’interno ci possono essere più sezioni.

I tag semantici section

Il tag section <section>…<section> è utilizzato ad esempio per specificare una sezione nella pagina web per un raggruppamento tematico degli articoli. Ad esempio un capitolo può essere suddiviso in più section.

Il tag semantico aside

Il tag <aside>…</aside> specifica gli elementi che sono nella barra laterale, cioè la sidebar.

Esempio di struttura con i tag semantici

Adesso sviluppiamo una struttura semplificata di un sito utilizzando i tag semantici. Consideriamo uno schema come questo:

tag semantici, web semantico

Il codice sarà dunque questo:

<!doctype html>
<html lang="it">
<head>
<title>Coding creativo, creare codice divertendosi</title>
</head>

<body>

<header>
</header>

<nav>
</nav>

<article>
<section>
</section>
</article>

<aside>
</aside>

<footer>
</footer>
</body>
</html>

Inserendo le varie parti si ottiene quindi questo codice:

<!DOCTYPE html>
<html lang="it">
<head><title>Coding Creativo</title>
</head>

<body>

<header>
<h1>Coding Creativo</h1>
<h2>Fare coding divertendosi</h2>
</header>

<nav>
<ul><li><a href="https://www.codingcreativo.it/scratch/">Scratch</a><li>  
<li><a href="https://www.codingcreativo.it/algobuild/">Algobuild</a></li> 
<li><a href="https://www.codingcreativo.it/siti-web/html/">HTML</a> 
</li> 
<li><a href="https://www.codingcreativo.it/linguaggio-c/">C</a></li>
</ul>
</nav>

<article>
<section>
<h2><a name="scratch">Scratch</a></h2>
<p>Scratch è un ambiente di programmazione gratuito ed è ideale per imparare il coding. 
<br>L'interfaccia grafica è molto intuitiva e semplice da usare.
<br>Sul sito <a href="https://www.codingcreativo.it">Coding Creativo</a> troverete tanti esempi ed esercizi su scratch.
...
</p>
</section>

<section>
<h2><a name="algobuild">Algobuild</a></h2>
<p>Algobuild è un programma molto utile per disegnare ed eseguire gli algoritmi.
<br>Con algobuild è possibile utilizzare il diagramma a blocchi.
<br>Sul sito 
<a href="https://www.codingcreativo.it">Coding Creativo</a> troverete tanti esempi ed esercizi realizzati con algobuild.</p>
</p>
</section>
</article>

<aside>
...
</aside>

<footer> 
<p>Creato da Coding creativo</p>
</footer>

</body></html>

A conclusione di quanto detto, cerchiamo di utilizzare questi tag per indirizzarci verso un web semantico.

Adesso diventa indispensabile affrontare div e i fogli di stile per rendere il sito web più gradevole.

Alcuni link utili:

Form in html

Tag strong

Collegamenti interni ad una pagina web

Collegamenti ipertestuali

Tag img e attributo alt per la SEO

Paragrafi in html

Tabelle in html

Elenchi in html

Tag dei titoli

Il linguaggio html

Come trovare immagini per il sito web

Quali colori scegliere per un sito web

Quali font scegliere per un sito web


Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *