Sei sulla pagina 1di 217

HTML

HyperText Markup Language


Introduzione
Lo sviluppo web, lato frontend, si basa su
tre linguaggi.

Questi tre linguaggi si occupano di compiti


differenti.
Il frontend
HTML5 CSS3 JS
  
Usiamo il linguaggio HTML per fornire e
descrivere il contenuto di una pagina web.

Col CSS possiamo aggiungere degli stili


alla nostra pagina.

Con Javascript aggiungiamo interazione,


dinamicità e molto molto altro.
Strumenti diversi assolvono a compiti
diversi, e sono particolarmente efficienti
nella loro specialità.
SoC
Separation Of Concerns
HTML
Contenuto
HTML sta per HyperText Markup Language, ed
è essenzialmente un linguaggio di markup,
di marcatura.

Non è un linguaggio di programmazione, ma


ci permette di descrivere dei testi.
Queste descrizioni vengono fatte attraverso
dei marcatori, che d’ora in avanti
chiameremo "tag HTML".
Questi tag ci permetteranno di gestire come
i diversi elementi di una pagina web
dovranno essere disposti e renderizzati.
 
Per iniziare ad scrivere HTML, abbiamo
bisogno solo di un editor di testo (Visual
Studio Code) e di un browser (Chrome).
Tag
Un vero documento HTML è scritto attraverso
dei tag.
Cos’è allora un tag HTML?

Un nome racchiuso fra parentesi angolari.


<nome>
<nome>contenuto</nome>
Nell’esempio precedente il tag è
semplicemente "nome".

Il tag di apertura, il tag di chiusura ed


il contenuto del tag costituiscono invece
un elemento HTML.
Possiamo inserire come contenuto di un tag,
un qualsiasi numero di altri elementi,
possiamo cioè annidare elementi HTML in
elementi HTML, l’uno dentro l’altro.
Un tag è una etichetta. Quando in un
negozio vediamo l’etichetta di un qualsiasi
prodotto, otteniamo informazioni aggiuntive
su quel prodotto.
Questo è lo scopo ultimo dei tag HTML,
ossia DESCRIVERE un elemento, fornire
informazioni su un elemento.
Prima di inserire un qualunque tag, il
nostro documento ha bisogno di una
"dichiarazione"...
<!DOCTYPE html>
Il primo tag html da inserire in una pagina
HTML è proprio il tag html.

All’interno di questo tag ne inseriremo


altri due, head e body.
Nel tag head inseriremo altri tag ed
informazioni utili per “descrivere” la
nostra pagina.

Nel tag body, invece, andremo ad inserire


tutto quello che vogliamo rendere fruibile
agli utenti del nostro sito.
Spesso, utilizzare solo il tag non è
sufficiente per descrivere al meglio un
elemento html.

In tal caso si utilizzano gli...


Attributi
id class style title charset disable height
width target placeholder href src lang
method rel required type
...
Gli attributi HTML sono un altro modo per
aggiungere significato al nostro contenuto.

Sono costituiti da coppie chiave-valore: la


chiave è il nome dell’attributo, il valore
può anche essere più di uno, con una
sintassi che cambia da attributo ad
attributo.
Gli attributi devono essere inseriti nel
tag di apertura, e ne esistono moltissimi:
alcuni sono riservati a dei tag molto
particolari, altri sono generali: sono
chiamati attributi globali ed i principali
sono id, class, style e title.
Possiamo usare attributi anche nei tag HTML
presenti nel body, anzi è proprio in questi
elementi che si trovano più spesso: gli
attributi id, class e style, che sono
attributi globali, ci permettono di
aggiungere degli stili e in un certo senso
di “classificare” i nostri elementi.
In HTML 5 esiste un nuovo tipo di
attributo, i cosiddetti data-attributes.

Sono attributi custom che ci permettono di


salvare informazioni all’interno del tag,
per maggiore descrizione o per un futuro
utilizzo.
<nome data-ruolo="admin">Mario Rossi</nome>
div e span
I tag sono pensati per dare significato al
loro contenuto, ma esistono anche dei tag
“contenitori” generici, il cui scopo è solo
quello di di avvolgere un contenuto.
<div> <span>
Il tag div ha un comportamento bloccante:
inizia sempre su una nuova linea, occupa
tutto lo spazio disponibile e al suo
termine manda a capo.

Il tag span ha un comportamento inline:


resta nel “flusso della pagina”, resta
sulla stessa linea e non ne inizia una
nuova.
Questi tag andrebbero utilizzati il minimo
possibile dal momento che non descrivono il
contenuto al loro interno, ma si limitano
ad essere, appunto, dei “contenitori
generici”.
Commenti
Spesso avremo la necessità di lasciare dei
commenti sul nostro codice.

Possiamo usare dei commenti sia per


descrivere agli altri sviluppatori una
determinata sezione del nostro documento,
sia per lasciarci delle note.
Una porzione di codice commentata non sarà
mostrata sul browser.
Testi
Il linguaggio HTML è stato ideato per
veicolare informazioni, quindi è naturale
la presenza di un gran numero di tag per
rappresentare e descrivere testi.
Molti di questi tag renderizzano, mostrano
il testo con degli stili predefiniti...
Non dobbiamo fare l’errore di utilizzare un
tag in base a come il suo contenuto sarà
mostrato.

Dobbiamo utilizzare un tag in base al


significato che vogliamo dare al suo
contenuto: lo stile potrà poi essere
completamente modificato intervenendo sul
CSS.
HTML5 CSS3
 
(contenuto) (stile)
Il primo tag relativo al testo che vediamo
è il tag p, paragrafo

<p>
Se mandiamo a capo sul browser non notiamo
alcuna differenza.

Il browser, infatti, interpreta il testo


che inseriamo nel documento HTML come una
linea continua, dobbiamo essere noi,
utilizzando dei tag, a comunicargli di
andare a capo.
Possiamo farlo in due modi: o usando più
tag paragrafi, o utilizzando il tag br,
break.
L’uso del tag br per separare dei testi
viene consentito solo quando ha
effettivamente significato separare
verticalmente delle frasi, come può essere
il caso, ad esempio, nei versi di una
poesia.
Il titolo di una pagina web è però più
importante del normale testo.

Ci occorre quindi un modo per rendere


semanticamente (e come effetto collaterale,
graficamente) diversi questi contenuti.
Gli heading, o titoli, sono i tag che ci
permettono di descrivere il tema della
nostra pagina.

Ogni browser mostra i tag heading con un


font maggiore ed in grassetto, e con una
spaziatura proporzionale all’importanza del
tag.
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
h1
h2
h3
...
Come è evidente, è presente una gerarchia
all’interno dei titoli: più basso è il
numero, più importante è quel tag e meno
tag di quel tipo dovrebbero essere presenti
all’interno di una pagina web.
Usiamo il tag h1 solo ed esclusivamente per
il nome della nostra pagina, uno o più tag
h2 per le diverse sezioni presenti ed
eventualmente dei tag h3 o h4 come titoli
di sottosezioni.

Riserviamo il tag p per il testo che non


costituisce titolo.
Pensiamo ad una pagina web come alla prima
pagina di un giornale. Sicuramente questa
prima pagina avrà un titolo, e sicuramente
questo titolo sarà unico: lo stesso
ragionamento si può fare per il web.
Per questo motivo, è indispensabile che
ogni pagina web abbia un tag h1 con il
quale possiamo comunicare all’utente
finale, ed al motore di ricerca, qual è
l’argomento che stiamo trattando.
Capita spesso di voler stilizzare dei
testi, ad esempio evidenziando delle parole
in corsivo o in grassetto.
In passato per aggiungere questi stili si
ricorreva ai tag i, italic, e b, bold.
Ma sappiamo che è sbagliato utilizzare dei
tag esclusivamente per dare uno stile,
stiamo rompendo il principio di
separazione.

Sono stati introdotti, quindi, due nuovi


tag, il tag em ed il tag strong.
<b> <i>

<strong> <em>
I tag b e i aggiungono una differenza
stilistica rispetto al resto del testo
presente e non aggiungono ulteriori
significati.

I tag strong e em sono semantici,


aggiungono una differenza stilistica ma
anche concettuale rispetto al resto del
testo.
<blockquote> <q> <cite>

<abbr> <dfn> <sup> <sub>

<pre> <code> <mark>

<time> <address>

...
Potremmo avere la necessità, nei nostri
documenti HTML, di dover citare delle fonti
o di dover inserire delle citazioni. Per
farlo, abbiamo diversi modi.
Col tag blockquote possiamo inserire
citazioni lunghe. Notiamo che il tag
blockquote aggiunge un po' di margin
attorno all'elemento, e che si comporta un
po’ come il tag p: anche questo è un tag
con comportamento bloccante.
Col tag q, invece, possiamo inserire delle
citazioni corte, e si comporta come il tag
span: è un tag con comportamento inline.
Aggiunge anche delle virgolette.
Il tag cite può essere usato per citare il
titolo di un opera, come può essere un
libro, un film, una scultura, e può
eventualmente contenere il nome
dell’autore. Viene mostrato in corsivo.
Col tag abbr inseriamo una abbreviazione o
un acronimo.

Spesso tale tag viene incontrato assieme al


tag dfn, definition, che viene usato per
indicare un termine definito all’interno
della frase.
Altri tag utilizzati per arricchire i testi
sono i tag sup e sub, rispettivamente per
apici e pedici. Ovviamente, ancora, non
dobbiamo utilizzare questi tag solo per
questioni stilistiche, ma dobbiamo usarli
sempre per dare significato al nostro
contenuto.
Possiamo anche forzare il browser a
renderizzare il testo così come lo
inseriamo nell’editor di testo, col tag
pre, preformatted.
E se volessimo specificare che stiamo
inserendo del codice, potremmo usare il tag
code.
Esiste anche il tag address. Ma con address
intendiamo delle generiche informazioni di
contatto: può contenere un indirizzo email,
un url, un indirizzo fisico, un numero
telefonico. Tipicamente, il browser mostra
il contenuto in corsivo.
Liste
<ol> <ul> <dl>
In html sono presenti tre tipi distinti di
liste: ordinate, non ordinate e di
definizioni.

Ovviamente, usiamo una lista in HTML quando


vogliamo elencare elementi, e l’ordine di
questi elementi può o meno essere
importante.
Liste ordinate, ordered list. Si apre una
lista ordinata col tag ol, ordered list. Al
suo interno possiamo avere un qualunque
numero di tag li, list item.
Liste non ordinate, unordered list. In
maniera analoga alle liste ordinate, si
aprono con un tag ol. Anche qui, possiamo
avere un qualunque numero di tag list item
all’interno.
Un po’ più complesse sono le definition
list. Queste si aprono con un tag dl, che
sta appunto per definition list. Non
abbiamo qui dei list item, ma ogni elemento
della lista sarà costituito da un
definition term e da una definition
description, indicati, rispettivamente, dai
tag dt e dd.
Ovviamente, possiamo annidare liste
all’interno di altre liste.
Tabelle
<table>
<tr> <td>
In HTML possiamo inserire anche delle
tabelle. In passato, il layout stesso di
una pagina web, la disposizione degli
elementi, veniva realizzata con una
struttura tabellare.
Oggi usiamo le tabelle soltanto per
rappresentare dei dati in formato, appunto,
tabellare.
Iniziamo a scrivere una tabella,
ovviamente, col tag table.
All’interno di una tabella, possiamo
inserire un qualunque numero di righe, col
tag tr, table row.
All’interno di una row, possiamo avere un
qualunque numero di celle, indicate col tag
td, table data.
In una table row, possiamo inserire dei tag
td o dei tag th per, rispettivamente,
inserire un dato o descrivere quel dato.
Il testo scritto in un tag td è allineato
normalmente a sinistra, mentre quello
inserito in un th è in grassetto ed
allineato al centro.
Potrebbe anche essere utile inserire un
titolo alla nostra tabella, e questo lo
facciamo col tag caption, da inserire
subito sotto il tag table.
Possiamo rendere ancora più semanticamente
completa la nostra tabella utilizzando
anche i tag thead, tbody e tfoot, il cui
significato è immediato.
HyperText
Un ipertesto è un testo mostrato su un
dispositivo elettronico con dei
collegamenti ad altri contenuti,
raggiungibili da un lettore attraverso
degli iperlink, o collegamenti
ipertestuali.
Questi collegamenti ipertestuali sono
realizzati con un tag a, che storicamente
viene chiamato anchor tag.
<a href="www.google.it">Vai su google</a>
Il tag a si compone di due parti: il
cosiddetto anchor text che è l’elemento
effettivamente cliccabile dall’utente.

È importante notare che un anchor text può


essere una qualsiasi cosa: un parola, una
frase, un tasto, una immagine, una lista,
una tabella,...
L’altro elemento che compone il tag a è
forse più importante: questo è l’attributo
href, hypertext reference, che specifica la
destinazione del collegamento, della
risorsa.
Questa risorsa può essere qualsiasi cosa:
un’altra pagina web, una immagine, un
documento pdf, un file.

Occorre distinguere fra link, o percorsi,


assoluti e relativi.
<a href="https://it.wikipedia.org/wiki/Dante_Alighieri">Vai su google</a>

<a href="./immagini/miofile.jpg">Vai su google</a>


I tag a possono avere altri attributi oltre
a href, ad esempio target, che di default
ha valore _self.

Questo indica come aprire la risorsa


richiesta, se sulla stessa pagina o se su
una nuova tab, con _blank.
Immagini
<img>
Se ci dovessimo limitare ad inserire solo
del testo nei nostri documenti html,
avremmo delle pagine web abbastanza piatte
e tristi.

Fortunatamente, abbiamo la possibilità di


inserire elementi multimediali come
immagini, ma anche audio e video.
Per inserire delle immagini usiamo il tag
img, e notiamo subito che è un self-closing
tag.

Una nota importante: tecnicamente non


inseriamo immagini all’interno del
documento html, ma le linkiamo in esso.
Infatti, il tag img ha un attributo
fondamentale e obbligatorio che è
l’attributo src, source: qui andremo a
specificare il percorso per l’immagine, che
può essere sia un path assoluto che un path
relativo.
Potrebbe capitare che il percorso per la
nostra immagine sia rotto, che l’immagine
non esista, o che non sia più disponibile:
in questi casi l’immagine non sarà
mostrata, ma al suo posto sarà mostrato il
contenuto dell’attributo alt, alternative
text.
Nel web moderno, l’accessibilità di una
pagina web viene tenuta in grande
considerazione, e di conseguenza pagine web
contenenti immagini senza l’attributo alt
potrebbero essere fortemente penalizzate
dal punto di vista della SEO.
Un’altro modo, più moderno, per inserire
delle immagini all’interno di un documento
HTML prevede l’utilizzo del tag picture.
La scelta di utilizzare un tag picture, con
diverse source per le immagini, invece di
una unica immagine per ogni risoluzione è
molto intelligente.
Tipicamente si forniscono dei path a due
file, rappresentanti la stesa identica
immagine, ma con due risoluzioni diverse,
una per mobile e una per desktop.
Occorre, però, sempre inserire un tag img
all’interno del tag picture: alcuni
browser, infatti, potrebbero non supportare
questo tag e, in questo caso, il tag img
agirà come fallback.
Audio e Video
Con HTML 5 non siamo limitati alle sole
immagini, anzi, come già accennato, nei
nostri documenti possiamo inserire anche
contenuti multimediali come musica, suoni,
video.
Per i video sono sempre supportati i
formati mp4, webM e ogg. Altri formati
potrebbero essere non più supportati (come
il formato mpg), dipendenti dal browser o
richiedere plug in aggiuntivi (come il
formato flash).

Allo stesso modo, per contenuti audio, sono


sempre supportati i formati mp3, wav e ogg.
mp4
webM
ogg
mp3
wav
ogg
Per inserire un video in un documento HTML
usiamo il tag video, che può prendere
diversi attributi, a cominciare da width e
height: in entrambi casi viene mantenuto
l’aspect ratio, ossia il rapporto
larghezza-ampiezza.
Ovviamente l’attributo più importante è
l’attributo src, che esattamente come con
le immagini indica il percorso al file
video che vogliamo inserire.
Altri attributi spesso utilizzati sono
controls, autoplay, muted e poster.
Per essere sicuri che il nostro video sia
disponibile su ogni dispositivo o su ogni
browser, sarebbe più opportuno fornire
diversi file, diverse sorgenti per il
contenuto.
Per fare questo, all’interno del tag video,
possiamo scrivere più tag source per
specificare le diverse sorgenti del video,
nei diversi formati: il browser stesso
utilizzerà il primo formato riconosciuto.
In ogni tag source possiamo inserire
l’attributo type, che specifica il formato
del video: così facendo diamo la
possibilità al browser di scartare
automaticamente i formati non riconosciuti.

Altrimenti, il browser sarebbe costretto a


scaricare tutti i file e a riprodurre il
primo formato riconosciuto.
Il tag audio segue più o meno le stesse
regole del tag video, ovviamente con le
dovute considerazioni: non possiamo
settare, ad esempio, ampiezza e altezza.
Se nel nostro documento inseriamo un video
con autoplay, questo non partirà
immediatamente a meno che non sia presente
anche l’attributo muted o il video sia
senza audio.
Allo stesso modo, un file audio non sarà
mai riprodotto automaticamente al
caricamento della pagina: sarà riprodotto
solo in seguito ad una azione dell’utente.
iframe
<iframe>
Col tag iframe, inline frame, possiamo
inserire, embeddare, un documento HTML
all’interno di un altro, specificando poi
tutta una serie di attributi come ampiezza,
altezza e, ovviamente, la sorgente.
È buona norma, poi, includere sempre un
attributo title al nostro iframe, per fare
in modo che gli screen readers possano
leggere e descrivere il contenuto del tag.
Sempre per questioni di accessibilità e
usabilità, ne è attualmente sconsigliato
l’utilizzo, anche a causa di alcuni
attacchi di clickjacking.
Form
Quando vogliamo dare la possibilità agli
utenti della nostra pagina web di inserire
dei dati, dobbiamo utilizzare un tag form.
Un tag form richiede necessariamente la
presenza di due attributi: action e
method...
Nell’attributo action andremo a specificare
la locazione alla quale inviare i dati che
saranno acquisiti dal form: il valore di
questo attributo dovrà essere quindi un url
di qualche tipo.

L’attributo method definisce invece come


invieremo le informazioni raccolte dal
form, e tipicamente accetta come valori
“get” o “post”.
<label> <input>

<select> <datalist> <textarea>

<fieldset> <legend> <button>

...
Il tag label definisce una etichetta, per
un determinato campo del form.

È utile in un’ottica di accessibilità, dal


momento che ogni campo del form sarà
descritto da una etichetta.
Per fare ciò, il tag label dovrà avere un
attributo "for" con lo stesso valore
dell’attributo "id" del tag input che
vogliamo descrivere.
Il tag input è in assoluto il tag più
versatile, dal momento che ci permette di
inserire dati in molti modi diversi
intervenendo sul suo attributo type...
input
text: il valore di default, specifica e
definisce un campo di testo su singola
linea (possiamo scrivere un qualunque
carattere, lettera, numero o simbolo).
input
password: simile a text, ma i caratteri
inseriti sono oscurati
input
number: ci permette di inserire dei numeri,
ma possiamo anche specificare delle
limitazioni o delle condizioni. Ad esempio,
possiamo usare gli attributi min, max, step
e value.
input
email: ci permette di inserire degli
indirizzi email, con un validazione
automatica sulla presenza della chiocciola.
input
range: permette di inserire uno slider, per
far selezionare un valore numerico. Di
default, l’intervallo va da 0 a 100.
input
date: ci permette di inserire una data nel
formato giorno-mese-anno. Analogo è il type
time, con il quale selezioniamo un orario.
Se volessimo inserire sia una data che un
orario, possiamo usare datetime-local.
input
color: un po’ come il type date, è un color
picker. Permette di selezionare un colore e
di scegliere fra esadecimale, rgb e hsl.
input
file: possiamo anche dare la possibilità
agli utenti, all’interno di un form, di
caricare dei file.
input
checkbox: è una casella quadrata che viene
attivata quando l’utente ci clicca
all’interno, e permette di selezionare una
opzione Possiamo avere una o più opzioni, e
possiamo selezionarne un qualunque numero.
input
radio: permette di selezionare solo una
possibile opzione. I radio sono inseriti a
gruppi, e per ogni gruppo solo un radio
alla volta può essere attivo.

Per definire un gruppo di radio dobbiamo


associare ad ogni input lo stesso valore
dell’attributo name.
Una textarea, come suggerisce il nome, è un
tag che ci permette di inserire del testo.

A differenza di un normale tag input, però,


ci permette di inserire del testo su più
linee anche specificando le dimensioni di
questa area, con gli attributi rows e cols.
Sia il tag input che il tag textarea
possono avere un attributo opzionale,
l’attributo placeholder: questo permette,
col suo valore, di fornire una breve
descrizione di cosa inserire per compilare
il tag input o textarea.
I tag select e datalist permettono
all’utente di scegliere fra una serie di
opzioni: il primo prevede che l’utente
possa scegliere fra delle opzioni pre
determinate, il secondo permette all’utente
sia di scegliere fra delle opzioni, sia di
inserirne una nuova.
Per questo motivo, una datalist deve sempre
essere abbinata ad un tag input.

In entrambi i casi, le opzioni possibili


sono indicate attraverso dei tag option.
Esiste anche il tag optgroup, che ci
permette di raggruppare delle opzioni, fra
loro simili, in un gruppo.
Il tag fieldset fornisce un modo per
raggruppare parti di un form HTML, per una
migliore organizzazione visiva e del
codice.

Affianco a questo, è spesso presente anche


un tag legend, legenda, che è
essenzialmente una etichetta che descrive
il fieldset.
Ok, adesso abbiamo il nostro form con tutti
i campi di input che possiamo desiderare.

Ma ci serve ancora un modo per


effettivamente INVIARE questi dati: un
tasto sul quale cliccare.
Ci sono due possibilità, possiamo usare un
tag input o un tag button.

In entrambi possiamo inserire un attributo,


type, che può assumere tre valori: button,
reset e submit.

Ci interessa l'ultimo.
Visivamente, sono identici. Qual è allora
la differenza?
Il tag input è un self-closing tag.

Al contrario, button ha un tag di apertura


ed uno di chiusura, e al suo interno
possiamo inserire del codice HTML e
renderlo più gradevole visivamente: ad
esempio, potremmo inserire al suo interno
una immagine.
HTML Semantico
Lo scopo principale del linguaggio html è
quello di fornire e descrivere dei
contenuti testuali.

Vogliamo dare un significato SEMANTICO ad


ogni elemento html.

Alcuni tag semantici li abbiamo già


incontrati.
<form> <table>
<picture> <audio> <video>
<em> <strong>
I tag semantici non servono solo agli
sviluppatori ma permettono di rendere il
nostro codice più accessibili e fruibile,
ad esempio, ai crawler dei motori di
ricerca, ai tool di traduzione o alle
tecnologie assistive.
<nav> <footer>
<section>
Con questo tag rappresentiamo una generica
sezione della nostra pagina, e con sezione
intendiamo un qualunque raggruppamento di
elementi affini concettualmente.
<header>
Il tag header funziona come una
introduzione e può contenere tag come h1 o
h2, ma anche delle immagini: pensiamo, ad
esempio, al logo di un sito.
Una osservazione importante: non siamo
costretti ad utilizzare un solo tag header
per pagina. Come già accennato, rappresenta
una introduzione, e potremmo quindi
inserirlo anche all’interno di una section.
<footer>
Opposto al tag header è il tag footer, che
viene spesso incontrato al termine di una
pagina web, e può contenere informazioni
circa l’autore del documento o link a
documenti correlati.
Allo stesso modo del tag header, possiamo
avere un tag footer anche all’interno di
una qualunque sezione del nostro documento.
Sia il tag header che il tag footer sono
legati al loro elemento genitore.

Potremmo avere quindi un tag section


rappresentante un articolo e all’interno di
questo sia un tag header che un tag footer.
Ma a questo punto, invece di un generico
tag section, possiamo usare un tag più
descrittivo...
<article>
Un tag article deve rappresentare un
insieme di elementi che possono essere
letti indipendentemente dal resto del testo
presente nel sito.
<aside>
Con questo tag rappresentiamo una sezione
della pagina che contiene del contenuto
solo marginalmente legato al contenuto
principale, e che potrebbe essere
considerato separatamente da questo.
<figure>
Per immagini, illustrazioni, diagrammi o
altri elementi visivi esiste il tag figure
e a questo può essere associato,
eventualmente, anche il tag figcaption che
ci permette di inserire una didascalia.
<nav>
Attraverso il tag nav identifichiamo un
gruppo di link dedicati alla navigazione
principale, che possono mandare sia ad
altre pagine del sito che a sezioni della
stessa pagina.

Possiamo inserire un tag nav all’interno


dei tag header, footer o anche aside,
realizzando delle sidebar.
<main>
Questo tag specifica il contenuto
principale del documento, ed il suo
contenuto dovrebbe essere unico per ogni
pagina del nostro sito.

All’interno di un tag main non dovrebbero


essere presenti tag come nav e footer e,
per lo stesso motivo, dovrebbe esistere un
solo tag main per pagina.
<_>HTML</_>
<_> Non è un linguaggio di programmazione, ma un linguaggio di markup.
</_>
<_>HTML</_>

<_>HyperText Markup Language</_>

<_>Con questo linguaggio scriviamo il contenuto presente nelle pagine web. Fu inventanto agli inizi degli anni novanta da Tim Berners-Le

<_>L'attuale versione è la quinta, rilasciata dal <_>W3C</_> nell'ottobre del 2014.