Elementi Semantici in HTML5

7. Elementi Semantici in HTML5

Con HTML5 sono stati introdotti nuovi tag semantici, cioè elementi che descrivono chiaramente il loro significato sia al browser che agli sviluppatori.
Questi elementi aiutano:

• la leggibilità del codice

• l’accessibilità (screen reader, dispositivi assistivi)

• la SEO (motori di ricerca capiscono meglio il contenuto)

7.1 Perché usare elementi semantici

In passato si usava <div> per tutto, aggiungendo solo classi e ID.
Oggi invece possiamo usare tag più espliciti, per esempio:

<header> → intestazione
<nav> → menu di navigazione
<section> → sezione di contenuto
<article> → contenuto indipendente
<aside> → contenuto laterale
<footer> → piè di pagina

7.2 Principali elementi semantici di HTML5

<header>

• Contiene il titolo, il logo, o il menu iniziale della pagina o di una sezione.

<header>
    <h1>Il mio Blog</h1>
    <nav>
        <a href="#">Home</a> | 
        <a href="#">Articoli</a> | 
        <a href="#">Contatti</a>
    </nav>
</header>

<nav>

• Contiene i link di navigazione principali.

• Può stare dentro <header> o altrove.

<section>

• Raggruppa contenuti correlati.

<section>
    <h2>Ultime Notizie</h2>
    <p>Oggi è uscito HTML6... (non è vero 😄)</p>
</section>

<article>

• Contenuto autonomo (post di blog, articolo di giornale).

<article>
    <h2>Come fare un sito web</h2>
    <p>Passo 1: Impara HTML...</p>
</article>

<aside>

• Contenuto secondario (pubblicità, link correlati, sidebar).

<aside>
    <h3>Articoli correlati</h3>
    <ul>
        <li><a href="#">CSS per principianti</a></li>
    </ul>
</aside>

<footer>

• Piè di pagina con copyright, contatti o link.

<footer>
    <p>&copy; 2025 Il mio sito</p>
</footer>

English version

7. Semantic elements in HTML5

With HTML5, new semantic tags have been introduced, that is, elements that clearly describe their meaning both to the browser and developers.

These elements help:

• the readability of the code
• Accessibility (Screen Reader, Assistant Devices)
• SEO (search engines better understand the content)

7.1 Why use semantic elements

In the past it was used <divs for everything, adding only classes and id.

Today, however, we can use more explicit tags, for example:

<Header> → header

<nav> → navigation menu

<section> → content section

<Article> → Independent content

<Aside> → lateral content

<Footer> → Piecer

7.2 Main semantic elements of HTML5

<Header>

Contains the title, logo, or the initial menu of the page or a section.

<Header> 

<H1> My blog </ h1> 

<nav> 

<a href = "#"> home </a> | 

<a href = "#"> articles </a> | 

<a href = "#"> contacts </a> 

</ nav>

</ Header>

<nav>

Contains the main navigation links.

It can stay inside <Header> or elsewhere.

<section>

Group related content.

<section> 

<H2> Latest news </ h2> 

<p> HTML6 came out today ... (it's not true 😄) </p>

</ka>

<Article>

Autonomous content (blog post, newspaper article).

<Article> 

<H2> How to make a website </ h2> 

<p> Pass 1: Learn HTML ... </p>

</articles>

<Aside>

Secondary content (advertising, related links, sidebar).

<Aside> 

<H3> Related articles </ h3> 

<ul> 

<li> <a Href = "#"> css for beginners </a> </li> 

</ul>

</side>

<Footer>

Place of page with copyright, contacts or links.

<Footer> 

<p> & Copy; 2025 My site </p>

</ Footer>

Puoi seguire anche il mio canale YouTube https://www.youtube.com/channel/UCoOgys_fRjBrHmx2psNALow/ con tanti video interessanti

I consigli che offriamo sono di natura generale. Non sono consigli legali o professionali. Quello che può funzionare per una persona potrebbe non essere adatto a un’altra, e dipende da molte variabili.
Per supportare e far crescere il canale in modo semplice, rapido e gratuito, potete fare acquisti su amazon usando il mio link di affiliazione.
Questo implica che io prenda una commissione ogni volta che qualcuno faccia un qualsiasi acquisto utilizzando il mio link di affiliazione https://amzn.to/4cgJ3Ls