Hosting WordPress preinstallato e gestito con il 50% di sconto. Scopri la promo
Conoscere i principali tag HTML è importante. Vuoi pubblicare un sito da solo? Non è un’impresa impossibile. Soprattutto quando hai un hosting con WordPress preinstallato che consente di sfruttare il CMS senza usare FTP e altre diavolerie. Però poi devi gestirlo, devi creare dei contenuti.
L’editor WordPress Gutenberg permette di lavorare con semplicità, è come scrivere su un plugin per creare landing page. Basta questo? No, non devi avere le competenze di un webmaster ma non basta saper scrivere per pubblicare articoli, creare pagine web realmente utili al lettore. O al potenziale cliente. Devi conoscere l’HTML, almeno una parte. Quali sono i tag HTML più importanti? Quali competenze devi avere per migliorare la tua attività?
Argomenti
Prima di iniziare è giusto fare chiarezza. Con questo termine intendiamo degli elementi all’interno di un documento basato sull’Hypertext Markup Language per dare determinate caratteristiche a ciò che stai creando. In sintesi, i tag sono delle informazioni usate per strutturare e organizzare il contenuto.
Un tag HTML può contenere del testo, un’immagine, un video e può modificare l’apparenza di ciò che hai pubblicato. Oppure puoi inserire delle gerarchie. Ogni tag HTML è inserito in parentesi angolari < > e può riportare degli attributi che forniscono ulteriori informazioni su come utilizzare l’informazione.
Bisogna ricordare che alcuni tag HTML si aprono e si chiudono, altri no. In questo linguaggio di markup, ad esempio, il </ br> per lo spazio non ha bisogno di apertura e chiusura, lo stesso vale per il tag <img> mentre il <p> del paragrafo sì. Senza dimenticare l’inserimento dei link.
Insomma, i tag sono decisivi per il tuo lavoro. Non devi essere per forza un tecnico o uno sviluppatore: la conoscenza di questi elementi è indispensabile anche per i web writer e per chi si occupa di content marketing. D’altro canto, come suggerito prima, non devi neanche sapere tutto. Ecco perché oggi ho deciso di raccogliere in questa lista i principali tag HTML. Quelli che devi usare sempre per la tua attività di editor.
Da leggere: come inserire tag alt nelle immagini WordPress
La base di partenza? HTML e head, ovvero le due macro sezioni di una pagina web. La prima definisce l’inizio e la fine d un documento con alcune informazioni standard, nell’HEAD trovi i meta tag di Google, come la description e il tag title, elemento decisivo per il posizionamento della pagina web.
Subito dopo la sezione HTML e head inizia il body dove ci sono tutte informazioni che l’utente vede. Qui puoi trovare i principali tag HTML per i contenuti, per organizzare le sezioni e formattare il testo. Quali sono gli elementi del linguaggio di markup che devi conoscere?
Una delle domande più comuni: come mettere grassetto al testo? Con WordPress basta usare la tabella che vedi nell’editor di testo. Puoi evidenziare il testo e cliccare sul tasto B. Ma per intervenire sul codice hai un comando specifico. Lo stesso vale per il corsivo, ecco il markup adatto:
<strong></strong>
<em></em>Per il grassetto devi usare lo STRONG e per il corsivo EM. Ora so cosa stai per chiedere: ma posso usare anche altri tag tipo <b> e <i> per aggiungere la formattazione? No, non hanno lo stesso valore semantico: sono decorazioni stilistiche, mentre quest’ultimi comunicano rilevanza.
Una lista in HTML: quale soluzione migliore per ottimizzare la leggibilità e rendere tutto più semplice da fruire? Con la lista puntata o numerata tutto diventa più elementare. Anche in questo caso puoi usare i comandi dell’editor ma puoi ottenere lo stesso risultato con i tag HTML:
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<ol>
<li>Elemento 4</li>
<li>Elemento 5</li>
<li>Elemento 6</li>
</ol>
Come puoi vedere ci sono due elementi fondamentali. UL apre la lista e LI rappresenta i vari punti. Soluzione diversa: OL è la soluzione per creare una lista numerata, alternativa utile ai semplici dot. Ovvero gli elementi grafici che determinano i singoli elementi nel contenuto.
Il tag HTML che consente di aggiungere un collegamento ipertestuale nel documento sul quale stai lavorando. Questa è la base del concetto di web, di conseguenza hai bisogno di conoscere al meglio questa soluzione. Ecco come inserire un link in tutte le sue sfumature.
<a href="www.url.com">link da inserire</a>
Ci sono gli attributi che consentono di dare al link delle caratteristiche differenti. Ad esempio puoi aggiungere il target=_”blank” per aprire il link in una finestra differente e il rel=”nofollow” per rendere il collegamento invisibile a Google sotto il punto di vista SEO.
Nella maggior parte dei casi le azioni che ho elencato possono essere eseguite con un comando dell’editor. Discorso a parte per le tabelle in HTML, un incubo per chi non conosce i tag. Di default WordPress non ha le indicazioni necessarie per gestire colonne e caselle varie.
<table style="width:100%">
<tr>
<th>Cella 1</th>
<th>Cella 2</th>
<th>Cella 3</th>
</tr>
<tr>
<td>Cella 3</td>
<td>Cella 4</td>
<td>Cella 5</td>
</tr>
</table>Come puoi intuire il tag TABLE apre le danze e le righe sono gestite da TR. Il testo nelle celle si trova, invece, nei TD. A questo punto è facile gestire le tabelle in HTML, vero? Però se vuoi un aiuto puoi utilizzare il plugin TinyMCE, perfetto per avere più formattazione. Aggiungo un dettaglio importante: oggi con l’editor Gutenberg è diventato molto più facile inserire una tabella in WordPress.
Aggiungere un’immagine su WordPress è un’azione relativamente semplice. Basta andare sul tasto specifico in alto a sinistra e aggiungere il contenuto. Che deve avere una buona ottimizzazione SEO, e deve essere un visual leggero. Qual è il tag in questione? Eccolo!
<img src="img_cane.jpg" alt="Cane che passeggia" width="500" height="600">Come puoi vedere è IMG SRC a richiamare l’immagine, poi ci sono una serie di elementi extra che danno caratteristiche e funzionalità alla foto. Ad esempio il tag alt è decisivo per rendere il contenuto leggibile da Google, ed è uno dei passi essenziali per il posizionamento.
Poi ci sono le dimensioni che su WordPress vengono inserite in automatico, ma tu devi assicurarti sempre che ci siano perché velocizzano il caricamento della pagina. Inoltre puoi aggiungere a questa stringa l’attributo title e la didascalia: soluzioni extra per descrivere.
Questi sono i tag più importanti. Non sono tutti, anzi: questo è solo un assaggio di ciò che puoi fare con una conoscenza completa, raffinata e continua del codice HTML. Per questo ti consiglio di dare uno sguardo al sito www.w3schools.com che racchiude tutto ciò che riguarda o principali tag HTML. Se hai altre domande e hai bisogno di qualche indicazione specifica non esitare: lascia tutto nei commenti per approfondire e chiarire.
