Création d’ebook : modèles de contenu HTML
La création d’ebooks fait appel aux langages HTML et CSS. Les spécifications HTLM 5 introduisent un nouveau vocabulaire permettant d’organiser le regroupement des éléments de structuration et d’habillage du contenu. Cet article revient sur ces notions clés et sur les principaux éléments HTML 5 utilisés dans un EPUB.
Sommaire
Le but de cet article « Création d’ebook : modèles de contenu HTML » n’est pas de fournir une description exhaustive de chacune de ces catégories, mais uniquement d’indiquer à quel type de contenu appartient telle balise, pour savoir comment ou avec quels éléments utiliser l’attribut epub:type.
Modèle de contenu HTML 4
Selon les spécifications établies par le W3C, les éléments HTML se répartissaient jusqu’à présent en deux catégories en fonction de leur type d’affichage (rendu CSS par défaut) et de leur modèle de contenu : les éléments de niveau bloc (block) et les éléments de niveau texte, dits « en-ligne » (inline).
Éléments en-ligne
Les éléments dits « in-line » permettent uniquement d’accueillir des éléments de type « en-ligne » et se positionnent par défaut les uns à côté des autres afin de demeurer dans le flux. Ils participent uniquement de l’enrichissement typographique du contenu. Ce sont par exemple les balises servant à souligner du texte, à lui appliquer un style italique ou un effet d’emphase, à le mettre en exposant ou en indice, ou encore les ancres et les hyperliens (i. e. les styles de caractère utilisés dans InDesign).
Éléments bloc
Les éléments dits « block » permettent d’accueillir n’importe quel type d’élément (bloc ou en-ligne) et se positionnent par défaut les uns au-dessous des autres. Ils servent à structurer la page verticalement. Ce sont par exemple les balises de paragraphe, de titre, les divisions, ou encore les éléments servant à constituer des listes ou des tableaux (i. e. les styles de paragraphe, de tableau, de cellule ou d’objet utilisés dans InDesign pour mettre en pages un document).
Les spécifications HTML 5 introduisent un nouveau modèle d’organisation des éléments, inspiré de la structuration XML des contenus, reposant sur les 8 catégories suivantes : metadata, flow content, sectioning content, heading content, grouping content, phrasing content, embedded content et interactive content.
Modèle de contenu HTML 5
Le modèle de contenu défini par les spécifications HTML 5recoupe en partie l’opposition entre éléments de type bloc et éléments en-ligne, les éléments appartenant au contenu sectionnant (sectioning content) ou aux titres (heading content) ayant par exemple tous un rendu par défaut de type bloc.
Mais contrairement aux anciennes catégories, celles utilisées en HTML 5 ont la particularité de se superposer ou de se recouvrir mutuellement dans la mesure où elles correspondent avant tout à une modèle de représentation sémantique (la balise <a> appartient par exemple à la fois au contenu de phrasé et au contenu interactif), et non de positionnement ou de rendu des éléments.
Nous nous contentons de lister ci-dessous les balises pouvant être utilisées dans le cadre d’un EPUB (en plus des balises <head>, <html> et <body>), et de renvoyer à l’article de Raphaël Goetter, Structure HTML et rendu CSS des balises : bloc et en-ligne, très complet, qui reprend notamment le schéma de recouvrement de ces catégories établi par le W3C, ou à la page de Mozilla, consacrée à cette question.
Le contenu sectionnant (sectioning content)
Éléments : section, article, aside, nav
Cette catégorie regroupe de nouveaux éléments permettant de structurer la page en blocs sémantiquement cohérents. Ils constituent des variantes de l’élément <div>, déprécié notamment au profit des balises <article>, <section> et <aside>, dont la sémantique peut encore être renforcée au moyen de l’attribut epub:type.
<section>: représente la section générique d’un élément. Il ne remplace pas pour autant l’élément<div>dont il infléchit sémantiquement le sens, au même titre que l’élément<article>.<article>: désigne une section du document relativement indépendante ou autonome. En théorie, on peut la subdiviser en plusieurs éléments de type<section>, dont on précisera la valeur sémantique au moyen de l’attributepub:type. Mais une page ne doit en aucun cas comporter un élément<article>si elle ne comporte pas en amont un élément<section>. Si on souhaite diviser un article en plusieurs sections, on privilégiera l’emploi de plusieurs éléments<article>à celui de plusieurs éléments<section>, si tant est qu’ils possèdent une relative autonomie.<aside>[aparté] : représente un contenu secondaire, accessoire, i. e. non nécessaire à la compréhension du texte. On s’en servira pour délimiter des contenus tels que des définitions, des notes, des remarques, des compléments de texte, etc., en précisant leur nature au moyen de l’attributepub:type.<nav>: sert à regrouper les liens de navigation (généralement au sein d’une liste). Il pourra être utilisé pour constituer le sommaire, au moyen de l’attributepub:typedoté de la valeurtoc. On se reportera ici à la page de l’W3C consacrée à l’élémenttoc nav.
Chacun de ces éléments possède par défaut un rendu bloc. Dans la mesure où ils relèvent des spécifications HTML 5, il est vivement conseillé de les déclarer comme tel dans le CSS ({display: block;}), ce qui garantit leur interprétation par le système de lecture.
Les titres (heading content)
Éléments : h1, h2, h3, h4, h5, h6, hgroup
Cette catégorie regroupe les différents niveaux de titre. Le rendu par défaut est un rendu de type bloc (ils sont donc traités comme des paragraphes), ce qui permet de les positionner verticalement.
Le contenu de regroupement (grouping content)
Éléments : p, hr, pre, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption, div
Cette catégorie regroupe les éléments permettant d’organiser le contenu, c’est-à-dire ne relevant ni de l’habillage du texte (phrasing content), ni de la titraille ou des éléments structurants.
Relèvent de cette catégorie les variantes de styles de paragraphe (<p>), de bloc (<div>) ou de listes, l’ensemble de ces éléments ayant donc par défaut un rendu de type bloc.
C’est là qu’on retrouve par exemple :
<blockquote>[bloc de citation] : permet de regrouper un ensemble de paragraphes (p) ou de blocs (div) constitutifs d’une citation, ou de créer une citation détachée, constituée d’un seul paragraphe. On s’en servira pour les citations longues, en prose, ou pour les poèmes constitués de plusieurs strophes. De facto, unblockquotene comportera qu’une seule source, qu’on pourra mentionner au moyen de l’attributcite(à ne pas confondre avec l’élément du même nom).<hr>[ligne horizontale] : permet par exemple de créer un filet de paragraphe. On pourra s’en servir pour matérialiser la séparation entre le texte courant et le bloc de notes (sectionoufooter, doté de l’attributepub:typeet de la valeur"rearnotes"), comme alternative à la propriétéborder-top.<dl>[liste de définition],<dt>[terme de définition] et<dd>[contenu de la définition] : sont des variantes de listes (<ul>et<li>), permettant par exemple de constituer un glossaire.<figure>[contenu d’images] et<figurecaption>[légende de figure] : l’élément<figure>permet de regrouper un ensemble d’images ou d’isoler une image qui sort alors du contenu principal. On utilise l’élément<figcaption>pour attribuer une légende au groupe d’images contenues dans l’élément<figure>. On s’en servira par exemple dans le cas d’un ouvrage illustré, pour regrouper des séries de tableaux de photos sémantiquement cohérents.
Le contenu de phrasé (phrasing content)
Éléments : a, abbr, audio, b, bdi, bdo, br, cite, code, dfn, em, i, iframe, img, link, mark, mathq, ruby, s (strikethrough), small, span, strong, sub, sup, u (underline), video, wbr (wordbreak)
Cette catégorie regroupe plus généralement les éléments susceptibles d’être contenus dans le flux, soit pour être affichés à côté des éléments de texte (images, graphiques, éléments audio ou vidéo), soit pour réaliser leur habillage.
Parmi les plus courants, on retiendra les éléments suivants :
<a>[ancre] : permet de créer un lien hypertexte pointant vers une source externe au document ou permettant de naviguer à l’intérieur du document, vers un emplacement lui-même délimité par une ancre. On utilise alors l’attributhrefpour indiquer l’adresse ou l’emplacement vers lequel pointe le lien. Il est utilisé pour les notes, les bibliographies, les glossaires, les index, les tables.<abbr>[abbréviation] : désigne un acronyme ou un sigle. Sa signification, i. e. sa forme développée, est donnée via l’attributtitle; elle s’affiche sous la forme d’une infobulle, au passage de la souris sur le texte.<b>[gras] et<strong>[fort] : permettent chacun d’appliquer une graisse à du texte. Contrairement à la balise<strong>, l’élément<b>n’est connoté d’aucun effet d’emphase ou volonté de marquer l’importance sémantique du contenu. On pourra l’utiliser par exemple avec une classe pour appliquer de la couleur à du texte, comme alternative à la balise générique<span>.<i>[italique] et<em>[emphase] : permettent chacun d’appliquer un style italique à du texte. L’élément<i>correspond à l’usage prescrit par les conventions orthotypographiques, pour les termes étrangers par exemple, les noms propres de véhicules, les notes de musique, les devises, les lettres de l’alphabet. Il ne doit pas être confondu avec l’élément<em>, généralement encodé par défaut par de l’italique, mais qui sert à souligner l’importance d’un mot en ajoutant un effet d’emphase.<q>[citation courte] : correspond à une citation courte, donnée au décours d’une phrase. Contrairement à l’élément<blockquote>, elle possède un rendu en ligne puisqu’elle se situe dans le flux. Comme lui, elle s’utilise avec l’attributcitepour citer la source dont est extraite la citation.<cite>[œuvre citée] : délimite le titre d’une œuvre, quel que soit genre ou son type, citée dans une publication. Lors de la préparation du fichier InDesign, je suggère de créer un style de caractère spécifique (comme on l’a préconisé pour l’emploi de l’italique d’emphase ou conventionnel), idéalement intitulé « cite », et de l’appliquer rigoureusement aux titres d’œuvre, dans la maquette. Le travail d’encodage de l’italique en sera considérablement simplifié, l’outil de recherche et de remplacement d’InDesign étant ici beaucoup plus convivial que celui de Sigil, par exemple.<dfn>[définition] : petit frère de l’élément<abbr>, il permet de cibler les éléments dont la définition est donnée sous forme d’infobulle (attributtitle) ou dans un glossaire par exemple.
Le flux (flow content)
Éléments : a, abbr, audio, b, bdi, bdo, br, cite, code, dfn, em, footer, header, hr, i, q, ruby, small, span, strong, style, sub, sup, table, wbr…
Cette catégorie regroupe tous éléments HTML contenus dans les autres catégories à l’exception des balises <base>, <meta> et <title>, en plus de ses éléments propres. Nous ne citons ici que les principaux éléments, du moins ceux qui sont utiles dans un EPUB.
Parmi ces éléments, on trouve les balises <header> et <footer> permettant de composer respectivement les en-têtes et pieds de page d’une publication fixed layout. Nous reviendrons dans un prochain article sur les problèmes d’interprétation de cet élément par les différents lecteurs EPUB 3 et sur la manière de les contourner.
Les métadonnées (metadata content)
Éléments : base, link, meta, noscript, script, style, template, title
Cette catégorie regroupe l’ensemble des balises servant à définir le comportement général du contenu (la manière dont il doit être rendu sur les différents terminaux de lecture, par exemple), les relations du document avec des éléments externes à son contenu (la ou les feuilles de style, par exemple), ou encore à fournir des informations en relation avec le contenu.
C’est dans cette catégorie qu’on retrouvera les éléments suivants :
<title>: sert à définir le titre de la page XHTML, tel qu’il apparaît par défaut dans le sommaire.<meta>: permet d’assigner des dimensions auviewport, dans le cas par exemple d’une publication en fixed layout.<link>: sert à désigner le ou les fichiers CSS utilisés dans le document XHTML. C’est notamment ici qu’on définira les media queries utilisées pour modifier le rendu de l’EPUB en fonction du terminal de lecture, ou pour paramétrer la mise en pages de sa version imprimée.
Le contenu embarqué (embedded content)
Éléments : audio, canvas, embed, iframe, img, math, object, svg, video
Cette catégorie regroupe l’ensemble des balises servant à cibler un contenu provenant d’une source extérieure au document XHTML, comme une image, un média audio ou vidéo. Dans le cas d’une image par exemple (<img>) les attributs src, title et alt pour indiquer respectivement la source (i. e. l’adresse ou le lien vers le fichier), le titre et le contenu alternatif à afficher si l’image ne peut être présentée par le lecteur.
Le contenu interactif (interactive content)
Éléments : a, audio, button, details, embed, iframe, img, input, keygen, label, menu, object, select, textarea, video
Cette dernière catégorie regroupe l’ensemble des éléments permettant de créer de l’interactivité dans la publication, comme les liens hypertexte, les notes, les boutons, etc.
Laisser un commentaire
Participez-vous à la discussion?N'hésitez pas à contribuer!