Formation html5

Voyelle – 40 rue du Bignon, forum de la rocade, bâ8ment Oméga à Chantepie -‐ [email protected] 1

Aperçu rapide des bases du HTML5

Introduc8on : vers un web séman8que La version finalisée du html5 est prévu pour 2014 mais il est déjà possible de l’u8liser. L’avantage du html5 par rapport aux xhtml et hml4, c’est son importante orienta8on séman8que. Vous allez pouvoir plus facilement définir les rôles des balises html, ce qui aura aussi certainement un impact sur le référencement. Séman&que ? Le web séman8que est un mouvement qui favorise les « méthodes communes pour échanger des données ». Le html est séman8que depuis le début. Les balises qui composent le code html définissent leur rôle. Le 8tre principale est défini par un <h1>, les paragraphes sont eux des <p>, etc. Le html5 va plus loin en proposant des balises pour presque tous les cas. Là où était u8lisée la balise <div> pour les blocs du site, nous allons pouvoir spécifier ces blocs comme étant un <header>, un <footer>, le contenu de l’ <ar8cle>. Voir : §  hXp://fr.wikipedia.org/wiki/Web_s%C3%A9man8que §  hXp://www.php-‐astux.info/seman8que-‐html.php


HTML5

Simplifica8on du code Contrairement aux version html et xhtml passées, il ne sera plus nécessaire de spécifier la version. CeXe une manière d'annoncer que le html5 est compa8ble avec toutes les versions et que les futures versions du html devront l'être. Exemple de html5 : <!DOCTYPE html> <html>

<head> <meta charset="UTF-‐8"> <8tle>ma page</8tle> <meta descrip8on="ma page"> <link rel="stylesheet" href="file.css"> <script src="file.js"></script> </head>

(…)


Le <head>

Certaines balises, même si elles peuvent être comprises par les navigateurs, sont considérées comme obsolètes par le html5. Il est recommandé de ne plus u8liser. Les balises à éviter §  frame, frameset et noframes §  acronym (u8liser abbr à la place) §  font, big, center et strike Les balises redéfinies §  <b> maintenant juste pour appliquer un style à un texte sans donner une importance §  <i> pour signifier que le texte est une voix alterna8ve sans donner d'importance §  <cite> pour citer le nom d'une œuvre mas plus le nom d'une personne Les liens : ça change ! La modifica8on du mode d'écriture des liens est importante. La balise <a>, de type inline, ne pouvait se placer que dans des balises bloc (<h1><a href="monlien.html">3tre</a></h1>). Si un lien était répété sur un 8tre et un paragraphe, il fallait le rédiger dans le <h1> et dans le <p>. Avec le html5, vous pouvez envelopper les deux balises par un <a> : <a href="monlien.html"><h1>8tre</h1><p>mon texte de paragraphe</p></a> Par contre il n'est pas possible d'insérer un <a> dans un <a> !


Les balises obsolètes

Header, footer, nav La fonc8on de ces trois balises est assez simple à comprendre. Elles encadrent l'entête, le pied de page et le menu de naviga8on. La véritable nouveauté de ces trois balises résident dans le fait qu'elles ne sont pas exclusivement des8nées à l'ensemble de la page (auquel cas il n'y aurait qu'un header, qu'un footer…) mais peuvent définir des données propres à une autre balise structurant la page.

Sec8on Proche de la balise <div> avec une approche plus séman8que, elle est censé regrouper des contenus contextuel, par théma8que ou apparenté. CeXe balise peut contenir un header et un footer. Header, footer, nav et aside peuvent être u8lisés pour spécifiés les différents contenus de sec8on.

Aside C'est une forme d'encadré qui peut accueillir du contenu indirectement en lien avec le contenu général de la page mais qui n'affecte ce contenu si il était enlevé. Cela peut être une cita8on extraite du document principal.


Structure

Ar8cle CeXe balise est proche de sec8on mais plus précise. Elle est censée regrouper les données soit d'une page précise, soit d'un flux éventuel. Il sera donc u8lisé pour les billets de blog, les informa8ons, les fils de discussion… Il n'est pas simple de définir quand nous devons u8liser sec8on ou ar8cle, sachant qu'il peut y avoir plusieurs sec8on dans un ar8cle et inversement.

Hgroup CeXe balise peut être u8lisée dans la balise header, sec8on ou ar8cle. Elle regroupe les éléments 8tres d'un contenu. Elle peut donc afficher à la suite un h1, un h2, etc.


Structure


Exemple de structure en html5

Source de l'image : hXp://www.html5code.com/tutorials/html5-‐seman8c-‐layout-‐tags/

Nouveaux éléments orientés séman8ques HMLT5 implémente des éléments "inline" comme les précédents span, strong, em… Mark CeXe balise permet de surligner des récurrences sans lui donner une importance. Par exemple, sur une page de résultat pour la recherche d'un terme, <mark> encadre le terme pour le meXre en surbrillance. Time La balise <8me> sert à informer sur les dates, les heures ou la combinaison des deux. C'est une alterna8ve html5 aux microformats. Il est possible d'y ajouter l'aXribut pubdate pour informer que c'est une date de publica8on. Exemples : <8me date8me="14:30">14 h 30</8me> <8me date8me="2012-‐08-‐01T11:12" pubdate>Ar8cle publié le 1 août 2012 à 11h12</8me> Autres balises : meter, progress > hXp://www.alsacrea8ons.com/ar8cle/lire/1416-‐html5-‐meter-‐progress.html


Les balises inline

Il est possible d'u8liser du HTML5 aujourd'hui, même si tous les navigateurs (soit parce que anciens, soit parce que généralement probléma8ques). Pour que votre site puisse être lisible sur tous les navigateurs, il vous faudra vous armer de pa8ence et ajouter quelques codes. Style Pour les navigateurs qui ne savent pas encore interpréter le HTML5, vous devrez simplement les renseigner en CSS. Par exemple, vous donnez aux balises blocs une valeur "display: block" (sec8on, ar8cle, nav, aside, header, footer et hgroup). Les problèmes les plus important vous viendront de IE. Il faudrait, via du javascript, créer les éléments un par un. Heureusement, il existe des scripts pour le faire. Voir les scripts de Remy Sharp par exemple (hXp://html5shiv.googlecode.com/svn/trunk/html5.js) à appeler dans votre <head> avec les commentaires IE : <!—[if IE]><script src="…"></script><![endif]-‐-‐>.


Utiliser html5 !


Tableau des éléments

§  Web séman8que et (x)html5 hXp://tcuvelier.developpez.com/tutoriels/web-‐seman8que/html5-‐microdonnees/introduc8on/

§  HTML5, l'évolu8on séman8que et SEO hXp://blog.maroke8ng.com/html-‐5-‐evolu8on-‐seman8que-‐et-‐seo/comment-‐page-‐1/

§  Structurer une page en HTML5 avec les μdonnées et des μformats hXp://on-‐air.hiseo.fr/html5/seman8c-‐html5/

§  Les spécifica8ons HTML5 hXp://www.xul.fr/html5/specifica8ons.php §  Livre de Jeremy Keith hXp://www.abookapart.com/products/html5-‐for-‐web-‐designers/ et lire (en anglais)

hXp://adac8o.com/ar8cles/1704/ §  HTML5 seman8c layout tags (en anglais) hXp://www.html5code.com/tutorials/html5-‐seman8c-‐layout-‐tags/


Quelques liens

Self Improvement

Formation html5