fatti trovare dai tuoi clienti
Corso SEO & HTML: #21 Tag P, Span, B, I, ...
Paragrafi in HTML5. Oggi parliamo si sintassi: qual è il miglior modo per scrivere i contenuti di una pagina web per essere in prima pagina su Google?
« Corso SEO & HTML: #20 Tag H1, H2, H3
- Tag P, Span, B, I, ...
- La giusta sintassi HTML5 per i paragrafi
- Come scrivere le keyword e le keyphrases in HTML5
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 P
P come Paragrafo
Il tag <p> che racchiude i paragrafi nel linguaggio HTML è sempre esistito fin dalla prima versione.
In primo luogo ti suggerisco di usarlo! (in quanto potresti anche scrivere liberamente senza racchiudere il testo in un tag <p>)
In secondo luogo ti suggerisco di racchiudere ogni paragrafo di senso compiuto all'interno di un tag <p> ad esso dedicato ed aprire un nuovo tag <p> per iniziare il paragrafo successivo.
Il tag <p> ha il compito di separare visivamente il testo dal resto della pagina HTML: ogni paragrafo ha un margine superiore, inferiore e laterale che crea uno stacco dal resto della pagina e dagli altri paragrafi, rendendo la lettura più semplice.
L'esperienza di lettura su carta o su altro supporto fisico con dei limiti geometrici ben definiti è diversa dall'esperienza di lettura su schermo: sui libri, sui giornali, sui cartelli, il testo è fermo e i confini sono ben visibili, mentre — mediante la rotella del mouse o con gesti di swipe up sul touch screen del telefonino — noi facciamo scorrere il testo verso l'alto man mano che procediamo con la lettura e questo ci costringe a compiere uno sforzo per "inseguire" con lo sguardo i paragrafi che si susseguono!
Più o meno inconsapevolmente questo scroll continuo delle pagine ci procura un esborso notevole di energie, quindi — per semplificare al massimo l'esperienza utente dei visitatori del nostro sito web — dobbiamo inserire all'interno dei testi di una certa lunghezza, degli elementi per facilitare la lettura.
Racchiudendo ogni paragrafo all'interno di un tag <p> come nell'esempio che ti propongo:
<p>Primo paragrafo: questo è un esempio di paragrafo. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa.</p>
<p>Secondo paragrafo: questo è un esempio di paragrafo. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. Non tellus orci ac auctor augue. Elit at imperdiet dui accumsan sit. Ornare arcu dui vivamus arcu felis. Egestas integer eget aliquet nibh praesent.</p>
<p>Terzo paragrafo: questo è un esempio di paragrafo. In hac habitasse platea dictumst quisque sagittis purus. Pulvinar elementum integer enim neque volutpat ac. Senectus et netus et malesuada. Nunc pulvinar</p>
il risultato visto dal browser è il seguente:
Per modificare l'aspetto del testo nei paragrafi: tipo di carattere, grandezza del testo, spazio tra le linee, allineamento, spessore del tratto, margini, eccetera si potrà utilizzare un foglio di stile CSS come vedremo tra poco su questo Blog della SEO.
Tag Span
Span come intervallo
Il tag <span> è un inline tag, ovvero ciò che scrivi al suo interno si comporta come una parola all'interno di un paragrafo, continua ad essere visualizzato all'interno del paragrafo senza interruzioni, se non a fine riga, proprio come un normale testo.
Il tag <span> è utilizzato in genere per formattare diversamente un tratto di testo, per esempio per cambiare colore, per evidenziare quel testo con un altro sfondo o cambiando il tipo di carattere, ma dal punto di vista semantico non trasmette informazioni di rilievo al Crawler dei motori di ricerca.
Tuttavia si può utilizzare il tag <span> per selezionare informazioni specifiche e senza modificarne l'aspetto grafico, assegnare a quelle informazioni un ruolo semantico aggiungendo alcuni attributi al tag <span> per integrare microdati e metadati in conformità con lo standard Schema.org.
Ne avevamo già parlato due settimane fa in questo articolo: Corso SEO & HTML: #19 Tag Div nell'esempio del biglietto da visita.
È possibile evidenziare le informazioni in modo selettivo (per il crawler del motore di ricerca) utilizzando i microdati all'interno di un paragrafo usando il tag <span> come in questo esempio:
<p itemscope itemtype="https://schema.org/PostalAddress"><span itemprop="streetAddress">Via Roma 1</span> - <span itemprop="postalCode">40120</span> <span itemprop="addressLocality">Bologna</span> (<span itemprop="addressRegion">BO</span>)</p>
Sul browser vedremo una linea senza interruzioni, ma il crawler riceverà con grande gioia una grande quantità di informazioni utili sull'indirizzo pubblicato:
Naturalmente ogni volta che aiutiamo l'algoritmo veniamo premiati! scalando la classifica del motore di ricerca verso il il primo posto!
Tag B o Strong
B come Bold (grassetto), Strong come forte
Il tag <b> che in HTML5 è stato sostituito dal tag <strong> serve per enfatizzare un tratto di testo in un paragrafo. Dal punto di vista estetico, quando racchiudiamo una porzione di testo tra <b> e </b> o tra <strong> e </strong>, il risultato è ottenere quel testo in grassetto.
Solitamente negli editor si trasforma un testo selezionato in grassetto premendo CTRL+B
Tag I o Em
I come Italic (italic), Em come emphasize
Il tag <i> che in HTML5 è stato sostituito dal tag <em> serve per enfatizzare un tratto di testo in un paragrafo. Dal punto di vista estetico, quando racchiudiamo una porzione di testo tra <i> e </i> o tra <em> e </em>, il risultato è ottenere quel testo in corsivo (il carattere risulta leggermente inclinato in avanti).
Solitamente negli editor si trasforma un testo selezionato in corsivo premendo CTRL+I
Tag U
U come Underline (sottolineato)
Il tag <u> serve per enfatizzare un tratto di testo in un paragrafo. Dal punto di vista estetico, quando racchiudiamo una porzione di testo tra <u> e </u>, il risultato è ottenere quel testo sottolineato.
Solitamente negli editor si trasforma un testo selezionato in sottolineato premendo CTRL+U
Faccio un esempio di HTML5 che racchiude tutti e tre i tipi di testo:
<p>Ora scrivo un po' di testo <strong>in grassetto</strong>, un altro tratto <em>in corsivo</em> e infine ne scrivo <u>un tratto sottolineato</u></p>
che nel browser si presenta in questa maniera:
Non ti resta altro che scoprire con il Corso SEO Operativo BASIC come ricercare le migliori parole chiave da inserire nel tuo sito web!
Conclusioni
In questo articolo di Blog della SEO hai capito che i tag <p>, <span>, <b>, <strong>, <i>, <em> e <u> hanno una grande importanza in termini di SEO se utilizzati in modo opportuno, 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.