Traduction
Tutoriel HTML - sommaire
Tutoriel HTML - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Dans ce chapitre j'évoque les balises structurantes introduites par la norme HTML5.
Mais auparavant je rappelle le nouveau rôle dédié à HTML ainsi que les simplifications syntaxiques apportées
par la spécification HTML5.
Donc dans le balisage HTML on ne doit trouver que des éléments qui apportent des informations ou de la structure et aucunement des
dispositifs de présentation.
En conséquence d'anciennes balises ayant un rôle purement visuel sont dites dépréciées (ou obsolètes).
Rassurez vous les navigateurs actuels sont toujours capables de les interpréter dans le cadre de la rétrocompatibilité.
L'expression "balises dépréciées" veut simplement dire qu'elles sont seulement retirées de la spécification
du W3C et qu'elles sont déclarées invalides lors des tests de conformité (emploi du validateur proposé par le W3C).
Mais attention, ces balises dépréciées pourraient ne plus fonctionner dans un futur pas si lointain ...
Le code en HTML4 et XHTML était souvent verbeux voire indigeste. L'exemple le plus caractéristique était le fameux doctype.
Le doctype doit être la première instruction d'une page web avant même la balise <html>
Cette instruction est obligatoire.
Si vous n'en incluez pas, vous obtiendrez une erreur de validation lorsque vous vérifierez la syntaxe de votre document
avec le validateur de balisage W3C
Le doctype en HTML4 était :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Le doctype en HTML5 est tout simplement : <!DOCTYPE html >
La balise HTML est aussi simplifiée. Il suffit désormais d'écrire : <html lang = "fr" >
De même que les balises STYLE et SCRIPT ; l'attribut type devient facultatif !
Quand à la balise meta avec l'attribut charset il suffit d'écrire désormais : < meta charset = 'utf-8' >
Il faut peut être rappeler le sens de cette instruction :
forcer le navigateur à utiliser le jeu de caractères UTF-8 pour lire la page. Il faut donc que ladite page soit encodée
aussi en UTF-8 pour avoir un rendu correct ... sinon les caractères accentués vont apparaître de façon bizarre.
Avec HTML5 et à la différence de XHTML (du XML en général) il n'est pas nécessaire de fermer les balises orphelines (ou simples). Donc nous pouvons écrire :
< img src = ... alt = ... > et non pas < img scr = ... alt = ... />
Dans le langage SVG il est impératif de fermer les balises simples sinon vous
avez une erreur fatale avec le message : "Opening and ending tag mismatch".
Donc prenez l'habitude, même en HTML, d'insérer une barre oblique avant la parenthèse angulaire fermante de la
balise orpheline.
De plus la boite "section" doit contenir deux "posts" l'une à côté de l'autre
Notez le nombre élevé d'éléments DIV.
Si par malheur vous indentez mal le code et si vous oubliez quelques commentaires la structure de la page
n'apparaitrera pas.
Vous risquez alors d'avoir trop ou pas assez de balises DIV fermantes ...
La spécification HTML5 introduit de nouvelles balises structurantes qui remplacent avantageusement les DIV ID ="identifiant".
Examinons d'abord le code HTML !
Avec ces nouvelles balises le code HTML devient très clair : la structure de la page apparait clairement.
Gardez quand même les bonnes habitudes ; le code doit toujours être indenté.
Dans l'exemple précédent j'ai utilisé cinq nouvelles balises : header, nav, section, article, footer.
La balise aside doit être utilisée pour contenir des compléments ; des informations non essentielles donc créer des encadrés.
En général cette boite apparait sous forme d'un volet latéral à côté de section.
On peut imaginer dans le cadre du "responsive design" que les boites ASIDE soient masquées si la page
est affiché sur un petit écran.
La balise main doit contenir tous les éléments de la page à l'exception de l'en-tête (header) et du pied (footer).
Dans une page web, elle ne peut figurer qu'une fois.
Elle peut être intéressante lorque le corps de la page a une structure complexe ; l'élément MAIN comprendra alors
plusieurs SECTIONS.
On a alors la structure suivante :
Quant à l'apparence de la page et de ses grandes divisions, c'est le "boulot" de CSS.
La disposition des grandes divisions pourra changer en fonction de la taille de l'écran ; ce style conditionnel
est géré par les media queries de CSS.
Media queries pour le responsive design