Gli elementi HTML e i loro tag

Gli elementi HTML e i loro tag
Elementi, tag, html, contenitori

In questo articolo vediamo cosa sono gli elementi HTML, quali sono quelli principali e anche una tabella con la spiegazione dei vari tag.

Un elemento HTML (chiamato anche tag) è un marcatore che indica com’è strutturato un documento o una pagina HTML e serve anche per ordinare i contenuti e dargli un ruolo. L’elemento è definito da un tag di apertura, alcuni contenuti e un tag di chiusura.

Poniamo il caso che dobbiamo scrivere il titolo di un articolo: il tag principale per gli articoli è h1. L’elemento verrà scritto così:

<h1>Titolo 1</h1>

Ovviamente quando si apre la pagina, il lettore vedrà scritto Titolo 1 (vedi immagine sotto)

tag html h1

Alcuni elementi HTML sono definiti vuoti perché non gli si scrive nessun contenuto. Ad esempio, il tag <br> serve per portare la frase successiva nella riga sotto e non ha neppure il tag di chiusura. Molti elementi vengono chiamati anche contenitori perché descrivono porzioni di pagina, di aree o di contenuti come i paragrafi o il corpo della pagina.

Gli elementi HTML possono anche essere nidificati, cioè possono essere contenuti in altri elementi. Facciamo l’esempio di una semplice pagina web:

<!DOCTYPE html>
<html lang="it"> 
<head> 
  <title>Titolo del sito</title> 
</head> 
<body> 
  <h1>Sottotitolo1</h1> 
    <p>Paragrafo.</p> 
</body> 
</html>

Qui sono indicati vari tag principali degli elementi HTML:

  • Il tag <html> fa capire al browser che il file che stiamo scrivendo è un documento web
  • Nel contenitore <head> viene indicato il titolo del sito, o della pagina. Inoltre, si possono inserire qui il rimando ai fogli di stile, o indicare qui come si vuole formattato un testo.
  • Nel tag <body> inseriremo tutto ciò che vogliamo far vedere nella nostra pagina web, quindi il titolo principale e i vari sottotitoli come anche i contenuti, le immagini e i video.

E’ sempre importante inserire il tag di chiusura negli elementi che lo prevedono. Ed è bene anche scriverli sempre in minuscolo.

Lista dei tag HTML

Segue ora un elenco dei tag HTML con la relativa spiegazione:

TagDescrizione
<!..(contenuto)–>Nel contenuto possiamo scrivere dei commenti che non verranno letti nella pagina web. Servono come indicazioni personali di chi si occupa del documento HTML.
<!DOCTYPE>Indica il tipo di documento che stiamo scrivendo
<a>Inserisce un collegamento ipertestuale, un link esterno al sito o interno.
<abbr>Indica che la parola inserita al suo interno è un’abbreviazione
<address>L’autore del sito inserisce qui i modi per essere contattato, es. l’email
<area>Definisce un’are specifica all’interno di un’immagine o di una mappa
<article>All’interno viene scritto un articolo. E’ più specifico del <div>
<aside>E’ un contenuto extra correlato a quello principale, di solito posto nella barra laterale.
<audio>Inserisce al suo interno un file audio (mp3 e altri formati)
<b>Il testo al suo interno viene scritto in grassetto
<base>All’interno del contenitore head, indica l’URL o indirizzo predefinito per tutti i collegamenti in una pagina se non ne viene specificato un altro
<bdi>Isola una parte di testo che potrebbe essere formattata in una direzione diversa dalla nostra lingua
<bdo>Possiamo specificare in quale direzione riportare il testo (da sinistra a destre come in italiano o viceversa)
<blockquote>Si inserisce qui la citazione prese da un’altra fonte, come anche i commenti di altri utenti.
<body>Definisce il corpo del documento
<br>Indica l’interruzione di una riga. Tutto ciò che viene scritto dopo andrà a capo
<button>Crea un pulsante cliccabile
<canvas>Permette di disegnare e modificare elementi grafici. Richiede il supporto dello JavaScript
<caption>Aggiunge la didascalia ad una tabella
<cite>Si mette all’interno del blockquote e indica il nome della fonte di una citazione
<code>Tutto ciò che viene scritto qui viene considerato come codice informatico (HTML, CSS, ecc,). Il browser non lo interpreterà e lo visualizzerà così com’è.
<col>Modifica le proprietà di una colonna presente in una tabella. Si mette all’interno del contenitore colgroup
<colgroup>Specifica una o più colonne dentro una tabella che devono essere modificate
<data>E’ usato per aggiungere un valore leggibile ad una macchina che processa i dati ma anche una traduzione per l’uomo. Esempio banale, il pacco n.24535 indica uno smartphone, marca x, modello y. Una macchina leggerà il primo valore, il browser ci mostrerà il secondo
<datalist>Fornisce all’utente un elenco di opzioni tra cui scegliere, esempio il paese in cui vive o la lingue che sa leggere.
<dd>Inserito in un elenco o lista di descrizioni <dl>, indica il significato di un termine
<del>Taglia il testo al suo interno con una linea centrale, per indicare che è stato cancellato da un documento
<details>Crea un riquadro interattivo con del testo che un utente può visualizzare o nascondere
<dfn>Specifica un termine che verrà definito e spiegato dentro il contenuto
<dialog>Crea una finestra di dialogo popup
<div>Specifica una sezione dentro il documento. E’ come un riquadro modificabile
<dl>Crea una lista di definizioni
<dt>Specifica un singolo termine dentro una lista di definizione che deve essere poi spiegato
<em>Da enfasi ad una parola o frase, rendendola in corsivo
<embed>E’ il contenitore per una risorsa esterna, come una pagina web all’interno della nostra
<fieldset>Crea dei riquadri all’interno di un modulo che raggruppa gli elementi correlati, ad esempio i dati anagrafici
<figcaption>Aggiunge una didascalia ad un’immagine che si trova dentro l’elemento <figure>
<footer>L’ultima parte di una pagina web, dove inseriamo i dati del nostro sito, i rimandi per il copyright, la privacy policy e altre informazioni importanti
<form>Crea un modulo per iscriversi ad un sito, un forum, un blog, o ad un servizio di newsletter.
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>Inserisce i sottotitoli in ordine di importanza
<head>Contiene informazioni e metadati che lo riguardano come gli stili dei caratteri. Il contenuto non viene visualizzato nella pagina web
<header>E’ un contenitore dove vengono inseriti il nome e il logo del sito, e un menù di navigazione o i social
<hr>Crea una linea di separazione orizzontale
<html>Indica che il documento è di tipo HTML
<i>Rende il testo in corsivo, usato in maniera generica
<iframe>Crea un frame dentro il documento
<img>Inserisce un’immagine
<input>All’interno di un form, crea un campo di testo o un pulsante
<ins>Il testo viene sottolineato. Si usa accanto a <del> per indicare la nuova parola inserita nel documento
<kbd>Permette di inserire i caratteri della tastiera
<label>Scrive l’etichetta in un form
<legend>Dà un titolo allo <fieldset>
<li>Inserisce un elemento di una lista
<link>Inserisce un collegamento ipertestuale, un link
<main>Al suo interno si trova il contenuto principale del documento
<map>Inserisce una mappa di immagine, per esempio un’area che cliccandoci rimanda ad un sito web specifico
<mark>Evidenzia un testo per dargli importanza
<meta>Inserisce la meta descrizione di una pagina HTML
<meter>Rappresenta una misura scalare indicando il suo valore massimo
<nav>Crea una sezione che contiene link o collegamenti ad altre pagine.
<noscript>Inserisce del testo alternativo quando il browser non visualizza uno script
<object>Tag corretto, secondo il W3C, per inserire i file multimediali audio e video
<ol>Crea un elenco ordinato
<optgroup>Serve a raggruppare le opzioni correlate in un contenitore <select>
<output>Rende il risultato di un calcolo o di un’operazione
<p>Crea un paragrafo
<param>Specifica dei parametri per un elemento <object>, ad esempio fa partire automaticamente un video
<picture>Mostra immagini diverse a seconda delle dimensioni del browser
<pre>Inserisce del testo preformattato, senza font o colori
<progress>Rappresenta lo stato di completamento di un’azione o di un lavoro, esempio la barra di un aggiornamento o di un download
<q>Inserisce una citazione dentro un testo o una riga
<rp>Usato quando un browser non supporta l’elemento <ruby>
<rt>Inserisce un’attonazione su come leggere o pronunciare un carattere asiatico
<ruby>Contenitore dove vengono inserire le annotazioni per leggere i caratteri asiatici
<s>Funzione come <del> ma per indicare che il testo non è più valido o aggiornato
<samp>Definisce l’output di esempio di un programma informatico
<script>Inserisce uno JavaScript
<section>Crea una sezione generica all’interno di un documento o di un’applicazione. Ad esempio, un riquadro che contiene gli articoli correlati
<select>Crea un elenco a discesa, usato spesso nei moduli
<small>Rende il testo al suo interno più piccolo
<source>Inserisce più risorse per un elemento multimediale, ad esempio per un video si possono aggiungere file di diversi formati in modo che il browser possa scegliere quello che compatibile
<span>Elemento in-line che permette di colorare o modificare porzioni di testo
<strong>Rende un testo in grassetto per sottolineare la sua importanza
<style>Permette di inserire le informazioni di stile (le regole CSS) all’interno del documento
<sub>Serve per scrivere il testo in pedice
<summary>Inserisce un’intestazione visibile per il tag <details>
<sup>Scrive il testo in apice
<svg>Crea un contenitore per inserire i file SVG
<table>Crea una tabella
<tbody>Viene inserito il contenuto di una tabella
<td>Crea una cella nella tabella
<template>Crea un elemento che nasconde il contenuto quando la pagina HTML viene caricata
<textarea>Inserisce un’area di testo all’interno dell’elemento <form>
<tfoot>L’ultima riga di una tabella con i dati di riepilogo, il totale e altro
<th>Indica una cella che contiene un’intestazione
<thead>Crea una riga di intestazione
<time>Inserisce un orario o una data
<title>E’ il titolo del documento o della pagina web
<tr>Crea una riga ad una tabella
<track>Inserisce del testo, come sottotitoli, didascalie o altri file che contengono testo a un elemento <audio> o <video>
<u>Sottolinea un testo, si usa per indicare errori di grammatica o di ortografia
<ul>Crea una lista generica, che non ha un ordine numerico o di altro tipo. Esempio, la lista della spesa
<var>Inserisce una variabile
<video>Incorpora al documento un contenuto video
<wbr>Inserisce un’interruzione di riga che funziona a seconda delle dimensioni della pagina
Elenco degli elementi HTML

Gli elementi HTML hanno inoltre degli attributi che gli forniscono delle informazioni aggiuntive come il colore di un paragrafo o le dimensioni di un <div>.