HTML (HyperText Markup Language) non è un linguaggio di programmazione; è un linguaggio di markup, usato per dire al browser come strutturare le pagine web.
Gli elementi HTML costituiscono le pagine HTML e sono identificati dai cosiddetti tag HTML (<p>, <a>, <h1>, etc...)
I browser web (come Chrome, Edge, Safari) hanno il compito di interpretare e visualizzare i documenti HTML. I browser non mostrano i tag HTML, ma li utilizzano per determinare la struttura della pagina.
In basso, la struttura di base di una pagina HTML.
Tutti i documenti HTML devono iniziare con: <!DOCTYPE html>. Si tratta di una dichiarazione che serve al browser per identificare il tipo di documento e per visualizzare correttamente la pagina.
Il documento HTML vero e proprio inizia con <html> e finisce con </html>.
Tra i tag <head> e </head> si trovano i informazioni sul documento HTML. Tutto ciò che si trova all'interno della head non sarà visualizzato all'interno della pagina web.
Tra i tag <body> e </body> si trova il contenuto della pagina web, che sarà visualizzato dal browser.
<!DOCTYPE html><html><head><title>Titolo</title></head><body><p>Questo è il contenuto della mia pagina.</p></body></html>
Questo è il contenuto della mia pagina.
Questo è un esempio di elemento HTML:
<p>Questo è un testo</p>Gli elementi HTML sono composti da tre parti:
<p>.</p> finale.Questo è un testo.Tutti gli elementi HTML possono avere degli attributi. Gli attributi sono sempre dichiarati all'interno del tag di apertura e contengono informazioni aggiuntive sull'elemento HTML.
Ecco alcuni esempi:
<p class="city">Roma</p><a href="https://it.wikipedia.org/wiki/Roma">Roma su Wikipedia</a><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Flag_of_Rome.svg/125px-Flag_of_Rome.svg.png" />
Un attributo si trova quasi sempre nella forma: [nome]="[valore]".
Negli esempi il nome dell'attributo è evidenziato in verde (es. class), mentre il valore dell'attributo in giallo (es. city).
Alcuni degli attributi più utilizzati sono:
href serve per specificare l'URL di un link (<a>).
href serve per specificare l'URL di un'immagine (<img>).
style può essere utilizzato per assegnare uno stile all'elemento. Tuttavia, per definire lo stile è consigliato utilizzare il CSS.
id sono degli attributi che posssono essere assegnati solo una volta all'interno di un documento HTML.
Gli id permettono di identificare l'elemento per applicare stili (tramite CSS) e innescare eventi (tramite JavaScript).
class sono degli attributi identificativi che, a differenza degli id, possono essere applicati a più elementi all'interno dello stesso documento.
Anche le class permettono di identificare l'elemento per applicare stili e innescare eventi.
Qui la lista completa di tutti gli attributi HTML.
Gli elementi di tipo block occupano in larghezza tutto lo spazio disponibile e iniziano sempre su una nuova linea.
Questo è l'elenco degli elementi block:
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>, <video
<p style="background: red">Blocco 1</p>
<p style="background: yellow">Blocco 2</p>
<p style="background: blue">Blocco 3</p>
Blocco 1
Blocco 2
Blocco 3
Gli elementi di tipo inline occupano in larghezza soltanto lo spazio necessario e non iniziano su una nuova linea.
Questo è l'elenco degli elementi inline:
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>
<span style="background: red">Inline 1</span>
<span style="background: yellow">Inline 2</span>
<span style="background: blue">Inline 3</span>