Traduction
Tutoriel HTML - sommaire
Tutoriel HTML5 - 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
J'emploie ici le terme HTML au sens strict c'est à dire uniquement le langage de balisage. En effet comme un document HTML peut inclure aussi du code CSS et du code JavaScript, on désigne pafois par HTML le trio de trois langages (HTML, CSS & JavaScript).
Donc dans le balisage HTML on ne doit trouver que des éléments qui apportent des informations ou de la structuration 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, les balises dépréciées pourraient ne plus fonctionner sur les futurs navigateurs ...
Bizarrement les balises B (mise en gras) et I (mise en italique) ne sont pas bannies alors que ce sont typiquement
et uniquement des balises de mise en forme du texte.
Mais il est vrai que l'alternative CSS est plus lourde.
Comme vous l'avez lu ci-dessus, peu d'éléments HTML4 ont été retiré de la norme HTML5 ; donc ces balises sont toujours valides.
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 (balises simples). Donc nous pouvons écrire : < img src = ... alt = ... > et non pas < img scr = ... alt = ... />
Maintenant je vous conseille de prendre l'habitude de fermer les balises isolées (avec la barre oblique). En effet dans les langages basés sur le XML dont SVG (largement évoqué dans ce site) il faut impérativement fermer les balises isolées sinon vous avez une erreur fatale avec le message : "Opening and ending tag mismatch". Donc prenez de bonnes habitudes.
Je n'en dis pas davantage sur les formulaires HTML5 car je consacre tout un chapitre sur ce sujet.
Formulaires HTML5
Après ce long préambule venons-en à l'objet de ce chapitre : les balises structurantes introduites par la spécification
HTML5.
Illustrons notre propos par un exemple.
De plus la boite "section" doit contenir deux boites "article" l'une à côté de l'autre
Dans la partie BODY de la page on dessine grâce à la balise de type "block" DIV et via l'attribut ID ou class.
Notez le nombre élevé de balises fermantes DIV. Le code HTML n'est pas clair du tout.
Pour tenter de s'y retrouver il faut bien indenter le code et le commenter.
La spécification HTML5 introduit de nouvelles balises structurantes qui remplacent avantageusement les DIV ID ="identifiant".
Examinons d'abord le code HTML !
Pour créer les grandes divisions de la page on utilisera désormais les nouvelles balises structurantes
header, nav, section, article, aside et footer.
Il s'agit de balises doubles et nativement de type block (comme DIV).
Avec ces nouvelles balises le code HTML devient très clair.
Dans l'exemple précédent j'ai utilisé cinq nouvelles balises : header, nav, section, article, footer.
Mais il existe aussi les balises main et aside
La balise main doit contenir tous les éléments de la page à l'exception de l'en-tête (header) et du pied (footer).
Je ne l'ai pas utilisé dans l'exemple car elle n'est pas encore reconnue par IE et à mon humble avis, elle fait double emploi avec SECTION.
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 certaines boites soient masquées si affichage sur un smartphone ou
une tablette.
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 stylage conditionnel
est géré par les media queries de CSS.
Par exemple selon la largeur de l'écran, la disposition des éléments "article" changera : display block / inlineblock
media queries pour le responsive design
Mais attention pour que ça marche n'oubliez pas l'élément HTML meta name ="viewport" content = ...