Bentornati ad un nuovo appuntamento con iSpazio DevResources… siamo ancora qui ad occuparci di HTML 5 e dei tags che ci consentono di definire al meglio il contenuto delle nostre pagine web!
Questa volta infatti ci occuperemo nello specifico dei tag che popolano la struttura HTML che abbiamo definito negli scorsi appuntamenti, consentendoci quindi di rendere la nostra pagina utile, accattivante e piena di contenuti interessanti!
I tags che valuteremo sono quelli di maggior utilizzo (come <a>, <h1>…<h6>, <p>, etc…) mentre affronteremo la prossima volta quelli introdotti con HTML 5 (come <meter>, <mark>, etc…).
Ma iniziamo subito la nostra panoramica…
<h1>…<h6>
Questo tipo di tag è utile per poter definire le intestazioni delle varie parti di una pagina web, e di gestirle quindi in maniera gerarchica. I tag <hN> consentono infatti di definire le intestazioni presenti nelle varie sezioni di un sito permettendo per mezzo della nidificazione di comporre una struttura gerarchica semanticamente corretta. Normalmente difatti i tags in questione dovrebbero essere utilizzati in modo che possano rappresentare per mezzo dell’indice N (che va da 1 a 6) l’importanza dell’intestazione che rappresentano, quindi il tag h1 avrà maggior rilievo rispetto ad h2, e cosi via.
Uno degli ottimi esempi che ho studiato “da qualche parte nel web” rappresentava in maniera molto semplificata e chiara l’importanza dei tags hN:
... <h1>Pianeta Terra</h1> <h2>Continente</h2> <h3>Nazione</h3> <h4>Regione</h4> <h5>Città</h5> <h6>Via</h6> ...
Svariate sono in ogni modo le tesi per una corretto utilizzo dei tag hN, dato che “dovrebbero essere” dei tag molto influenti per il corretto posizionamento di una pagina nei risultati dei motori di ricerca.
Personalmente ritengo che un buon criterio per valutarne l’utilizzo sia quello di raggrupparli per categorie d’utilizzo e cioè:
Uso degli Heading Tag (hN):
h1 per titoli delle pagine o delle sezioni principali;
N.B. Esistono molte fonti che suggeriscono di utilizzare un solo tag H1 all’interno della pagina, ma con HTML 5 ritengo che questa teoria sia un pò desueta.
h2 o h3 per i sottotitoli (abstract) delle pagine o delle sezioni principali
h4 o h5 per i titoli dei paragrafi o di porzioni di testo della pagina
h5 o h6 per i titoli di note, approfondimenti, etc…
Con l’avvento di HTML 5 in ogni modo anche questi tags sono rivalutati e dovrebbero essere sfruttati in maniera più idonea a rappresentare in maniera semanticamente corretta la pagina web, quindi utilizzando i tags in maniera logicamente corretta a seconda dell’esigenza.
Un esempio molto indicativo è quello riportato sulla specifica HTML 5, che rappresenta due porzioni di codice che risultano equivalenti nella semantica in rapporto alla struttura della pagina.
Lo riporto di seguito:
...
<body>
<h1>Let's call it a draw(ing surface)</h1>
<h2>Diving in</h2>
<h2>Simple shapes</h2>
<h2>Canvas coordinates</h2>
<h3>Canvas coordinates diagram</h3>
<h2>Paths</h2>
</body>
...
... <body> <h1>Let's call it a draw(ing surface)</h1> <section> <h1>Diving in</h1> </section> <section> <h1>Simple shapes</h1> </section> <section> <h1>Canvas coordinates</h1> <section> <h1>Canvas coordinates diagram</h1> </section> </section> <section> <h1>Paths</h1> </section> </body> ...Novità di HTML 5:
– L’introduzione dei nuovi tags di gestione della struttura (<section>, <article>, etc…) consentono una maggiore chiarezza nell’utilizzo dei tags <hN> da utilizzare.
<a>
Uno dei più importanti e famosi tags di HTML è senz’altro <a>.
Questo tag ci consente di definire i famosissimi collegamenti ipertestuali sui quali si fonda il principio delle pagine web, che ci permettono di collegare le pagine tra loro.<a href="http://www.ispazio.net">Questo è un link su iSpazio.net!</a>Molti sono gli attributi di questo tag (oltre ovviamente a quelli Globali) ed elenchiamo di seguito i principali:
– href: consente di specificare la destinazione del link indicandone l’url;
N.B. L’attributo href è fondamentale per l’utilizzo del tag, ed è utilizzato oltre che per linkare eventuali altre pagine anche per linkare porzioni della pagina corrente (dette anchor), o ancora per utilizzi particolari in fase di scripting.– media: consente di specificare per quale tipo di device o media è ottimizzata la risorsa linkata;
– rel: consente di definire la relazione che intercorre tra il documento corrente e la risorsa linkata;
– target: consente di specificare se la risorsa verrà aperta sulla stessa pagina del browser, su un’altra pagina, etc..
– type: consente di specificare il MIME type della risorsa correlata.
E’ importante sapere che i collegamenti ipertestuali possiedono 3 stati che ci consentono di stabilire se il collegamento è stato:
– Già visitato;
– Mai visitato;
– E’ il collegamento attivo.
E’ infine utile fare notare un dettaglio, che potrebbe anche sembrare banale ma è comunque molto importante.
Tutto ciò che verrà contenuto dal tag <a> diventerà cliccabile e se cliccato attiverà il collegamento ipertestuale…potere della nidificazione!<a href="http://www.ispazio.net"><img src="image.png"/></a>
Novità di HTML 5:
– Nuovi attributi type e media.
<p>
Il tag <p> definisce un paragrafo. E’ spesso utilizzato per racchiudere i testi e consentire quindi una distribuzione ordinata del testo. Il tag <p> lascia di default dello spazio prima e dopo il proprio contenuto, ma che può comunque essere gestito per mezzo dei CSS.
... <p>Questo è un paragrafo</p><p>Questo è un altro paragrafo</p> ...<blockquote>
Il tag <blockquote> definisce un blocco di testo di citazione proveniente da un’altra fonte.
... <blockquote cite="http://www.francescosciuti.it"> Questa è una citazione da una fonte (speriamo) attendibile! </blockquote> ...<pre>
Il tag <pre> consente di identificare un testo formattato preventivamente e che quindi non subirà modifiche in fase di rendering del browser, mantenendo eventuali spazi e interruzioni di linea.
... <pre> Questo testo manterrà lapropria disposiozione comprendente gli spazi e le interruzioni di line</pre> ...
<br>
Il tag <br> è un tag che consente di inserire una interruzione di linea (una sorta di linea trasparente quindi).
... Un testo con <br/> interruzione di linea ...
<i>, <b>, <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, <var>, <cite>
I tags su indicati consentono di dare enfasi al testo, e consentono quindi di dare una formattazione particolare al testo a seconda dello scopo del tag.
... <i>Testo Corsivo</i> <b>Testo Grassetto</b> <em>Testo Enfatizzato</em> <strong>Testo Importante</strong> <dfn>Definizione</dfn> <code>Porzioni di codici estratti da programmi per Computer</code> <samp>Output di programmi per Computer</samp> <kbd>Testo digitato da tastiera </kbd> <var>Variabile</var> <cite>Citazione</cite> ...L’effetto ottenuto con i tag su citati può essere in ogni modo riprodotto facilmente con CSS.
Novità di HTML 5:
– Alcuni dei tags su citati (come i, b, em, etc…) erano stati considerati obsoleti, ma con Html5 recuperano il loro valore reindirizzandoli però ad un arricchimento semantico del contenuto, delegando a CSS la formattazione grafica del testo.
<ul>,<ol>, <li>
I tags <ol> ed <ul> consentono di definire rispettivamente liste ordinate e non.
Spesso questo genere di elenchi sono utilizzati per strutturare i menù di navigazione o liste di collegamenti, o ancora liste di ulteriori elementi HTML.Mentre entrambe i tag hanno gli attributi Globali, solo il tag <ol> ha attributi specifici e sono:
– start: indica il valore dal quale iniziare la numerazione della lista;
– reversed: ordina la lista in maniera discendente.
Ogni singolo elemento della lista viene definito per mezzo del tag <li>.
L’unico attributo specifico è:– value: consente nelle liste di tipo <ol> di indicare il numero dell’elemento per la lista.
Le caratteristiche grafiche delle liste sono delegate direttamente ai CSS, come ad esempio il tipo di lista (numerata, dotted, etc…)
... <ul> <li>Voce Elenco Non Ordinato 1</li> <li>Voce Elenco Non Ordinato 2</li> <li>Voce Elenco Non Ordinato 3</li> </ul><ol> <li>Voce Elenco Ordinato 1</li> <li>Voce Elenco Ordinato 2</li> <li>Voce Elenco Ordinato 3</li> </ol><ol start="50"> <li>Voce Elenco Ordinato 1</li> <li>Voce Elenco Ordinato 2</li> </ol><ol reversed="reversed"> <li>Voce Elenco Ordinato 1</li> <li>Voce Elenco Ordinato 2</li> </ol> ...
Questi tags hanno un utilizzo in ogni modo molto ampio che si noterà col proseguire del nostro viaggio.
Novità di HTML 5:
– Nuovo attributo reversed per le liste <ol>;
– Supporto dell’attributo start in passato deprecato;
– Delegata ai CSS tutta la definizione delle caratteristiche grafiche delle liste e dei suoi elementi.
<menu>
Il tag <menu> consente di definire un menù di comandi (ma và! :D), ed è spesso utilizzato per realizzare menù contestuali, elenchi di checkbox per i forms (che vedremo in seguito), barre di comandi, etc…
I singoli elementi del tag <menu> sono ancora una volta definiti per mezzo del tag <li>.
... <menu> <li><input type="checkbox" />Red</li> <li><input type="checkbox" />blue</li> </menu> ...Novità di HTML 5:
– Tag precedentemente deprecato, tornato in auge con HTML5;
– Delegata ai CSS tutta la definizione delle caratteristiche grafiche dei menù e dei suoi elementi.
<span>
Il tag <span> è utilizzato per raggruppare del contenuto inline, ed è spesso utilizzato per caratterizzare graficamente o individuare una parte dei contenuti per mezzo di CSS o di script.
... <p>Il testo tra gli span sarà <span style="color:red;">rosso</span></p> ...<object>
Il tag <object> consente di inglobare nella pagina un elemento “estraneo” come ad esempio un filmato Flash, ActiveX, Applets Java (beh, magari ormai un po’ fuori moda!), etc…
L’utilizzo sicuramente più sfruttato è senz’altro quello che consente di includere filmati Flash nella pagina, ed è possibile definire eventuali parametri relativi all’oggetto inglobato per mezzo di un ulteriore tag <param>.
Gli attributi utili per il tag <object> sono:
– data: indica la fonte (o meglio l’url) dell’oggetto da inglobare;
– form: indica a quale form presente nella pagina appartiene l’oggetto inglobato;
– name: indica il nome univoco da utilizzare per l’invio di eventuale form correlato (tema che verrà trattato successivamente);
– type: consente di specificare il MIME type della risorsa correlata;
– width ed height: consentono di specificare larghezza ed altezza in pixel dell’oggetto da inglobare;
All’interno del tag può essere incluso del testo che verrà mostrato in caso di incompatibilità del browser con l’oggetto inglobato.
L’utilizzo del tag object è un pizzico più complesso degli altri e rientra in una casistica molto ampia (ad esempio per i parametri che variano a seconda del tipo di oggetto da inglobare), e sarà affrontata (se necessario) al momento opportuno.
Novità di HTML 5:
– Attributo form che consente di indicare un form di appartenenza per consentire l’utilizzo ed l’invio dell’oggetto inglobato da parte del form stesso;
– Non può essere incluso nel tag <head>;
– E’ fondamentale indicare almeno uno degli attributi data o type.
<dl>, <dt>, <dd>
Il tag <dl> consente di rappresentare una lista di definizioni, indicando con il tag <dt> l’elemento della lista, e con <dd> la descrizione dell’elemento stesso.
Uno dei più comuni esempi di utilizzo dei tags potrebbe essere la rappresentazione di un catalogo.... <dl> <dt>Cucina Classica</dt> <dd>Cucina in stile classica con ante in legno decappato</dd> <dt>Cucina Moderna</dt> <dd>Cucina con linee minimaliste con ante in legno lucido</dd> </dl> ...<del> <ins>
I tags in questione consentono di definire una “correzione” del testo indicando con il tag <del> il testo cancellato, e con <ins> quello corretto.
... <p>Questo testo verrà <del>corretto</del> con <ins>questo</ins>!</p> ...E’ possibile descrivere accuratamente la correzione indicando gli attributi:
– cite: indica l’url del documento che spiega le ragioni della correzione;
– datetime: indica l’ora ed il giorno nel quale la correzione è stata effettuata.
<img>
Probabilmente il tag più famoso di tutti (dopo <a>!)…il tag che ci consente di inserire nella nostra pagina delle immagini, o per meglio essere precisi che ci consente di collegare un immagine al nostro documento!
...<img src="image.gif" alt="Immagine Esempio" /> ...
Infatti come si evince dalle specifiche il tag crea uno spazio che ospita l’immagine indicandone l’url di origine per mezzo di un attributo specifico.
Gli attributi specifici del tag sono:– alt: indica un testo alternativo per l’immagine (ed è anche utile per l’indicizzazione del contenuto);
– src: indica l’url dell’immagine;
– width ed height: consentono di specificare larghezza ed altezza in pixel del contenitore dell’immagine (ridimensionandola se necessario);
– ismap: indica se l’immagine è una mappa (lato server);
– usemap: indica se l’immagine è una mappa (lato client).
Novità di HTML 5:
– Delegata ai CSS tutta la definizione delle caratteristiche grafiche dei menù e dei suoi elementi.
<map>
Il tag consente di definire delle zone cliccabili per una immagine…o per essere più chiari un’unica immagine ma con diverse aree cliccabili, per mezzo del tag <area>.
<img src="cartina.gif" width="145" height="126" alt="Cartina Geografica" usemap="#mappacartina" /><map name="mappacartina"> <area shape="rect" coords="0,0,100,125" alt="Nazione" href="naz.htm" /> <area shape="circle" coords="18,40,3" alt="Altra Nazione" href="naz1.htm" /> </map>Per mezzo dell’esempio è facile capire come l’immagine indicata per mezzo del tag <img> venga correlata alla mappa mappacartina in modo da avere alcune zone dell’immagine cliccabili e che quindi consentono il collegamento ipertestuale con altre pagine.
L’unico attributo (obbligatorio tra l’altro) per il tag <map> è name che consente di indicare il nome della mappa in modo che possa essere correlata con un’immagine.
Per concludere…
…avremmo avuto ancora molte cose da dire e tags ulteriori da illustrare, ma lo spazio è tiranno…ma nel prossimo appuntamento tratteremo esclusivamente di alcuni tag “nuovi di zecca” introdotti con HTML 5, che consentono di descrivere alcuni elementi delle pagine web in maniera ancora più precisa e semanticamente corretta.
Argomenti come le Tabelle, i Forms, i tags Multimediali, etc… invece avranno una trattazione specifica con approfondimenti con singoli appuntamenti a venire!
Spero ancora una volta di esservi stato utile… a presto!
Francesco Sciuti
Sai che siamo anche su Telegram? Unisciti al nostro canale iSpazio per ricevere le notifiche oppure Apple Italia per chattare con altri utenti. Scopri i migliori prodotti Tech in sconto su Amazon con il nostro canale OFFERTE iSpazio.
Leggi o Aggiungi Commenti