2 IL LINGUAGGIO HTML
2 IL LINGUAGGIO HTML
HTML è l’acronimo di Hyper Text Markup Language e si potrebbe tradurre con “linguaggio che utilizza i markup per descrivere gli ipertesti”.
Un documento HTML normalmente è composto da testo e tag che, insieme, formano quello che prende il nome di markup.
I tag servono a “etichettare” specifiche parti di testo per trasformarlo in qualcosa di diverso, per esempio un link o un’immagine, o per esprimere informazioni sulla struttura della pagina web.
I tag sono testi inseriti all’interno dei simboli e > che vengono usati come se fossero delle parentesi
I termini che vengono inseriti all’interno dei tag non sono testo casuale, ma sono parole che seguono precise regole di sintassi.
I tag possono essere:
- doppi: cioè inseriti all’inizio e alla fine del testo su cui vengono applicati come se fossero loro stessi delle parentesi. In questo caso il tag di chiusura è uguale al tag di apertura tranne per il fatto che all’inizio ha anche una barra /;
- singoli: ovvero costituiti solo dal tag di apertura;
- multipli: è possibile applicare più tag allo stesso testo, seguendo le stesse regole di annidamento con cui si applicano le normali parentesi.
I tag di apertura, in alcuni casi, possono contenere degli attributi, cioè parole speciali che controllano il comportamento di un elemento. Agli attributi è possibile assegnare dei valori. Nel caso in cui vengano utilizzati più attributi, l’ordine con cui vengono scritti all’interno del tag è irrilevante.
esempio
Lo sapevi che
Il termine tag significa targhetta o cartellino, come quelli che vengono utilizzati per il prezzo sui capi di abbigliamento.
La struttura di un documento HTML
Un documento HTML è composto da un “contenitore” principale delimitato dal tag <html>, che racchiude tutto quello che verrà scritto, suddiviso in due sezioni distinte:
- ▶ head: contiene soprattutto impostazioni e informazioni utili per la pagina;
- ▶ body: contiene sostanzialmente tutto ciò che il browser deve mostrare.
Per semplificare, potremmo dire che nella head viene scritto “tutto quello che non si vede” nella pagina web, mentre nel body viene inserito “tutto quello che si vede”. Per esempio le immagini e il testo della pagina vengono inseriti nel body, mentre le informazioni sugli eventuali altri linguaggi (per esempio CSS, JavaScript ecc.) utilizzati per realizzare la pagina vengono scritti nella head.
In realtà, la suddivisione “si vede/non si vede” non è formale e non è neanche così netta. Per esempio il testo contenuto nel tag <title>, pur trovandosi nella head visualizza un testo nella scheda del broswer.
esempio
Scriviamo nel Blocco note un codice HTML, salviamolo come index.txt e quindi cambiamo la sua estensione in .html.
|
|
Nell’esempio possiamo notare che:
- i tag <html>, come se fossero delle parentesi, contengono fra questi tag tutto il codice html e indicano al browser “tutto il testo contenuto fra questi tag è stato scritto in linguaggio HTML”;
- i tag <head> e <body> delimitano le due sezioni. Il testo “Contenuto del documento......” viene visualizzato all’interno del browser, mentre il testo “Titolo del documento”, essendo inserito fra i tag <title>, viene visualizzato come titolo della scheda del browser.
Se il tag <title> non fosse presente, in mancanza di specifiche indicazioni, nella scheda del browser verrebbe visualizzato il nome del file (che in questo caso è index.html).
L’importanza del file index.html
Nell’esempio precedente abbiamo chiamato il file index.html perché, per convenzione, è il nome di default del primo file HTML che i server web cercano in una cartella e solitamente corrisponde alla home page di un sito web.
Quando il sito viene salvato sul disco del PC, le pagine web risultano visibili solo da quel computer.
Per pubblicare il sito web su Internet, occorre caricarlo su un server web che lo renda fruibile a chiunque, ovunque e in qualunque momento. Dopo che il sito web è stato caricato, è possibile accedere alla prima pagina in due modi:
1. se la pagina ha un nome generico (per esempio primapagina.html): l’utente deve specificare esplicitamente il nome della pagina iniziale all’interno dell’indirizzo (per esempio http://www.ilmiosito.it/primapagina.html);
2. se la pagina si chiama index.html: l’utente può digitare semplicemente http://ilmiosito.it/ e il server web, di default, visualizza il file index.html.
prova tu
Vero o falso?
- Il tag è un testo inserito all’interno dei due simboli < e >.
- V F
- Il tag può essere solo singolo e può contenere degli attributi.
- V F
- L’HTML è un linguaggio di programmazione.
- V F
- La <head> contiene impostazioni e informazioni utili alla pagina.
- V F
L’ambiente Notepad++
Come abbiamo visto, utilizzando esclusivamente un editor di testo e un browser, teoricamente, è possibile realizzare siti web anche complessi: basta conoscere i linguaggi. Tuttavia, al crescere del numero di tag, lavorare in questo modo non risulta semplice, infatti i programmatori (o sviluppatori) utilizzano specifici ambienti che facilitano notevolmente il lavoro.
Notepad++ è un editor di testo, scaricabile gratuitamente da Internet, che fornisce un buon ambiente di lavoro per sviluppare siti web.
Nella finestra principale possono essere individuati:
- un foglio di lavoro all’interno del quale poter scrivere il codice;
- un menu testuale;
- una serie di pulsanti con gli strumenti principali.
Scrivendo un codice HTML nel foglio di lavoro, apparentemente l’effetto è identico a quello che si ottiene utilizzando Blocco note, nel quale l’unico modo per aumentare la leggibilità del codice è utilizzare manualmente l’indentazione. L’indentazione del testo consiste nell’inserimento di spazi vuoti all’inizio delle righe per far rientrare il testo verso destra. In informatica è una convenzione molto diffusa.
Notepad++ consente di migliorare ulteriormente la leggibilità del codice evidenziando automaticamente i tag con colori che rendono più evidenti i contenuti testuali. Per attivare questa funzionalità occorre segnalare al programma che il testo è stato scritto usando il linguaggio HTML: selezionando il menu Linguaggio → H → HTML.
Come per Blocco note, anche con Notepad++ occorre salvare il file. È sufficiente fare clic sul pulsante Salva 
e scegliere un nome. Se è stato selezionato il linguaggio HTML, il programma salva con l’estensione corretta.
Per visualizzare il documento HTML all’interno del browser (per esempio Google Chrome) fare clic su Visualizza → Visualizza file attuale in → Chrome.
I tag principali
I tag di commento
Quando uno sviluppatore scrive può avere la necessità di inserire delle note all’interno del codice. È evidente che questi appunti non possono essere semplicemente inseriti nel documento perché verrebbero visualizzati dal browser. Occorre quindi inserirli all’interno di opportuni tag di commento. Il browser, interpretando il codice, ignorerà tutto il testo racchiuso nei tag, anche se si trova distribuito su più righe.
I tag di commento, all’interno dei quali scrivere il testo, sono <!-- e -->.
esempio
|
|
I tag àncora per collegare le pagine
I link generalmente collegano due pagine web. Sulla prima pagina viene inserita una frase (o una parola chiave) che fa riferimento a un argomento specifico che deve essere approfondito. Facendo clic sulla frase viene aperta una seconda pagina web che contiene l’approfondimento. Solitamente il link ha un colore diverso rispetto al resto del testo e, al passaggio del mouse, la forma del puntatore cambia.
Per inserire un link in una pagina si utilizza il tag àncora al quale si devono associare due informazioni:
1. su quali parole si deve fare clic (per raggiungere la nuova pagina): questa informazione deve essere inserita fra i tag;
2. quale pagina viene aperta (quando si fa clic sul link): il riferimento ipertestuale alla pagina collegata deve essere inserito come valore nell’attributo href (abbreviazione di Hypertext REFerence), che deve essere sempre presente.
In linguaggio HTML la sintassi per inserire un collegamento a una pagina è:
<a href="indirizzo della pagina da aprire">testo del link</a>
Se la pagina da aprire è quella di un sito web già caricato in rete occorre specificare il suo URL.
esempio
|
|
È possibile scegliere dove aprire la nuova pagina web, modificando il valore dell’attributo target (che è facoltativo). Per aprire la pagina:
- in una nuova scheda: si deve assegnare il valore _blank;
- nella stessa scheda: si deve assegnare il valore _self (valore di default).
esempio
Il codice dell’esempio precedente diventa:
- nuova scheda
<a href="https://www.google.com" target="_blank">Vai al motore di ricerca!</a> - stessa scheda
<a href="https://www.google.com" target="_self"> Vai al motore di ricerca!</a>
Se la nuova pagina da aprire è offline, creata e salvata in locale, dobbiamo:
- creare la pagina alla quale fare riferimento nel link (per esempio pagina2.html);
- creare la pagina (per esempio pagina1.html) all’interno della quale richiamare la precedente;
- salvare entrambe le pagine nella stessa cartella.
esempio
Anche nel caso di pagine offline può essere inserito l’attributo facoltativo target per aprire (oppure no) il link in una nuova scheda.
Esiste anche la possibilità di far puntare l’attributo href alla stessa pagina in cui è inserito il link su cui fare clic. Questo può essere utile allo sviluppatore quando crea la pagina che contiene il link prima di aver creato la seconda pagina alla quale puntare, inserendo un link “fittizio”, ma funzionante.
Per inserire in una pagina un link che punta alla pagina stessa, si deve scrivere:
<a href="#">testo del link</a>
prova tu
Quale tag permette di definire un link alla pagina che si chiama “pagina3.html”?
- <a href="pagina.html">pagina3.html</a>
- <a src="pagina3.html">pagina3 html</a>
- <a href="pagina3.html">pagina html</a>
I tag di intestazione
I tag che indentificano titoli e i sottotitoli all’interno della pagina si chiamano tag di heading sono dei tag doppi e sono identificati dal carattere h e da numeri che vanno da 1 a 6 (<h1>, <h2>, <h3> ecc.). Via via che il numero cresce, la dimensione del carattere diminuisce.
I motori di ricerca indicizzano (cioè inseriscono nel proprio indice) i siti presenti nel web, catalogandoli in base agli argomenti che vengono trattati all’interno delle loro pagine. Per “capire” qual è l’argomento di cui si parla nel sito web, i motori di ricerca, in generale, ricercano le parole chiave anche nei tag di heading considerando maggiormente importanti quelle contenute negli <h1> rispetto a quelle contenute negli <h6> (o nei paragrafi del testo, che tratteremo di seguito). Quindi se, per esempio, un sito web tratta con priorità l’argomento “Torta di mele” è buona norma che lo sviluppatore scriva queste parole chiave all’interno del tag <h1> e inserisca “Torte della nonna” in <h3>.
Per giudicare se un sito è “fatto bene”, e quindi se merita di essere posizionato fra i primi risultati della SERP, i motori di ricerca danno sempre meno importanza al contenuto degli heading e maggiore rilievo ad altri parametri (→ unità 9).
La principale funzione degli heading (così come quella dei paragrafi) non è quella di definire l’aspetto estetico di un testo, ma piuttosto quella di identificare delle sezioni nella pagina, all’interno delle quali inserire blocchi di testo.
Il tag del paragrafo
Nel linguaggio HTML il paragrafo, identificato dal tag , definisce un contenitore all’interno del quale può essere inserito un blocco di testo.
Come abbiamo visto, il testo potrebbe anche essere inserito direttamente all’interno del body senza bisogno di utilizzare il tag <p>. Tuttavia la presenza di questo tag contribuisce a fornire un’identità più chiara ai contenuti testuali della pagina, aiutando i motori di ricerca a interpretarli con maggiore correttezza.
I tag di stile del carattere
Al testo contenuto in una pagina web possono essere applicati alcuni degli stili e degli effetti di formattazione del testo visti per i programmi applicativi.
Nella seguente tabella sono raccolti i diversi stili con i tag di riferimento.
|
Stile |
Tag |
Esempio |
|
grassetto |
<b>...</b>
|
testo grassetto |
|
corsivo |
<i>...</i>
|
testo corsivo |
|
sottolineato |
<u>...</u>
|
testo sottolineato |
|
barrato |
<s>...</s>
|
|
|
pedice |
<sub>...</sub>
|
testo a pedice |
|
apice |
<sup>...</sup>
|
testo ad apice |
|
rafforzato |
<strong>...</strong>
|
testo rafforzato |
|
enfatizzato |
<em>...</em>
|
testo enfatizzato |
Lo sapevi che
Il tag <em> è l’abbreviazione del termine inglese emphasize che si traduce con enfatizzare, cioè dare rilievo.
Il tag a capo
Al termine della visualizzazione di un heading (o di un paragrafo), il browser inserisce sempre un “a capo”. Nel caso in cui sia necessario inserire un a capo in una posizione diversa, per esempio a metà di una frase, scrivere il testo nella riga successiva del documento HTML non ha alcun effetto sulla visualizzazione della pagina: il browser, infatti, ignora tutti i ritorni a capo che sono presenti nel codice HTML.
L’inizio in una nuova riga deve quindi essere inserito esplicitamente utilizzando il tag a capo <br> (abbreviazione dell’inglese ▶ break). Ciascun tag <br> corrisponde a una pressione virtuale del tasto INVIO.
esempio
Il tag per inserire una riga orizzontale
Il tag <hr> (abbreviazione di ▶ horizontal row) inserisce una linea orizzontale nella pagina.
La principale funzione di questo tag è quella di inserire una pausa tematica più che una riga estetica.
esempio
Il tag immagine e i suoi attributi
Per inserire un’immagine (fotografia o disegno) in una pagina web si usa il tag immagine <img>.
Si tratta di un tag singolo, privo di chiusura, dentro al quale si inseriscono diversi attributi, alcuni obbligatori e altri facoltativi:
- l’attributo obbligatorio src (abbreviazione dell’inglese ▶ source): contiene il nome e l’estensione dell’immagine, che si intende inserire nella pagina;
- l’attributo facoltativo alt (abbreviazione dell’inglese ▶ alternative): contiene il testo che descrive l’immagine. La funzione principale del testo è quella di sostituire l’immagine all’interno della pagina nel caso in cui il file sorgente non venisse trovato dal browser;
- gli attributi facoltativi ▶ width e ▶ height: servono per modificare le dimensioni dell’immagine anche, eventualmente, deformandola.
Per ridimensionare l’immagine mantenendo le proporzioni è possibile intervenire su uno solo dei due attributi.
La sintassi per inserire un’immagine con gli attributi descritti è:
<img src="nome file" alt="testo descrittivo" height="valore altezza" width="valore larghezza">
esempio
Inseriamo l’immagine di un fiore in una pagina web, indicando anche un testo alternativo.
Nel file index.html scriviamo il codice:
<img src="fiore.jpg" alt="Fiorellino">
Quando carichiamo la pagina del browser vediamo l’immagine nelle sue dimensioni effettive.
Se cancelliamo il file fiore.jpg dalla cartella in cui è salvato e ricarichiamo la pagina del browser, leggiamo il testo descrittivo inserito con l’attributo alt.
Se vogliamo modificare le dimensioni dell’immagine inserita dobbiamo aggiungere al codice anche gli attributi height e width.
L’unità di misura utilizzata per definire altezza e larghezza dell’immagine è il pixel quindi, non si tratta di un’unità di misura assoluta, come potrebbe essere per esempio il centimetro: la grandezza dell’immagine espressa in pixel dipende dai dpi (▶ unità 3). Questo significa che su dispositivi diversi, la dimensione in centimetri dell’immagine può variare.
Come sappiamo, è sempre possibile ridurre la dimensione di un’immagine senza perdere qualità, al contrario l’ingrandimento è possibile solo entro certi limiti, superati i quali l’immagine appare quadrettata per la perdita di informazioni.
Più informazione è contenuta all’interno dell’immagine, minore è la possibilità di sgranarla ingrandendola, ma un’immagine con molte informazioni ha un “peso” maggiore e quindi necessita non solo di più spazio per essere salvata, ma soprattutto di più tempo per essere trasmessa. Se in una pagina web vengono inserite immagini pesanti il caricamento del sito web nel browser viene notevolmente rallentato e occorre più tempo per poterne usufruire (soprattutto se la rete con cui si accede ha dei limiti).
I motori di ricerca posizionano i siti “lenti” più in basso nella SERP. Per evitare il “declassamento” gli sviluppatori web utilizzano prevalentemente le immagini .jpg e gif) a 72 dpi perché pesando poco vengono caricate nel browser molto rapidamente.
Lo sapevi che
Le parole inserite nell’attributo alt sono anche quelle che vengono lette automaticamente dai software per i non vedenti e vengono utilizzate dai motori di ricerca come ulteriori parole chiave per indicizzare i contenuti della pagina.
I tag delle liste
Le liste sono un modo per organizzare gli elenchi all’interno di una pagina. In generale, vengono apprezzate dai motori di ricerca perché permettono di ripetere le parole chiave all’interno della pagina.
Nel linguaggio HTML ogni singolo elemento della lista (list item) viene racchiuso fra i tag <li>.
Le liste possono essere di due tipi:
- ▶ liste non ordinate: sono gli elenchi puntati in cui vengono elencati elementi senza un particolare ordine sequenziale (per esempio la lista della spesa). Per inserire nel documento HTML una lista non ordinata si utilizza il tag <ul>;
- ▶ liste ordinate: sono gli elenchi numerati in cui gli elementi vengono elencati seguendo un preciso ordine sequenziale (per esempio ingredienti da aggiungere in una ricetta). Per inserire nel documento HTML una lista ordinata si utilizza il tag <ol>.
Se non viene specificato nulla, la numerazione degli elementi della lista parte da 1, se invece si vuole partire da un numero diverso si deve usare l’attributo start.
esempio
|
|
I tag delle tabelle
Per visualizzare una tabella all’interno della pagina HTML si utilizza il tag <table>.
Ciascuna riga della tabella è individuata dal tag <tr> (table row) e ciascun elemento nella riga è individuato dal tag <td> (table data). Gli elementi che si trovano nell’intestazione della tabella possono essere enfatizzati utilizzando il tag <th> (table header).
Se non viene specificata esplicitamente la presenza di un bordo, il contenuto della tabella viene visualizzato senza. Utilizzando l’attributo border, è possibile inserire un bordo nero che viene applicato alla tabella (rettangolo esterno), alle intestazioni (rettangoli in alto), ai dati (altri rettangoli). Lo spessore del bordo viene specificato dal numero nell’attributo border (per esempio 1).
ApprofondiMENTO
IL DOM
Quando un browser legge e interpreta quello che c’è scritto in un documento HTML, genera una rappresentazione ad albero della struttura della pagina web. Questa rappresentazione si chiama DOM (Document Object Model
Il DOM è unico ma viene interpretato in modo diverso da ogni browser, per questo motivo lo stesso codice HTML potrebbe essere visualizzato in modo diverso su browser diversi.
L’evoluzione del linguaggio HTML
Il linguaggio HTML introdotto da Tim Berners-Lee all’inizio degli anni Novanta ha subìto un’evoluzione nel corso del tempo.
Nella sua prima versione l’HTML 1.0 era un linguaggio semplice che consentiva principalmente di strutturare i testi e di creare collegamenti ipertestuali tra i documenti.
Nel 1994, presso il MIT (Massachusetts Institute of Technology) Berners-Lee, in collaborazione con il CERN di Ginevra, fondò il World Wide Web Consortium (W3C), un’organizzazione internazionale tuttora esistente che stabilisce gli standard per i linguaggi e i protocolli di comunicazione del web, con lo scopo di sviluppare al meglio le potenzialità del World Wide Web.
Nel 1995 il W3C approvò lo standard HTML 2.0 seguito, nel 1997, dallo standard HTML 3.2 che aggiunse nuove funzionalità, adeguandosi fortemente al browser Netscape che, in quegli anni, dominava il web.
Fra le innovazioni introdotte dalla versione HTML 3.2 comparvero l’attributo bgcolor per impostare un colore di sfondo, l’attributo background per inserire un’immagine di sfondo e il tag <font> per modificare font, dimensione e colore del testo.
|
Codice |
Funzione |
|
<body bgcolor="red">
|
Inserisce uno sfondo rosso nella pagina |
|
<body background="fiore.jpg"> |
Inserisce un’immagine di sfondo nella pagina |
|
<font face="verdana" size="2" color="blue">Testo…</font>
|
Modifica il font, la dimensione e il colore del testo |
La possibilità di poter intervenire sull’estetica delle pagine rese molto più gradevole il loro aspetto, ma per gli sviluppatori introdusse una nuova problematica che fino a quel momento non si era ancora presentata.
Il markup legato all’estetica doveva essere applicato a ogni singolo tag di ogni singola pagina del sito web. Quindi, per esempio, per applicare lo stesso colore di sfondo a tutte le pagine di un sito web, era necessario inserire in tutti i tag <body> l’attributo bgcolor. Se un sito aveva 100 pagine l’operazione andava ripetuta 100 volte, con il rischio di introdurre errori o dimenticanze; inoltre, l’eventuale modifica del colore di sfondo imponeva la correzione di 100 istruzioni.
Gli sviluppatori si resero conto che la descrizione degli elementi presenti nella pagina (per esempio la pagina contiene un’intestazione e sei paragrafi) doveva prescindere dalla loro visualizzazione (per esempio l’intestazione è rossa e i sei paragrafi vengono disposti su due colonne).
Nel dicembre 1997 venne introdotto lo standard HTML 4.0 con il quale iniziò un’inversione di tendenza. Gli elementi HTML strettamente legati all’estetica cominciarono a essere gradualmente deprecati e il markup come bgcolor, background e <font> iniziò a essere considerato obsoleto. Anche l’attributo border che abbiamo usato per le tabelle rientra fra quelli ritenuti ormai obsoleti.
Il markup obsoleto iniziò a essere gradualmente rimosso dal codice HTML e tutti gli aspetti strettamente legati alla visualizzazione degli elementi all’interno della pagina, cominciarono a essere gestiti con il linguaggio CSS.
Uno dei principali vantaggi del CSS è quello di consentire l’utilizzo dei fogli di stile, cioè file di testo (con estensione .css) all’interno dei quali inserire le istruzioni che riguardano l’aspetto estetico di una singola pagina. Il foglio di stile viene scritto una sola volta e viene collegato a tutte le pagine che devono essere visualizzate con quella modalità estetica.
La possibilità di modificare l’aspetto di un intero sito web intervenendo su un unico foglio di stile ha notevolmente semplificato la vita degli sviluppatori.
Dopo l’HTML 4.01 del 1999 per alcuni anni non venne rilasciata nessuna nuova versione del linguaggio, perché il W3C spostò la propria attenzione sullo sviluppo di un linguaggio parallelo chiamato XHTML (basato su XML). Nel 2008 cominciò a farsi strada il linguaggio HTML 5 che nel 2014 divenne a tutti gli effetti uno standard completo.
Nonostante siano già passati molti anni, i siti realizzati con markup obsoleto non sono ancora completamente scomparsi dal web e per questo motivo anche i browser più recenti continuano a visualizzarli correttamente.
Lo sapevi che
In una scena del film Contact del 1997 ambientato nello stesso periodo, la protagonista, interpretata da Jodie Foster, parla in videoconferenza con un collega. La finestra mostrata sul PC è quella del browser Netscape Navigator che era uno dei più diffusi in quegli anni.
Lo sapevi che
Il termine obsoleto in italiano significa “antiquato”, “passato di moda” e viene frequentemente utilizzato in ambito informatico per indicare le componenti hardware (o software) che non vengono più supportate dalle nuove tecnologie e che sono destinate a essere abbandonate.
Il web semantico
Nel 2001 Tim Berners-Lee ipotizzò un modello per il web: il web semantico (Web 3.0). Se i contenuti del web venissero scritti enfatizzando il significato delle informazioni, i dati nel web potrebbero essere raccolti ed elaborati in modo totalmente automatico da software autonomi (agenti semantici), implementati con le tecniche di intelligenza artificiale. Per esempio i motori di ricerca potrebbero essere in grado di effettuare analisi molto più evolute di quelle attuali.
Nel web dei social (Web 2.0), che utilizziamo attualmente, i contenuti generati dalla comunità virtuale includono alcuni esempi che si avvicinano molto al concetto di agente semantico: per esempio i siti web che confrontano i prezzi, ma soprattutto i crawler che indicizzano i contenuti per i motori di ricerca. La prima generazione di siti web (Web 1.0), invece, è stata quella in cui le persone visualizzavano passivamente i contenuti.
La nuova frontiera, favorita dal linguaggio HTML 5, apre scenari per un web interamente governato dalle intelligenze artificiali.
Il linguaggio HTML5
Il linguaggio HTML 5, così come le versioni precedenti, descrive la struttura delle pagine web delegando al CSS la gestione della loro visualizzazione.
Per favorire lo sviluppo del web semantico e per assecondare le nuove esigenze dei siti moderni, l’HTML 5 ha introdotto alcune ulteriori innovazioni, fra cui:
- codice ridotto: rispetto alle versioni precedenti, il linguaggio HTML 5 ha tra i punti di forza una notevole semplificazione della sintassi.
Un esempio significativo è costituito dall’elemento doctype che non è un vero e proprio tag, ma un’informazione che viene scritta subito prima del tag <html> per indicare al browser quale versione di HTML viene utilizzata nel documento. In HTML 5 la sintassi del doctype è:
<!DOCTYPE html>
notevolmente semplificata rispetto a quella utilizzata nelle versioni precedenti. Per esempio in HTML 4.01 la sintassi del doctype è:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- miglioramento della struttura delle pagine web: l’HTML 5 ha promosso il raggruppamento dei contenuti all’interno di opportuni elementi contenitore.
Il contenitore per eccellenza è il <div>, un rettangolo che viene utilizzato per raggruppare gli elementi del documento HTML con lo scopo di organizzare meglio i contenuti all’interno della pagina web. Per esempio il seguente <div> racchiude un’intestazione e un paragrafo:<DIV><h2>Questa è un’intestazione</h2><p>Questo è un paragrafo</p></DIV>
- tag semantici: l’HTML 5 ha aggiunto nuovi tag per racchiudere i contenuti che hanno un significato semantico. Tra i tag semantici definiscono le diverse parti che compongono una pagina web. Fra questi citiamo:
- <header>: racchiude contenuti introduttivi (per esempio intestazioni e logo);
- <nav>: racchiude i collegamenti principali, che potrebbero essere utili alla navigazione;
- <section>: definisce una sezione, che di solito contiene un’intestazione e un paragrafo;
- <article>: racchiude un contenuto che “avrebbe senso” anche se tutto ciò che lo circonda venisse eliminato. Se la pagina web fosse la pagina di un quotidiano, <article> sarebbe l’articolo principale;
- <aside>: racchiude un contenuto correlato solo indirettamente ai contenuti circostanti;
- <footer>: definisce un piè di pagina e può includere, per esempio, informazioni sul proprietario del sito e i suoi contatti;
- tag per elementi multimediali: l’HTML 5 ha introdotto nuovi tag per supportare l’inserimento di elementi multimediali all’interno delle pagine web. Fra questi <video> e <audio> per incorporare file multimediali.
Lo sapevi che
Il termine div deriva dalla locuzione inglese content division che in italiano si traduce con “separazione del contenuto”.
Clic!
Tecnologie informatiche per il primo biennio