Colnet Sito e SEO Immobiliare | P.IVA 10848460019 | Tel. 347.3606898 | info at colnet.it
colnet sito e seo immobiliare su facebookcolnet web marketing immobiliare su google pluscolnet siti web per agenzie immobiliari su twittercolnet seo e posizionamento immobiliare su linkedin
home » sito web, posizionamento siti, seo e web marketing per tutti

Perchè scegliere un Sito HTML5? Scopri tutti i vantaggi del nuovo standard HTML

HTML5: il nuovo standard del web

L'HTML è un insieme di regole che decrive come formattare il testo al fine di costruire pagine web.sito web in html5
Le vecchie regole facenti capo all'HTML 4.01 e risalenti al 1999 (evoluto poco dopo a XHTML 1.0 e 1.1) erano ormai obsolete per il mondo del web che invece è in continuo aggiornamento ed è per questo che da alcuni anni gli enti preposti stanno lavorando al nuovo standard noto come HTML5.

L'HTML5 anche se non definitivo e non completamente supportato dai vari browser è abbastanza maturo da poter essere utilizzato su larga scala in modo da sfruttare le potenzialità del nuovo linguaggio.

Innanzitutto confrontiamo la struttura di una generica pagina HTML nei 2 diversi formati.

Struttura pagina HTML o XHTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
  2. <html lang="it">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5. <title>titolo pagina HTML</title>
  6. <meta name="description" content="description della pagina HTML" />
  7. <link href="style.css" rel="stylesheet" />
  8. <script src="script.js"></script>
  9. </head>
  10. <body>
  11. <div id="nav">menù pagina HTML</div>
  12. <div id="article">contenuto pagina HTML</div>
  13. <div id="footer">footer pagina HTML</div>
  14. </body>
  15. </html>

Struttura pagina HTML5
  1. <!DOCTYPE html>
  2. <html lang="it">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>titolo pagina HTML5</title>
  6. <meta name="description" content="description della pagina HTML" />
  7. <link href="style.css" rel="stylesheet" />
  8. <script src="script.js"></script>
  9. </head>
  10. <body>
  11. <nav|]menù HTML5</nav>
  12. <article>contenuto pagina HTML5</articolo>
  13. <footer>footer pagina HTML5</footer>
  14. </body>
  15. </html>
Analizziamo il codice HTML riga per riga:
  • riga 1: doctype o definizione del tipo di documento è un'informazione obbligatoria che individua le regole per la costruzione della pagina HTML
  • riga 2 e 15: "html" è il tag che racchiude l'intero contenuto della pagina HTML ed è obbligatorio, mentre l'attributo "lang" specifica al motore di ricerca e al browser dei navigatori la lingua di rifermento del documento. Questo attributo può riguardare più tag contenitore della pagina nel caso di contenuti in lingue differenti. La sua presenza è necessaria al fine di validare la pagina
  • riga 3 e 9: "head" è il tag obbligatorio che racchiude tutte le informazioni di carattere generale della pagina
  • riga 4: il metatag "Content-Type" o "charset" in HTML5, individua il set di caratteri da caricare al fine di visualizzare correttamente il testo
  • riga 5: "title" è un tag obbligatorio molto importante per i motori di ricerca e per gli utenti che decideranno se aprire o meno la pagina sulla base di tale informazione
  • riga 6: il metatag "description" non è obbligatorio, ma al pari del tag "title" ha una funzione molto importante in termini persuasivi
  • riga 7 e 8: sono collegamenti opzionali rispettivamente ai file che contengono gli stili di pagina e il codice javascript
  • riga 10 e 14: "body" è il tag obbligatorio che racchiude tutto il contenuto della pagina HTML: testo, immagini, video, ecc.
  • riga 11, 12 e 13: il contenuto della pagina viene organizzato utilizzando diversi tag generici "div" che nell'HTML5 sono diventati tag specifici nel caso di funzioni ben definite quali la navigazione "nav", il footer di pagina "footer" e lo spazio destinato al testo "article"

Il supporto dell'HTML5 nei browser

Come dicevamo, l'HTML5 non è pienamente supportato da nessun browser, quindi occorrerà sincerarsi della compatibilità della funzionalità che intendiamo adottare prima di utilizzarla.
Tra i servizi più utili per testare la compatibilità con l'HTML5 del browser segnalo il sito html5test.com utilizzato per raccogliere i seguenti punteggi di compatibilità effettuati su SO Windows 7 e Android:
  • Chrome 27: 463/500
  • Opera 12.15: 404/500
  • Firefox 21: 399/500
  • Internet Explorer 10: 320/500
  • Safari 1.5.7: 278/500
  • Android 2.3.6: 200/500
Oppure può fare comodo quest'altro sito web caniuse.com che restituisce l'elenco delle compatibilità dei vari browser a partire da una caratteristica HTML5 scelta e la percentuale di diffusione mondiale o l'elenco delle funzionalità supportate a partire da un browser selezionato in questa pagina tests.caniuse.comIn questa incertezza occorre verificare se il browser dell'utente supporta o meno una data caratteristica HTML5 al fine di gestire la mancata compatibilità.
A tal fine, si è soliti usare librerie di terze parti come modernizr.

Potenzialità dell'HTML5 in dettaglio

Vediamo in maggior dettaglio quali sono gli strumenti più interessanti che l'HTML5 ci mette a disposizione seguendo l'ordine e la classificazione seguiti dal sito per la verifica della compatibilità prima citato.

Parsing Rules

Regole per l'analisi del contenuto HTML della pagina
  • supporto del doctype standards HTML5 <!DOCTYPE html>
  • HTML5 tokenizer e tree building per l'elaborazione e renderizzazione dell'HTML5
  • SVG (Scalable Vector Graphics) in text/html permette di utilizzare nativamente questo linguaggio di markup per la generazioni di grafica 2D; questo è il codice per disegnare una piccola ellisse blu
    <svg height="200" xmlns="http://www.w3.org/2000/svg">
         <ellipse cx="100" cy="50" rx="100" ry="50" fill="blue" />
    </svg>
  • MathML o Mathematical Markup Language in text/html permette di utilizzare notazioni matematiche direttamente del tipo
    x2 + 4x + 4 = 0
    utilizzando un linguaggio come questo
    <var>x</var><sup>2</sup> + 4<var>x</var> + 4 = 0

Canvas

Tag HTML5 che consentono di disegnare sulla pagina web senza l'uso di plugin o librerie di terze parti come avveniva prima.
  • canvas è l'elemento introdotto dal nuovo standard e ormai supportato da anni dalla gran parte dei browser ad esclusione di IE8 e versioni precedenti; questo è il codice di un rettangolo con bordo nero
    <canvas width="200" height="100" style="border:1px solid #000"><canvas>
  • 2D context: funzioni aggiuntive per la manipolazione delle superfici generate con il canvas
  • text: funzioni aggiuntive per la formattazione del testo sulle superfici generate con il canvas

Video and Animation

Con l'HTML5 i video sono supportati nativamente dal browser senza l'uso di plugin di terze parti come flash e silverligth
  • video è l'elemento per la riproduzione nativa dei video e ormai supportato da anni dalla gran parte dei browser ad esclusione di IE8, Firefox 3 e versioni precedenti; questo è il codice per la riproduzione di un file mp4 o se non supportato di tipo ogg
    <video width="320" height="240" controls>
         <source src="movie.mp4" type="video/mp4">
         <source src="movie.ogg" type="video/ogg">
    </video>
  • subtitle: sottotitoli generati dalla trascrizione o traduzione dell'audio
  • poster image: immagine da mostrare in assenza del video
  • MPEG-4: formato video supportato da Chrome 6, IE 9, Safari 5 e versioni successive
  • H.264: formato video supportato da Chrome 6, IE 9, Firefox 3.6 e versioni successive
  • ogg theora: formato video supportato da Chrome 6, Firefox 3.6, Opera 10.6 e versioni successive 
  • WebM support: formato video supportato da Chrome 6, Firefox 3.6, Opera 10.6 e versioni successive
  • fullscreen: possibilità di vedere il video a tutto schermo
  • pointer lock: controllo avanzato del mouse via javascript utile ad esempio per applicazioni e giochi 3D
  • window.requestAnimationFrame: funzione per gestire in modo più efficiente le animazioni in precedenza dipendenti dalle funzioni setTimeout e setInterval

Audio

L'HTML5 ha standardizzato l'uso dell'audio che in precedenza ciascun browser gestiva in modo proprietario o affidandosi a plugin flash
  • audio è l'elemento per la riproduzione dell'audio e ormai supportato da anni dalla pran parte dei browser ad esclusione di IE8, Firefox 3 e versioni precedenti; questo è il codice per la riproduzione di un file ogg o se non supportato mp3
    <audio controls>
         <source src="audio.ogg" type="audio/ogg">
         <source src="audio.mp3" type="audio/mpeg">
    </audio>
  • PCM, AAC, MP3, Ogg Vorbis, Ogg Opus e WebM: formati audio 
  • Web Audio API: funzioni per gestire l'audio attraverso codice javascript

Elements

Con l'HTML5 sono stati introdotti nuovi tag e fatte importanti modifiche ad alcuni vecchi elementi aumentando notevolmente le possibilità offerte dal vecchio HTML
  • embedding custom non-visible data: attributi con prefisso "data-" che possono essere assegnati ad ogni elemento per la memorizzazione di informazioni
  • section element: nuovi elementi che individuano diverse aree della pagina web (header, nav, hgroup, section, article, aside, footer)
  • grouping content elements: nuove funzionalità di raggruppamento di tag esistenti come "figure" e "figurecaption" per gestire le descrizioni di una o più immagini (tag "img") e l'attributo "ordered" per invertire l'ordine nelle liste numerate (tag "ol")
  • text-level semantic elements: nuovi elementi o attributi per dare più specificità alle informazioni testuali; in particolare abbiamo:
    • attributo "download" per il tag "a" del collegamento ipertestuale per permettere all'utente di scaricare sul proprio pc la risorsa invece di aprire una nuova pagina web
    • attributo "ping" per il tag "a" del collegamento ipertestuale per eseguire una notifica verso una pagina web, se il navigatore segue quel link
    • elemento "mark" per mettere in evidenza del testo all'interno di una frase
    • elemento "ruby" per contrassegnare caratteri tipografici simil cinesi all'interno di un contesto non simil cinese
    • elemento "time" per gestire date e orari all'interno del testo
    • elemento "wbr" per indicare al browser dove spezzare la frase per andare a capo nel caso il testo fosse troppo lungo per rimanere su un'unica riga
  • interactive elements: nuovi elementi o attributi che forniscono funzionalità a livello di contenuti testuali e interazione con l'utente
    • elemento "details" e "summary" per visualizzare informazioni aggiuntive ("details") al click del navigatore su un titolo ("summary")
    • elemento "command" per definire un comando che l'utente può invocare
    • elemento "menu" per definire una lista di comandi/pulsanti
  • altri attributi o metodi globali:
    • hidden attribute per nascondere un elemento della pagina web
    • proprietà "outerHTML" per recuperare un elemento e il suo contenuto
    • funzione "insertAdjacentHTML" per inserire il contenuto HTML dato nella posizione specificata

Forms

L'HTML5 affianca alle generiche caselle di testo, caselle di testo specifiche per ogni esigenza e la possibilità di validare i campi senza l'uso di javascript
  • field types: caselle di testo per le gestione di ogni tipo di dato ed esigenza (ricerca, telefono, url, email, data, ora, mese, settimana, numero, colore, lista dati, ecc.)
  • output element per restituire un calcolo aritmetico di dati contenuti in vari elementi HTML senza l'uso di javascript
  • progress element: barra di progressione utile per notificare l'avanzamento di operazioni di lunga durata
  • meter element: visualizzatore grafico di valore scalare all'interno di un range noto
  • field validation: predisposizione validazione elementi con gli attributi "pattern" per specificare la maschera di testo valido e "required" per specificare l'obbligatorietà del campo
  • association of controls and forms: informazioni riguardanti gli elementi da validare o meno e le azioni da intraprendere
  • altri attributi "autofocus" per assegnare il focus ad un elemento, "autocomplete" per permettere il completamento automatico del testo, "placeholder" per dare informazioni sul testo che ci si aspetta in un dato elemento e "multiple" per consentire inserimenti multipli
  • CSS selectors: nuovi selettori di stile sono stati introdotti per caratterizzare i nuovi stati nativi degli elementi del form (elementi opzionali, validati, non validati, fuori range, ecc.)
  • eventi "oninput" quando l'utente inserisce un dato e "oninvalid" quando un dato non è valido
  • form validation: validazione dell'intero form con il metodo "checkValidity" e l'attributo "noValidate"

User Interaction

In questa sezione raggruppiamo tutte le funzionalità che hanno a che fare con l'interazione utente come il trascinamento degli oggetti e l'editabilità degli elementi:
  • drag and drop: nuovi eventi e nuovi attributi per la gestione del trascinamento degli oggetti da un punto all'altro della pagina web
  • HTML editing elements and documents: ogni elemento può essere reso editabile come un editor di testo
  • spellcheck: attributo che permette di verificare la correttezza del testo evidenziando le parti non corrette grammaticalmente

History and Navigation

L'HTML5 estende l'esistente oggetto history che memorizza la navigazione di un dato tab del browser al fine di essere manipolata più efficacemente via javascript attraverso le nuove funzioni.

Microdata

E' un modo per assegnare etichette ai contenuti al fine di descrivere un tipo specifico di informazioni. 

Web Applications

L'HTML5 introduce anche importanti funzionalità tipiche di un'applicazione web anche se ancora non molto supportate
  • application cache: meccanismo che permette al browser di memorizzare informazioni da riutilizzare con benefici in termini di prestazioni
  • custom scheme handlers: permette ai siti web di registrarsi come possibili gestori per un determinato protocollo (ad esempio quello di posta elettronica)
  • custom content handlers: permette ai siti web di registrarsi come possibili gestori per il contenuto di un determinato tipo

Security

L'HTML5 permette una gestione più sicura degli iframe:
  • sandboxed iframe: attributo che permette di disabilitare funzionalità a rischio sicurezza
  • seamless iframe: attributo che consente di caricare l'iframe come contenuto inline

Location and Orientation

Con l'HTML5 è possibile individuare la posizione geografica dell'utente in modo da fornire informazioni stradali o di servizio relative alla zona in oggetto:
  • geolocation: previa autorizzazione del navigatore è possibile individuare la localizzazione dell'utente
  • device orientation: ad intervalli di tempo regolari è possibile aggiornare la posizione geografica del dispositivo

WebGL

WebGL è una libreria di funzioni di grafica tridimensionale facente parte dell'HTML5 e sviluppata a partire dagli oggetti canvas

Communication

Funzionalità per la gestione nativa della comunicazione tra client e server e viceversa:
  • cross document messaging: meccanismo per la comunicazione tra documenti HTML
  • server sent events: apertura di una connessione HTTP per rievere notifiche da un server al documento HTML
  • XMLHttpRequest Level 2: oggetto usato per inviare dati via web
  • WebSocket: protocollo con cui le pagine web possono comunicare da e verso un server remoto

Files

Con il File API dell''HTML5 lo sviluppatore può utilizzare javascript per accedere al contenuto e al percorso locale dei file caricati dal navigatore, in modo da poter mostrare anche un'anteprima delle risorse caricate, fare l'upload tramite drag and drop senza l'uso di flash o altri plugin.

Storage

L'HTML5 permette di salvare in modo sicuro e in gran quantità dati sul browser del navigatore superando molti limiti dei cookie:
  • Session Storage: possibilità di salvare sul browser dell'utente dati da utilizzare all'interno della sessione corrente
  • Local Storage: possibilità di salvare sul browser dell'utente dati da utilizzare potenzialmente anche a distanza di anni
  • IndexedDB: tecnologia utile ad organizzare e trovare velocemente i dati salvati nello storage con l'uso di indici concettualmente simili a quelli dei database classici
  • Web SQL Database: tecnologia per memorizzare dati che possono essere trovati per mezzo di query SQL simili a quelle standard supportate dai classici database

Workers

Il Web Worker HTML5 permette di eseguire script in background senza bloccare o interferire con altro codice in esecuzione con grossi benefici in termini di prestazioni.

Local Multimedia

Tecnologia che permette lo streaming audio e/o vido e la condivisione di dati tra client browser

Notifications

Meccanismo per la notifica di messaggi all'utente in occasione di particolari eventi

Various

  • asyncronous script execution: attributo che indica al browser che lo script contrassegnato andrebbe eseguito in modalità asincrona
  • page visibility: meccanismo per cui possiamo disabilitare eventi sulla pagina come ad esempio la visualizzazione di un video se un altro tab è aperto e visibile
  • mutuation observer: funzionalità che permette di monitorare modifiche alla struttura HTML della pagina
I cookie permettono di offrire un servizio migliore, utilizzando il sito accetti l'uso di cookie anche di terze parti.infook