Quali sono i tag HTML più importanti?


Postato in data novembre 9th, da Riccardo Esposito in Blog. No Comments

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 WYSIWYG permette di lavorare con semplicità, è come scrivere su Word.
principali tag html
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à? Ecco una guida base per iniziare.

Cosa sono i tag HTML?

Prima di iniziare è giusto fare chiarezza: cosa sono i tag HTML? Degli elementi all’interno di un documento per dare determinate caratteristiche a ciò che stai creando.

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.

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.

La base di partenza? BODY e HEAD, ovvero le due macro sezioni di una pagina web. Nel BODY ci sono tutte informazioni che l’utente vede, mentre nell’HEAD trovi i meta tag di Google, come la description e il tag title, elemento decisivo per il posizionamento della pagina web.

Da leggere: come inserire tag alt nelle immagini WordPress

Tag HTML grassetto e corsivo

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:

<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 diversi da STRONG ed EM per aggiungere la formattazione?

No, perché non hanno lo stesso valore semantico: sono semplici decorazioni stilistiche, mentre quest’ultimi comunicano una rilevanza diversa e maggiore delle frasi interessate.

Come creare una lista con i tag

Una lista: 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.

Inserire un link nella pagina

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.

Tag HTML per creare tabella

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.

Inserire immagini con i tag HTML

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. 

I principali tag HTML secondo te

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.

Riccardo Esposito

Blogger per Serverplan, webwriter freelance e autore di My Social Web. Scrivo ogni giorno. Ho pubblicato un libro dedicato al mondo del blogging. Ah, l'ho già detto che scrivo?

Latest posts by Riccardo Esposito (see all)





Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*