fatti trovare dai tuoi clienti
Corso SEO & HTML: #19 Tag Div
Che cos'è il tag div? che differenza c'è tra un elemento inline e un blocco? come sfruttare al massimo il tag div per essere in prima pagina su Google?
« Corso SEO & HTML: #18 Tag Footer
- Tag <div>, cos'è?
- Che differenza c'è tra un elemento inline e un blocco?
- Come sfruttare al massimo il tag div per trovare clienti?
In questa rubrica sulla SEO dedicata alla scrittura di codice HTML ti spiego con parole semplici quali sono i tag HTML fondamentali di ogni pagina web per farti capire come è fatto un sito web in modo da sfruttare al meglio le conoscenze sulla SEO ed essere in prima pagina su Google, senza farti necessariamente diventare un webmaster o un hacker!
Tag Div
Che utilità ha il tag HTML <div>
Quando mi sono approcciato per la prima volta al linguaggio HTML, ho trovato molto semplice il modo in cui i tag HTML descrivono gli elementi a cui si riferiscono:
- <HTML> racchiude l'intera pagina web;
- <HEAD> contiene l'intestazione (non visibile all'utente);
- <BODY> contiene tutta la parte visibile, appunto il "corpo" della pagina web;
- <P> sta per paragrafo;
- <B> sta per bold (grassetto);
- <I> sta per italic (corsivo);
- <U> sta per underline (sottolineato);
- <TABLE> sta per tabella, <TR> per table row (riga della tabella) e <TD> per table data (dato o cella della tabella)
- <OL> e <UL> e <LI> rispettivamente ordered list (lista ordinata o numerata) unordered list (lista non numerata) e list item (elemento della lista);
- e così via...
tutti i tag che conoscevo — e che usavo — erano "parlanti" e descrivevano in maniera eloquente ciò che era rappresentato al loro interno.
Ma ogni tanto mi imbattevo in un tag particolare al quale non riuscivo ad attribuire un senso: il tag <DIV>!
La parola DIV non mi ha mai suscitato nessuna immagine evocativa, perciò non ho mai utilizzato il tag <div> nei miei siti web fintanto che non imparai il linguaggio CSS.
Il tag DIV rappresenta il generico "blocco"
In linguaggio di programmazione visuali, come Visual Basic o Visual C#, potremmo riconoscere il tag DIV in quanto "panel", cioè una area rettangolare, che può assumere una dimensione arbitraria (larghezza x altezza), solitamente che assume le stesse dimensioni di ciò che contiene, posizionabile in modo arbitrario all'interno della pagina web.
Differenza tra elemento inline e blocco
In HTML gli elementi possono avere principalmente due tipi di comportamento: ci sono gli elementi inline e i blocchi.
recentemente sono stati introdotti anche gli inline-block
Ogni elemento HTML può diventare inline o block tramite una specifica direttiva CSS che in seguito vedremo, ma normalmente i seguenti tag HTML hanno un aspetto inline:
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <output>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>
Gli elementi inline hanno le stesse caratteristiche di un carattere all'interno di una frase, seguono il flusso di lettura, sono "appoggiati" sulla stessa linea e se si alzano in verticale fan sì che la linea si alzi (spostando in basso tutti gli altri caratteri che sono sulla stessa linea).
Facciamo finta di voler inserire una lettera dell'alfabeto sotto forma di immagine, pescata da un insieme di immagini GIF fatte in questo modo:
mentre i seguenti tag HTML hanno le sembianze di un blocco:
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1> ... <h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>, <video>
Dunque il tag DIV è a tutti gli effetti un BLOCCO.
Solitamente i blocchi — se non impaginati diversamente mediante direttive CSS — partono dall'angolo in alto a sinistra e riempiono la schermata ponendosi via via uno sotto l'altro.
Se inseriamo un elemento blocco all'interno di un elemento inline, ad esempio un blocco <DIV> all'interno di un paragrafo <P>, l'elemento inline viene interrotto e il blocco riparte dalla linea successiva. Anche questa volta si tratta del comportamento predefinito, modificabile a piacimento usando il foglio di stile CSS.
Esempio di successione di blocchi <div> colorati:
Dopo vi è un paragrafo che viene interrotto da un blocco div di colore blu.
Infine vi è una serie di blocchi di vari colori che vengono ridefiniti inline-block. I blocchi di tipo "inline block" hanno un comportamento ancora diverso: mentre gli elementi inline sono allineati stando "appoggiati" sulla linea di base inferiore, gli elementi blocco sono allineati sulla linea superiore:
Il tag <div> e la SEO non hanno un buon rapporto, il tag DIV è il tag più anonimo che ci sia e il modo migliore per farlo diventare utile nella SEO è "non usarlo".
Certo, detto così è un po' brutale, provo a spiegarmi meglio.
Nelle scorse settimane abbiamo fatto una carrellata di alcuni tag HTML5 che dal punto di vista sintattico e funzionale sono identici al tag <DIV>, ma che dal punto di vista semantico portano in sé profonde differenze di significato:
<header>, <nav>, <section>, <article>, <sidebar> e <footer> sono i tag da utilizzare per descrivere i principali blocchi che compongono la pagina web:
Certamente se desideri costruire un blocco che ha un certo significato e racchiude un determinato contenuto ascrivibile mediante un metadato o microdato presente in schema.org, anche il tag div può assumere un ruolo importante in termini di SEO.
Possiamo immaginare una applicazione di uno Schema Person su un blocco div che racchiude gli elementi di un classico "biglietto da visita" e ne assuma anche le sembianze estetiche sulla pagina web per mezzo dei descrittori CSS:
Naturalmente dobbiamo sempre ricordare che il fattore umano ha un ruolo determinante nella SEO e nel posizionamento del tuo sito web sui motori di ricerca!
Dunque puoi usare il tag <div> ogni volta che devi creare un blocco per migliorare l'impaginazione dei contenuti, in abbinamento alle opportune direttive CSS, nell'ottica di assecondare le esigenze estetiche dettate dal tuo creativo di riferimento (web designer o UX designer).
Anche se dal punto di vista semantico o di keywords non aggiungi nulla per agevolare la SEO, dal punto di vista dell'esperienza utente puoi fare tanto e un ambiente che accoglie gli utenti e garantisce una buona permanenza, coadiuva sicuramente anche la crescita dei KPI come la frequenza di rimbalzo, il tasso di ritorno, oltre al tempo di permanenza sulla pagina e la profondità di navigazione...
Conclusioni
In questo lunghissimo articolo di Blog della SEO hai capito che il tag <div> è apparentemente insignificante in termini di SEO, a volte lo è davvero, ma può essere valorizzato mediante CSS e microdati per portare il tuo sito web in prima pagina su Google.
La prossima settimana in questo Corso SEO continueremo a parlare di come sfruttare al massimo i tag HTML di uso comune per migliorare la visibilità del tuo sito web, quindi fai click su "Seguimi" per ricevere una notifica!
Ti do appuntamento alla prossima settimana, nel frattempo metti un like 👍🏻 se questo articolo ti è stato utile e condividilo con tutti i tuoi amici che — come te — vogliono essere in prima pagina su Google, te ne saranno immensamente grati.
Se qualcosa non ti è chiaro, fammi le tue domande nei commenti, risponderò a tutti, oppure scrivimi in privato.
Iscriviti al Corso SEO Operativo per poter entrare nel gruppo privato dove parliamo ogni giorno di SEO e di come fare per essere in prima pagina su Google, a presto.