Guida HTML per WordPress: impara come creare tag HTML facilmente
Apri l'indice dei contenuti
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.
Per uno studio invece un po’ più approfondito, ti suggerisco di iscriverti al nostro video corso WordPress con un modulo per imparare a sfruttare l’HTML al massimo.
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” rel=”noopener noreferrer”
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” rel=”noopener noreferrer”, 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” rel=”noopener noreferrer” all’interno del tag di apertura <a href=”URL”>, in questo modo:
<a href=”URL” target=”_blank” rel=”noopener noreferrer”>Il tuo testo da linkare</a>
rel=” “
Un altro attributo molto utile è rel=” “. 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=” “ chiedi a Google che non sia trasferito alcun link juice.
Ci sono anche altri attributi che puoi utilizzare nei link, che possono avere funzioni speciali, come l’accesskey per poter attivare il link digitando una combinazione di tasti sulla tastiera anziché cliccarci sopra col mouse.
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 all’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.
Buongiorno, vorrei ho provato a inserire più HTML all’interno del mio sito web ma all’inizio nell’anteprima dell’HTML lo carica ma dopo visualizzando la pagina del sito vedo solo il testo e non HTML. Potete aiutarmi? Grazie
Ciao, dove hai inserito esattamente il codice? In quale file?
Ho bisogno del vostro aiuto
Stavo scrivendo un articolo ( avevo fatto degli aggioramenti in corso d opera ) e mi sono accorta che non mi fa inserire i tag .. nemmeno se scrivo un nuovo articolo
help… che succede ? come risolvere ?
Ciao Angela, che tema stai utilizzando?
Ciao, grazie per le tue preziose informazioni. Vorrei sapere come fare ad utilizzare il tag riferendomi a file, cioè descrizione. WP automaticamente mi cancella il protocollo file:// per utilizzare http://. Sto impazzendo anche perché non posso usare la libreria ed inserire il file tra i media. Grazie
Ciao Francesco, devi inserire un link di download?
ciao, sono piuttosto agli inizi.
puoi dare uno sguardo al mio sito e dirmi se sto usando wp.com oppure wp.org (che differenza c’è e cosa mi consigli?).
altra cosa: se uso elementor com page builder posso usare anche gli altri plugin messi a disposizione da wp?
per inserire i banner di affiliazione amazon dove e come faccio per incollare il codice html?
grazie
Ciao Massimiliano, stai usando WordPress.com. Ti consiglio di leggere questa guida per conoscere le differenze tra le due versioni di WordPress (.com e .org). Per installare i plugin e avere maggiori libertà di personalizzazione, consigliamo certamente WordPress.org!
Ciao Andrea, mi servo sempre della tua guida per risolvere molti problemi che mi mettono i bastoni tra le ruote, ma grazie a te ne vengo fuori illesa!
Adesso, però, ho un problema con la formattazione di una pagina. Ho costruito un paio di pagine utilizzando un codice HTML per il padding (perdona il mio linguaggio non propriamente tecnico) così da avere una grafica più piacevole. C’è un riquadro colorato con un paragrafo inserito al suo interno e un titolo all’interno di un ulteriore riquadro. Il problema è che tutta la pagina mi prende questa formattazione, compresi il menù, i widget nella sidebar ed eventuali link esterni al padding. Come posso risolverlo? Grazie per il tuo aiuto!
Ciao Francesca, hai letto anche questa guida? Un saluto!
Ciao ragazzi! Domanda forse sciocca! Sto provando ad inserire il tag su una pagina statica, ma non trovo riscontro: il link “read more” non compare. Ho provato ad scriverlo anche come , ma nulla. Non è che non funziona proprio con le pagine statiche? C’è il modo per ottenere lo stesso effetto? Grazie dell’aiuto.
Ciao Roberto, di default questo tag non funziona sulle pagine. Che tema stai utilizzando?
Utilizzo WP Seventeen, grazie.
Serve una modifica via codice, leggi qui in merito. In alternativa, puoi usare un plugin come il seguente: https://wordpress.org/plugins/wp-show-more/. Un saluto!
Ho un problema con H1. Io ho wordpress e siteground (grazie al vs consiglio), ho la mia pagina home di https://latartarugavolante.com che un sunto degli ultimi articoli. Se faccio analisi Seo (tipo seochecker o altri) mi esce che non ho H1. Ma l’H1 non è il titolo dell’articolo? Come faccio a sistemare questa cosa? Come faccio a mettere un h1 nella home page che però non è una pagina e quindi nn ha un titolo? e’ grave questa cosa? grazie se riuscite ad aiutarmi
Ciao Anna, scrivici a supporto@sos-wp.it. Un saluto e a presto!
Ho un piccolo problema con wordpress: quando inseriscono codici html, questi non vengono letti. Ho il piano gratuito di wordpress.
Ciao Giovanni, su wordpress.com, anche se compri il dominio e/o passi ad un piano Premium, NON potrai in nessun caso installare plugin, né effettuare modifiche al tema, o installare temi esterni.
Leggi questo post, per apprendere tutte le differenze tra wordpress.com e wordpress.org, la versione self hosted di WordPress che ti permette di installare plugin, widget, e di effettuare modifiche al codice: https://sos-wp.it/conosci-le-differenze-tra-wordpress-com-e-wordpress-org/. Ti consiglio di passare a WordPress.org, e di ricevere al contempo la nostra Assistenza WordPress https://sos-wp.it/assistenza-wordpress/!
Collaboro per un giornale on line e da un po’ di tempo dopo aver inviato all’editore un pezzo mi succede che l’editore pubblica ma mancano titoli o sottotitoli: la risposta data è che word press non li legge , come posso fare? Scrivere io dei testi già con Word Press onde evitare problemi?
Grazie Maria Chiara
Ciao,
come è possibile? basta che vengano impaginati correttamente.
dall’editore o da me?
Dall’editore, se specifichi il titolo e i sottotitoli (h1 come titolo principale, h2 e h3 da inserire nel post).
Ciao Chiara! Ho capito come funziona l’html in questo caso, ma avrei bisogno di capire invece come inserire un tag nella sezione head del file index. Ho un blog wordpress creato con l’host Siteground. Grazie mille!
Ciao Futura! Grazie per il commento.
Quale tipo di tag devi aggiungere? Solitamente, viene richiesto, per esempio, di inserire il tag di Google Analytics nella sezione head del file index.html.
Per chi usa WordPress, la procedura è un po’ diversa, in quanto non puoi lavorare direttamente su questo file.
Solitamente, la sezione head si trova in realtà all’interno di un file php chiamato header.php. Però ti consiglio di fare molta attenzione a modificare questi file, in quanto eventuali errori potrebbero “rompere” il tuo sito.
Se vuoi aggiungere Google Analytics, ci sono tanti strumenti per farlo in modo automatico… fammi sapere!
Buon weekend,
Chiara