Bienvenue sur Scribd !
Académique Documents
Professionnel Documents
Culture Documents
Loisirs et artisanat Documents
Croissance personnelle Documents
Tout Sur HTML5 Et CSS3 (PDFDrive)
pour des citations, ou bien encore les balises pour des listes ordonnées. Et il faut reconnaitre que les web développeurs ont conscience, depuis quelques années déja, qu'il est important d'amener de la sémantique dans leur code, non pas forcément dans le but unique d'améliorer le positionnement (bien que...) mais surtout dans celui de lui apporter plus de clarté. Pour cela, ils ont pris I'habitude d'attacher des ID ou des Classes porteurs d'intitulés évocateurs (tels que header, menu, navigation, container, main, footer...), aux principales balises structurelles. Du coup, le WSC, l'organisme en charge de I'HTMLS s'est appuyé sur ces habitudes de codeurs, pour déterminer leur choix en matiére de création de nouvelles balises. Pour y avoir accés, ils se sont appuyés sur les données fournies par les robots d'indexation (crawlers) de Google mais aussi sur celui d'Opéra. (Opera a créé son propre robot, non pas dans un but de positionnement, mais plut6t pour analyser le codage des pages qui circulent sur le Web et mesurer ainsi la proportion de pages mal codées, ces éléments leur permettant de titrer des enseignements pour le développe- ment de leur version future de navigateur).> Structuration des contenus et balisage sémantique 23 Résultats : les termes « footer, menu, content, header, container, logo, main, copyright, sidebar, banner, navigation » viennent en téte. Grandes catégories de contenus d'aprés le W3C Q Avant de voir plus en détail ces nouvelles balises, penchons-nous sur la nouvelle organisation des contenus proposée par le W3C. Désormais, tous les contenus peuvent étre classés dans une ou plusieurs catégories parmi celles présentes sur ce schéma. Ces contenus sont définis par les balises qui les caractérisent. Lat Cy Peru] cleat) Embedded Pein} DCE icy Q Contenus type métadonnées (Metadata) Ce sont des contenus permettant l'accés, la mise en « scéne », la stylisation ou la présentation des autres contenus de la page, et qui se placent pour la plupart d'entre eux dans la partie d'entéte de la page, délimitée par la balise (en gras, figurent les balises les plus « populaires »). Cela concerne les balises : base, command, link, meta, noscript, script, style, title. Q Contenus de flux généraux (flow) En fait, ce sont tous les contenus que l'on retrouve dans le corps d'une page HTML et qui suivent les régles d'écoulement classique des flux dits « courants ». (Une balise va, par exemple, se placer automatiquement @ la suite de la balise précédente, si24 4. Structures et balises < aucune intervention de positionnement CSS ne se manifeste pour détourner ce flux). ae A savoir Notez a ce sujet, quien HTML4, on classe plutot les balises en deux grandes catégories : les balises de type « bloc » (block) et les balises de type « en-ligne » (inline). Les balises ou par exemple font partie des balises de type « bloc » car elles vont se placer les unes sous les autres si on ne modifie pas le flux courant par une CSS. A contrario, les balises par exemple ou sont cataloguées en tant que « erligne », car elles ne se placent pas sous la balise précédente Avec I'HTMLS, cette classification tres « comportementale » semble laisser la place, et c'est plutat bien, a une classification justernent tres sémantique, oui les balises servent d'indicateurs de sens de contenus. On y retrouve les balises suivantes (en gras, les balises les plus « populaires ») a, abbr, address, area, article, aside, audio, b, bdi, bdo, block- quote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style, sub, sup, svg, table, textarea, time, u, ul, var, video, wbr. Q Contenus de plans ou rubriques (au sens plan de document) (sectioning) Ce sont les éléments participant a |'élaboration du schéma organi- sationnel de l'information de la page, permettant de signaler les diverses parties sémantiques. Ces balises si importantes sont : article, aside, nav, section. On pourrait les qualifier de « structurantes » car elles vont étre a la base de la nouvelle organisation du balisage HTML5 et de la> Structuration des contenus et balisage sémantique 25 nouvelle structuration des contenus. On pourrait presque dire qu'elles sont les dignes successeurs des balises . Certains pourraient s'étonner de ne pas y voir figurer les balises header et footer. En effet, pourquoi pas, mais méme si elles ont évidemment un réle structurant indéniable, elles n'interviennent pas forcément au niveau de la globalité de la page comme pour les précédentes, mais peuvent également &tre présentes, et c'est un énorme avantage a des niveaux de structures plus fins, au sein des balises articles ou section par exemple. En ne les cantonnant pas dans cette catégorie trés spécifique de « headings », il est clair que le WSC a voulu les mettre en avant, en leur donnant plus de liberté et d'importance, et en leur permettant ainsi d'étre présentes a tous les niveaux. ( Contenus d'en-téte (headings) Intitulé de contenus permettant de deéfinir l'entéte d'une rubrique telle que définie ci-dessus. Balises : h1, h2, h3, h4, h5, h6, hgroup. Contenus de libellés (phrasing) Désigne les divers contenus (pas uniquement des textes) du corps du document. La catégorie la plus riche avec ces balises définies est la suivante : a(*), abbr, area, audio, b, bdi, bdo, br, button, canvas, cite, code, command, datalist, del (*), dfn, em, embed, i, iframe, img, input, ins (*), kbd, keygen, label, map (*], mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, u, var, video, whbr. (*) = sila balise ne contient que du contenu de type texte. Q Contenu embarqué (embedded) Aprés les contenus textuels, voici tous les autres types de contenus tels qu'audio, vidéo, tracé vectoriel... Ces contenus sont la plupart du temps encapsulés dans la page, et nécessitent un player mais cette fois-ci fourni directement par I'HTMLS, et non plus en externe comme avant. Les balises utilisées sont : audio, canvas, embed, iframe, img, math, object, svg, video.26 4. Structures et balises < Q Contenu interactif (interactive) Désigne un contenu spécifiquement destiné a une interaction avec linternaute. Les balises nammées sont : a, audio, button, details, embed, iframe, img, input, keygen, label, menu, object, select, textarea, video Les nouvelles balises Balises de Structures 4 (Catégorie : flow) Réduire la définition de cette balise au concept d'en-+téte de page serait faux et trés réducteur, tout comme croire que cela équivau- drait 4 ce que I'on faisait en HTML4 avec par exemple : “Togo">.... menu"> <1i> menul 14> i> 0/1 En effet, a la difference de I'utilisation précédente, la balise peut étre présente 4 de multiples reprises dans la page et étre la premiére rencontrée pour chaque élément différencié de la page (section, article, colonne...) afin d'apporter les éléments d'introduction, d'en-téte, de présentation, voire une table des matiéres pour chacun. Cela pourrait se traduire dans un schéma de page HTMLS comme ceci : Titre Page . titre de T'Article > Les nouvelles balises 27 I Q
par exemple font partie des balises de type « bloc » car elles vont se placer les unes sous les autres si on ne modifie pas le flux courant par une CSS. A contrario, les balises par exemple ou sont cataloguées en tant que « erligne », car elles ne se placent pas sous la balise précédente Avec I'HTMLS, cette classification tres « comportementale » semble laisser la place, et c'est plutat bien, a une classification justernent tres sémantique, oui les balises servent d'indicateurs de sens de contenus. On y retrouve les balises suivantes (en gras, les balises les plus « populaires ») a, abbr, address, area, article, aside, audio, b, bdi, bdo, block- quote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style, sub, sup, svg, table, textarea, time, u, ul, var, video, wbr. Q Contenus de plans ou rubriques (au sens plan de document) (sectioning) Ce sont les éléments participant a |'élaboration du schéma organi- sationnel de l'information de la page, permettant de signaler les diverses parties sémantiques. Ces balises si importantes sont : article, aside, nav, section. On pourrait les qualifier de « structurantes » car elles vont étre a la base de la nouvelle organisation du balisage HTML5 et de la> Structuration des contenus et balisage sémantique 25 nouvelle structuration des contenus. On pourrait presque dire qu'elles sont les dignes successeurs des balises . Certains pourraient s'étonner de ne pas y voir figurer les balises header et footer. En effet, pourquoi pas, mais méme si elles ont évidemment un réle structurant indéniable, elles n'interviennent pas forcément au niveau de la globalité de la page comme pour les précédentes, mais peuvent également &tre présentes, et c'est un énorme avantage a des niveaux de structures plus fins, au sein des balises articles ou section par exemple. En ne les cantonnant pas dans cette catégorie trés spécifique de « headings », il est clair que le WSC a voulu les mettre en avant, en leur donnant plus de liberté et d'importance, et en leur permettant ainsi d'étre présentes a tous les niveaux. ( Contenus d'en-téte (headings) Intitulé de contenus permettant de deéfinir l'entéte d'une rubrique telle que définie ci-dessus. Balises : h1, h2, h3, h4, h5, h6, hgroup. Contenus de libellés (phrasing) Désigne les divers contenus (pas uniquement des textes) du corps du document. La catégorie la plus riche avec ces balises définies est la suivante : a(*), abbr, area, audio, b, bdi, bdo, br, button, canvas, cite, code, command, datalist, del (*), dfn, em, embed, i, iframe, img, input, ins (*), kbd, keygen, label, map (*], mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, u, var, video, whbr. (*) = sila balise ne contient que du contenu de type texte. Q Contenu embarqué (embedded) Aprés les contenus textuels, voici tous les autres types de contenus tels qu'audio, vidéo, tracé vectoriel... Ces contenus sont la plupart du temps encapsulés dans la page, et nécessitent un player mais cette fois-ci fourni directement par I'HTMLS, et non plus en externe comme avant. Les balises utilisées sont : audio, canvas, embed, iframe, img, math, object, svg, video.26 4. Structures et balises < Q Contenu interactif (interactive) Désigne un contenu spécifiquement destiné a une interaction avec linternaute. Les balises nammées sont : a, audio, button, details, embed, iframe, img, input, keygen, label, menu, object, select, textarea, video Les nouvelles balises Balises de Structures 4 (Catégorie : flow) Réduire la définition de cette balise au concept d'en-+téte de page serait faux et trés réducteur, tout comme croire que cela équivau- drait 4 ce que I'on faisait en HTML4 avec par exemple : “Togo">.... menu"> <1i> menul 14> i> 0/1 En effet, a la difference de I'utilisation précédente, la balise peut étre présente 4 de multiples reprises dans la page et étre la premiére rencontrée pour chaque élément différencié de la page (section, article, colonne...) afin d'apporter les éléments d'introduction, d'en-téte, de présentation, voire une table des matiéres pour chacun. Cela pourrait se traduire dans un schéma de page HTMLS comme ceci : Titre Page . titre de T'Article > Les nouvelles balises 27 I Q