Les bases en HTML5

Les bases en HTML5

On vas donc commencer par voire les bases du html5, ce qui change, ce qui ne changes pas.


Donc, le xhtml, comme le html, sont des langages basé sur une « structuration » particulière : ils sont organisés sous forme de balise, une balise, pour rappel est de la forme suivante : <balise></balise> OU <balise />. Dans le premier cas, c’est une balise double, dans le deuxième cas, une balise simple.
Ces rappels fait, on peut continuer : En xhtml, pour structurer un design, on utilisait les balises div , qui représente, en gros, un bloc. Pour ceux de la génération xhtml, comme moi, vous avez donc appris à structurer vos designs grâce à une balise « universelle » et dont le seul signe distinctif était l’ID ou la class qu’on pouvait lui attribuer. Bah, pour le html5, div, c’est fini.
En xhtml, vous codiez vos designs comme ça (c’est simplifié, universalisé, et je n’ai pas pu mettre les guillemets manquant, photoshop me les convertissaient en chevrons) :

Mockup d'un design sous xhtml

Or, maintenant, en html5, des nouvelles balises sont apparues, pour « remplacer » div, ces balises, sont, par exemple : header, article, aside, footer etc … (Non, vous ne revez pas ). Pour simplifier, les 6 balises qui vous seront utiles à la création du design en lui même, donc hors le contenu, tout ce qui est dynamique, sont :

• nav : défini un menu, une navigation
• section : défini une section de contenu
• aside : défini une sidebar
• header : défini un header
• footer : défini un footer
• article : défini un article

Je pense que vous avez compris comment ça marche : on passe de <div id= »header »></div> à <header></header>. Un gain de clarté dans le code assez exceptionnel, je trouve. Le schéma :

Mockup d'un design sous html5

Voilà, on voit donc que, soit dans le css, soit dans le html, on a un gain de visibilité et de clarté. Maintenant, pour compléter cette approche de Html5, je vais vous passer la liste des nouvelles balises (source : w3school) avec leur « définition », traduites par mes soins :

<article> Défini un article

<aside> Défini un contenu dans une sidebar

<audio> Défini un son

<canvas> (une balise qui a fait couler de l’encre :p ) défini un élément graphique

<command>Défini un bouton de commande, comme un checkbox, ou une case radio

<datalist>Défini une liste d’élément cliquables *

<details>Défini le détail d’un élément, il devrait pouvoir être affiché/caché au click.

<embed>Défini un contenu interactif ou un plugin

<figcaption>La légende d’un média

<figure>Une section qui comprend le média et sa définition

<dialog>Défini un dialogue, une conversation par exemple

<mark>Un équivalent de span en xhtml

<meter>Défini une mesure

<nav>Défini une navigation, un menu par exemple

<output>Défini une sortie, par exemple, le retour d’un script

<progress>Défini la progression d’une tache

<source>Défini une source

<time>Défini une heure ou une date, ou les deux

<video>Défini une vidéo

* Je ne suis pas sur de la définition de cet élément, si je me trompe, corrigez moi dans les commentaires !
Voilà, maintenant, un truc vraiment super cool qui à été implanté en html5, on peut enfin connaître le doctype par coeur !!! Maintenant, on peut définir le doctype comme suit : <!doctype>, simple, clair et concis ^^
Voilà voilà, on a vu les bases du html5, les balises, comment on organise un design etc… Si je devais faire une conclusion a partir de ce qu’on vient de voir, je dirais que html5 à vraiment tout prévu, on a une balise pour tout, c’est assez sympa, même si il va y avoir du boulot pour tout apprendre ^^ . N’hésitez pas à commenter, et, que pensez vous du html5?
A la prochaine !