Table Des Matières
Modèles de Contenu HTML5
Avant de passer à la structuration des documents HTML, Je veux prendre du temps pour explorer les modèles de contenu HTML. Bien qu’il s’agisse d’une simplification excessive, avant HTML5, les éléments en HTML ont été considérés comme étant des éléments de niveau bloc (block-level ) ou des éléments de niveau en ligne (in-line level). Les éléments de niveau bloc, comme le titre et le paragraphe, occupent leur propre espace dans le flux normal de documents et peuvent être utilisés pour regrouper le contenu à l’intérieur de leurs blocs respectifs. Donc, si je devais prévisualiser cela dans un navigateur, par exemple, notez que l’en-tête et le paragraphe occupent leurs propres blocs de contenu dans la page.
Les éléments de niveau en ligne, quant à eux se trouvent généralement à l’intérieur des éléments de niveau bloc. Et ceux-ci sont considérés comme étant de niveau texte (text-level) et cela signifie qu’ils apparaissent dans le flux normal du texte. Ces distinctions ne couvraient pas exactement tous les différents types de contenu auxquels les auteurs pouvaient se heurter. Et c’est pour cette raison que HTML5 a élargi les définitions du modèle de contenu, afin de donner aux auteurs une meilleure idée de la manière dont les types de contenu devraient se comporter. Ces modèles de contenu aident les agents utilisateurs à connaître le type de contenu à attendre dans un élément et à contrôler certains aspects de la syntaxe, comme quels éléments peuvent nicher dans d’autres?
L’apprentissage de ces types de contenu peut vous permettre de mieux comprendre la syntaxe HTML et comment ces éléments se rapportent les uns aux autres. Chaque élément dans HTML tombe dans zéro ou plus de catégories qui regroupent des éléments avec des caractéristiques similaires. Les principales catégories figurent sur cet excellent graphique interactif (que j’ai trouvé sur le w3.org) et qui peut vous aider à comprendre les modèles de contenu et leur fonctionnement et qui vous montre aussi comment ces catégories sont liées entres elles :
Notez que certains éléments entrent également dans d’autres catégories.
Le contenu section Sectioning content, contenu titre heading content, le contenu phrase phrasing content, le contenu intégré embedded content et le contenu interactif interactive content qui sont tous des types du contenu flux flow content. Les métadonnées metadata sont parfois un contenu flux flow content. Les métadonnées metadata et le contenu interactif interactive content sont parfois contenu phrase phrasing content. Le contenu intégré embedded content est également un type de contenu phrase phrasing content, et parfois un contenu interactif interactive content.
Certains éléments ont des exigences uniques et ne correspondent à aucune catégorie particulière. D’autres catégories sont également utilisées à des fins spécifiques, par exemple Les contrôles de formulaire sont spécifiés à l’aide d’un certain nombre de catégories pour définir des exigences communes. Mais pour la plupart des éléments que vous allez utiliser, ce sont les modèles de contenu que vous allez traiter (ceux que vous voyez sur le graphique).
Contenu flux (Flow)
Je vais commencer par le contenu flux flow,du fait que la grande majorité des éléments qui sont utilisés dans le corps <body> des documents et des applications sont classés en tant que contenu de flux flow.
a, abbr, address, area, (si c’est un descendant de l’élément map) article aside audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, data, datalist, del, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, i, iframe, img, input, ins, kbd, keygen, label, main, map, mark, math, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, sub, sup, svg table, template, textarea, time, u, u,l var, video, wbr, Text
Pensez à ces éléments comme étant des éléments qui seraient inclus dans le flux normal du document. Il est important de noter ici que le fait d’être identifié comme contenu flux flow n’a aucune incidence sur la manière dont le contenu est affiché dans l’agent utilisateur.
Comme vous pouvez le voir, s’ils peuvent entrer dans la balise <body>, cela va probablement être considéré comme une partie du contenu flux flow. Cela signifie également que les éléments peuvent appartenir à plusieurs modèles de contenu. Il est utile de penser que le contenu flux flow est un modèle de contenu parent, qui contient un ou plusieurs contenus spécialisés.
Contenu métadonnée (Metadata)
Le contenu des métadonnées est un contenu qui définit la présentation ou le comportement du reste du contenu, qui définit la relation du document avec d’autres documents, et qui transmet d’autres informations «hors bande».
base, link, meta, noscript, script, style, template, title.
Les éléments provenant d’autres espaces de noms et dont les sémantiques sont principalement liées aux métadonnées sont également des métadonnées. Les modèls Resource Description Framework (RDF) sont de bon exemples de ces éléments.
Exemple de code
Contenu titre (Heading)
Le contenu titre heading content définit l’en-tête d’une section (qu’elle soit explicitement balisée à l’aide de la section des éléments de contenu, ou impliquée dans le contenu du titre lui-même).
h1, h2, h3, h4, h5, h6.
Contenu Section (Sectioning)
Le contenu section Sectioning content est un contenu qui définit la portée des en-têtes headers et des bas-de-page footers.
article, aside, nav, section.
Chaque élément de contenu section Sectioning content a potentiellement un en-tête et un aperçu.
Notez qu’Il y a aussi certains éléments qui sont des racines de section. Ceux-ci sont distincts de la section contenu Sectioning content, même s’ils peuvent eux aussi avoir un aperçu.
Contenu Phrase (Phrasing)
Le contenu phrase phrasing content est le texte du document, ainsi que les éléments qui marquent ce texte au niveau intra-paragraphe. La paragraphe se forme d’une série de contenu phrase phrasing content.
a, abbr, area, (si c’est un descendant de l’élément map), audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, template, textarea, time, u, var, video, wbr, Text
Notez que La plupart des éléments qui sont catégorisés sous le contenu phrase phrasing content ne peuvent contenir que des éléments eux-mêmes classés en tant que phrase, et non n’importe quel contenu flux flow content.
La Balise Text, dans le contexte des modèles de contenu, soit il ne signifie rien, soit il correspond à des noeuds de texte. Le texte est parfois utilisé comme modèle de contenu en soi même, mais est également un contenu de phrase phrasing content et peut être un espace inter-élément (si les nœuds de texte sont vides ou ne contiennent que des caractères d’espace).
Les nœuds de texte et les valeurs attribuées doivent être constitués de caractères Unicode, ne doivent contenir ni caractères U + 0000, ni caractères permanents non définis Unicode (non caractères), ni caractères de contrôle autres que les caractères d’espace. Cette spécification comprend des contraintes supplémentaires sur la valeur exacte des nœuds de texte et des valeurs d’attribut en fonction de leur contexte précis.
Contenu integré (Embedded)
Le contenu intégré embedded content est un contenu qui importe une autre ressource ou le contenu d’un autre vocabulaire pour l’insérer dans le document.
audio, canvas, embed, iframe, img, math, object, svg, video.
Les éléments provenant d’espaces de noms autres que l’espace de noms HTML et qui transmettent du contenu mais pas des métadonnées metadata sont des contenus intégrés embedded content aux fins des modèles de contenu. (Par exemple, MathML ou SVG).
Certains éléments du contenu intégrés embedded content peuvent avoir un contenu de retour fallback: le contenu qui doit être utilisé lorsque la ressource externe ne peut pas être utilisée (par exemple, car elle est d’un format non pris en charge). Les définitions d’élément indiquent quel est le retour, le cas échéant.
Contenu Interactif (Interactive)
Le contenu interactif est un contenu spécialement destiné à l’interaction de l’utilisateur.
a, audio (si l’attribut controls est présent), button, embed, iframe, img (si l’attribut usemap est présent), input (si l’attribut type n’est pas dans l’état caché), keygen, label, object (si l’attribut usemap est présent), select, textarea, video (si l’attribut controls est présent).
Certains éléments de HTML sont activables, l’utilisateur peut les activer, ce qui déclenche une séquence d’événements qui dépendent du mécanisme d’activationt en cas de clic.
L’agent utilisateur devrait permettre à l’utilisateur de déclencher manuellement des éléments ayant un comportement d’activation, par exemple en utilisant un clavier ou une entrée vocale, ou par des clics de souris. Lorsque l’utilisateur déclenche un élément avec un comportement d’activation défini d’une manière autre que le clic, l’action par défaut de l’événement d’interaction sera d’exécuter les étapes d’activation des clics synthétiques sur l’élément.
