HTML5 e W3C - anche WordPress
Descrizione dei tag HTML5
Autore: Andrea Pacchiarotti
Ultimo aggiornamento: 11 Gennaio 2023
Categoria: Web Marketing Costruzione siti web HTML5
Il W3C, attraverso l'HTML, elenca i tag e le descrizioni per costruire le pagine web secondo gli standard ufficiali; nella lista che segue non vengono mostrati i tag HTML5 obsoleti e deprecati, ma al contempo verrà data un'anticipazione dell'HTML5.2.
Non aspettiamo altro tempo e mostriamo i Tag HTML5 per creare pagine secondo il W3C (anche WordPress) attraverso questo linguaggio di marcatura.
Sommario HTML5
Un link attinente, anche se in maniera indiretta rispetto al puro HTML, è quello che esemplifica i codici dei colori web in lingua inglese, in esadecimale e con la terna RGB. Sicuramente ti interessa leggere anche quali sono le regole CSS3.
HTML5
<!--...--> Commento
<p>Questo è un paragrafo</p>
<!-- I commenti non sono mostrati dai browser -->
Nel browser compare solo: Questo è un paragrafo
<!DOCTYPE> Dichiara il tipo di documento
<!DOCTYPE html>
<html>
<head> <title></title> </head>
<body> </body>
</html>
<a> Collegamento ipertestuale
<a href="https://www.andreapacchiarotti.it">Andrea Pacchiarotti</a>
<abbr> Abbreviazione o acronimo
La <abbr title="World Health Organization">WHO</abbr> è stata fondata nel 1948.
<address> Informazione di contatto
<address>
Scritto da <a href="mailto:pacchiarotti@gmail.com">Andrea Pacchiarotti</a><br>
Vienimi a trovare su:<br>
www.andreapacchiarotti.it <br>
Roma <br>
Italia
</address>
<area> Aree cliccabili nella mappa immagine
<img src="pianeti.png" width="150" height="100" alt="Pianeti" usemap="#pianeti">
<map name="pianeti">
<area shape="rect" coords="0,0,82,126" href="sole.html" alt="Sole">
<area shape="circle" coords="90,58,3" href="mercurio.html" alt="Mercurio">
<area shape="circle" coords="124,58,8" href="venere.html" alt="Venere">
</map>
<article> Testo di un articolo
<article>
<h1>Google Chrome</h1>
<p>Google Chrome è nato nel 2008</p>
</article>
<aside> Testo all'interno della spalla
<p>Andrò in Kenya la prossima estate</p>
<aside>
<h4>Kenya</h4>
<p>Il safari è bellissimo</p>
</aside>
<audio> Contenuto audio
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Il tuo browser non supporta il tag audio
</audio>
<b> Grassetto
<p>Questo non è in grassetto <b>questo è in grassetto</b></p>
<base> Specifica la base URL per tutti gli URL relativi in un documento
<head>
<base href="https://www.andreapacchiarotti.it/immagini/" target="_blank">
</head>
<body>
<img src="volto.gif" width="25" height="40" alt="Volto di Andrea">
</body>
<bdi> Isola testo che potrebbe essere formattato con altra direzione rispetto al resto del testo
<p dir="ltr">Questa parola arabica <bdi>PAROLA_ARABICA</bdi> è automaticamente mostrata da destra verso sinistra>
Risultato:
Questa parola arabica ACIBARA_ALORAP è automaticamente mostrata da destra a sinistra
<bdo> Annulla la direzione corrente del testo
<bdo dir="rtl">
Questo testo andrà da destra verso sinistra
</bdo>
Risultato:
artsinis osrev artsed ad àrdna otset otseuQ
<blockquote> Quota un testo preso da un'altra fonte e lo rientra verso destra
<blockquote cite="https://www.andreapacchiarotti.it">
Binary digit - BIT: dal nulla il tutto
</blockquote>
<body> Rappresenta il corpo del documento
<!DOCTYPE html>
<html>
<head> <title></title> </head>
<body> </body>
</html>
<br> Interruzione di riga
<p>Testo in linea<br>che qui va a capo</p>
<button> Bottone cliccabile
<button type="button" onclick="alert('Ciao mondo!')">Cliccami!</button>
<canvas> Usato per disegnare grafiche al volo via scripting (normalmente con JavaScript)
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
<caption> Didascalia della tabella
<table>
<caption>Guadagno annuale</caption>
<tr><th>Mese</th><th>Euro</th></tr>
<tr><td>Gennaio</td><td>2.500</td></tr>
</table>
<cite> Titolo di un lavoro
<p><cite>L'urlo</cite> di Edward Munch. 1893</p>
<code> Racchiude un pezzo di codice. Viene formattato in Courier New
<code>Pezzo di codice</code><br>
<col> Specifica le proprietà di colonna all'interno di <colgroup>. In quest'esempio le prime 2 colonne sono rosse e la terza è gialla
<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr><th>ISBN</th><th>Titolo</th><th>Prezzo</th></tr>
<tr><td>3476896</td><td>HTML</td><td>Euro 50</td></tr>
</table>
<colgroup> Raggruppa le colonne delle tabelle. Vedi <col>
<datalist> Raggruppa opzioni
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<dd> Valore di un termine nelle descrizioni
<dl>
<dt>Bevande</dt>
<dd>Tè</dd>
<dd>Caffè</dd>
</dl>
<del> Testo barrato
<p>Il mio colore preferito è <del>blu</del></p>
<details> Raggruppa dettagli aggiuntivi che l'utente può vedere o nascondere tramite freccia
<details>
<summary>Copyright 1999-2014</summary>
<p>Andrea Pacchiarotti. Tutti i diritti riservati</p>
<p>Contenuti e fotografie di questo sito sono di proprietà di Andrea Pacchiarotti</p>
</details>
<dfn> Definisce un termine. Appare in corsivo
<p><dfn>HTML5</dfn> è lo standard attuale</p>
<dialog> Finestra di dialogo
<dialog open>Creo un riquadro</dialog>
<div> Contenitore
<div style="color:#FF0000">
<h3>Sono un'intestazione</h3>
<p>Sono un paragrafo</p>
</div>
<dl> Lista di descrizione
<dl>
<dt>Bevande</dt>
<dd>Tè</dd>
<dd>Caffè</dd>
</dl>
<dt> Un termine della descrizione
<dl>
<dt>Bevande</dt>
<dd>Tè</dd>
<dd>Caffè</dd>
</dl>
<em> Enfatizza un termine. Appare in corsivo
<em>Sono un testo enfatizzato</em>
<embed> Contenitore per un'applicazione esterna non HTML. Qui l'esempio incorpora un'animazione in Flash
<embed src="helloworld.swf">
<fieldset> Raggruppa elementi in un modulo
<form>
<fieldset>
<legend>Anagrafica</legend>
Nome: <input type="text"><br>
Email: <input type="text"><br>
Date di nascita: <input type="text">
</fieldset>
</form>
<figcaption> Didascalia di un'immagine
<figure>
<img src="img_pulpit.jpg" alt="Squalo" width="300" height="150">
<figcaption>Fig1. - Lo squalo in natura</figcaption>
</figure>
<figure> Contenitore per un'immagine
<figure>
<img src="img_pulpit.jpg" alt="Squalo" width="300" height="150">
<figcaption>Fig1. - Lo squalo in natura</figcaption>
</figure>
<footer> Piè di pagina di un articolo
<footer>
<p>Post di: Andrea Pacchiarotti</p>
<p>Contatto: <a href="mailto:pacchiarotti@gmail.com">
pacchiarotti@gmail.com</a></p>
</footer>
<form> Modulo
<form>
<fieldset>
<legend>Anagrafica</legend>
Nome: <input type="text"><br>
Email: <input type="text"><br>
Date di nascita: <input type="text">
</fieldset>
</form>
<h1>...<h6> Intestazioni
<h1>Sono un'intestazione 1</h1>
<h2>Sono un'intestazione 2</h2>
<h3>Sono un'intestazione 3</h3>
<h4>Sono un'intestazione 4</h4>
<h5>Sono un'intestazione 5</h5>
<h6>Sono un'intestazione 6</h6>
<head> Contenitore del titolo di un documento
<!DOCTYPE html>
<html>
<head> <title></title> </head>
<body> </body>
</html>
<header> Intestazione di un articolo
<article>
<header>
<h1>Sono un'intestazione</h1>
</header>
<p>Sono un paragrafo</p>
</article>
<hr> Linea orizzontale per separare contenuti
<hr>
<html> Contenitore dei tag del documento
<!DOCTYPE html>
<html>
<head> <title></title> </head>
<body> </body>
</html>
<i> Corsivo
<p>La mia macchina si chiama <i>Gastone</i></p>
<iframe> Crea una cornice con all'interno la pagina richiamata
<iframe src="https://www.andreapacchiarotti.it"></iframe>
<img> Carica un'immagine
<figure>
<img src="img_pulpit.jpg" alt="Squalo" width="300" height="150">
<figcaption>Fig1. - Lo squalo in natura</figcaption>
</figure>
<input> Controllo per immissione dati
<form>
<fieldset>
<legend>Anagrafica</legend>
Nome: <input type="text"><br>
Email: <input type="text"><br>
Date di nascita: <input type="text">
</fieldset>
</form>
<ins> Segnala testo inserito successivamente alla cancellazione tramite <del> (che fa apparire il testo barrato). Appare sottolineato
<p>Il mio colore preferito è <del>blu</del> <ins>rosso</ins>!</p>
<kbd> Inserimento da tastiera
<p>Salva il documento premendo <kbd>Ctrl</kbd> + <kbd>S</kbd></p>
<keygen> Genera chiavi doppie. Quando il form è inviato la chiave privata viene salvata nel "repository" locale e quella pubblica inviata al server
<form action="/action_page.php" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>
<label> Etichetta per <input>
<label for="maschio">Maschio</label><input type="radio" name="genere" id="maschio" value="maschio">
<legend> Didascalia per <fieldset>
<form>
<fieldset>
<legend>Anagrafica</legend>
Nome: <input type="text"><br>
Email: <input type="text"><br>
Date di nascita: <input type="text">
</fieldset>
</form>
<li> Voce di un elenco
<ol>
<li>Caffè</li>
<li>Tè</li>
</ol>
<link> Richiama risorse esterne
<head>
<link rel="stylesheet" type="text/css" href="formatta.css">
</head>
<main> Specifica il contenuto principale di un documento
<main>
<h1>Web Browsers</h1>
<p>Google Chrome e Firefox</p>
<article>
<h1>Google Chrome</h1>
<p>...</p>
</article>
<article>
<h1>Mozilla Firefox</h1>
<p>...</p>
</article>
</main>
<map> Mappa immagine
<img src="pianeti.png" width="150" height="100" alt="Pianeti" usemap="#pianeti">
<map name="pianeti">
<area shape="rect" coords="0,0,82,126" href="sole.html" alt="Sole">
<area shape="circle" coords="90,58,3" href="mercurio.html" alt="Mercurio">
<area shape="circle" coords="124,58,8" href="venere.html" alt="Venere">
</map>
<mark> Marca un testo. Appare evidenziato in giallo
<p>Compra la <mark>birra</mark></p>
<menu> Lista di comandi
<div style="background:yellow;border:1px solid #cccccc;padding: 10px;" contextmenu="mymenu">
<p>Funziono solo con Firefox. Fare tasto destro per vedere il menù contestuale</p>
<menu type="context" id="mymenu">
<menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png"></menuitem>
<menu label="Condividi su...">
<menuitem label="Twitter" icon="ico_twitter.png" onclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);"></menuitem>
<menuitem label="Facebook" icon="ico_facebook.png" onclick="window.open('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
</menu>
</menu>
</div>
<menuitem> Voce di una lista di comandi. Vedi <menu>
<meta> Metadati
<head>
<meta charset="UTF-8">
<meta name="description" content="...">
<meta name="keywords" content="...">
<meta name="author" content="...">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<meter> Scala di misura all'interno di un intervallo
<meter value="2" min="0" max="10">2 di 10</meter><br>
<meter value="0.6">60%</meter>
<nav> Barra di navigazione per i link
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
<noscript> Contenuto alternativo per gli utenti che non supportano scripts lato client
<script>
document.write("Ciao mondo!")
</script>
<noscript>Il tuo browser non supporta JavaScript</noscript>
<object> Inserisce un oggetto. Qui incorpora un filmato in Flash
<object width="400" height="400" data="helloworld.swf"></object>
<ol> Lista ordinata
<ol>
<li>Caffè</li>
<li>Tè</li>
</ol>
<optgroup> Raggruppa opzioni in un elenco a discesa. Appare in grassetto
<select>
<optgroup label="Auto svedesi">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="Auto tedesche">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
<option> Opzione in un elenco a discesa. Vedi <optgroup>
<output> Risultato di un calcolo
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
<p> Paragrafo
<p>Sono un paragrafo di testo</p>
<param> Parametro di un oggetto. Qui impostandolo su true fa partire il file aguilera al caricamento della pagina
<object data="aguilera.wav">
<param name="autoplay" value="true">
</object>
<picture> Contenitore per più immagini
<picture>
<source media="(min-width: 650px)" srcset="pistillo.jpg">
<source media="(min-width: 465px)" srcset="gambo.jpg">
<img src="fiori.jpg" alt="Fiori" style="width:auto;">
</picture>
<pre> Preserva le distanze del testo
<pre>
sono un testo
mostrato con le distanze
che vedi
</pre>
<progress> Barra di progresso di un compito
<progress value="22" max="100"></progress>
<q> Citazione breve. Raggruppa il testo tra “ ”
<p>Lo scopo del WWF è:
<q>Costruire un futuro dove le persone vivono in armonia con la natura</q>
</p>
<rp> Definisce quello da mostrare nei browser che non supportano le annotazioni Ruby (linguaggio di scripting)
<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>
<rt> Annotazioni Ruby. Vedi <rp>
<ruby> Annotazioni Ruby. Vedi <rp>
<s> Testo barrato
<p><s>La mia macchina è blu</s></p>
<p>La mia nuova macchina è grigia</p>
<samp> Marca un codice d'esempio da computer
<samp>Codice...</samp>
<script> Script lato client. Qui scrive Ciao JavaScript! con il linguaggio omonimo
<script>
document.getElementById("demo").innerHTML = "Ciao JavaScript!";
</script>
<section> Sezione di un documento
<section>
<h1>WWF</h1>
<p>Il World Wide Fund for Nature (WWF) è....</p>
</section>
<select> Elenco a discesa con opzioni
<select>
<optgroup label="Auto svedesi">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="Auto tedesche">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
<small> Testo piccolo
<p>www.andreapacchiarotti.it</p>
<p><small>Copyright 2000-2050</small></p>
<source> Elementi multimediali, audio e video. Qui il browser dovrebbe scegliere quale tipo di file supporta
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Il tuo browser non supporta il tag audio
</audio>
<span> Formatta parte di un testo
<p>La mia cantante preferita ha gli occhi <span style="color:blue">blu</span></p>
<strong> Grassetto
<strong>Sono un testo in grassetto</strong>
<style> Foglio di stile
<head>
<style>
h1 {color:red}
p {color:blue}
</style>
</head>
<sub> Pedice
<p>Bevo poca H<sub>2</sub>O</p>
<summary> Intestazione per <details>
<details>
<summary>Copyright 1999-2014</summary>
<p>Andrea Pacchiarotti. Tutti i diritti riservati</p>
<p>Contenuti e fotografie di questo sito sono di proprietà di Andrea Pacchiarotti</p>
</details>
<sup> Apice
<p>Gent.<sup>ma</sup></p>
<table> Tabella
<table>
<caption>Guadagno annuale</caption>
<tr><th>Mese</th><th>Euro</th></tr>
<tr><td>Gennaio</td><td>2.500</td></tr>
</table>
<tbody> Raggruppa il corpo di una tabella
<table>
<thead>
<tr><th>Mese</th><th>Stipendio in Euro</th></tr>
</thead>
<tbody>
<tr><td>Gennaio</td><td>2.500</td></tr>
<tr><td>Febbraio</td><td>2.400</td></tr>
</tbody>
<tfoot>
<tr><td>Sum</td><td>4.900</td></tr>
</tfoot>
</table>
<td> Cella di tabella. Vedi <tbody>
<textarea> Controllo multilinea in un modulo
<textarea rows="4" cols="50">
Sono un testo che andrà in una textarea
</textarea>
<tfoot> Raggruppa il piè di tabella
<table>
<thead>
<tr><th>Mese</th><th>Stipendio in Euro</th></tr>
</thead>
<tbody>
<tr><td>Gennaio</td><td>2.500</td></tr>
<tr><td>Febbraio</td><td>2.400</td></tr>
</tbody>
<tfoot>
<tr><td>Sum</td><td>4.900</td></tr>
</tfoot>
</table>
<th> Intestazione di tabella. Vedi <tfoot>
<thead> Raggruppa le intestazioni di tabella
<table>
<thead>
<tr><th>Mese</th><th>Stipendio in Euro</th></tr>
</thead>
<tbody>
<tr><td>Gennaio</td><td>2.500</td></tr>
<tr><td>Febbraio</td><td>2.400</td></tr>
</tbody>
<tfoot>
<tr><td>Sum</td><td>4.900</td></tr>
</tfoot>
</table>
<time> Data/orario
<p>Apriamo alle <time>10:00</time></p>
<p>Ci incontriamo il giorno di San Valentino alle <time datetime="2008-02-14 20:00">20</time></p>
<title> Titolo di un documento
<!DOCTYPE html>
<html>
<head> <title></title> </head>
<body> </body>
</html>
<tr> Riga di tabella. Vedi <thead>
<track> Specifica dei testi per i media <video> e <audio>. Qui il video in questione possiede sottotitoli
<video src="discorso.vid">
<track kind=subtitles src=discorsoen.vtt srclang=en label="English">
<track kind=subtitles src=discorsoit.vtt srclang=it lang=it label="Italiano">
</video>
<u> Sottolineato
<p><u>Sono un testo sottolineato</u></p>
<ul> Lista puntata
<ul>
<li>Caffè</li>
<li>Tè</li>
</ul>
<var> Rappresenta a variabile formattata in corsivo
<var>Variabile</var>
<video> Video
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Il tuo browser non supporta il tag video
</video>
<wbr> Interruzione di testo opzionale. A differenza di br, che inserisce un'interruzione di riga in ogni caso, wbr spezza il testo su due linee solo se necessario, in base al layout della pagina e dalla larghezza del tag contenitore.
<p>HTML5 include<wbr>
elementi di markup, di cui una<wbr>
buona parte proviene dalle versioni<wbr>
precedenti </p>
HTML5.2
Anche se i tag HTML5.2 non sono ancora stati rilasciati, ecco un'anticipazione relativa all’elemento dialog. Pare che non verrà distribuito un aggiornamento unico delle specifiche HTML5.2, ma graduale per far sì che i browser possano aggiornarsi man mano.
Una funzionalità interessante è il supporto per i native modals: un’opzione ben nota a chi usa framework come React.
Si parla dunque delle finestre modali di JavaScript.
Il tag dialog crea una finestra di dialogo consentendo di creare pop-up modal; tramite l'argomento open è possibile specificare che dialog è attivo e che l’utente può interagirci. Open può quindi essere attivato per aprire e chiudere la finestra di dialogo. Ecco un banale esempio:
<dialog open>
<p>Una dialog box qualsiasi per l'interazione con l'utente.</p>
</dialog>
HTML5 WordPress
Perché imparare l’HTML per WordPress se, in teoria, non avresti necessità di conoscerlo dato che WordPress è talmente potente che consente di creare un sito da zero senza usare alcun linguaggio?
In realtà conoscere l’HyperText Markup Language ti sarà utile.
Talvolta sapere i tag HTML può infatti risolvere alcuni problemi di difficile gestione tramite il classico editor WordPress ed è proprio qui che torna utile l’HTML per WordPress.
Scrivere i tag HTML WordPress
I tag HTML per WordPress possono essere scritti sia con l’editor classico, sia con l’editor a blocchi o con i visual page builder più evoluti.
Con l’editor classico di WordPress, è possibile usare i tag HTML nell’editor di testo all’interno della schermata di creazione delle pagine e dei post.
Se usi l’editor visuale, per inserire i tag HTML, devi selezionare la scheda Testo (ricorda che, comunque, alcuni tag HTML possono essere inseriti direttamente tramite le icone della barra degli strumenti dell’editor stesso)
Per capire come appare un articolo con tag HTML, apri la pagina di modifica di un post già scritto e clicca su Testo.
Se usi l’editor a blocchi (Gutenberg), apri le opzioni del blocco (i tre puntini in verticale) e seleziona Modifica come HTML
Qui potrai modificare manualmente il codice. Per visualizzare come sarà l’aspetto del blocco che hai modificato, torna alla modalità visiva cliccando su Modifica visivamente nelle opzioni del blocco.
Ora che conosci i tag HTML5 per creare pagine secondo il W3C (anche WordPress), li devi anche studiare!
Puoi anche dare uno sguardo a ciò che scrive il World Wide Web Consortium (W3C), l'organizzazione internazionale che si propone di sviluppare gli standard per un World Wide Web accessibile a tutti, indipendentemente dal dispositivo utilizzato per accedervi.