Struttura del contenuto HTML: guida completa alla creazione di pagine solide

Casa » Python » Struttura del contenuto HTML: guida completa alla creazione di pagine solide

Imparare a strutturare i contenuti in HTML è la differenza tra una pagina che semplicemente "mostra qualcosa sullo schermo" e una pagina che è facile da navigare, accessibile e ottimizzata per i motori di ricerca. Quando il codice HTML è organizzato secondo una gerarchia chiara, i browser, i motori di ricerca e le tecnologie assistive comprendono immediatamente il significato di ogni sezione e come tutto si integra.

Invece di pensare all'HTML semplicemente come a un modo per inserire tag in una pagina, è meglio considerarlo come il progetto del documento. Con una struttura solida, definisci dove risiede il contenuto principale, come sono correlate le intestazioni, cos'è la navigazione, quali sono le informazioni secondarie e quali parti descrivono il documento stesso nell'intestazione. In questa guida approfondiremo la struttura dei contenuti in HTML: dallo scheletro globale di una pagina, alle intestazioni, alla semantica, all'accessibilità e ad alcuni modelli di layout concreti per pagine reali.

1. Lo scheletro globale di un documento HTML

Ogni documento HTML inizia con la stessa struttura di alto livello: doctype, html, head e body. Potrebbe sembrare un testo standard, ma ogni elemento gioca un ruolo fondamentale nel modo in cui il browser analizza e riproduce il contenuto e nel modo in cui i motori di ricerca interpretano la pagina.

La prima riga è la dichiarazione doctype, scritta come in HTML5. Questa istruzione non produce un output visibile; indica al browser di utilizzare la modalità standard anziché la modalità quirk, evitando comportamenti di rendering legacy che potrebbero compromettere completamente il layout o il CSS.

Subito dopo il doctype c'è l'elemento radice , che racchiude l'intero documento. Quasi tutto, sia i metadati del documento che la pagina visibile, risiede all'interno … . Qui è anche dove si dichiara la lingua umana del documento con l'attributo lang, ad esempio per l'inglese o per lo spagnolo dalla Spagna.

Dichiarare la lingua con lang è essenziale per l'accessibilità, la SEO e gli strumenti di traduzione. Gli screen reader lo usano per scegliere le regole di pronuncia corrette, i motori di ricerca e i traduttori automatici lo usano per comprendere la lingua principale e il CSS può persino indirizzare lo stile specifico della lingua utilizzando selettori come [lang|="fr"] o :lang(en).

All'interno dell'elemento html radice hai sempre due figli diretti: E . L'intestazione contiene tutti i metadati e le risorse necessarie per interpretare e presentare la pagina (codifica, titolo, CSS, icone, URL canonici, ecc.), mentre il corpo contiene il contenuto che gli utenti effettivamente vedono e con cui interagiscono nella finestra del browser.

2. Cosa appartiene al (e perché è importante)

La sezione principale è invisibile ai visitatori vedenti, ma è assolutamente fondamentale per il comportamento, le prestazioni e il posizionamento del tuo sito. Le informazioni che inserisci qui guidano i motori di ricerca, le piattaforme social, i browser e i dispositivi su come gestire e presentare la tua pagina.

Una delle prime cose dentro dovrebbe essere la dichiarazione di codifica dei caratteri utilizzando . UTF-8 è lo standard per HTML5, supporta praticamente tutti i caratteri e gli emoji e garantisce che titoli, testo, CSS e JavaScript vengano interpretati correttamente indipendentemente dalla lingua o dai simboli utilizzati.

Ogni pagina deve anche definire un'identità univoca e descrittiva elemento. Il contenuto all'interno … Appare nella scheda del browser, nei segnalibri, nella cronologia e, soprattutto, come titolo principale cliccabile nelle pagine dei risultati dei motori di ricerca, a meno che non venga sovrascritto da meta tag specifici. Dal punto di vista SEO, questo è uno dei testi di maggior valore del documento.

Un altro meta elemento quasi obbligatorio nei layout moderni è la dichiarazione viewport. Utilizzando si indica ai browser mobili di adattare il layout alla larghezza del dispositivo anziché ridurre il design del desktop a uno schermo minuscolo, il che è fondamentale per un design reattivo e per superare i controlli di base sull'accessibilità e sui dispositivi mobili.

Oltre a charset, title e viewport, la sezione head è dove si definiscono la maggior parte dei metadati, degli stili e dei collegamenti chiave. Ciò include meta descrizioni orientate alla SEO, file CSS, icone del sito, versioni in altre lingue, URL canonici, manifest web, preconnessioni e molto altro. Tutti questi elementi contribuiscono indirettamente al modo in cui la struttura dei tuoi contenuti viene percepita e all'usabilità del tuo sito.

Metadati essenziali e risorse strutturali

CSS è normalmente connesso all'interno usando . I fogli di stile esterni mantengono la presentazione separata dalla struttura, possono essere memorizzati nella cache su più pagine per migliorare le prestazioni e aiutano a mantenere un'unica fonte di verità per il tuo sistema di progettazione.

Puoi anche includere CSS in un block within , or even import additional stylesheets from there. Ad esempio, gli sviluppatori a volte utilizzano @import all'interno di un tag di stile per posizionare un foglio di stile in uno specifico livello a cascata o dichiarare proprietà CSS personalizzate (variabili) a livello :root prima di farvi riferimento in tutto il sito.

IL L'elemento ha scopi più ampi rispetto ai semplici fogli di stile. Modificando l'attributo rel puoi puntare a un favicon con rel=”icon”, definire versioni di lingue alternative con rel=”alternate” e hreflang, specificare un URL canonico con rel=”canonical” o fare riferimento ai manifest dell'app e ad altre relazioni che i browser e i crawler dovrebbero conoscere.

Definizione delle icone con garantisce che il tuo marchio sia riconoscibile nella scheda del browser e nei segnalibri. È possibile specificare dimensioni o tipi diversi (ad esempio PNG o SVG) e persino fornire icone speciali per piattaforme come iOS con rel="apple-touch-icon" o icone maschera per le schede bloccate in Safari.

I link alternativi sono essenziali per le configurazioni multilingue o di distribuzione dei contenuti. Quando usi Ad esempio, stai comunicando ai motori di ricerca che esiste una versione francese della stessa pagina e a quale combinazione lingua/regione si rivolge. Allo stesso modo, i link alternativi possono puntare a feed RSS o varianti PDF se specifichi un tipo appropriato.

URL canonici, script e quelli raramente utilizzati

I link canonici con rel=”canonical” aiutano a risolvere le situazioni di contenuto duplicato indicando quale URL è la fonte autorevole. Se lo stesso articolo esiste su più percorsi o è pubblicato su altri domini, l'URL canonico consolida i segnali di ranking ed evita che il motore di ricerca debba indovinare quale versione indicizzare.

JavaScript è allegato utilizzando il element, which can either embed inline code or reference an external file through the src attribute. Poiché JavaScript blocca il rendering per impostazione predefinita, molti sviluppatori inseriscono i tag script alla fine del corpo o utilizzano gli attributi defer o async in modo che il contenuto HTML possa essere visualizzato prima dell'esecuzione degli script.

L'attributo defer indica al browser di scaricare lo script senza bloccare il rendering e di eseguirlo dopo che l'HTML è stato completamente analizzato. Al contrario, async evita anche il blocco durante il download, ma esegue lo script non appena è pronto, interrompendo potenzialmente il flusso di analisi, il che può rappresentare un problema quando lo script dipende da elementi DOM definiti in seguito nel documento.

IL L'elemento , che appare solo nell'intestazione, definisce un URL di base e una destinazione predefinita per tutti i link relativi. Impostando in pratica comunichi al browser che ogni URL relativo sulla pagina deve essere risolto da quella radice e, facoltativamente, aperto in un contesto di navigazione specifico, come una nuova finestra o il frame di primo livello.

Sebbene può essere potente, ma ha effetti collaterali, soprattutto per gli ancoraggi nella pagina e i percorsi delle risorse relative. È consentito un solo elemento base per documento, che deve comparire prima di qualsiasi URL relativo e trasforma semplici ancore in richieste URL complete con frammenti allegati all'href di base.

3. Il livello di contenuto visibile: e layout semantico

Tutto ciò che gli utenti vedono e con cui interagiscono vive all'interno dell' elemento. Qui puoi strutturare il tuo contenuto con elementi semantici che descrivono il ruolo di ogni parte della pagina: navigazione, contenuto principale, articoli, barre laterali, piè di pagina e altro ancora.

HTML5 ha introdotto un set di elementi di layout semantici che hanno sostituito quelli generici contenitori in molte situazioni. Elementi come , , , , , E descrivere il significato anziché il semplice aspetto, il che aiuta le tecnologie assistive e i motori di ricerca a creare una mappa mentale della tua pagina.

in genere contiene contenuti introduttivi o di navigazione per la pagina o per una sezione specifica. Questo potrebbe includere un logo, un titolo del sito, un menu principale o un'intestazione principale. È possibile avere un'intestazione a livello di pagina nella parte superiore del corpo e intestazioni aggiuntive all'interno di sezioni o articoli quando sono necessarie delle sottointroduzioni.

è dedicato ai blocchi di navigazione e viene solitamente utilizzato per i menu principali o per gruppi di link importanti. È possibile posizionare la navigazione principale all'interno di un'intestazione, ma nav può apparire anche altrove, ad esempio in una barra laterale o in un piè di pagina, purché venga utilizzata per la navigazione e non per raccolte generiche di link non correlati.

contrassegna il contenuto univoco e centrale della pagina e dovrebbe apparire solo una volta per documento. All'interno della sezione principale, in genere organizzerai i tuoi contenuti utilizzando per blocchi tematici, per pezzi indipendenti come post di blog o notizie, e per informazioni correlate ma secondarie come note a margine, pubblicità o navigazione complementare.

Sezioni, articoli, digressioni e piè di pagina

rappresenta un blocco di contenuto tematicamente distinto, solitamente con una propria intestazione. Potrebbe trattarsi di un capitolo di un lungo articolo, di un blocco "Caratteristiche" su una pagina prodotto o di una parte della home page, come "Testimonianze" o "Prezzi". Le sezioni aiutano a suddividere i documenti complessi in blocchi logici.

viene utilizzato per contenuti autonomi che possono essere considerati indipendenti al di fuori del contesto circostante. Tra gli esempi figurano post di blog, voci di documentazione, commenti degli utenti, articoli di notizie o messaggi del forum. Un articolo spesso include una propria intestazione (con titolo, autore e data) e un piè di pagina (con tag, link di condivisione o metadati).

è riservato ai contenuti tangenzialmente correlati al flusso principale, come barre laterali, citazioni, link correlati o blocchi pubblicitari. Poiché il suo scopo è supplementare, gli screen reader e altri strumenti possono gestirlo di conseguenza e gli utenti possono distinguere più facilmente la narrazione principale dagli extra secondari.

appare alla fine di una sezione o in fondo all'intera pagina. Un piè di pagina a livello di pagina contiene solitamente note di copyright, informazioni di contatto, navigazione secondaria, link legali o crediti del sito, mentre un piè di pagina a livello di articolo potrebbe contenere biografie degli autori, categorie, date di aggiornamento o post correlati.

La flessibilità di questi elementi significa che puoi combinarli e annidarli per adattarli al tuo design, ma attenendosi al loro significato originale, il tuo HTML rimane portabile e comprensibile. Ad esempio, puoi legittimamente posizionare nav all'interno dell'intestazione o in un'altra parte del corpo, ma non dovresti usare nav per serie casuali di link che non fanno parte della navigazione, né usare main più volte per pagina.

4. Gerarchia dei titoli e struttura testuale

I titoli sono la spina dorsale della struttura dei contenuti e definiscono la gerarchia degli argomenti e dei sottoargomenti in tutto il documento. L'HTML fornisce sei livelli di intestazione, da (il più importante) fino a (meno importante) e il modo in cui li organizzi influisce sia sui lettori umani sia sui motori di ricerca.

Di solito c'è un singolo che esprime l'argomento principale della pagina, seguito da per le sezioni primarie e - per sottosezioni più approfondite. Quando due intestazioni condividono lo stesso livello, rappresentano sezioni gemelle, mentre un'intestazione di livello inferiore introduce una sottosezione annidata all'interno di quella precedente di livello superiore.

I paragrafi e gli altri contenuti che seguono un titolo appartengono alla sezione definita da quel titolo. Quando compare un nuovo titolo dello stesso livello, la sezione precedente viene considerata chiusa e ne inizia una nuova. Questa struttura implicita è quella che le tecnologie assistive utilizzano per creare una struttura che gli utenti possono consultare rapidamente.

Saltare i livelli in modo arbitrario, ad esempio passando direttamente da h1 a h4, può confondere sia gli strumenti automatizzati sia i lettori. La raccomandazione generale è di procedere passo dopo passo nella gerarchia: da h1 a h2 per le sottosezioni, poi facoltativamente a h3 e così via, scendendo solo di un livello alla volta quando si annidano contenuti più in profondità.

Solitamente i browser applicano stili predefiniti ai titoli: dimensioni dei caratteri più grandi, grassetto e spaziatura verticale maggiore. Questi stili integrati rendono già la struttura visivamente evidente, ma è possibile perfezionare la presentazione con CSS mantenendo intatta la gerarchia semantica sottostante.

Paragrafi, elenchi e semantica in linea

Il contenuto del testo normale va in elementi, ognuno dei quali rappresenta un paragrafo separato. Mantenere un'idea principale per paragrafo migliora la leggibilità e si allinea al modo in cui le tecnologie assistive consentono agli utenti di navigare tra blocchi di testo.

Elenchi ordinati ( ) e liste non ordinate ( ) con Gli elementi sono ideali per raggruppare informazioni quali passaggi, funzionalità o FAQ. Gli elenchi ordinati trasmettono una sequenza o una priorità, mentre gli elenchi non ordinati raggruppano semplicemente elementi correlati senza implicare un ordine; entrambi sono estremamente utili per strutturare spiegazioni complesse.

Elementi in linea come , , e altri arricchiscono il contenuto senza interrompere il flusso di un paragrafo. comunica una forte importanza (e di solito appare in grassetto), enfatizza il testo (spesso in corsivo) e crea collegamenti ipertestuali che collegano i documenti nel tuo sito o a risorse esterne.

Immagini con sono considerati elementi sostituiti e non racchiudono il contenuto, ma partecipano comunque alla struttura semantica attraverso attributi come alt. L'attributo alt è particolarmente importante per l'accessibilità e la SEO, poiché descrive l'immagine agli utenti che non possono vederla e ai motori di ricerca che analizzano solo il testo.

Combinando in modo ponderato elementi a livello di blocco e in linea è possibile esprimere gerarchia, relazioni ed enfasi esclusivamente tramite HTML, lasciando i dettagli visivi come colori, caratteri e spaziatura al CSS. Questa separazione delle preoccupazioni mantiene il markup pulito e semplifica le modifiche di progettazione in seguito.

5. Accessibilità e linguaggio nella struttura dei contenuti

Un documento HTML ben strutturato non ha solo un aspetto ordinato: è un prerequisito per l'accessibilità. Le persone che utilizzano lettori di schermo, navigazione tramite tastiera o altre tecnologie assistive dipendono dalla semantica HTML per comprendere e muoversi in modo efficiente tra i contenuti.

Dichiarare la lingua del documento con lang su L'elemento è uno dei primi passi verso l'accessibilità. Quando la lingua è esplicita, gli screen reader selezionano la pronuncia e i dizionari corretti, mentre gli strumenti di traduzione automatica gestiscono i contenuti in modo più accurato in tutte le regioni e i dialetti.

È anche possibile contrassegnare le modifiche linguistiche all'interno del corpo utilizzando lang su elementi come o . Quando un frammento passa a una lingua diversa, impostando lang=”fr-CA” o lang=”pt-BR” su quel frammento si segnala agli strumenti di assistenza che le regole di pronuncia e lettura dovrebbero cambiare solo per quella parte.

Oltre al linguaggio, i titoli, i punti di riferimento e il testo alternativo costituiscono il nucleo della struttura accessibile. Una chiara gerarchia delle intestazioni, l'uso corretto di principale, navigazione, intestazione, piè di pagina, sezione e a parte, oltre ad attributi alt significativi sulle immagini, consentono alle tecnologie assistive di creare una struttura e fornire una navigazione di riferimento come "vai al contenuto principale" o "vai alla navigazione".

Il colore e lo stile visivo non dovrebbero mai essere l'unico modo per trasmettere informazioni importanti. Contrasto elevato, dimensioni dei caratteri leggibili, stati di messa a fuoco per gli elementi interattivi e testi di collegamento descrittivi come "Scopri di più sulla prevenzione degli incendi" invece di "Clicca qui" sono tutti elementi che contribuiscono a rendere i tuoi contenuti strutturati utilizzabili dal maggior numero possibile di persone.

La convalida del codice HTML e l'esecuzione di controlli di accessibilità tramite strumenti automatizzati e test manuali aiutano a individuare tempestivamente eventuali problemi strutturali. Gli strumenti possono rilevare attributi alt mancanti, annidamenti non validi, sequenze di intestazioni interrotte o un utilizzo errato dei punti di riferimento, tutti fattori che possono essere corretti direttamente nel markup prima che abbiano un impatto sugli utenti reali.

6. Pianificazione della struttura dei contenuti di un sito web

Prima di scrivere un singolo tag, è utile pianificare la struttura logica del sito e delle pagine. Pensare in termini di sezioni, priorità delle informazioni e flussi di navigazione porta a un HTML più facile da gestire, espandere e ottimizzare per i motori di ricerca.

Un punto di partenza comune è quello di abbozzare una mappa del sito o un diagramma strutturale del sito web. Solitamente include pagine di primo livello come Home, Informazioni, Servizi, Blog, Contatti e quindi eventuali sottopagine o categorie che si diramano da queste, mostrando come gli utenti navigheranno tra di esse.

All'interno di una singola pagina puoi mappare la tua futura struttura HTML come una serie di blocchi semantici. Ad esempio, potresti definire un'intestazione con un logo e una barra di navigazione, un'area principale con diverse sezioni (eroe, funzionalità, testimonianze, prezzi), una digressione per i contenuti secondari e un piè di pagina contenente informazioni di contatto e link legali.

Assegnare intestazioni a questi blocchi fin dall'inizio mantiene coerente la gerarchia h1-h6. Decidi in anticipo quale sarà il singolo h1, quali sezioni meritano titoli h2 e dove sono necessari sottotitoli più approfonditi come h3 o h4 per spiegare argomenti complessi senza sopraffare il lettore.

Da una prospettiva SEO e UX, è intelligente posizionare i contenuti chiave e le sezioni importanti all'inizio del DOM. In genere i motori di ricerca prestano maggiore attenzione al contenuto nella parte superiore del documento e gli utenti apprezzano la possibilità di trovare rapidamente le informazioni principali anziché dover scorrere oltre lunghe introduzioni o elementi decorativi.

Le migliori pratiche per strutture HTML manutenibili

Quando necessario, utilizzare nomi di classe e ID descrittivi per etichettare gli elementi strutturali, ma evitare di annidare eccessivamente i div. Classi come .main-nav, .site-header o .sidebar ti dicono a colpo d'occhio cosa fa un componente, rendendo il tuo codice HTML e CSS molto più facili da leggere mesi dopo.

Mantieni il tuo HTML il più semplice possibile, pur continuando a esprimere una gerarchia autentica. I contenitori profondamente annidati che esistono solo per lo stile possono spesso essere sostituiti da CSS più ponderati, ottenendo un markup più pulito e leggero, con cui è più facile lavorare per tutti.

Raggruppa i contenuti correlati all'interno di elementi semantici anziché disperderli nella pagina. Ad esempio, un post di un blog dovrebbe essere inserito all'interno di un articolo, con titolo, data, autore e contenuto insieme, mentre i post correlati o la biografia dell'autore possono essere inseriti in un riquadro o nel piè di pagina di un articolo, chiaramente separati dalla narrazione principale.

Rivedi la tua struttura ogni volta che estendi una pagina o riprogetti una sezione. È facile che i documenti HTML accumulino nel tempo wrapper monouso ed elementi ad hoc, quindi riorganizzarli periodicamente in una forma semantica coerente si rivela vantaggioso in termini di manutenibilità, prestazioni e accessibilità.

Documentare i propri modelli strutturali, ad esempio il modo in cui si creano intestazioni, sezioni, articoli e piè di pagina, aiuta a mantenere la coerenza nei team di grandi dimensioni. Una piccola linea guida interna che spiega quali elementi utilizzare per la navigazione, come organizzare le intestazioni e come contrassegnare i componenti ripetuti può impedire che la tua base di codice si trasformi in un patchwork strutturale.

7. Modelli di struttura pratici per tipi di pagina comuni

Diversi tipi di pagine tendono a condividere modelli strutturali che è possibile riutilizzare e adattare in diversi progetti. Riconoscere questi modelli ti aiuterà a progettare strutture di contenuto che risultino naturali per gli utenti e semplici da implementare in HTML.

Una homepage tipica potrebbe iniziare con un globale contenente un logo e primario . Questo è spesso seguito da un con più blocchi: una sezione principale con un h1 e un invito all'azione, una sezione dedicata alle funzionalità, magari una sezione per le testimonianze e una sezione finale che invita gli utenti a contattarci o a registrarsi.

Sotto il contenuto principale, un di solito fornisce informazioni globali e navigazione supplementare. Qui sono presenti link alle informative sulla privacy, ai termini di servizio, alle opzioni di contatto, ai social network e ai menu secondari, così da facilitarne la ricerca senza distrarre l'attenzione dal contenuto principale soprastante.

Una pagina di post di blog è un candidato perfetto per elemento. Di solito l'articolo contiene una propria intestazione con il titolo del post (spesso l'h1 della pagina), la data di pubblicazione e i dettagli dell'autore, seguito dal corpo del post, suddiviso in sezioni con intestazioni h2/h3 e, infine, un piè di pagina contenente tag, pulsanti di condivisione o link a contenuti correlati.

Le barre laterali o i pannelli secondari sono naturalmente rappresentati da elementi. Possono includere elenchi di post recenti, filtri di categoria, moduli di iscrizione alla newsletter o supporto contestuale. Poiché "aside" è semanticamente contrassegnato come contenuto complementare, le tecnologie assistive possono presentarlo come tale agli utenti.

Le pagine dei contatti e le pagine dei servizi riutilizzano gli stessi elementi costitutivi, ma enfatizzano la chiarezza e la facilità di interazione. Titoli chiari, paragrafi concisi, controlli del modulo correttamente etichettati e un ordine di lettura logico garantiscono che gli utenti possano trovare come contattarti o comprendere la tua offerta senza dover fare supposizioni.

8. Elementi HTML, attributi e il loro ruolo nella struttura

Alla base di tutti questi schemi, tutto in HTML si riduce a elementi, tag e attributi. Comprendere come interagiscono tra loro ti consente di avere un controllo preciso sulla struttura dei contenuti, sugli elementi di presentazione e sul comportamento.

Un elemento HTML è composto da un tag di apertura, attributi facoltativi, del contenuto e, nella maggior parte dei casi, un tag di chiusura. Per esempio, Questo è un paragrafo. include il tag di inizio , il nodo di testo e il tag di chiusura , che insieme rappresentano un elemento paragrafo.

Gli attributi compaiono all'interno del tag di apertura e forniscono informazioni aggiuntive sull'elemento. Si presentano come coppie nome=”valore”, come class=”highlight”, id=”intro” o href=”/contact”. Alcuni attributi sono globali e possono apparire su qualsiasi elemento (come class, id, lang), mentre altri sono specifici di determinati tag (come src per img o type per input).

Le classi sono particolarmente importanti per strutturare e definire lo stile di documenti di grandi dimensioni. Assegnando la stessa classe a più elementi, ad esempio class="important", puoi applicare regole CSS comuni o indirizzarle in JavaScript, mantenendo la struttura flessibile ma comunque gestibile.

Non tutti gli elementi necessitano di tag di chiusura; alcuni sono elementi vuoti (void) che non hanno contenuto. Elementi come , , E rientrano in questa categoria. Partecipano comunque alla tua struttura, ma solo attraverso i loro attributi, poiché non racchiudono alcun testo interno o elemento figlio.

Il World Wide Web Consortium (W3C) gestisce le specifiche che definiscono il modo in cui tutti questi elementi e attributi interagiscono. Rispettando questi standard, le tue pagine saranno interoperabili tra browser e dispositivi e la struttura dei tuoi contenuti, attentamente progettata, si comporterà in modo prevedibile per ogni visitatore.

Mettere in pratica tutto questo significa trattare l'HTML come la spina dorsale semantica del tuo sito: una struttura chiara del documento, un uso preciso delle intestazioni, un layout ponderato con principale, sezione, articolo, a parte e piè di pagina, metadati accessibili nell'intestazione e attributi significativi su ogni elemento rendono complessivamente i tuoi contenuti più facili da leggere, navigare e posizionare bene nei motori di ricerca.