HTML5 e XHTML, cosa cambia

HTML5 e XHTML, cosa cambia

L’HTML5, il nuovo standard del web!

In questo articolo andiamo a scoprire cosa è l’HTML5, quali sono le differenze e le uguaglianze rispetto all’utilizzo dell’HTML 4.01 (subito dopo evoluto a XHTML 1.0 e 1.1).

Mi sono limitato a trattare solamente i punti di maggiore importanza senza entrare nello specifico, realizzando una piccola guida per sottolineare in modo semplice e spero chiaro i punti chiave del nuovo linguaggio di markup, l’HTML5.

Un pò di basi da conoscere: cosa è l’HTML, HyperText Markup Language è un linguaggio di markup utilizzato in informatica per la formattazione di documenti ipertestuali che possiamo trovare nel World Wide Web sotto forma di pagine web.

L’HTML quindi non è un linguaggio di programmazione, ma utilizzato dalla fine degli anni ottanta (anni della sua creazione al CERN di Ginevra) come un linguaggio di formattazione per l’impaginazione o visualizzazione grafica (layout) di una pagina web attraverso diversi tag di formattazione.

Le evoluzioni dell’HTML fino a l’HTML5

Seguendo lo sviluppo di Internet, l’HTML ha subito molti ampliamenti e miglioramenti, l’ultima versione disponibile è la versione 4.01, resa pubblica nel 1999. Attualmente allo stato di release è stato realizzata l’ultima versione del linguaggio, l’HTML5 che dovrebbe essere reso pubblico dal W3C (World Wide Web Consortium) nel 2014.

Le uguaglianze:

Riguardo i TAG da utilizzare come “elementi normali” del codice HTML5 sono gli stessi della versione attuale:

con tag di chisura:

<H1> ... </H1>, <ul><li> ... </li></ul>

Come elmenti vuoti cioè nei quali non possiamo scrivere nulla si utilizzano:

area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

Le differenze:

Passiamo dal doctype dell’HTML 4.01 poi XHTML, versione della sintassi HTML costretta all’interno delle regole XML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/ strict.dtd">

al semplice docype dell’HTML5:

<!DOCTYPE html>

affiancata a:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

Una differenza con l’XHTML dove è obbligatorio scrivere i tag in minuscolo con il linguaggio HTML5 questo non è più un obbligo, i TAG possono essere scritti anche in maiuscolo:

IMG, META, HR ecc …

Differenza degli attributi, che possono essere scritti senza l’utilizzo delle virgolette di apertura e chiusura:

<div class=testata>

con virgolette singole

<div class='testata'>

o le classiche virgolette del HTML4

<div class="testata">

Differenze e semplificazioni fondamentali come quelle utilizzate nei due elementi style e script. La sintassi tipica di XHTML prevede la specificazione di attributi accessori come type:

<style type="text/css"><!-- CSS --></style>

In HTML5 possiamo scivere:

<style><!-- CSS --></style>

Elementi ed attributi abbandonati

Già con l’introduzione dei fogli di stile, sono stati messi in disuso molti attributi come:

basefont, big, center, font, s, strike, tt e u, align e valign, background, bgcolor, cellpadding, border, cellspacing e molti altri.

Cadono anche i tag legati al concetto dei frame:

frame, frameset e noframes.

Nuovo Content model:

Non si utilizzano solamente i div …

<!doctype html> 
<html lang="it"> 
<head> 
</head>
  <body> 
    <header>
    --- Titolo e Testata --- 
    </header> 
    <nav>
    --- Voci di Menu --- 
    </nav> 
    <article>
    --- Un Post --- 
    </article> 
    <article>
    --- Un altro Post --- 
    </article>
</body> 
</html>

la novità quindi è l’introduzione dei nuovi elementi:

article, nav, header

Elementi artcle e section

Partiamo dal seguente esempio HTML4:

<html> 
<body>
  <h1>Titolo:</h1> 
  <h2>Sottotitolo:</h2> 
  <h3>Articolo 1</h3> 
  <p>lorem ipsum..</p> 
  <h3>Articolo 2</h3> 
  <p>lorem ipsum..</p> 
  <h3>Articolo 3</h3> 
  <p>lorem ipsum..</p> 
  <p>paragrafo finale</p>
</body> 
</html>

Riprendiamo l’esempio precedente con HTML5:

<!doctype html> 
<html> 
<head>
  <title>Titolo</title>
</head> 
<body>
  <header> 
    <hgroup>
      <h1>Sottotitolo:</h1>
      <h2>Aricolo principale</h2> 
    </hgroup>
  </header> 
  <section>
    <h1>Articolo 1</h1> 
      <article>
        <h1>Titolo Articolo A</h1>
        <p>lorem ipsum..</p> 
      </article>
      <article> 
        <h1>Titolo Articolo B</h1> 
        <p>lorem ipsum..</p>
      </article> 
  </section>
  <section> 
    <h1>Articolo 2</h1>
    <article> 
      <h1>Titolo Articolo A</h1> 
      <p>lorem ipsum..</p>
    </article> 
  </section>
  <p>paragrafo finale</p> 
</body>
</html>

Se questo articolo ti è piaciuto, spargi la voce condividendolo sui social network!
No Comments

Sorry, the comment form is closed at this time.