HTML per il blog e per fare blogging: ecco cosa sapere

Di Riccardo Esposito | Pubblicato il 3 Apr 2009 - Aggiornato il 29 Mag 2026

Quali sono i tag più importanti ? Cosa devi conoscere per ottenere buoni risultati con WordPress? Ecco una guida di base per usare i principi e le regole base dell’HTML per blog che ti consentono di formattare, creare e pubblicare.

Non sono un webmaster, nel senso che non riuscirei mai a creare un sito dinamico. Ma non è un problema: CMS come WordPress assicurano buoni risultati a chi possiede nozioni poco più che amatoriali del codice e delle regole base HTML per blog.

È vero, però, che per portare avanti un blog che piace agli umani e ai motori di ricerca qualche conoscenza dei tag HTML bisogna averla in tasca. Ho riassunto quelle fondamentali in alcuni punti, e l’ho fatto in modo che possano essere d’aiuto sia ai principianti che ai più smaliziati utilizzatori del codice HTML.  Bello, no?

Linguaggio HTML: cos’è e a cosa serve

Prima di definire le regole HTML del blog è giusto dare una spiegazione: di cosa si tratta, cos’è il linguaggio HTML e perché è così importante per un blogger che usa un CMS come WordPress? La spiegazione: l’HTML (HyperText Markup Language) è un linguaggio di markup per organizzare le pagine web. Come suggerisce Wikipedia:

“questa combinazione descrive le modalità di impaginazione o visualizzazione grafica del contenuto, testuale e non, di una pagina web attraverso tag di formattazione”.

Non si tratta di un linguaggio di programmazione come potrebbe essere il PHP. Inoltre questo codice vede nell’HTML5 la sua evoluzione naturale, e nel CSS il partner per creare dei blog e dei siti web. Quindi, quali sono le basi HTML per fare blogging?

Per approfondire: come andare a capo e fare paragrafi in HTML

Impostazione del documento HTML

Prima di inserire i diversi tag HTML per il blog devi sapere che la pagina web è introdotta da una serie di elementi che determinano la struttura e le funzioni di base. Un esempio:

<!DOCTYPE html> 
<html lang="it"> 
<head> <meta charset="UTF-8"> <title>Titolo della pagina</title> 
</head> 
<body> <!-- Il contenuto va qui --> </body> 
</html>

DOCTYPE dice al browser che tipo di documento è, in questo caso un HTML. L’elemento lang="it" definisce la lingua, dettaglio importante per l’accessibilità.

Nell’area <head> trovi meta-informazioni che non si vedono sulla pagina mentre nel <body> hai tutto quello che l’utente vedrà. Infine, <meta charset="UTF-8"> è un tag che dice al browser: “questa pagina usa la codifica UTF-8 per i caratteri”. Praticamente è come dare al browser le istruzioni per leggere correttamente il testo.

Meta Tag: come scriverli correttamente

All’interno dell'<head>, la sezione che viene prima del <body> (non quello dell’immagine…), troviamo i Meta Tag, informazioni fondamentali affinché il il sito venga correttamente indicizzato dai motori di ricerca. Le regole HTML per blog più importanti:

Tag Title

Uno dei principali fattori considerati da Google in una query di ricerca. Inserisci buone keyword nel tag title e non superate i 65 caratteri, altrimenti uscirà troncato nella serp. Se vuoi dare particolare importanza a una parola chiave mettila a sinistra.

<!DOCTYPE html>
<html lang="it">
<head>
    <title>Il mio titolo</title>
</head>
<body>
    Contenuto della pagina...
</body>
</html>

Meta Tag Description

Inutile ai fini del posizionamento, la meta description può essere un fattore decisivo se il testo riesce a stimolare la curiosità dell’utente in un testo compreso tra 160 e 300 battute concesse (oltre viene tagliata). Così puoi aumentare i click sul sito.

<meta name="description" content="Qui devi inserire la meta description di massimo 150 caratteri, più o meno.">

Tag Keyword

Anche queste informazioni sono ininfluenti ai fini del posizionamento e in più non hanno alcuna visualizzazione nella serp: personalmente non le inserisco, neanche mantenendo una certa coerenza tra contenuto e keyword. Praticamente inutili.

Rispetta gli H1, H2 e H3 del testo

Equivalente dei capitoli, paragrafi e sottoparagrafi di un libro, una buona organizzazione degli H1, H2 e H3 aiuta a definire a ciò che si scrive per il lettore. E suggerisce ai motori di ricerca gli elementi di maggiore importanza nell’articolo che pubblichi sul blog.

Il tag H1 comprenderà il titolo del blog con le keyword che si vogliono spingere, l’H2 un paragrafo, l’H3 un sottoparagrafo, l’H4 uno specchietto di approfondimento e così via fino all’H6 se serve. Attenzione, mai mescolare l’ordine della struttura HTML.

Usa i contenitori paragrafo e DIV

Esiste una struttura di base per creare una pagina HTML e scrivere un articolo del blog. Ecco gli elementi di base che non possono mai mancare: <p> e <div>. Di cosa stiamo parlando? Il primo (paragraph) è il tag semantico per i paragrafi di testo. Esempio:

<p>Questo è un paragrafo di testo normale.</p>
<p>E questo è un altro paragrafo separato.</p>

Si tratta di un tag HTML automatico quando fai blogging con WordPress, non devi inserirlo manualmente. Il tag <div> un contenitore generico senza significato semantico. È come una scatola vuota: si usa per raggruppare elementi, creare layout, contenitori stilistici. Ricorda che il <p> deve rappresentare realmente un paragrafo di contenuto, non essere solo un modo per andare a capo.

Come formattare testo con HTML

Ho già sottolineato in precedenza di quanto sia importante l’uso del neretto in un post. Per quanto riguarda gli altri comandi, l’unico consiglio è quello di utilizzarli per migliorare la leggibilità del testo online. Ma senza esagerare: un testo troppo formattato risulta altrettanto ostico di uno assolutamente privo di formattazione.

<em>Emphasized text</em>
<strong>Strong text</strong>
<code>Code text</code><br>

Solo un dettaglio: il W3c suggerisce di utilizzare <strong> ed <em> al posto di <b> e  <i> per grassetto e corsivo perché sono tag HTML sematizzati. È vero che quasi nessun sito rispetta alla lettera le regole del W3c, ma è sempre meglio evitare un errore che farlo! Anche perché di default WordPress usa il grassetto <strong>.

Ricorda, inoltre, che se vuoi distanziare due parole ed evitare che si separino con il <br /> in modo da sfruttare il codice devi usare lo spazio HTML con l’elemento dedicato. Questa è una delle principali regole HTML per creare un blog ben strutturato.

Link e IMG: dettagli che contano

Perdi la vista a sfogliare virtualmente blog su blog per trovare ispirazione per scrivere, ti scervelli per pubblicare contenuti interessanti e ti rompi le ossa delle mani per scrivere in maniera fluida e discorsiva. E poi ti dimentichi le regole base HTML per blog che possono fare la differenza. Ecco quelle che non devi dimenticare mai:

Title e anchor text dei link

Quando serve a spiegare l’azione, meglio attribuire ai collegamenti ipertestuali un title esplicativo. Non tanto per una questione di ottimizzazione SEO, ma per dare un buon suggerimento agli utenti che navigano nel tuo blog. Inoltre, è importante scegliere un anchor text esplicativo per link in uscita e per quelli interni utili per la SEO.

<a href="https://esempio.com" title="Apri link in una nuova finestra" target="_blank" rel="noopener noreferrer">Anchor text</a>

Immagini e ottimizzazione SEO

Le informazioni testuali che girano intorno alle immagini sono lette dai motori di ricerca e contribuiscono all’ottimizzazione SEO delle foto per i motori di ricerca. E per migliorare il posizionamento su Google Image. Quindi, cosa fare lato codice HTML del blog?

• Inserite il titolo dell’immagine quando serve.
• Nominare il file del visual con parole descrittive.
• Usare le keyword nell’attributo alt con naturalezza.
• Sfrutta le didascalie con testi diversi e keyword.

Per ottimizzare il tutto consiglio i inserire sempre le dimensioni delle immagini nel codice. Questo rientra nelle regole base dei tag HTML perché consente al browser di risparmiare tempo di upload del visual e velocizzare il caricamento della pagina su internet.

Per approfondire: come fare caratteri speciali in HTML

Regole HTML per blog: la tua opinione

Queste sono, come già suggerito, le regole base html da rispettare e da osservare. Ancora un consiglio? Prima di pubblicare il post ti invito a dare sempre uno sguardo al codice per scovare eventuali stringe inutili che appesantiscono la struttura. Questo soprattutto se fate un copia/incolla da un testo già formattato (tipo su Word).

Categoria: Guide per webmaster | Tag: Codice HTML