Diario HTML 2016

Saturday, 23 Jul 2016 - Percorso HTML, Prima lettura

NOTA BENE: questo articolo fa riferimento alle specifiche che nel momento della sua stesura erano quelle “attuali e stabili”. Per sapere nel momento della lettura quali sono le attuali specifiche consultare: https://www.w3.org/TR/html5

Giorno 1

A distanza di 10 anni o più e con una buona dose di follia sto per ri-studiare (o almeno leggere..) le specifiche attuali di HTML e CSS rilasciate dal W3C. D’altra parte sono le nuove versioni stabili e seppure già studiate tra videocorsi e articoli vari non ci si può esimere dall’andare dritti alla fonte ufficiale.

Ho pensato che potrebbe essere interessante tenere una sorta di diario in cui annotare i passaggi salienti della prima lettura. Magari un giorno procederò ad una seconda lettura e confronterò i nuovi appunti con la prima, ma per il momento mi accontento di portare avanti questo percorso fino alla fine!

Si parte con l’HTML.

Nel momento in cui scrivo la versione attuale e stabile di HTML è la 5. È stata pubblicata il 24 ottobre 2014 ed è raggiungibile all’url https://www.w3.org/TR/html5
Costituisce il risultato di un lungo studio decennale portato avanti dal W3C e dal WHATWG, la precedente versione stabile è infatti la 4.01 pubblicata il 24 dicembre 1999.

Inizio ovviamente dal sito del W3C  https://www.w3.org perché, anche se lo conosco già, voglio cercare il link ufficiale all’ultima versione stabile delle specifiche HTML nel sito di chi le ha rilasciate. Dopo due minuti di contorti passaggi di link in link decido che mi bastano e mi arrendo alla seguente sequenza Standard > Web Design and Applications > HTML & CSS > HTML nella sezione Current status of specifications > HTML5 del 2014-10-28, perchè? Perchè lo so. Ma volevo provare come “chi-lo-cerca-per-la-prima-volta”…

Eccoci dunque alle specifiche ufficiali e stabili dell’HTML 5 del 24 ottobre 2014.

Il W3C mantiene come punto unico di entrata per la consultazione della tecnologia HTML l’url https://www.w3.org/TR/html

 

Tipi di contenuti documento HTML

Tipi di contenuti documento HTML – Copyright © 2015 W3C® (MIT, ERCIM, Keio, Beihang). This software or document includes material copied from or derived from W3C Recommendation 28 October 2014.

Oggi ho letto le parti introduttive, ecco le parti salienti per me, in questa prima lettura.

Introduzione.

Iniziamo col dire che HTML è un linguaggio di markup, è IL linguaggio di markup del World Wide Web. E il suo acronimo vuol dire HyperText Markup Language.

La versione 5 introduce nuove funzionalità per aiutare gli autori di applicazioni web e per definire regole per i browser (o user agent in generale) che favoriscano l’interoperabilità.

Per capire la strada tortuosa intrapresa per arrivare alle specifiche dell’HTML 5 è d’obbligo leggere la sezione “1.4 History“.

Mi ricordano che la lettura non sarà facile e che ci vogliono ulteriori conoscenze di base per comprenderla, come DOM, HTTP, XML, CSS, JavaScript… Ma un’infarinatura di un po’ di tutto ce l’ho già e comunque da qualche parte bisogna pur cominciare quindi continuo.

Quindi affermano anche che il linguaggio e i moduli con cui è interfacciato sono stati mantenuti volutamente con una logica seriale nell’esecuzione degli script: niente multi-threading. O almeno da quello che si legge in questo passaggio, poi andando avanti vedremo, capiremo, approfondiremo.

Puntualizzano che XHTML esiste ancora e anche lui è alla versione 5, ma questa è un’altra storia parallela che per ora non mi interessa.

Privacy.

Proseguendo mi aiutano a capire come leggere le specifiche e fanno un breve excursus sulle questioni inerenti la privacy, argomento che mi interessa molto.

“In general, due to the Internet’s architecture, a user can be distinguished from another by the user’s IP address. IP addresses do not perfectly match to a user; as a user moves from device to device, or from network to network, their IP address will change; similarly, NAT routing, proxy servers, and shared computers enable packets that appear to all come from a single IP address to actually map to multiple users.”

Cookies, for example, are designed specifically to enable this, and are the basis of most of the Web’s session features that enable you to log into a site with which you have an account.”

“Certain characteristics of a user’s system can be used to distinguish groups of users from each other; by collecting enough such information, an individual user’s browser’s “digital fingerprint” can be computed, which can be as good, if not better, as an IP address” (1.8 Privacy concerns).

Copyright © 2015 W3C® (MIT, ERCIM, Keio, Beihang). This software or document includes material copied from or derived from W3C Recommendation 28 October 2014.

Documento HTML, introduzione.

Anche se sono ancora nelle sezioni non-normative arriva una prima e leggera parte tecnica: “1.9 A quick introduction to HTML” un accenno veloce e semplificato di come si presenta un documento HTML.

In estrema sintesi è un grafo ad albero di elementi innestati l’uno nell’altro e delimitati sintatticamente da quelli che sono i TAG, delle etichette che segnano l’inizio e la fine di ogni elemento. Ogni tag può avere degli attributi che ne controllano il comportamento.

I browser leggono il documento, ricostruiscono tale albero e lo mantengono in memoria come un insieme di nodi legati tra loro in modo gerarchico.

L’elemento radice è <html> che contiene due elementi <head> e <body>, ci saranno poi una serie di sotto-nodi che corrisponderanno agli elementi HTML che via via imparerò. In una certa misura anche ogni spazio e a capo è un sottonodo.

 

Vengono affrontati piccoli esempi di elementi avanzati come gli script e i css, ma quello che mi colpisce di più è invece la seguente puntualizzazione:

“HTML documents represent a media-independent description of interactive content. HTML documents might be rendered to a screen, or through a speech synthesizer, or on a braille display. To influence exactly how such rendering takes place, authors can use a styling language such as CSS.”

Copyright © 2015 W3C® (MIT, ERCIM, Keio, Beihang). This software or document includes material copied from or derived from W3C Recommendation 28 October 2014.

 

In breve: l’HTML è indipendente dal mezzo utilizzato per visualizzarlo (o sintetizzarlo).

 

Sicurezza.

Viene poi introdotta l’importante questione della sicurezza riassumibile così: ‘prima di usare qualsiasi input, controllalo‘.

Validazione del codice.

E viene accennata l’importanza di validare il proprio codice tramite i vari validatori messi a disposizione dal W3C stesso, ricordando l’importanza di creare documenti ben-formati.

Ruolo del HTML.

A tal proposito si pone l’accento sulla progressiva eliminazione dal linguaggio HTML degli elementi di presentazione (visivi) via via demandata al CSS.

Le tre motivazioni principali sono :

  • scarsa accessibilità
  • alti costi di manutenzione
  • dimensioni file più grandi

L’attributo style, unico markup rimasto in html per definire la presentazione di un contenuto direttamente in HTML, è ammesso solo in fase di sviluppo o come ultima spiaggia quando non si può usare altro. Inoltre diversi elementi che prima erano di presentazione, come b, i, hr, s, small e u, ora sono indipendenti dal media.

Anche dalla lettura di questa parte introduttiva all’HTML 5 sono emersi gli aspetti più importanti di ogni progetto informatico: specifiche standard, interoperabilità, privacy e sicurezza.

Giorno 2

Il mio secondo giorno di studio inizia da una rapida scorsa del secondo capitolo “2 Common infrastructure” che elenca tutte le specifiche, i requisiti e le terminologie utilizzate nel documento per ogni singolo linguaggio coinvolto. A parte prendere coscienza di tutti gli standard e linguaggi coinvolti lo scorro in modalità “lettura web”: titoli, parole in grassetto, elenchi …

Così passo velocemente al capitolo 3 “Semantics, structure, and APIs of HTML documents”. Semantica, struttura e API dei documenti HTML.

Struttura base di un documento HTML.

Viene illustrato l’oggetto Document e la struttura base di un documento HTML:

html
-head
--title
-body

Categorie degli elementi.

Ma la parte più importante del capitolo 3 per me è la suddivisione di tutti gli elementi HTML in base alla loro categoria di contenuto:

  • Metadata
  • Flow
  • Sectioning
  • Heading
  • Phrasing
  • Embedded
  • Interactive

Nella pagina https://www.w3.org/TR/html5/dom.html è presente un oggetto (SVG) interattivo che permette di visualizzare velocemente i gruppi di tag in base alla loro categoria.

Tipi di contenuti documento HTML
Copyright © 2015 W3C® (MIT, ERCIM, Keio, Beihang). This software or document includes material copied from or derived from W3C Recommendation 28 October 2014.

I contenuti di tipo METADATA sono utilizzati per specificare la presentazione del contenuto, il comportamento del contenuto, le relazioni del documento attuale con altri documenti e altre informazioni, raramente sono parte del flusso dei contenuti:

base, link, meta, noscript, script, style, template, title

I contenuti di tipo FLOW (Flusso) sono quelli maggiormente usati all’interno del tag body:

a, abbr, address, area (if it is a descendant of a map element), article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, data, datalist, del, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, i, iframe, img, input, ins, kbd, keygen, label, main, map, mark, math, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, sub, sup, svg, table, template, textarea, time, u, ul, var, video, wbr, text

I contenuti SECTIONING definiscono lo scopo della sezione all’interno della pagina o della sottosezione:

article, aside, nav, section

I contenuti HEADING (Titoli) rappresentano i titoli dei contenuti di una sezione e aiutano a definire la gerarchia di tali contenuti:

h1, h2, h3, h4, h5, h6

I contenuti PHRASING sono tutti gli elementi che definiscono i contenuti testuali:

a, abbr, area (if it is a descendant of a map element), audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, template, textarea, time, u, var, video, wbr, text

I contenuti EMBEDDED includono nel documento risorse esterne o multimediali:

audio, canvas, embed, iframe, img, math, object, svg, video

I contenuti INTERACTIVE sono tutti i contenuti che permettono all’utente di interagire con la pagina, interazione che di solito consiste in un clic.

a, audio (if the controls attribute is present), button, embed, iframe, img (if the usemap attribute is present), input (if the type attribute is not in the hidden state), keygen, label, object (if the usemap attribute is present), select, textarea, video (if the controls attribute is present)

Viene quindi fornita una panoramica su tutti i contenuti che sono considerati paragrafi.

Attributi degli elementi HTML.

Si passa poi alla elencazione degli attributi globali comuni a tutti gli elementi HTML:

accesskey, class, contenteditable, dir, hidden, id, lang, spellcheck, style, tabindex, title, translate

e a quella degli attributi per la gestione degli eventi:

onabort, onblur*, oncancel, oncanplay, oncanplaythrough, onchange, onclick, oncuechange, ondblclick, ondurati, onchange, onemptied, onended, onerror*, onfocus*, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload*, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize*, onscroll*, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting

Gli attributi con l’asterisco hanno un significato diverso se riferiti all’oggetto Window anzichè agli elementi HTML del body.

L’attributo id specifica un identificatore univoco per quel elemento, infatti non può avere lo stesso valore in più elementi HTML.

L’attributo title rappresenta una nota informativa per quel elemento, ma ne viene scoraggiato l’uso in quanto spesso è associato all’azione di passare sopra un elemento con il cursore dell’interfaccia, comportamento tipico nell’uso di un mouse, ma non di altri dispositivi o per gli utenti che utilizzano solo la tastiera.

L’attributo lang definisce la lingua dell’elemento.

L’attributo translate impostato a no può essere utile quando si vogliono specificare porzioni di testo che non vanno tradotte da meccanismi automatici di traduzione.

L’attributo class rappresenta l’appartenenza di un elemento ad una classe.

L’attributo style definisce la rappresentazione di un elemento in base alla sintassi CSS.
nb: per nascondere o mostrare un contenuto utilizzare l’attributo hidden.

Gli attributi Custom data sono utilizzati per memorizzare dati personalizzati che non hanno altri attributi appropriati con i quali essere rappresentati. E sono intesi per essere utilizzati dagli script del sito stesso e non da da terzi. Il loro nome inizia con data- ed è composto da almeno una lettera ASCII minuscola (solo minuscole).

L’attributo dataset è un modo compatto per accedere a tutti gli attributi data-* di un elemento.

Vengono infine illustrati in modalità tabellare gli attributi usati per l’accessibilità, studio che merita un tour de force a parte.

Riassumendo lo studio di oggi posso dire che la parte più importante è stata la suddivisione di tutti gli elementi HTML in categorie di contenuto e la panoramica degli attributi degli elementi HTML.

NOTA BENE: nelle pagine delle specifiche il W3C ha predisposto un bottone che permette di attivare la lettura come sviluppatori di pagine web non interessati al lato che riguarda chi sviluppa browser, per cui soprattutto nei capitoli più difficili lo utilizzo: permette di nascondere le parti di testo che non mi interessano.

Giorno 3

E finalmente si comincia a fare sul serio!

Oggi con il capitolo 4 si analizzano gli elementi che compongono una pagina HTML.

Ogni elemento è composto da un tag di apertura e gran parte degli elementi ha il rispettivo tag di chiusura. Tra i due tag si inserisce il contenuto.

I tag di apertura hanno il nome dell’elemento e i suoi attributi racchiusi dalle parentesi angolari (ossia < e >), nel tag di chiusura si utilizza il solo nome dell’elemento preceduto da una barra obliqua (la sbarra “/” ) il tutto racchiuso dalle parentesi angolari.

<p>Raccolse le sue sette maiuscole, fece scorrere la sua iniziale nella cintura, e si mise in cammino.</p>

Elemento html

Si parte dal suo elemento radice, ossia l’elemento html!

Innanzittuto, anche se lecito, evitiamo commenti prima del tag html (ndl) e non omettiamo i tag html di apertura e di chiusura.

Raccomandazione: specificare il linguaggio del documento, questo aiuta i traduttori e i sintetizzatori vocali a scegliere la lingua da utilizzare.
<html lang="it"></html>

Elemento head

Segue l’elemento head che ha il compito di raggruppare tutti i metadati del documento e gli script css e javascript.
<head></head>

Elemento title

All’interno dell’head il primo metadato importante è l’elemento title che rappresenta il titolo della pagina web, esso comparirà nella barra del titolo o della scheda del browser e quando l’url della pagina viene memorizzato nei preferiti senza essere cambiato manualmente. Ovviamente c’è un unico title per documento ed è solitamente specificato subito dopo l’elemento head.
<title>Titolo della pagina web</title>

Elemento base

Segue l’elemento base che è opzionale ed univoco. Permette di specificare l’URL di base per risolvere gli URL relativi tramite l’attributo href e di specificare tramite l’attributo target il nome di default del browsing context (semplificando: la finestra di riferimento) allo scopo di poter eseguire gli hyperlinks nel giusto contesto. Proprio perchè permette di risolvere gli URL relativi e indirizzare correttamente gli hyperlinks va specificato prima di tutti questi. Solitamente quindi subito dopo l’elemento title.

Se vengono specificati più elementi base solo il primo verrà considerato.

Non ha tag di chiusura.
<base href="http://lidialab.it/eventualenomesottodirectory/index.html">


Elemento link

Segue l’elemento link che permette di linkare risorse esterne alla pagina o di creare hyperlink, per questo l’attributo href è necessario. L’attributo rel permette invece di stabilire la relazione tra la pagina corrente e la risorsa indicata.

Con i seguenti valori l’attributo rel indica una risorsa esterna:

  • rel=icon
  • rel=prefetch
  • rel=stylesheet

Con l’attributo type si definisce il MIME type della risorsa.

Per rel=icon si può inoltre specificare l’attributo sizes.

Ad esempio:
<link rel="stylesheet" href="http://lidialab.it/stile.css" type="text/css">
Con i seguenti valori l’attributo rel indica un hyperlink :

  • rel=alternate
  • rel=author
  • rel=help
  • rel=license
  • rel=next
  • rel=prev
  • rel=search

Non ha tag di chiusura.

Il seguente esempio crea due hyperlink (uno sull’autore e uno per l’help) alla stessa pagina.
<link rel="author help" href="/chi-sono">

Elemento meta

Segue poi l’elemento meta che consente di specificare vari tipi di metadati e deve avere uno dei seguenti attributi name, http-equiv, charset che ne definisce il tipo di contenuto, quest’ultimo è definitivo nell’attributo content.

I meta name author e description sono tra i più utili perchè possono essere utilizzati automaticamente dai motori di ricerca, dai portali, …

<meta name="author" content="LidiaLAB">
<meta name="description" content="Il LABoratorio di Lidia">

L’attributo http-equiv fa eseguire al browser uno specifico algoritmo, come nel caso di set-cookie.

L’attributo charset permette di specificare il set di caratteri di codifica da utilizzare ad esempio nel trattare gli input dei form. È raccomandato l’utf-8, che per noi italiani permette di scrivere nel testo le vocali accentate senza dover usare le entities HTML (quindi potremo scrivere è anzichè &egrave;).

<meta charset="UTF-8">

Non ha tag di chiusura.

Elemento style

Segue poi l’elemento style che consente di specificare codice, essenzialmente css, direttamente nella sezione head della pagina (meglio usare file esterni e strutturare per bene la parte di presentazione tramite css di tutto il sito).

<style> body { background-color: #F2F3F4; color: #003153; } </style>

Oggi ho visto tutto quello che sta “dietro” il contentuto della pagina web, quelle parti “non visibili” che la definiscono.

Giorno 4

Continua lo studio del capitolo 4 che oggi mi coinvolge con un argomento molto importante: le sezioni (sections).

Le sezioni.

Esse permettono di definire il flusso e la struttura dei contenuti di una pagina web HTML.

Elemento body.

Si comincia da quella più importante l‘elemento body.

Dopo head è il secondo elemento dell’elemento html e rappresenta il contenuto del documento. Oltre a contenere gli elementi che andranno a comporre la pagina HTML può gestire alcuni eventi ad esso associati, come il caricamento stesso della pagina, attraverso attributi che iniziano per “on” (onload, onfocus, …) e danno inizio a funzioni specifiche preparate dallo sviluppatore della pagina.
<body onload="nomefunzione();"></body>

Elemento article.

L‘elemento article rappresenta un contenuto compiuto e quindi distribuibile anche separatamente dal resto della pagina.

Quando ci sono articoli innestati quello interno fa riferimento (è relativo) al suo primo elemento article esterno.

Ciascun commento ad un articolo può essere considerato una sezione article a sè.

<article></article>

Elemento section.

L‘elemento section rappresenta una sezione generica di un documento di cui raggruppa elementi accumunati da una tematica. Per necessità di stile va invece usato il div.

<section></section>

Elemento nav.

L’elemento nav rappresenta una sezione principale della pagina con link ad altre pagine o parti della stessa pagina, è quindi una sezione di navigazione, tipicamente corrisponde ad un menu.

Se ne raccomanda l’uso per favorire l’accessibilità agli screen readers: a seconda delle impostazioni e dei comandi impartiti essi possono saltarli o andarci direttamente a seconda dell’esigenza dell’utente.
<nav></nav>

Elemento aside.

L’elemento aside rappresenta una sezione legata secondariamente al contenuto principale e comunque separabile dal resto della pagina, spesso coincide col contenuto delle barre laterali. Può essere usato anche per quotare testi, per le sezioni di advertising o per gruppi di elementi nav secondari.

<aside></aside>

Elementi h1-h6.

Gli elementi h1, h2, h3, h4, h5, e h6 rappresentano i titoli delle varie sezioni e sono organizzati in maniera gerarchica. H1 è quello principale (dell’intero documento o di una sua parte) e man mano che aumenta il numero dopo la “h” si scende di livello nella gerachia. Essi quindi servono per definire la struttura di un testo.

Si ricorda che non vanno utilizzati per dare uno stile a porzioni di testo che non rappresentano un titolo.
<h1></h1>

Elemento header.

L’elemento header introduce il contenuto del suo elemento padre principale. Non introduce una nuova sezione.

<header></header>

Elemento footer.

L’elemento footer rappresenta un piè di pagina per il contenuto del suo elemento padre principale, anche se non è necessario che compaia in fondo. Quando contiene un’intera sezione rappresenta un’appendice, un indice, dei termini d’uso…  Non introduce una nuova sezione.

<footer></footer>

Elemento address.

L’elemento address rappresenta le informazioni di contatto per il contenuto del suo elemento padre principale.

<address></address>

Bene, per oggi ho visto un bel po’ di cose importanti, domani si continua con l’ultima sessione di studio settimanale.

Giorno 5

Quinto giorno di questo percorso di studio e oggi mi aspetta un tuffo nei tag più utilizzati per il contenuto vero e proprio.

Elemento p

Si parte dall’elemento per eccellenza: il paragrafo! L’elemento p però deve essere compreso nella sua essenza strutturale.

Non può contenere liste. In tal caso si può utilizzare il div.

<p>In una terra lontana, dietro le montagne Parole, lontani dalle terre di Vocalia e Consonantia, vivono i testi casuali.</p>

In determinati casi il tag di chiusura può essere omesso, ma (anche per non doversi ricordare a memoria quali sono questi casi) meglio chiuderlo sempre!

Elemento hr

L’elemento hr rappresenta una linea che serve a separare tematicamente un paragrafo in un punto di transizione e cambio di argomento.
<hr>
Non ha tag di chiusura. Non modifica l’outline del documento.

Elemento pre

L’elemento pre permette di rappresentare un blocco di testo con carattere monospazio e con gli esatti spazi digitati.

In caso sia necessario rappresentare dei blocchi di codice di programmazione o il loro output andranno utilizzati rispettivamente il tag code e il tag samp, mentre per l’input che si aspetta dall’utente si usa il tag kbd.

<pre></pre>

Elemento blockquote

L’elemento blockquote rappresenta un contenuto quotato in quanto proveniente da un’altra fonte, al suo interno può contenere con un opportuno tag i riferimenti alla fonte.

<blockquote>In una terra lontana, dietro le montagne Parole, lontani dalle terre di Vocalia e Consonantia, vivono i testi casuali.
‐ <cite><a href="http://autore.aaa/Autore">Autore</a></cite></blockquote>

Elemento ol

L’elemento ol rappresenta una lista ordinata di voci.

Attributi (di carattere strutturale):

  • type: definisce il tipo di numeratore
  • start: definisce la posizione del numeratore dalla quale deve partire la numerazione se deve essere diversa da 1
  • reversed: inverte la numerazione della lista

<ol type="lower-roman">
<li>rosso</li>
<li>giallo</li>
<li>verde</li>
</ol>

Elemento ul

L’elemento ul rappresenta una lista non ordinata di voci.

<ul>
<li>rosso</li>
<li>giallo</li>
<li>verde</li>
</ul>

Elemento li

L’elemento li rappresenta la singola voce di una lista, per il codice vedere gli esempi riportati per gli elementi ol e ul.

Nel caso faccia parte di una lista ordinata può avere l’attributo value che deve essere un intero.

Elemento dl

L’elemento dl rappresenta una lista di definizioni. È composta da uno o più elementi dt (termini da definire) seguiti da uno o più elementi dd (definizione dei termini in dt). All’interno di un dl non ci possono essere più dt con lo stesso contenuto (il termine da definire compare solo una volta).

Elemento dt

L’elemento dt rappresenta un nome, una parte da definire in una lista dl.

Elemento dd

L’elemento dd rappresenta la definizione, la descrizione di un nome, una cosa, una parte in una lista dl.

<dl>
<dt><dfn>termine</dfn></dt>
<dd>... vocabolo o locuzione ...</dd>
</dl>

Elemento figure

L’elemento figure rappresenta un contenuto auto-definito come una annotazione, una illustrazione, un diagramma o un codice.

Elemento figcaption

L’elemento figcaption rappresenta il titolo, la legenda dell’elemento figure padre.

<figure>
<img src="autore.jpeg" alt="Autoritratto dell'autore del testo.">
<figcaption>Gio, autore del testo, in un autoritratto.</figcaption>
</figure>

Elemento div

L’elemento div rappresenta un modo per raggruppare elementi accomunati dallo stesso stile o semantica quando nessun altro elemento è disponibile. Viene usato con uno dei suoi attributi class, lang e title per raggrupare e/o formattare un gruppo di elementi semanticamente collegati.

<div lang="en-GB">
<p>Hy, my name is Gio..</p>
</div>

Elemento main

L’elemento main rappresenta l’elemento principale di un documento o applicazione.

Per cui deve essere unico e non può essere figlio di sezioni quali article, aside, footer, header e nav. Non modifica l’outline del documento.

È molto utile per gli screen reader o per chi utilizza la tastiera per navigare in quanto può portare il lettore direttamente alla sezione principale del sito. A tale fine, come per molti altri elementi, è bene utilizzare gli attributi ARIA.

<main role="main">
contenuto principale della pagina
</main>

E per oggi è tutto.

Giorno 6

Nuovo lunedì e sesto giorno di studio (e ripasso) dell’HTML nella sua ultima veste stabile: la 5.

Oggi mi aspettano quegli elementi che permettono di definire la semantica del testo.

Elemento a

L’elemento a rappresenta un link o un punto di approdo (detto ancora) per un altro link. Nella sua prima funzione rappresenta l’elemento principe del web: la possibilità di collegare tra loro diverse risorse.
Quando rappresenta un link ( hyperlink (hypertext anchor) ) e quindi possiede l’attributo href, può specificare il comportamento di tale link e definirne la natura prima che l’utente faccia clic tramite altri appositi attributi: target, download, rel, hreflang, e type.

<a href="http://lidialab.it">LidiaLAB</a>

Elemento em

L’elemento em rappresenta un modo per enfatizzare il suo contenuto con un diverso tono (o mood) vocale.

<em></em>

Elemento strong

L’elemento strong rappresenta un modo per dare importanza al suo contenuto.
<strong></strong>

Elemento small

L’elemento small rappresentauna nota, un commento, un’attribuzione… ma solo quando questi sono piccoli pezzi di testo.

<small></small>

Elemento s

L’elemento s rappresenta contenuto che non è più rilevante.

<s></s>

Elemento cite

L’elemento cite rappresenta un riferimento ad un’opera creativa per indicarne l’autore, il titolo, l’url, …

<cite></cite>

Elemento q

L’elemento q rappresenta un testo quotato in quanto preso da un’altra fonte. Può avere l’attributo cite.

<q></q>

Elemento dfn

L’elemento dfn rappresenta la definizione di un termine. Se cè l’attributo title allora deve contenere solo il termine definito.

<dfn></dfn>

Elemento abbr

L’elemento abbr rappresenta un acronimo o un’abbreviazione e può contenere nell’attributo title la sua forma estesa, ma niente di più.

<abbr></abbr>

Elemento data

L’elemento data rappresenta il suo contenuto per mezzo dell’attributo value. Viene utilizzato in combinazione di microdati o script.

<data></data>

Elemento time

L’elemento time rappresenta un orario o una data e deve essere composto in un formato ammesso, se si utilizza l’attributo datetime questo deve essere in un formato comprensibile al programma che lo legge. Vedere la pagina specifica del W3C per i formati e le raccomandazioni (ad esempio sulla time zone).

<time></time>

Elemento code

L’elemento code rappresenta un frammento di codice di programmazione.

<code></code>

Elemento var

L’elemento var rappresenta una variabile di un frammento di codice di programmazione o di un’espressione matematica o di una costante o di un simbolo che rappresenta una quantità ecc…

Ci sono <var>n</var> variabili.
<var>M</var><sup>2</sup> = <var>M</var> * <var>M</var>

Elemento samp

L’elemento samp rappresenta l’output di un programma.

<samp></samp>

Elemento kbd

L’elemento kbd rappresenta l’input di un programma (non necessariamente da tastiera).

<kbd></kbd>

Elemento sup

L’elemento sup rappresenta un’apice in un contenuto testuale. Per espressioni matematiche usare MathML.

<sup></sup>

Elemento sub

L’elemento sub rappresenta un pedice in un contenuto testuale. Per espressioni matematiche usare MathML.

<sub></sub>

Elemento i

L’elemento i rappresenta un modo per caratterizzare una porzione di testo con un differente tono di voce (mood), ma in questo caso è incoraggiato l’uso di em; può invece essere usato come ultima spiaggia quando si vuole indicare un termine tecnico.

<i></i>

Elemento b

L’elemento b rappresenta un modo per caratterizzare una porzione di testo con un differente stile senza implicazioni di enfasi o importanza. Da utilizzare solo quando nessun altro elemento è più appropriato.

<b></b>

Elemento u

L’elemento u rappresenta una porzione di testo sottolineata. Tuttavia il suo uso è scoraggiato in quanto in una pagina web un testo sottolineato può essere confuso con un link.

<u></u>

Elemento mark

L’elemento mark rappresenta una porzione di testo evidenziata allo scopo di indicare:

  • un testo cui il lettore pone attenzione
  • un riferimento
  • in un quotato un nuovo significato che l’autore non aveva previsto nei suoi intentioriginari
  • nei risultati di una ricerca il termine cercato per metterlo in evidenza rispeto al testo circostante

<mark></mark>

Elementi per notazioni ruby

Compaiono poi una serie di elementi che scorro molto velocemente perchè propri della tipografia asiatica (notazione ruby): ruby, rb, rt, rtc, rp (da usare per i browser che non supportano le notazioni ruby) o della bidirezionalità del testo: bdi, bdo.

Elemento span

L’elemento span è particolare perchè di per sè non rappresenta nulla, ma è molto utile in associazione ai suoi attributi class, lang e dir per attribuire rispettivamente uno stile, specificare la lingua e la direzione della porzione di testo che include.

<span></span>

Elemento br

L’elemento br rappresenta un’interruzione di linea. Non deve essere utilizzato per scopi di formattazione.

<br>

Non ha tag di chiusura.

Elemento wbr

L’elemento wbr rappresenta un possibile punto di interruzione di una parola molto lunga o di una porzione di testo (ad esmpio del codice) quando questi non ci stanno nella larghezza stabilita per l’elemento padre.

<wbr>

Non ha tag di chiusura.

E anche per oggi è tutto.

Giorno 7

Giorno 7. Oggi affronto una porzione di studio leggera e veloce. Una pausa da un lavoro intenso ogni tanto ci vuole!

Vediamo degli elementi che aiutano a definire delle revisioni ad un precedente lavoro, in pratica delle porzioni di testo eliminate o inserite.

Elemento ins.

L’elemento ins ci aiuta a rappresentare del testo inserito successivamente nel documento.

Elemento del.

L’elemento del ci aiuta a rappresentare del testo eliminato successivamente dal documento.

Entrambi si avvalgono degli attributi datetime e cite per indicare rispettivamente il momento (in un formato valido) e una fonte (un url valido) che spiega il perchè della modifica.

Alla prox 🙂

Giorno 8

Si continua con il capitolo 4, oggi studio gli elementi che permettono di incorporare contenuto (spesso multimediale).

Le parti inerenti l’algoritmo che deve essere applicato dai browser o dagli editor WYSIWYG possono essere saltate.

Elemento img

L’elemento img rappresenta un’immagine corrispondente al file indicato dall’attributo src, che è obbligatorio.

Se presente l’attributo alt contiene un testo che viene usato al posto dell’immagine per chi ha il download delle immagini disabilitato (come negli screen reader). Molto utile dal punto di vista dell’accessibilità, lo è anche quando l’utente dispone di una connessione troppo lenta o con limiti di download. Molti esempi di un uso appropriato dell’attributo alt sono riportati nel capitolo 4.7.

Se presente l’attributo usemap indica che all’immagine è associata una mappa (map).

Se presente l’attributo width indica la larghezza dell’immagine renderizzata.

Se presente l’attributo height indica l’altezza dell’immagine renderizzata.

<img>

Non ha tag di chiusura.

Elemento iframe

Segue l’elemento iframe che indica un contenuto esterno da incorporare nella pagina. Tale contenuto è specificato dall’attributo src, mentre gli attributi width e height specificano le dimensioni del contenuto da inglobare.

<iframe></iframe>

Elemento embed

Segue l’elemento embed che indica un contenuto esterno solitamente non-HTML da incorporare nella pagina (contenuto interattivo).

Tale contenuto è specificato dall’attributo src, il suo tipo (MIME) dall’attributo type, mentre gli attributi width e height specificano le dimensioni del contenuto da inglobare.

<embed>

Non ha tag di chiusura.

Elemento object

Segue l’elemento object che indica una risorsa esterna il cui indirizzo è specificato dall’attributo data, e il cui tipo (MIME) è specificato dall’attributo type, mentre gli attributi width e height indicano le dimensioni del contenuto da inglobare. È solitamente usato per contenuti attivabili tramite plugin (Flash, Java).

<object></object>

Elemento param

Segue l’elemento param accompagna un tag object padre e usa sempre i parametri name e value, da solo non ha significato.

<param>

Elemento video

Segue l’elemento video che indica un contenuto multimediale di tipo video.

<video></video>

Elemento audio

Segue l’elemento audio che indica un contenuto multimediale di tipo audio.

<audio></audio>

Elemento source

Segue l’elemento source che indica una fonte alternativa al contenuto multimediale. Da solo non ha significato, di solito viene inserito all’interno di un tag multimediale.

<source>

Elemento track

Segue l’elemento track che indica un contenuto testuale per elementi multimediali (come i sottotitoli). Da solo non ha significato.

<track>

Non ha tag di chiusura.

 

A questo punto c’è una lunga sezione sul trattamento degli elementi multimediali tramite il browser, per questa prima lettura salto a piè pari questi paragrafi per andare direttamente al tag map.

 

Elemento map

Segue l’elemento map viene usato assieme al tag img e a tag area discendenti per definire un’immagine mappa (con diverse aree cliccabili).

<map></map>

Elemento area

Segue l’elemento area che usato assieme ai tag map e img indica le diverse aree che compongono un’immagine mappa.

<area>

Non ha tag di chiusura.
A questo punto ci sono dei paragrafi di approfondimento per gli sviluppatori degli user agent (browser,..) su MathML, SVG  e gli attributi di dimensione.

Per oggi è tutto, domani invece mi attende un interessante tuffo nel mondo dei link.

Giorno 9

Oggi largo ai link.

I link vengono creati dai tag a, area e link, rappresentano una connessione tra due risorse (di cui una è il documento attivo) e possono essere di due tipi: link a risorse esterne o hyperlink.

  • i link alle risorse esterne vengono elaborati dal browser per includere la risorsa, come ad esempio importare i fogli di stile o l’elemento icon.
  • gli hyperlink invece permettono all’utente di navigare o effettuare il download di qualche oggetto.

Nel capitolo 4.8 una tabella riassume i tipi di link.

Il capitolo si è rivelato molto tecnico e più utile a chi sviluppa user agent per cui passo a aquello successivo che parla di tabelle.

Elemento table

L’elemento table rappresenta un contenuto tabellare dove si espongono una serie di dati, in passato è stato erroneamente utilizzato per scopi rappresentativi di layout, cosa che non solo era sbagliata da un punto di vista logico, ma anche da quello pratico perchè rendeva difficile la sua interpretazione da parte degli screen reader. È il tag contenitore di tutta la tabella.

<table></table>

Table disponde di tutta una serie di sottoelementi:

  • colgroup rappresenta un gruppo di colonne della tabella.
  • col rappresenta una colonna dell’elemento colgroup.
  • tbody rappresenta un blocco di righe della tabella.
  • thead rappresenta un gruppo di righe che rappresenta le intestazioni della tabella, può avere come sottoelementi sia th che tr.
  • tfoot rappresenta un gruppo di righe che rappresenta le informazioni in calce ad ogni colonna della tabella.
  • tr rappresenta una riga standard della tabella.
  • td rappresenta una cella di una riga tr della tabella.
  • th rappresenta una cella di una riga tr della tabella che ha funzione di intestazione della colonna.

Il resto del capitolo è utile a chi sviluppa user agent, per cui mi riservo di trovare altre letture con cui approfondire questi elementi.

Giorno 10

Oggi ripasserò i form. Il capitolo è molto lungo e impegnativo per cui oggi approfitto della funzione “Developer-view style” offerta dal bottone presente in alto a destra di ogni pagina delle specifiche.

Elemento form

L’elemento form permette di creare un modulo per interagire con l’utente, prevalentemente per fargli inserire delle informazioni (input). È il tag contenitore di tutto il modulo.

<form></form>

Gli attributi più importanti del tag form sono quelli che determinano il comportamento dell’invio del form al server e sono:

  • action: l’url per processare il form
  • method: il metodo di invio (se GET o POST)
  • enctype: il metodo di criptazione

Dispone di diversi tag sotto-elementi, ecco i più comuni:

  • label: rappresenta il titolo di un elemento del form (campo di testo o bottone, …)
  • input: rappresenta un elemento di input, il tipo è determinato dall’attributo type
  • button:  rappresenta un bottone, solitamente è presente per inviare i dati del modulo o eseguire delle funzioni all’interno della pagina
  • select: rappresenta un elenco di scelte
  • textarea: rappresenta un’area in cui inserire testi lunghi

Molti sono gli elementi e gli attributi per ciascun elemento. Metto tra i preferiti la pagina del W3C per una consultazione esaustiva, mentre mi riservo di riprendere in mano questa sezione per provare ciascun elemento in particolare quelli nuovi e meno tradizionali come progress e meter…

Infine mi segno mentalmente come ancora una volta bisogna porre attenzione all’argomento della sicurezza predisponendo controlli client-side e soprattutto server-side.

Giorno 11

Nel capitolo 4.11 vengono affrontati lo scripting, nel mio caso mi interesserà JavaScript che aggiungerò nel percorso di studio qui documentato, l’elemento template e l’elemento canvas.

L’elemento script ci permette appunto di richiamare uno script per rendere la nostra pagina dinamica e interattiva.

Lo script può essere incluso tra i tag di apertura e chiusura oppure essere incorporato tramite l’attributo src che richiama un file esterno.

L’attributo type ne specifica il tipo di linguaggio e per Javascript può essere omesso.

<script></script>

L’elemento noscript ci permette di inserire un contenuto testuale da mostrare all’utente se nel suo browser è disabilitato o non previsto l’uso degli script.

<noscript></noscript>

L’elemento template ci permette di inserire nodi inerti nel DOM della pagina web che possono essere attivati successivamente tramite Javascript.

<template></template>

L’elemento canvas ci permette di inserire un contenuto grafico tramite l’uso di script quando nessun altro elemento HTML è più idoneo.

<canvas></canvas>

Giorno 12

Oggi giornata di quasi riposo 🙂 .

Nel capitolo 4.12 vengono dati suggerimenti su quali elementi HTML usare e come formattarli per i seguenti contenuti:

  • sottotitoli, tagline
  • breadcrumb
  • cloud tag
  • conversazioni
  • note

Nel capitolo 4.13 invece vengono elencati gli elementi che possono avre lo stato “disabled” e come selezionare gli elementi HTML tramite i SELETTORI (pseudo-classi).

Giorno 13

Oggi capitolo impegnativo: 5 “Loading Web pages”  che alla fine scorro solo velocemente per appuntarmi che quando affronterò gli approfondimenti sull’HTML gli argomenti da trattare saranno il contesto di navigazione del browser, l’oggetto Window, l’interfaccia della Cronologia e il caching per permettere l’uso offline delle pagine web.

Decido quindi di visionare subito il capitolo 6 “Web application APIs”, anche questo sarà un approfondimento futuro per lo studio di Javascript, in ogni caso mi appunto il fatto che qui si possono trovare elencati tutti gli event handler.

A questo punto non c’è due senza tre così apro il capitolo 7 “User Interaction” e anche questo può essere velocemente scorso in attesa di servire per lo studio di CSS (attributo hidden, stato focused) .

Da far notare l’attributo tabindex che permette di definire l’ordine con cui scorrere gli elementi di una pagina e attivarne il focus e l’attributo accesskey che permette di rendere l’elemento attivabile (dargli il focus) tramite combinazione di tasti.

Giorno 14

Oggi è giornata da varie ed eventuali…

Il DOCTYPE è un preambolo necessario affinchè il browser applichi il corretto tipo di rendering, quindi usare sempre

<!DOCTYPE html>

I tipi di elementi HTML sono cinque:

Void (non hanno tag di chiusura e quindi non hanno contentuo)
area, base, br, col, embed, hr, img, input, keygen, link, meta, param, source, track, wbr
Raw text
script, style
Escapable raw text
textarea, title
Foreign
MathML e SVG
Normal
Tutti gli altri elementi HTML sono elementi normali

 

Per gli elementi pre e textarea che si vogliono far iniziare con una nuova linea nel loro contenuto, quindi subito dopo il tag di apertura, vanno inserite due nuove linee.

 

I commenti (caspita finora mai citati !!?!!) sono inclusi tra <!-- e -->

<!-- questo è un commento -->

<!--

questo è un

altro commento

-->

 

Infiune da segnalre un’utilissima tabella con i nomi HTML per rappresentare i caratteri speciali (HTML entities come &copy; che diventa: © )

Giorno 15

Altri capitoli corposi, ma da scorrere velocemente:

9 “The XHTML syntax”

10 “Rendering” , rivolto agli sviluppatori degli user-agent (browser)

Molto più interessante il capitolo 11: “Obsolete features”.

L’uso dell’attributo border per l’elemento table è concesso solo per un meccanismo di retro compatibilità con browser obsoleti e l’unico valore ammesso è “1”.

Ancora conformi, ma il cui uso è scoraggiato:

  • l’attributo border per l’elemento img (usare i CSS)
  • l’attributo language per l’elemento script (usare type)
  • l’attributo name per l’elemento a (usare id)

Elementi obsoleti:

  • applet (usare embed od object)
  • acronym (usare abbr)
  • bgsound (usare audio)
  • dir (usare ul)
  • frame, frameset, noframes (usare iframe e CSS)
  • hgroup (usare CSS)
  • isindex
  • listing (usare pre e code)
  • marquee
  • nextid
  • noembed
  • plaintext
  • strike (usare del oppure s)
  • xmp (usare pre e code)
  • basefont, big, blink, center, font, marquee, multicol, nobr, spacer, tt (usare CSS)

Attributi obsoleti:

una lunga lista da consultare direttamente https://www.w3.org/TR/html5/obsolete.html

E visto che è venerdì e che so che il 12 è l’ultimo capitolo faccio lo sforzo di aprirlo. Bene sono alcune considerazioni dello IANA, quindi scorro velocemente e … STOP. Fatta. La prima lettura è terminata.

Seguono pagina riepilogative e con utili tabelle o riferimenti:

Index https://www.w3.org/TR/html5/index.html

References https://www.w3.org/TR/html5/references.html

Acknowledgments https://www.w3.org/TR/html5/acknowledgments.html un elenco di chi ha contributo al raggiungimento di questa Recommendation e ovviamente un ringraziamento al papà del WWW “Thanks to Tim Berners-Lee for inventing HTML, without which none of this would exist.“.

Mi associo.
Grazie Tim !!!

Giorno 16

Oggi ho deciso di studiare velocemente come indicare del testo alternativo per le immagini, mentre più avanti affronterò il tema dell’accessibilità in modo più organico e approfondito.

Innanzittutto l’argomento è interessante perchè si può dare la possibilità di gestire tale contenuto alle persone che utilizzano screen reader, programmi vocali, ma anche per i motori di ricerca e gli utenti web che hanno disabilitato il download delle immagini.

Al seguente indirizzo https://www.w3.org/WAI/tutorials/images/ viene suggerito cosa scrivere nell’attributo alt delle immagini in base al tipo di immagine:

  • immagine funzionale – descrivere la funzione dell’immagine come ad esempio “link alla pagina xyz” oppure “bottone per la stampa”
  • immagine con testo – da evitare, a meno che non sia il logo, comunque ecco cosa fare: replicare il testo dell’immagine
  • immagine di un diagramma o grafo – spiegazione equivalente
  • gruppo di immagini – spiegazione unica dell’intero gruppo di immagini
  • immagine “mappa” – spiegazione dell’immagine nel suo complesso e per ciascun link della mappa

Sempre al W3C hanno predisposto una procedura per stabilire cosa fare: https://www.w3.org/WAI/tutorials/images/decision-tree/

Standard e linee guida per l’accessibilità: https://www.w3.org/TR/WCAG20 (traduzione italiana autorizzata).

Quindi non resta che iniziare ad applicare nella pratica quanto visto.