Quali sono i tag HTML di base?

Quali sono gli elementi decisivi per iniziare a creare una pagina HTML degna di questo nome? Qui hai una lista di attributi e codici che non puoi ignorare dal punto di vista tecnico.

Ci sono dei tag HTML di base che non puoi ignorare. Sono la base per un lavoro di scrittura dei testi, pubblicazione articoli sul blog e di pagine web. Anche se i CMS come WordPress hanno semplificato il lavoro, il codice HTML lo devi conoscere.

Quali sono i tag HTML di base?
Elenco dei tag HTML indispensabili.

Non è difficile. Il codice HTML e i relativi editor si basato su un sistema di tag che devi aprire e chiudere, con delle parentesi angolate e uno slash. Non è sempre così.

Ma nella maggior parte dei casi questa è la logica per scrivere codice. Da dove iniziare? Ecco i principali tag HTML che ti permettono di gestire una serie di aspetti fondamentali per creare articoli di un blog e gestire gli aspetti base dei siti web.

Tag

L’HTML è un linguaggio di markup che si basa su un insieme di elementi che permettono di dare una forma al contenuto di una singola pagina web.

Sono appunto i tag, dei marcatori che consentono di modificare il testo, gestire moduli o inserire elementi.

Ad esempio con i tag puoi dare forma corsiva a una stringa di contenuto o richiamare un’immagine dal server. I tag hanno un nome (tipo img) compreso tra due parentesi ad angolo <> e usano il simbolo = per esprimere un attributo che viene rinchiuso tra virgolette.

Tutti i tag hanno una chiusura, un modo per indicare la fine di un determinato valore. Ma ciò può avvenire con un corrispettivo simile se si tratta di un tag contenitore o con il simbolo slash all’interno dello stesso tag.

<p>Questo è un paragrafo.</p>
<br/>

La differenza tra tag e attributo: il primo è un marcatore mentre il secondo una sua caratteristica che viene esplicitata attraverso i già citati simboli dell’uguale e delle virgolette. Qui hai la lista intera di tutti i tag HTML (www.w3schools.com).

Ma per agevolarti la vita ho deciso di riassumere una lista con i principali tag HTML che dovrai conoscer e usare anche con un editor WYSIWYG tipo quello di WordPress.

TagFunzione
<br>A capo
<p>Paragrafo
<strong>Grassetto
<em>Corsivo
<img>Immagine
<a>Link
<iframe>Embedda HTML
<span>Contenitore inline
<div>Contenitore di blocco
<ul>Lista puntata
<ol>Lista numerata
<blockquote>Citazione

Questa è una tabella con i principali tag HTML da approfondire nella lista. Ricorda che esistono anche i meta tag, vale a dire dei comandi che comunicano non con l’utente ma con il motore di ricerca. Come il meta tag noindex e la meta description.

Da leggere: quali sono i meta tag di Google

Br

Iniziamo la lista dei principali tag HTML con un elemento base: il comando per inserire a capo. Ovvero una singola linea di spazio. L’uso di questo tag:

<p>In questo<br> modo tu puoi<br> andare a capo.</p>

Sappiamo che è un tag vuoto, senza chiusura. E che non serve a creare paragrafi ma un semplice spazio per andare su una nuova linea di testo nella pagina web.

La sintassi ideale per questo tag HTML: <br> o <br/>? Dipende dallo standard utilizzato: con l’HTML5 è necessario utilizzare la chiusura con lo slash. In ogni caso ricorda che questo elemento deve essere compreso in un paragrafo.

Lo spazio HTML orizzontale non si mette con il <br> ma con un altro tag che riguarda lo spazio vuoto, vale a dire &nbsp. Attenzione, può rovinare la formattazione.

P

Il paragrafo, l’elemento chiave della struttura di pagina web. Ogni blocco di testo è un paragrafo che viene incluso in questo tag di base per ogni blogger e web writer.

<p <p style="text-align:right">>Questo è un blocco di testo.</p>

Questo elemento HTML può essere formattato in modi differenti, ad esempio allineando in un certo modo con l’attributo align. Però questo compito dovrebbe essere del CSS in modo da non dover definire ogni volta questa condizione di stile.

Strong

Un tag HTML base, un fondamentale per ogni blogger. Serve a inserire il grassetto su una stringa di testo. Rappresenta un tag con valenza semantica, rispetto al <b> (nel senso di bold) non dai solo un colore più scuro al font: lo rendi più importante.

<strong>Questo è un testo in grassetto</strong>

Quindi è corretto usare strong nei tuoi articoli, contenuti online e post. Ecco un esempio, il testo compreso tra i due tag apparirà in grassetto (quindi così).

Ul

Il tag HTML decisivo per iniziare una lista puntata (unordered list). Si mette all’inizio dei vari elementi che devono essere inseriti grazie al tag <li>. Esempio:

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ul>

Ricorda che se vuoi creare non una lista puntata ma una numerata devi usare il tag HTML <ol> che sta, appunto, per order list. Quindi una combinazione ordinata.

Em

Simile allo strong ma con un compito differente: aggiungere il corsivo. Questo è sicuramente un tag HTML di base, necessario per gestire la buona formattazione.

<em>Questo è testo in corsivo</em>

Anche in questo caso non dobbiamo confondere <em> con <i> che sta per italic. Si tratta di un tag che dà solo forma al font e non ha un corrispettivo semantico.

Img

La lista dei tag HTML deve aggiungere sicuramente questo: la soluzione per aggiungere le immagini alla pagina web. Si tratta di un tag senza chiusura.

<img src="immagine.jpg" alt="testo" width="500" height="600">

Ci sono alcuni attributi indispensabili: src serve a individuare e richiamare il permalink del media, alt per definire il testo alternativo da mostrare nel caso in cui non si presenti il visual, with e height per dare indicazioni sulle dimensioni.

A href

Impossibile procedere nella creazione di articoli, landing page e pagine web senza una buona conoscenza del tag HTML <a> per inserire i link.

<a href="link.html" rel="nofollow">Anchor text</a>

Il tag ha una chiusura e un anchor text, vale a dire un’ancora composta da una o più parole che consente di creare il link ipertestuale nel documento. Puoi indentare anche un tag immagine in modo da rendere una foto cliccabile.

Ricorda che esistono una serie di attributi come il rel nofollow per togliere valore SEO al link e il target blank che serve ad aprire la pagina in un’altra scheda del browser. Ricorda che con l’uso del cancelletto si possono inserire salti di pagine.

Title

Impossibile pubblicare la lista dei principali tag HTML senza ricordare al mondo intero, o almeno ai blogger, che esiste il title. Vale a dire uno degli elementi fondamentali per la SEO. Il tag title lo trovi nella serp, lo vedi negli snippet ed è il titolo che comunichi a Google all’interno della sezione <head> di una pagina web.

<title>Questo è il tag title della pagina</title>

Su un blog WordPress puoi modificare questo elemento con il plugin Yoast. Da non confondere con l’attributo title che si inserisce nel tag dei link o delle immagini.

Come fare l’ottimizzazione del tag title? Niente liste di keyword, massimo 60-65 caratteri per avere una lunghezza ideale di questo titolo indispensabile.

Da leggere: quali sono le principali regole HTML

Header

Tra i codici HTML che devi conoscere a tutti i costi: la lista di header che consente di organizzare la struttura della pagina web. Qual è la logica di questa combinazione?

<H1>Titolo principale</H1>
<H2>Paragrafo</H2>
<H3>Sotto-paragrafo</H3>

In pratica abbiamo una lista di elementi HTML che vanno dal titolo principale, il tag H1, a quello dei paragrafi e degli elementi gerarchicamente inferiori. Dopo l’headline di partenza si procede per tag H2, H3, H4, H5 e H6. Vale a dire l’ultimo.

I SEO ragionano sull’importanza degli header per i motori di ricerca. Opinione di John Mueller: sono importanti ma non decisivi per il ranking, usali quando necessari.

I tag header sono importanti.

Questi sono i principali tag che devi prendere in considerazione. Ora lascio a te la parola: secondo te ho dimenticato qualcosa? Lascia nei commenti la tua opinione.

RISPONDI AL COMMENTO

Please enter your comment!
Please enter your name here