Guida HTML per WordPress: impara come creare tag HTML facilmente

Ho creato questa guida HTML per WordPress al fine di darti tutti gli strumenti necessari per entrare nel mondo dell’HTML e avere maggiore controllo del tuo sito web

In alcuni casi, conoscere l’HTML può risolvere alcuni problemi che sarebbero molto difficili da gestire attraverso il classico editor di WordPress. È importante, perciò, avere alcune semplici basi per saper utilizzare l’HTML per WordPress.

Ti posso assicurare che l’HTML è un linguaggio piuttosto facile. Può essere usato in modo molto avanzato, però per l’utilizzo che ne farai su WordPress una guida HTML introduttiva dovrebbe esserti più che sufficiente.

Guida HTML per WordPress: introduzione al linguaggio

Prima di cominciare questa guida HTML voglio subito darti la definizione di HTML in modo tale che tutto quanto successivamente ti sarà di più facile comprensione.

Quindi vediamo subito…

Cos’è l’HTML?

HTML significa Hyper Text Markup Language ed è un linguaggio di markup, ossia un linguaggio che viene utilizzato per elaborare la formattazione e il layout di una pagina. Allo stesso tempo, permette di utilizzare i collegamenti ipertestuali (i link).

Hai mai usato Word o un altro editor di testo simile? Sicuramente sì, e saprai che puoi selezionare parti di testo per formattare il font, inserire titoli, elenchi, dare un colore al carattere o rendere del testo in corsivo.

L’HTML permette di applicare queste stesse formattazioni utilizzando degli elementi chiamati tag.

Allo stesso modo, l’HTML serve ad indicare quando andare a capo con il testo o, per esempio, ad inserire link cliccabili nelle parole.

Come vedi, è molto utile ed è usato per configurare elementi presenti sul 99% delle pagine web!

Nei paragrafi successivi di questa guida HTML, vedremo come usare i principali tag HTML nella pratica, implementando tutte le cose che ho menzionato fino ad ora.

Perché seguire una guida HTML quando sai già come usare WordPress?

Forse ti sarai chiesto: “Ma se WordPress mi permette di formattare il testo in maniera semplice e visiva, a cosa serve conoscere una guida HTML per WordPress?

Di fatto, non devi necessariamente imparare l’HTML. Potresti infatti avere un sito funzionante al 100% senza toccare una riga di codice. Questa è una delle cose che rende WordPress così accessibile e funzionale!

Però, se hai una certa esperienza con l’uso di WordPress, forse ti sarai reso conto che talvolta l’Editor Visuale non sia sufficiente oppure non si comporta esattamente come vorresti.

Ti è mai capitato di aggiungere un titolo, poi di cancellarlo per mettere un semplice paragrafo, ma questo ti rimane sempre con la formattazione del titolo?

In questo caso, è rimasta una “istruzione” che dice “Da qui in poi, il testo è un titolo”, e sarà molto difficile eliminarla usando solo l’Editor Visuale.

In casi come questo, usare l’HTML per WordPress ti sarà un grande alleato. Lavorare direttamente sui codici ti offre infatti completo controllo. Come vedremo di seguito, posizionerai i tag intorno alle parole sulle quali vuoi che i codici siano effettivi.

In questo modo, sarai sicuro che i tag abbiano effetto solo ed esclusivamente sui contenuti selezionati.

Il funzionamento di base del linguaggio HTML

L’HTML funziona attraverso l’uso di tag. I tag sono racchiusi dai simboli “<” e “>” e, nella maggior parte dei casi, vengono aperti e chiusi. I tag di chiusura sono caratterizzati dal simbolo /.

Ecco alcuni esempi:

• tag di apertura <strong>, tag di chiusura </strong>
• tag di apertura <em>, tag di chiusura </em>
• tag di apertura <p>, tag di chiusura </p>

I contenuti a cui applicare i tag devono essere inseriti tra il tag di apertura e quello di chiusura, in questo modo:

• <strong>testo di prova</strong>
• <em>qui inserirai il testo</em>
• <p>il tuo paragrafo</p>

Dove usare i codici HTML per WordPress

All’interno di WordPress, potrai usare i codici HTML nell’Editore di Testo. L’Editore di Testo si trova all’interno della schermata di creazione delle pagine e dei post.

Probabilmente, di solito usi l’Editore Visuale, che funziona in modo similare a Word. Per usare i codici HTML, dovrai invece selezionare la linguetta Testo.

Per fare una prova e avere un’idea di come appare una pagina con codici HTML, apri la pagina di modifica di un post che hai già scritto.

Clicca, quindi, su Testo. Qui sarai in grado di riconoscere i tag HTML di cui abbiamo parlato prima.

Guida HTML: ecco i tag HTML più popolari

Iniziamo ora a vedere come usare i tag HTML nella pratica. I principali tag HTML possono essere inseriti grazie ai pulsanti della barra degli strumenti dell’editor di testo.

Per inserire i tag HTML per WordPress, puoi procedere in due modi:

• selezionare il testo a cui vuoi che siano applicati, quindi cliccare il simbolo scelto nella barra degli strumenti. In questo modo, saranno aggiunti subito sia il tag di apertura che quello di chiusura attorno al testo selezionato.
• posizionare il cursore dove vuoi inserire il tag di apertura e selezionare il simbolo nella barra degli strumenti. Quindi, posizionare il cursore dove inserire il tag di chiusura e selezionare “Chiudi Tag”.

Nella barra degli strumenti, troviamo dunque i seguenti tag:

Simbolo b

Il simbolo b sta per bold e serve a rendere grassetto il testo selezionato. Inserisce i tag <strong></strong>.

Simbolo i

Il simbolo i sta per italic e serve ad inserire un testo in corsivo. Esso aggiunge i tag <em></em>.

Simbolo link

Il simbolo link serve ad inserire un URL in corrispondenza del testo selezionato. I tag inseriti sono <a href=”il tuo URL”></a>.

Come vedi, questo tag è un po’ diverso da quelli che abbiamo visto fino ad ora. Infatti, il tag a (da anchor) che indica il collegamento ipertestuale contiene un attributo, ossia href=””. L’attributo fornisce istruzioni aggiuntive al tag. L’attributo href sta per Hypertext REFerence, perciò all’interno delle virgolette bisogna inserire l’URL di destinazione del link.

Simbolo b-quote

La barra degli strumenti per i tag HTML per WordPress comprende anche il simbolo b-quote, che sta per “blockquote” e si usa per formattare le citazioni. Spesso, vengono formattate con un font corsivo.

Quando selezioni questo simbolo, vengono inseriti i tag <blockquote></blockquote>.

Simbolo del

Il simbolo del serve ad aggiungere l’effetto barratto sul testo, inserendo i tag <del></del>.

Simbolo ins

Ins è il fratello di del. Solitamente, dopo un testo barrato (quindi effettivamente cancellato) ne viene inserito uno sostitutivo, come in una correzione. I tag <ins></ins> servono proprio a questo.

Simbolo img

Il simbolo img serve ad inserire un’immagine all’interno del post. Quando hai caricato la tua immagine all’interno della libreria media, clicca Modifica e copia l’URL del file. Fatto questo, torna all’Editore di Testo e clicca img. A questo punto, ti sarà richiesto di incollare l’URL del file immagine.

Il tag img si dice “self-closing”, non ha cioè un tag di chiusura. Quando lo inserisci all’interno della pagina ha questo aspetto <img src=”URL file”/>

Anche in questo caso, abbiamo dunque un attributo, src (che sta per source), nel quale inserire un’informazione aggiuntiva, ossia l’URL del file.

Simbolo ul

Qui le cose iniziano a farsi un po’ più complesse. Usando la barra degli strumenti HTML per WordPress, troverai due pulsanti che ti permettono di inserire degli elenchi: ul (unordered list, cioè, l’elenco puntato con i bullet point) e ol (ordered list, cioè, una lista con i punti numerici).

Se vuoi creare una lista puntata, per prima cosa seleziona ul per inserire i tag <ul> ed </ul>. All’interno di questi tag, dovrai poi aggiungere i singoli elementi della lista con il tag li, di cui parleremo fra un paio di paragrafi.

Simbolo ol

Come abbiamo visto nella sezione precedente, il simbolo ol serve ad inserire i tag <ol> ed </ol> per creare liste numerate. Anche in questo caso, dovrai inserire al suo interno le singole voci della lista attraverso il tag li.

Simbolo li

Questo simbolo serve ad inserire le voci di una lista, mediante i tag </li> e </li>. Puoi aggiungerne quante desideri e, nel caso delle liste numerate, i numeri saranno assegnati automaticamente in ordine crescente.

Simbolo code

Se vuoi inserire codici all’interno dei tuoi testi, questo è il simbolo da selezionare. Serve infatti ad aggiungere i tag <code> </code> che formattano il testo con un font monospace.

In alternativa, puoi usare i tag <pre></pre> che servono a visualizzare in modo diverso i codici, inserendoli in una sorta di tabella.

Simbolo more

Questo è un tag estremamente utile, che però pochi conoscono. Serve ad interrompere l’anteprima dei post in un punto specifico, facendo apparire il link Read More.

Simbolo chiudi tag

Infine, il bottone chiudi tag non serve ad aggiungere specifici tag HTML, ma ad aggiungere un tag di chiusura dove ce ne è uno aperto.

Guida HTML: Creare Titoli e Paragrafi

Abbiamo visto i tag disponibili nella barra degli strumenti dell’Editore di Testo. Vediamo ora altri tag che probabilmente hai già usato spessissimo, senza però saperlo!

Paragrafo

Quando vuoi formattare un testo come paragrafo semplice, i tag da usare sono <p></p>. Noterai che, quando allinei il testo a sinistra, destra, al centro o in modo giustificato, WordPress inserisce automaticamente le informazioni relative all’allineamente all’interno del tag di apertura <p>.

Titoli e Sottotitoli

Come forse già sai, su WordPress puoi usare titoli di sei diverse dimensioni, dalla 1 alla 6 (la 1 è la più grande, mentre la 6 è la più piccola).

Come nel caso dei paragrafi, quando selezioni una voce dal menu a tendina all’interno dell’Editore Visuale, vengono inseriti dei tag nel codice HTML.

• <h1></h1> per il titolo 1
• <h2></h2> per il titolo 2
• <h3></h3> per il titolo 3
• <h4></h4> per il titolo 4
• <h5></h5> per il titolo 5
• <h6></h6> per il titolo 6

Ora che hai capito come usare l’HTML per WordPress, puoi formattare titoli e sottotitoli manualmente usando i tag.

Link

Come abbiamo già visto, il tag per inserire un link nel testo è <a href=”URL”></a>. Ora, oltre a href che inserisce l’URL di destinazione, ci sono altri attributi che puoi inserire nel tag di apertura per personalizzare ulteriormente il tuo link.

target=”_blank”

Per default, i link WordPress hanno l’attributo target=”_self” per fare in modo che il link si apra nella stessa scheda del browser. Con il target=”_blank”, invece, si aprirà una nuova scheda.

In diverse circostanze, è utile che un link si apra su una nuova scheda (per esempio, quando linki ad una pagina esterna e non vuoi che l’utente abbandoni il tuo sito). In questo caso, dovrai inserire l’attributo target=”_blank” all’interno del tag di apertura <a href=”URL”>, in questo modo:

<a href=”URL” target=”_blank”>Il tuo testo da linkare</a>

rel=”nofollow”

Un altro attributo molto utile è rel=”nofollow”. Sempre da inserire all’interno del tag di apertura <a href=”URL”>, serve ad evitare che attraverso il link sia trasferito anche il link juice, ossia che l’autorevolezza della tua pagina passi a quella linkata.

Usando rel=”nofollow” chiedi a Google che non sia trasferito alcun link juice.

Come imparare ad usare i codici HTML?

Come abbiamo visto in questa guida HTML, usare l’HTML su WordPress non è particolarmente complicato. Si tratta più che altro di prendere familiarità con i tag disponibili ed imparare a riconoscerli all’interno del testo.

Il mio consiglio è di iniziare a lavorare anche sull’Editore di Testo, così da imparare a riconoscere i codici HTML e magari fare qualche modifica. Quindi, puoi provare ad integrare i tag presentati in questa guida.

Se vuoi andare oltre, una risorsa fenomenale è il sito W3School (in inglese) dove trovi tantissimi tutorial ed esempi su HTML ed altri linguaggi di programmazione.

Conclusione

Siamo arrivati alla fine di questa guida introduttiva al HTML per WordPress. Scommetto che il termine HTML ed i codici dell’Editore di Testo ti fanno già meno paura, ora non ti resta che iniziare a fare un po’ di esercizio.

Conoscevi già i tag di cui abbiamo parlato in questa guida HTML?

Ti è mai capitato di aver bisogno di ricorrere all’HTML per risolvere problemi di formattazione sui tuoi post?

Come sempre, se hai qualunque domanda, puoi lasciare un commento qui sotto. Ti risponderemo al più presto.

NOTA: Questa guida è stata pubblicata originariamente nell’Aprile 2016 ed è stata completamente riscritta e aggiornata per accuratezza e comprensibilità.