HTML5: le principali differenze da HTML4

Differenze tra html5 e html4In questo articolo vedremo le differenze fondamentali tra il linguaggio HTML4 e il linguaggioAi??HTML5!

La prima differenza importante consiste nella scomparsa dei frame a vantaggio dei box.Ai??Il box-modelAi??viene definito comeAi??suddivisione di una pagina web in sei blocchi predefiniti:

  • <header></header>: Il tagAi??headerAi??serve a contenere la “testata” di una pagina web. Esso solitamente contiene un titolo, unAi??sottotitolo (utilizzato come descrizione), la barra di navigazione e, volendo, una foto.
  • <nav></nav>:Ai??Il tag navAi??contiene link riguardanti la navigazione del sito.
  • <article></article>:Ai??Il tagAi??article A? il “contenitore” degli articoli. Esso infatti definisce solo la posizione del blocco,in cui verranno visualizzate le notizie, e la formattazione generale.
  • <section></section>:Ai??Il tagAi??section, invece, contiene l’articolo vero e proprio. Su di esso puA? essere anche fatta una formattazione interna.
  • <aside></aside>:Ai??Il tagAi??asideAi??indica il box cheAi??si trova a lato della pagina e contiene solitamente una barra di navigazione(nav). La suaAi??posizione puA? essere definita da codice css.
  • <footer></footer>:Ai??Il tagAi??footerAi??riconosce come box quello cheAi??si trova in fondo alla pagina web e che contiene informazioni, ad esempio dati di chi ha scritto, i collegamenti, il copyright, etc..

Questi blocchi possono essere suddivisi a loro volta in sotto-box tramite il tag <div>.

header

Qui sotto viene mostrata la normale sintassiAi??di unaAi??pagina web creata con un box-model.

&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;body&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;header&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;
    &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;nav&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;
        &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;ul&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;
        &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;li&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;..&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;[...]&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/li&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;
        &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;li&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;..&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;[...]&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/li&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;
        &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/ul&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;
    &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/nav&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/header&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;article&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;
        &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;section&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;[...]&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/section&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;
        &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;div=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;..&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;[...]
&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/article&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;aside&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;[...]&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/aside&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;footer&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;[...]&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/footer&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/body&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;

Insieme al file HTML5 deve essere chiaramente associato un file CSS3 (Cascading Style Sheets) che formatti i box affinchAi?? vengano posizione come in precedenza mostrato.

La seconda differenza consiste nell’adozione di un nuovoAi??DOCTYPE. Il DOCTYPEAi??A? uno standard che permette al browser di capire il tipo di documento che sta trattando. L’HTML4 aveva diversi DOCTYPE, definiti con stringhe lunghe e notevolmente complesse. HTML5 si A? liberato di tutto ciA? introducendo il tag <!DOCTYPE html>Ai??che deve essere inserito come prima istruzione di un documento HTML5.
Oltre al DOCTYPE A? necessario aggiungere il set di caratteri da utilizzare in un TAG META:Ai??<meta charset=”UTF-8″>

&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;html&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;head&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;
     &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;title&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;..&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/title&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;
     &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;meta charset=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;UTF-8&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; /&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/head&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;
[..]
&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/html&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;

Lascia un commento