In questa guida scoprirai come usare il codice HTML in un sito WordPress anche se non sei un esperto. Imparerai come usare l’HTML per personalizzare il tuo sito.
Cosa è l’HTML?
Se non sai ancora cosa è l’HTML, ti informo che si tratta di un linguaggio molto facile per creare pagine e applicazioni web. Al giorno d’oggi qualsiasi sito moderno lo utilizza insieme a CSS (Cascading Style Sheets) e script Javascript.
HTML è l’acronimo di Hypertext Markup Language e ha la funzione di dare una formattazione ai componenti di una pagina grazie all’utilizzo di tag per identificarli e attribuirgli determinate proprietà di visualizzazione.
In parole semplici, se vuoi avere una parola in grassetto, mostrare una tabella o mettere un link è necessario usare la formattazione HTML.
Quando un visitatore apre il tuo sito, il suo browser come Chrome, Firefox o Safari riceve un documento HTML dal tuo server, lo interpreta e mostra una pagina multimediale. Il codice che sta dietro a questa pagina è stato creato usando elementi HTML, secondo alcune regole che stiamo per vedere.
Come funziona l’HTML
Puoi usare questo linguaggio di markup utilizzando dei tag che vanno aperti e chiusi per includere l’elemento che desideri formattare all’interno di ‘<’ e ‘>’. Ciascun tag ha determinate proprietà e svolge una determinata funzione.
Ad esempio se desideri mostrare un paragrafo, dovrai aprire il tag <p>, scrivere il testo e infine chiudere il tag usando </p>.
Perché e dove usare HTML in WordPress
Il grande vantaggio di WordPress è l’insieme delle funzionalità già pronte, plugin e temi che consentono a qualsiasi principiante di gestire il sito dalla A alla Z senza conoscere minimamente nessun linguaggio di programmazione.
Adesso ti starai chiedendo dove si dovrebbero usare i codici HTML in WordPress.
A volte capita di aver bisogno di intervenire in un articolo, una pagina, un widget o nel template per fare una piccola modifica di abbellimento nell’impatto grafico della pagina ed è necessario avere a che fare con il codice.
Quando modifichi un post avrai notato che sulla destra del classico editor di testo di default è attiva la tab Visuale che consente di scrivere e formattare normalmente usando i classici bottoni che esistono anche su Microsoft Word.
Quando desideri intervenire nel codice HTML, ti basterà cliccare la tab Testo e automaticamente tutto il testo verrà convertito secondo i markup di questo linguaggio per consentirti di fare le tue modifiche nel codice.
Ricorda che non puoi usare tag HTML se è selezionata la tab Visuale perché il codice non sarà considerato HTML ma come semplice testo.
Come si nota dall’immagine, per comodità WordPress ti mostra già dei bottoni o simboli per suggerirti i tag da usare nel caso non te li ricordassi.
- b – grassetto
- i – corsivo
- link – inserisce un link
- b-quote – inserisce un blocco di citazione
- del – mostra una barra in mezzo al testo
- ins – testo non barrato dopo un elemento del
- img – inserisce una immagine. Non è necessario chiudere questo tag.
- ul – Apre una lista non ordinata (elenco con bullet points)
- ol – Apre una lista ordinata (elenco con numeri)
- li – ciascuna voce in una lista
- code – mostra un codice nel testo
- more – interrompe l’anteprima del post mostrando il link Read More
- chiudi tag – chiude il tag attualmente aperto
Usando l’editor HTML di WordPress dovrai premere uno dei bottoni esposti sopra per aprire il tag corrispondente, dopodiché scriverai il testo e infine premerai di nuovo il medesimo bottone per chiudere il tag.
Adesso ti mostrerò tutti i codici e tag HTML per formattare una pagina dalla A alla Z.
Definire il documento HTML
Se stai creando una pagina HTML da zero o modifichi il template di WordPress, devi sempre considerare che ciascun documento è identificato da alcuni elementi fondamentali.
Crea il tuo sito in 9 minuti
La nostra guida completa per creare il tuo sito WordPress dalla A alla Z in 9 minuti senza essere un esperto.
- <html> indica l’inizio di una pagina HTML
- <head> contiene vari dati di intestazioni
- <head> è il metadato per indicare il titolo della pagina
- <body> apre il contenuto della pagina e conterrà tutto il testo e altri elementi visuali
Riporto di seguito un esempio di documento HTML completo.
<html> <head> <title>Titolo</title> </head> <body> </body> </html>
Titoli
Per aiutare il visitatore a leggere con più facilità la pagina, dovresti fare in modo di usare vari titoli per suddividere le sezioni e gli argomenti che stai trattando.
Le intestazioni sono usate sia nel template, sia nei post.
Il titolo principale della pagina va indicato con il tag
<h1> ed è sempre e solo uno.
Questo è generalmente già incluso nel template WordPress che stai utilizzando e se così non fosse dovresti assolutamente fare delle modifiche perché è uno dei tag più importanti.
Infatti è costantemente preso in considerazione da Google per valutare la pertinenza della tua pagina e determinare il posizionamento del tuo sito nei risultati di ricerca.
Con leggermente meno importanza e con la possibilità di usarne più di uno, esiste anche il tag <h2>. Man mano che aumenta il numero fino a <h6>, diminuisce l’importanza del titolo.
<h1>Titolo principale</h1>
<h2>Titolo secondario</h2>
<h3>Titolo terziario</h3>
<h4>Titolo quaternario</h4>
Paragrafi
Il testo di ciascun post è organizzato in paragrafi, ossia in blocchi di testo per non stancare eccessivamente la vista leggendo un 20 righe in un colpo solo.
Per separare questi paragrafi si utilizza il tag <p>.
WordPress possiede già una funzionalità automatica per cui se all’interno dell’Editor di testo ti dimentichi o volutamente non utilizzi i tag <p>, questi saranno aggiunti quando l’utente richiede la pagina.
Hai anche la possibilità di allineare il testo a destra, sinistra, centrato oppure giustificato utilizzando l’attributo align seguito da:
- left
- right
- center
- justify
Questo è un paragrafo allineato a sinistra
Link o Collegamento ipertestuale
Una delle operazioni più comuni è l’inserimento di un link verso una pagina esterna tramite il tag <a>.
L’attributo fondamentale per avere un collegamento ipertestuale funzionante si chiama href e corrisponde all’URL che desideri linkare.
Puoi personalizzare il comportamento del link, attraverso l’attributo target che determina dove la nuova pagina sarà aperta.
- _blank – apre una nuova finestra o scheda
- _self – apre la nuova pagina nella tab corrente
Un altro attributo molto importante è rel che se corrisponde a nofollow svolge una funzione molto importante ai fini della Search Engine Optimization, ossia indica a Google di non passare link juice o valore alla pagina che hai linkato.
<a href=”https://www.wpefficace.it” rel=”nofollow” target=”_blank”>link ipertestuale</a>
Infine, all’attributo href puoi assegnare il valore #ID se desideri effettuare un collegamento non solo verso un’altra pagina, ma ad una specifica sezione, magari all’altezza di un sottotitolo in mezzo alla pagina.
Ovviamente al posto di ID dovrai inserire l’identificativo del sottotitolo a cui intendi collegarti.
Per chiarire meglio il tutto facciamo un esempio pratico.
Nel tuo sito dovrai inserire un link usando questa formula.
<a href=”https://www.sito.it/articolo#dormire” rel=”nofollow” target=”_blank”>link ipertestuale</a>
Nel sito di destinazione dovrà esserci un sottotitolo con id=”dormire”.
<h2 id=”dormire” >Come dormire meglio</h2>
Testo in grassetto, barrato, corsivo, sottolineatura e citazione
Il testo può essere piatto e monotono oppure avere un po’ di colore e attenzione su alcune sue parti.
Esistono vari effetti per rendere la lettura più piacevole e focalizzarsi sulle parti dell’articolo più importanti.
Per dare maggiore enfasi ad una parola o persino ad una frase intera è possibile utilizzare il grassetto grazie al tag <b> oppure <strong>.
Il corsivo si ottiene utilizzando il tag <i> oppure <em>.
L’effetto barrato che spesso si usa negli sconti è generato dal tag <del>.
La sottolineatura si ottiene con il tag <u>.
Infine se desideri fare una citazione è possibile usare il tag <blockquote>.
Ora vediamo un esempio di testo formattato con le caratteristiche appena esposte.
Questo <b>testo</b> è <i>formattato</i> usando <u>vari tag</u> a <del>disposizione</del>.
Liste di elementi
Quando vuoi fare un elenco puoi andare sempre a capo oppure il modo corretto è l’utilizzo dell’apposito markup HTML.
Una lista si apre con il tag <ul> per avere accanto ad ogni voce un pallino oppure <ol> per avere un numero in progressione crescente. Dopodiché dovrai inserire ciascuna voce dell’elenco usando il tag <li>.
<ul> <li>elemento 1</li> <li>elemento 2</li> </ul>
Separatori
Per andare a capo esiste il tag <br>, mentre per inserire una linea orizzontale che divide due sezioni del sito esiste il tag <hr> con spessore definito dall’attributo size.
In entrambi i casi non serve mettere il tag di chiusura.
Immagini
Avere un articolo che contiene immagini abbellisce la pagina e rende più gradevole la navigazione del tuo pubblico.
Il tag <img> si dice self closing perché non ha bisogno di essere chiuso. Dovrai specificare l’attributo src con l’indirizzo URL di dove risiede l’immagine che desideri incorporare.
L’attributo alt è fondamentale per la SEO perché deve assolutamente includere la descrizione dell’immagine. Qualora un utente avesse disabilitato la visualizzazione delle immagini, vedrà la scritta che tu avrai inserito in questo campo.
Le dimensioni in pixel sono specificate dai tag height e width.
<img src=”https://www.wpefficace.it/wp-content/uploads/2017/05/html-wordpress.png” alt=”html con wordpress” width=”400” height=100” />
Tabelle
Per mostrare diversi dati in modo ordinato serve una tabella, costituita da colonne e righe.
La sintassi HTML include un’apertura tramite il tag <table>. Poi con <tr> si apre la nuova riga e con <td> si apre la cella. Gli attributi colspan indica quante colonne sono occupate dalla cella, mentre rowspan indica il numero di righe.
<table> <tr> <td>Giorno</td> <td>Obiettivo</td> </tr> <td>Sabato</td> <td>Lavoro</td> </tr> </table>
Validazione HTML tramite W3C
Dopo aver completato tutte le modifiche HTML al tuo sito dovresti verificare di non aver commesso errori nella sintassi e per questa esigenza è nato un tool di verifica e controllo.
Si chiama W3C Validator e specificando l’indirizzo della tua pagina ti mostrerà tutti gli errori o avvisi con indicazioni anche su come correggere il problema di non conformità agli standard HTML.
In questa guida ti ho mostrato tutto quello che devi sapere sull’HTML per fare qualsiasi modifica che richiede questo linguaggio nel tuo sito web.
