AVVISO IMPORTANTE: Dato l'elevato numero di richieste, Eternal Curiosity non può accettare nuovi clienti, sia che si tratti di consulenze scritte che di ottimizzazione SEO diretta. Valutiamo solo casi eccezionali e ad alto budget. Per informazioni, vi invitiamo a scriverci a info@eternalcuriosity.it

Questo articolo apparteneva al vecchio blog (blog.danilopetrozzi.it), per cui le informazioni potrebbero non essere più aggiornate ed attendibili.

Studiamo l’HTML5 – Contenuti incorporati (embedded)

I contenuti embedded sono quelli che, per loro natura intrinseca, vengono embeddati, ossia incorporati, all’interno del contenuto.

Storicamente, l’elemento incorporato più famoso è <img>, il tag che permette di inserire immagini nei documenti HTML. Insieme a <img>, ci sono tanti altri elementi da studiare e usare (spesso, elementi utilizzabili per la prima volta grazie a HTML5)

Elemento <img>

È probabilmente uno degli elementi più famosi dell’HTML: è grazie a lui se il web non è una semplice lista di parole. Con <img> possiamo inserire immagini all’interno dei contenuti.

A differenza di gran parte degli elementi che abbiamo studiato finora, <img> non deve essere chiuso con un ipotetico tag </img>.

L’unico attributo dell’elemento <img> che è obbligatorio è src=””, che deve contenere un URI valido verso una immagine. Data l’importanza delle immagini, comunque, HTML/HTML5 ci mette a disposizione numerosi attributi per arricchire questo tag:

  • alt=”” – Contiene il testo sostitutivo (e descrittivo) dell’immagine che viene utilizzato non può essere visualizzata
  • crossorigin=”” – Serve per gestire il metodo cross-origin
  • usemap=”” – Nel caso in cui l’immagine sia mappata
  • ismap=”” – Indica se l’immagine è una mappa lato server
  • width=”” – Stabilisce la larghezza dell’immagine in pixel
  • height=”” – Stabilisce l’altezza dell’immagine in pixel

L’attributo src=””, ossia l’elemento da embeddare in sé, deve rispettare i rigorosi standard W3C. Nello specifico, il consorzio ci dice:

images can be static bitmaps (e.g. PNGs, GIFs, JPEGs), single-page vector documents (single-page PDFs, XML files with an SVG root element), animated bitmaps (APNGs, animated GIFs), animated vector graphics (XML files with an SVG root element that use declarative SMIL animation), and so forth. However, these definitions preclude SVG files with script, multipage PDF files, interactive MNG files, HTML documents, plain text documents, and so forth

Lo status di un’immagine, agli occhi dell’user-agent, può essere:

  • Unavailable: nessuno dato è stato recuperato
  • Partially available: l’user-agent ha recuperato parte delle informazioni
  • Completely available: tutte le informazioni sono state recuperate
  • Broken: l’user-agent riesce a recuperare tutte le informazioni ma l’immagine è corrotta, il formato è sbagliato, ecc)

L’elemento <img> è definito “embedded” dato che, quando viene individuata da un user-agent, questo crea un’area delle dimensioni (altezza e larghezza) intrinseche dell’immagine, il cui contenuto è il contenuto stesso dell’immagine.

Per ragioni di sintesi, mi soffermerò sull’attributo ALT che oltre a essere importante di per sé, è molto utile sotto il profilo SEO.

Vista l’importanza dell’attributo, vi cito letteralmente la definizione generica ufficiale fornita dal consorzio:

“Text alternatives are a primary way of making visual information accessible, because they can be rendered through any sensory modality (for example, visual, auditory or tactile) to match the needs of the user. Providing text alternatives allows the information to be rendered in a variety of ways by a variety of user agents. For example, a person who cannot see a picture can have the text alternative read aloud using synthesized speech.
The alt attribute on images is a very important accessibility attribute. Authoring useful alt attribute content requires the author to carefully consider the context in which the image appears and the function that image may have in that context. “

Il primo concetto è: lo scopo degli ALT è quello di rendere le immagini accessibili, dato che il testo può essere renderizzato su altre piattaforme, a differenza dei pixel. La seconda cosa da considerare è il fatto che il consorzio pretende che il contesto sia attentamente analizzato e valutato dall’autore, prima di scrivere l’ALT di una particolare immagine.

Nella documentazione, poi, W3C snocciola diversi esempi che io tenterò di riproporvi.

Ogni immagine ha uno scopo: che sia una fotografia, un banner, un logo, un’icona. L’ALT serve per descrivere testualmente un’immagine nel miglior modo possibile, in relazione allo scopo e all’obiettivo che l’autore stvaa tentando di perseguire attraverso l’incorporamento di quell’elemento visivo.

 

Esempio: singolo bottone che contiene un testo

Immaginiamo un menu composto da una serie di immaginette che contengono le singole voci (es. Home, Contatti, Chi siamo, e così via). In questo caso, dato il contesto e lo scopo degli elementi, è consigliabile inserire nell’ALT le stesse parole indicate dal bottone, es:

Lo stesso esempio si applica quando una (piccola) immagine viene usata solo come link verso altre pagine. È sufficiente descrivere l’immagine con il mero contenuto visivo dell’icona, logo, bottone, ecc.

 

Esempio: illustrazioni analitiche, grafici, mappe

Attraverso le immagini è possibile rappresentare grafici, schemi, e altre forme visive simili con facilità. L’ALT, in questo caso, dovrebbe essere usare per descrivere nel modo più preciso possibile il contenuto, anche concettuale, delle immagini.

Se c’è un grafico a torta che mostra le percentuali di utilizzo dei motori di ricerca in Italia, un buon ALT potrebbe essere:

In una sola riga abbiamo detto cos’è l’immagine (diagramma a torta), di cosa parla (uso dei browser in Italia nel 2013) e quali sono i risultati dell’analisi (le percentuali)

Nel caso di immagini dal significato troppo complesso (o troppo lungo), è posibile inserire solo l’idea generale, o il titolo. Esempio:

 

Esempio: fotografie, immagini “tradizionali”

Se l’immagine è una fotografia, un disegno, dipinto astratto, e così via, parliamo di immagini “tradizionali”, ossia non legate al mondo del web. In questo caso, che forse è quello più frequente, è bene descrivere, in poche righe, il contenuto visivo che percepiamo con i nostri occhi.

Se sto parlando di un dipinto, un ipotetico ALT potrebbe essere:

Se l’opera fosse stata famosa, molto probabilmente avrei aggiunto dettagli del tipo “Ultima Cena di Leonardo: dipinto a parete del 1498 ecc ecc”

 

Esempio: immagini decorative che non hanno scopo informativo

Il consorzio consiglia di inserire le immagini decorative sempre via CSS (es. la cornice del wrapper). Nel caso in cui sia indispensabile inserirla fisicamente in HTML, allora è permesso l’uso dell’alt=”” vuoto

Un altro caso simile al precedente è quando c’è bisogno di inserire immagini che non devono essere viste dall’utente (pixel di tracciamento, immagini nascoste per aree riservate, ecc). Anche se è sempre preferibile trovare soluzioni alternative all’<img>, il consorzio ammette l’alt vuoto.

 

Esempio: immagini inline con scopo palese

Ci sono dei casi in cui delle immagini, inserita anche inline all’interno del testo, perseguono l’obiettivo di far “intuire” parole, concetti, frasi all’osservatore. Ad esempio se io inserissi un cuore rosso tra le parole “I” e “you”, il senso sarebbe ovviamente “I love you”. L’alt dovrebbe essere strutturato così:

 

Esempio: captcha

Nel caso di immagini che devono essere viste obbligatoriamente, al fine di perseguire uno scopo, nell’alt è bene inserire azioni alternative. L’esempio più facile da comprendere è il captcha: se il captcha non si vede, l’alt deve fornire delle alternative all’utente.

Con questo esempio finale chiudiamo il focus dedicato agli ALT delle immagini!

 

Elemento <iframe>

 Il tag <iframe> è un famosissimo tag di embedding, al pari di <img>. A differenza di quest’ultimo, l’<iframe> permette di incorporare interi documenti HTML.

Come per le immagini, anche <iframe> necessita di un solo parametro obbligatorio, l’src=”” con il quale si indica un URI valido, ossia la pagina da incorporare.

Oltre a questo, i parametri accettati dall’<iframe> sono:

  • srcdoc=”” – Indica il contenuto da incorpoare, a differenza di src=”” che indica l’indirizzo della pagina da incorporare
  • name=”” – Permette di assegnare un nome al contenuto incorporato (utile per utilizzi successivi)
  • sandbox=”” – Permette di aggiungere o rimuovere limitazioni all’operatività del contenuto embeddato (permettere o meno i form, le popup, e così via)
  • width=”” – Larghezza del contenitore
  • height=”” – Altezza del contenitore

 

Elemento <embed>

L’<embed> è simile all’<iframe> ma si occupa di incorporare elementi non HTML. Come sempre, l’attributo src=”” serve per indicare l’URI della risorsa da embeddare.

Gli attributi extra, sono:

  • type=”” – Indica il MIME type della risorsa
  • width=”” – Larghezza del contenitore
  • height=”” – Altezza del contenitore

Per embeddare un flash. chiamato videoflash.swf, attraverso <embed>, la sintassi è semplicissima:

 

Elemento <object>

<object> permette inserire risorse esterne, che possono essere immagini, HTML esterno o risorse non-HTML.

L’attributo data=”” indica l’indirizzo della risorsa. Gli altri attributi utilizzabili sono:

  • type=”” – MIME type della risorsa
  • typemustmatch=”” – Valore booleano per fare in modo che l’object venga incorporato solo se il content type dell’oggetto in esame (data=””) è identico al MIME type espresso in type=””
  • name=”” – Attribuisce un identificativo all’oggetto
  • usermap=”” – Nel caso di mappature
  • width=”” – Larghezza dell’oggetto
  • height=”” – Altezza dell’oggetto

 Un esempio espanso dell’object, preso dal consorzio:

 

Elemento <param>

<param> definisce parametri per i plugin espressi da un <object>. Per questo motivo, <param> da solo non ha alcun significato.

Un elemento <param> è identificato da due attributi: name=”” che ne specifica il nome, e value=”” che è il rispettivo valore. Entrambi gli attributi devono essere presenti (un pò come i <meta name=”” content=””>)

Non ci sono restrizioni di utilizzo, dato che <param> può essere usato per definire qualsiasi parametro per lo specifico oggetto incorporato da <object>.

 

Elementi <video> e <audio>

I tag <video> e <audio> sono una delle innovazioni più famose dell’HTML5: permettono di incorporare file multimediali. (principalmente filmati, suoni, canzoni).

Per entrambi questi elementi, può essere utilizzata una classe particolare di attributi. Vediamoli nello specifico:

  • src – Indica la sorgente dell’elemento multimediale
  • preload – Suggerisci all’user-agent (generalmente il browser) di precaricare la risorsa in background (buffering)
  • autoplay – Valore booleano che implica l’avvio automatico dell’elemento multimediale
  • mediagroup – Utilizzato per linkare tra loro diversi elementi multimediali
  • loop – Comporta la riesecuzione dell’elemento una volta che è finito
  • muted – Permette di impostare i valori di default dell’audio a zero
  • controls – Indica la possibilità di inserire un controller con i tasti per il controllo dell’elemento multimediale

L’unico attributo esclusivo di <video> è poster=”” che permette di indicare un’immagine che verrà usata come anteprima statica, da visualizzare prima dell’avvio del video.

 

Elementi <source> e <track>

Inseriti all’interno di altri elementi media (<video> o <audio>) gli elementi <source> e <track> permettono di indicare più fonti per lo stesso elemento, nel primo caso, o tracce testuali temporizzate per sottotitoli, nel secondo.

<source> è identificato tramite un src=””, per indicare il percorso dell’elemento, type=”” per indicare il MIME type, e media=”” che è opzionale e serve per indicare il dispositivo (media) sul quale visualizzare l’elemento.

Un esempio di <video> con multisorgente:

<track> è identificato tramite:

  • kind – Opzionale, serve per identificare la tipologia di traccia (subtitles, captions, descriptions, chapters oppure metadata)
  • src – Indica la path della traccia
  • srclang – Indica la lingua del testo
  • label – Fornisce un titolo per la traccia leggibile dall’utente
  • default – Valore booleano per indicare la traccia di default

Un esempio di <video> con i sottotitoli in due lingue:

 

Elementi <map> e <area>

In simbiosi con un altro elemento <img>, grazie a <map> e <area> è possibile creare immagini mappate con link ipertestuali.

L’elemento <map> funge da raccoglitorie di vari <area> che definiscono le porzioni della mappatura. L’unico attributo di <map> è name=”” per creare un identificativo.

Un elemento <area>, al fine di identificare un’area cliccabile, è descritto da un attributo shape=”” per la forma (circle, dafult, poly o rect), coords=”” per definire le coordinate cartesiane dell’area, href=”” per indicare la destinazione del link.

Esempio:

Ogni elemento <area>, oltre all’alt=””, può essere arricchito con attributi tradizionali per i link come target=””, rel=””, hreflang=”” o download=””.

 

Altri elementi embeddabili

Esistono altri elementi (alcuni in via di definizione) che possono essere embeddati, come:

  • MathML – Permette di inserire notazioni matematico-scientifiche.
  • SVG – Permette di incorporare elementi svg all’interno del documento

 

Danilo petrozzi

Ciao! Io sono Danilo Petrozzi, il fondatore di Eternal Curiosity. Oltre a essere un senior SEO Specialist e un Web Developer, è dall'età di 9 anni che mi appassiono a qualsiasi cosa ruoti intorno al web e all'informatica in generale.

Lascia un commento