# HTML Semantics — Best Practices Guida per costruire HTML semantico, accessibile e SEO-friendly. --- ## Document Structure ### Base Template ```html {Titolo pagina} | {Brand}
{Navigation}
{Contenuto principale}
``` --- ## Semantic Elements ### Header ```html
``` ### Main Content ```html

Headline principale

Subcopy di supporto

Call to Action

I Nostri Servizi

Dicono di Noi

"Testimonial text"

— Nome Cliente, Azienda

Domande Frequenti

Risposta alla domanda

Pronto a Iniziare?

Contattaci
``` ### Footer ```html ``` --- ## Heading Hierarchy ### Regole 1. **Un solo H1 per pagina** (di solito nella hero) 2. **Mai saltare livelli** (H2 → H3 → H4, non H2 → H4) 3. **Heading descrittivi** (non "Section 1", ma "I Nostri Servizi") 4. **Keyword rilevanti** (SEO-friendly ma naturale) ### Esempio Corretto ```html

Consulenza Marketing Digitale

I Nostri Servizi

SEO Optimization

...

Social Media Management

...

Perché Sceglierci

Esperienza Decennale

Team Certificato

``` --- ## Accessibility ### ARIA Labels ```html

Servizi

Team di 5 persone in ufficio ``` ### Focus States ```css /* Assicurati che tutti gli elementi focusabili abbiano visible focus */ a:focus, button:focus, input:focus, select:focus, textarea:focus { outline: 2px solid #005fcc; outline-offset: 2px; } /* Skip link per keyboard navigation */ .skip-link { position: absolute; top: -40px; left: 0; background: #005fcc; color: white; padding: 8px; z-index: 100; } .skip-link:focus { top: 0; } ``` ```html
...
...
``` --- ## Images ### Best Practices ```html Team di 5 persone sorridenti in ufficio moderno Hero image Descrizione ``` --- ## Forms ### Contact Form ```html

Inviando questo form accetti la nostra privacy policy.

``` --- ## SEO On-Page ### Meta Tags ```html {Keyword Primaria} | {Brand Name} ``` ### Structured Data (JSON-LD) ```html ``` --- ## Checklist Semantica - [ ] Un solo H1 per pagina - [ ] Heading hierarchy corretta (no salti) - [ ] Tag semantici usati (`
`, `
`, `