HTML e WordPress

Aggiornato il 23 giugno 2021
Aggiornato il 6 giugno 2023

HTML sta per Hyper Text Markup Language ed è un linguaggio di markup utilizzato per determinare la struttura di una pagina web. La quasi totalità delle milioni di pagine in Internet si basa su questo linguaggio.

Nelle pagine web l’HTML non serve solo per formattare i testi o assegnare il neretto o il corsivo, ma è indispensabile soprattutto per definire la struttura della pagina, i paragrafi, i titoli, si definiscono blocchi, si inserirscono immagini, e altre forme multimediali come audio e video; è un elemento HTML anche il tag principe del web che crea i link ipertestuali.

Il markup HTML è applicato alle pagine attraverso etichette che si chiamano tag, utilizzando normali editor di testo. In wordpress il markup è scritto utilizzando il blocco HTML dell’editor.

Ma HTML è utile in WordPress?

L’editor visuale di WordPress, è facile da usare, posso scrivere un’intera enciclopedia senza la necessità di conoscere una riga di codice; e allora perché dovrei sforzarmi ad imparare qualche principio di questo linguaggio? Intanto, semplifichiamo; L’HTML nella versione 5, si compone di circa un centinaio di tag, ma quelli utili per la formattazione del testo in WordPress, sono poco più di una decina e il tag <p>testo del paragrafo</p>, usato per definire inizio e fine di un paragrafo, che tanto impegna nella pubblicazione corretta delle pagine web, in WordPress non è neanche necessario definirlo, perché il sistema lo inserisce automaticamente tutte le volte che si preme il tasto invio e si va a capo.

Lo scopo per cui potrebbe essere utile conoscere alcuni tag HTML, è il desiderio di avere più controllo sul testo di quanto lo consenta l’editor visuale. Avere più controllo significa decidere come deve essere formattato un testo, dove comincia e dove finisce la formattazione di un paragrafo, quale gerarchia di titolo adottare, come descritto nell’articolo titoli, indici e sommari.

Spesso diventa utile lavorare in entrambi i modi, e alternare la vista Testo per applicare il markup, al modo Visuale dove scrivere rapidamente il testo e avere un’idea più precisa dell’aspetto dell’articolo. Come il navigatore di Google Maps. Ci si può affidare completamente a questo e sicuramente arrivi a destinazione, a volte però, se si conosce in parte il percorso, si può viaggiare in autonomia (editor Testo) per le strade che si conoscono, e affidarsi al navigatore (editor Visuale) per quel tratto di percorso che non si conosce.

Come si applica l’HTML

Marcare un testo con l’HTML è piuttosto semplice. Questo linguaggio si basa sull’uso di marcatori chiamati tag e vengono rappresentati dai simboli “<” e “>” all’interno dei quali si trova l’elemento necessario per indicare al browser cosa si vuole fare e su quale elemento si vuole applicare la formattazione.

Ecco alcuni esempi:

• Tag di apertura, <b>tag di chiusura</b>
• Tag di apertura, <em>tag di chiusura</em>
• Tag di aperura, <p>paragrafo</p>

Il testo a cui applicare la formattazione con i tag deve essere inserito tra il tag di apertura e quello di chiusura, in questo modo:

<strong>Testo di prova</strong>
<em>Qui inserirai il testo</em>

In HTML, per elemento si intende la stringa completa che comincia con il tag di apertura <tag>il suo contenuto e il tag di chiusura</tag>.

I tag sono sempre due, uno di apertura e uno di chiusura riconoscibile dal simbolo / (barra o slash) che precede il nome del tag.

Alcuni tag si dicono vuoti perché non hanno un tag di chisura specifico ma si scrivono così:

• <br /> impone al browser un’interruzione di riga;
• <hr />impone al browser una linea orizzontale;
• <img />il tag che indica al browser il caricamento di un’immagine.

L’HTML 5 consente di scrivere markup in modo abbastanza libero e non rende obbligatorio il tag di chiusura, così come non fa distinzione tra scrivere in minuscolo o maiuscolo.

Per una formattazione formalmente corretta, è consigliabile usare entrambi, i tag di apertura e di chiusura e usare il minuscolo.
È caldamente consigliato creare un’uniformità di scrittura, darsi delle regole, ed evitare forme miste, qualcosa in maiuscolo, altre in minuscolo, dimenticare di chiudere gli elementi. Perciò è necessario definire a priori il proprio stile di markup. Più si è precisi e uniformi, meno tempo si perde nella ricerca degli errori, e si creano pagine HTML corrette e rispondenti alle linee dettate dal W3C, il W3C o Word Wide Web Consortium è l’organismo che stabilisce e approva gli standard WEB.

Come usare i codici HTML all’interno di WordPress

Nell’editor di WordPress Gutenberg, si trova un blocco HTML personalizzato utile allo scopo di inserire un contenuto utilizzando markup HTML non disponibile nell’editor per strutturare qualche tipo di contenuto come nell’esempio della Lista di definizione assente tra i comandi forniti dall’editor, o anche per incorporare contenuti da applicazioni esterne tramite il comando iframe.

Allinterno del blocco HTML personalizato potrai usare tutti i tag dell’HTMl e dare stile al contenuto attraverso CSS in linea o esterno.

Tipi di Tag

I tag HTML che possiamo usare con l’editor sono:

b:

sta per bold, rende in grassetto il testo selezionato;

i:

sta per italic, rende in corsivo il testo selezionato;

link:

Il simbolo link serve ad inserire un URL tra il testo selezionato che sarà il testo su cui fare click. Questo tag è diverso da quelli che abbiamo visto fino ad ora. Infatti, nel tag di apertura è presente l’attributo href=”” all’interno delle virgolette deve essere inserito l’url di destinazione. Nell’HTML  questo è rappresentato dal tag <a href=”indirizzo della risorsa o URL”>testo del link</a>, mentre link manda ad altre risorse.

b-quote;

sta per blockquote indica le citazioni lunghe. WordPress applica una formattazione particolare alle citazioni. Anche questo nell’HTML “vero” è scritto <blockquote>testo</blockquote>.

Per citare autori o titoli di libri o altre fonti il tag è  <cite>nome della fonte</cite>. Per citazioni brevi, di solito di testo il tag è <q>testo breve</q>.

del:

Il tag crea testo barrato, con significato di cancellato.

ins:

di solito, dopo un testo barrato (quindi cancellato) ne viene inserito uno sostitutivo.

img:

inserisce un’immagine all’interno dell’articolo. Quando hai caricato la tua immagine ottimizzata per il web all’interno della libreria media, clicca “Modifica” e copia l’URL del file. Torna all’Editor di Testo e clicca img, infine, incolla l’URL del file immagine.

In questo caso è forse più rapido e intuitivo usare il pulsante Aggiungi media

ul:

con il tag ul si creano liste non ordinate (unordered list) dove l’ordine delle voci che compone l’elenco non ha importanza.
es:

 

• una voce
• un’altra voce
• ancora un voce

Per creare un elenco come questo, si seleziona il tag ul facendo click sul suo pulsante, fatto click, sulla barra dell’editor ul viene rimpiazzato da /ul e fai click anche su questo.  Selezionando questi due tag, hai definito l’inizio (ul) e la fine dell’elenco (/ul).

Ora si devono inserire le voci dell’elenco, queste sono precedute dal tag <li>  (list item) e si chiudono con il tag </li>.

Per inserire le voci dell’elenco procedi in questo modo:

1. fai click tra <ul> e </ul> così da inserire il cursore;
2. scrivi le voci;
3. con il mouse seleziona una voce;
4. fai click sul tag li. In questo modo, come descritto prima, il sistema inserisce in automatico, i tag di inizio e di fine markup, volendo si può procedere a definire singolarmente l’inizio e la fine della voce;
5. procedi a selezionare ogni voce e fai click sul tag li;

L’editor di WordPress offre un controllo abbastanza avanzato per la creazione degli elenchi, con la possibilità di spostare su e giù le voci elenco semplicemente selezionando e trascinando la o le voci da spostare.

ol:

per creare le liste ordinate (ordered list), dove l’ordine delle voci è importante, e sono precedute da un numero o lettera, si procede nello stesso modo di ul, ma il tag iniziale da cliccare non è ul, ma ol e il suo tag di chiusura sarà /ol.

code:

utilizzato per inserire codici all’interno dei testi. Serve infatti ad aggiungere i tag che formattano il testo con un font monospace.

more:

serve ad interrompere l’anteprima degli articoli in un punto specifico definito dall’autore, facendo apparire il link Read More;

chiudi tag:

il pulsante chiudi tag non aggiunge un tag html, ma inserisce un tag di chiusura dove ce ne è uno aperto.

Liste di definizione

La descrizione dei tag definita sopra, è formattata come lista di definizione, vale a dire, un nome seguito dalla sua spiegazione, come nel caso dei dizionari, ed è fatta in modalità Testo utilizzando i tag

<dl>definition list</dl>

<dt>defintion term</dt>

<dd>definition data</dd>

Una lista di definizione si formatta in questo modo:

1. Passa all’editor Testo
2. Inserisci il tag di apertura <dl> che dice al browser “attento qui comincia una lista di definizione”
3. Inserisci il tag <dt>scrivi il primo termine da definire e scrivi il tag di chiusura</dt>
4. Inserisci il tag <dd>scrivi la definizione del termine 1 e scrivi il tag di chiusura</dd>
5. Inserisci il tag <dt>scrivi il secondo termine di definizione e il tag di chiusura</dt>
6. Inserisci il tag <dd> scrivi la definizione del termine 2 </dd>
7. Inserire tutti gli altri termini e loro definizioni. Fai attenzione ad aprire e chiudere tutti i tag.
8. Inserire il tag che chiude la lista di definizione </dl> che dice al browser “guarda che qui finisce la lista di definizione”.

Il markup dovrebbe essere simile a questo:

<dl>

<dt>termine di definizione 1</dt>

<dd>spiegazione del termine 1</dd>

<dt>termine di definizione 2</dt>

<dd>spiegazione del termine 2</dd>

<dt>termine di definizione 3</dt>

<dd>spiegazione del termine 3</dd>

</dl>

Con Html si possono fare moltissime altre cose, se poi riusciamo a collegare l’HTML con le regole CSS (Cascading Style Sheets), allora potremmo personalizzare profondamente qualsiasi pagina Web.

HTML e CSS: saperne di più

HTML è utile per creare pagine Web da zero, e se viene unito all’uso delle regole di presentazione e layout CSS o fogli di stile a cascata, può dare grandi risultati con piccoli sforzi.

Se vuoi saperne di più su HTML e CSS puoi leggere la guida HTML e CSS pubblicata su Spazioprever.