4991 sujets

Sémantique web et HTML

Bonjour à tous,

J'ai une question de rendu sur les éléments ins et del. Dans la page HTML 4 Block-Level Elements, pour les éléments ins et del, il est indiqué :"The following elements may be used as either block-level elements or inline elements. If used as inline elements (e.g., within another inline element or a P), these elements should not contain any block-level elements."

J'avoue ne pas comprendre l'usage : quand ins et del ont-ils un rendu block ou inline ?

Merci pour votre aide.
Modifié par krakkos (20 Jul 2009 - 15:04)
D'après ce que tu cites, il peut être utilisé au choix en inline ou block.
S'il est utilisé en tant que inline , c'est à dire qu'il se trouve dans un élément inline ou un paragraphe, alors in le doit conteni aucun élément de type block.

Donc à priori il s'adapte en fonction de la situation dans laquelle il est employé.
Pourtant si j'ai cette structure :
<body>
<del>Texte supprimé</del>
<ins>Texte inséré</ins>
</body>
Les deux éléments devraient être considérés comme de rendu bloc, dans les navigateurs j'ai un rendu inline.
Salut,

Tu confonds modèle de contenu et type de rendu. Le type de rendu est défini par le navigateur, qui choisit de l'afficher en rendu block ou en rendu inline. Alors que le modèle de contenu est défini par les spécifications du W3C et définit le type d'éléments qu'un élément peut contenir.

Exemple flagrant : La balise P est de type de rendu block (et ce pour quasiment 100% des navigateurs), mais est de modèle de contenu inline, c'est-à-dire qu'elle ne peut contenir que des éléments inline.

Donc tes balises INS et DEL sont de type de rendu inline, mais ayant des modèles de contenu inline ou block en fonction du contexte dans lequel elles sont utilisées.
Merci Agylus pour ces précisions d'interprétations erronées de ma part.
Modifié par krakkos (20 Jul 2009 - 15:28)
Administrateur
Agylus a écrit :
Salut,

Tu confonds modèle de contenu et type de rendu. Le type de rendu est défini par le navigateur, qui choisit de l'afficher en rendu block ou en rendu inline. Alors que le modèle de contenu est défini par les spécifications du W3C et définit le type d'éléments qu'un élément peut contenir.

Exemple flagrant : La balise P est de type de rendu block (et ce pour quasiment 100% des navigateurs), mais est de modèle de contenu inline, c'est-à-dire qu'elle ne peut contenir que des éléments inline.

Aargh j'avais jamais tilté sur le modèle de contenu (ou pas accordé suffisamment d'importance).

---
Sinon le type de rendu est modifiable via CSS avec la propriété display (block, inline, table-cell, inline-block, list-item, runin, etc mais en pratique toutes les valeurs sont pas utilisables) même si le navigateur en propose un par défaut avec sa feuille de style de base.
Ça ne change rien à ce qui est permis ou pas en HTML pour la hiérarchie d'éléments: d'abord on considère HTML seul et quand le résultat est valide alors il est temps de penser style CSS, DOM et JS, rendu graphique ou impression, etc
Modifié par Felipe (20 Jul 2009 - 21:05)
Administrateur
Agylus a écrit :

Exemple flagrant : La balise P est de type de rendu block (et ce pour quasiment 100% des navigateurs), mais est de modèle de contenu inline, c'est-à-dire qu'elle ne peut contenir que des éléments inline.

Tiens, je reviens par hasard sur ce sujet et cet exemple.
Effectivement, en prenant l'élément <p> de façon isolée, tu as entièrement raison : tout porte à croire que <p> est classé dans les entités %inline, mais de rendu "block".

Sauf qu'il reste un problème de taille : si <p> est un %inline, alors les autres éléments %inline (<a>, <strong>, <em>, <span>, ...) devraient être autorisés à contenir des <p>. Or le Validateur n'aime pas trop ça et - si mes souvenirs sont bons - affiche même un message qui donne en exemple qu'un inline ne peut contenir de blocks tels que <p> ou <h1>.

Au final, <p> reste toujours aussi énigmatique... Smiley murf
Raphael a écrit :
Effectivement, en prenant l'élément <p> de façon isolée, tu as entièrement raison : tout porte à croire que <p> est classé dans les entités %inline, mais de rendu "block".

Ah, il y a des confusions qui ont la vie dure. Smiley smile

Bon, pour commencer le coup de %inline et %block ce sont des raccourcis des DTD HTML4. C'est comme si je développe une application, je crée une varialbe "block" et une variable "inline" (et puis aussi une "preformated" et une "choucroute") pour des besoins internes, et là on s'amuse à analyser mon application pour y trouver une signification profonde et le sens de l'univers. Raté, les "%block;" et autre "%tartiflette;" ne sont qu'un mécanisme formel.
Je conseillerais bien d'apprendre à lire les DTD, mais c'est un mécanisme vieillot abandonné par HTML5 (ouf), donc c'est un peu inutile. Smiley smile

Ensuite, les notions de "block-level" et "text-level" sont des classifications données par HTML4 qui n'ont rien d'absolu. C'est à la fois un raccourci pédagogique, une manière d'organiser un peu les quelques 80 éléments HTML4, et une indication du rendu souhaité pour les navigateurs. En ce qui concerne les indications de rendu:
- il y a plein de cas particuliers définis par la spec (les formulaires, les tableaux...) qui ne répondent pas à ces catégories;
- c'est de toute manière en grande partie obsolète suite à la publication quelques semaines plus tard de CSS2 (propriété display qui permet une gestion plus fine et sépare le mode de rendu visuel de la définition de l'élément HTML4).

Raphael a écrit :
si <p> est un %inline

P ne fait pas partie du groupe "%inline;", mais du groupe "%block;":
<!ENTITY % block
     "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
      BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

(Et comme déjà dit on s'en fiche, ça n'a pas d'importance ces machins là.)

Raphael a écrit :
Au final, <p> reste toujours aussi énigmatique... Smiley murf

Non, P n'est pas énigmatique. P est un élément HTML4, défini par:
- Du texte dans la spécification qui dit qu'il faut l'utiliser pour tel ou tel type de contenu (non vérifiable par une machine).
- Une définition dans la DTD qui liste une liste très précise d'éléments que P peut contenir, à savoir #PCDATA, TT, I, B, BIG, SMALL, EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, ACRONYM, A, IMG, OBJECT, BR, SCRIPT, MAP, Q, SUB, SUP, SPAN, BDO, INPUT, SELECT, TEXTAREA, LABEL, BUTTON. Liste exhaustive.
- Une liste d'éléments qui peuvent contenir P (on peut déterminer cette liste par analyse de la DTD... pas trop le temps de compiler cette liste manuellement).
- Une liste d'attributs valides pour l'élément P, là encore listés dans la DTD.

Enfin, dire que P est un élément %inline est une double bêtise, car 1) la notion d'élément "%inline" n'existe pas, et 2) le "%inline;" dans la DTD désigne le groupe d'éléments que P peut contenir, pas le groupe auquel P appartient (qui se nomme "%block;", qui est un sous-ensemble de "%flow;").

Mon conseil: oubliez complètement la DTD, qui apparemment vous induit plus en erreur qu'elle ne vous aide. Et, puisqu'on y est, oubliez aussi complètement les notions de "block-level" et "text-level" de HTML4, qui sont périmées (yoohoo).

Quand on se pose des questions sur le type de rendu d'un élément HTML, il est plus intéressant de se demander:
1. Pour quel type de contenu c'est prévu, et par extension quels sont les éléments que je peux utiliser dedans de manière valide?
2. Quelle est, en CSS, la valeur de display par défaut pour cet élément dans les navigateurs?

En passant, il faudra que je réécrive complètement l'article bizarre qu'on avait publié sur block/inline, je ne jette la pierre à personne (surtout que j'avais participé à sa rédaction Smiley lol ) mais c'est vraiment pas bon.
Quant aux éléments INS et DEL:
- le coup du rendu soit bloc soit en-ligne me semble casse-gueule, je ne sais pas comment les navigateurs implémentent ça;
- en HTML4, ils peuvent contenir à peu près tout, comme un DIV;
- faut voir le rendu CSS dans les navigateurs (à priori display:inline).
Administrateur
Florent V. a écrit :

En passant, il faudra que je réécrive complètement l'article bizarre qu'on avait publié sur block/inline, je ne jette la pierre à personne (surtout que j'avais participé à sa rédaction Smiley lol ) mais c'est vraiment pas bon.

J'ai déjà commencé à supprimer / modifier des parties hier soir Smiley cligne
Administrateur
Sinon, je reviens sur ça, même si on s'en fiche, ça me travaille :

Florent a écrit :
Enfin, dire que P est un élément %inline est une double bêtise, car 1) la notion d'élément "%inline" n'existe pas, et 2) le "%inline;" dans la DTD désigne le groupe d'éléments que P peut contenir, pas le groupe auquel P appartient (qui se nomme "%block;", qui est un sous-ensemble de "%flow;").

- Si la notion d'élément "%inline" n'existe pas, je suppose que c'est valable pour la notion de %block aussi ?
- Si <p> appartient à un groupe "qui se nomme "%block;", pourquoi ne peut-on pas dire que <p> est un élément de groupe, ou de type, %block ??

Autre version :
- le "%inline;" dans la DTD désigne le groupe d'éléments que P peut contenir
- or ces éléments sont spécifiés, "à savoir #PCDATA, TT, I, B, BIG, SMALL, EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, ACRONYM, A, IMG, OBJECT, BR, SCRIPT, MAP, Q, SUB, SUP, SPAN, BDO, INPUT, SELECT, TEXTAREA, LABEL, BUTTON."
- donc en quoi ne peut-on pas dire que <em> est un élément de groupe, ou de type, %inline ??
Raphael a écrit :
- Si la notion d'élément "%inline" n'existe pas, je suppose que c'est valable pour la notion de %block aussi ?

Oui. Smiley smile

Par contre la notion d'élément de niveau bloc, par fois traduite en élément de type bloc, existe bien dans le texte de HTML4. Elle n'est pas reflétée formellement dans la DTD, n'est pas très précise, et est en partie obsolète avec l'arrivée de CSS 2. Pour référence c'est ici:
http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.3

Raphael a écrit :
- Si <p> appartient à un groupe "qui se nomme "%block;", pourquoi ne peut-on pas dire que <p> est un élément de groupe, ou de type, %block ??

En fait il faut comprendre le fonctionnement de la DTD HTML4:
http://www.w3.org/TR/REC-html40/sgml/dtd.html

Tu as des définitions d'éléments comme ceci:
<!ELEMENT BLOCKQUOTE - - (%block;|SCRIPT)+ -- long quotation -->
<!ATTLIST BLOCKQUOTE
  %attrs;                              -- %coreattrs, %i18n, %events --
  cite        %URI;          #IMPLIED  -- URI for source document or msg --
  >

L'élément BLOCKQUOTE accepte comme contenu tous les éléments décrits par l'entité %block;, et l'élément SCRIPT. L'entité %block;, c'est quoi? C'est une liste d'éléments... et d'autres entités:
<!ENTITY % block
     "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
      BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

Ces entités servent uniquement à factoriser le code de la DTD, si je comprends bien. Pour retrouver la liste complète des éléments admis comme enfant de BLOCKQUOTE, il faut développer toutes les entités (comme je l'ai fait plus haut pour P).

Les entités ne sont, sauf erreur de ma part, qu'un mécanisme de factorisation du code de la DTD. On notera également:
- Que tous les éléments ne font pas partie d'une entité (SCRIPT, par exemple).
- Que certains éléments sont dans plusieurs entités par le jeu des imbrications, par exemple H1 est dans %heading;, qui est dans %block;, qui est dans %flow;. Partant, si la DTD suffit à dire que H1 est un élément de type "block", on peut tout autant affirmer que c'est un élément de type "heading" ou un élément de type "flow". Ça n'a au final pas beaucoup de sens.

Je note tout de même que la DTD dit en commentaire que "HTML has two basic content models:
%inline; character level elements and text strings
%block; block-like elements e.g. paragraphs and lists".

Raphael a écrit :
- donc en quoi ne peut-on pas dire que <em> est un élément de groupe, ou de type, %inline ??

Tu peux dire que l'entité %inline; dans la DTD HTML4 contient l'élément EM.
Tu peux dire aussi que P a pour modèle de contenu %inline; et DIV a pour modèle de contenu %flow;.
Par contre tu ne peux pas dire que EM est de type %inline;. Tu peux dire qu'il est, en HTML4, de type "inline" (ou "en-ligne" en VF) en reprenant la terminologie du texte de HTML4. Mais vu que cette notion est casse-gueule et en partie obsolète, j'éviterais.

Bien sûr les noms des entités %inline; et %block; ne sont pas choisis au hasard, et il y a une relation entre ces entités dans la DTD, le texte de HTML4, les valeurs "block" et "inline" de la propriété display en CSS, et les valeurs par défaut de display dans les principaux navigateurs. Mais cette relation est indirecte, et il n'y a pas d'équivalence stricte entre tout ça.
Bonsoir,
Florent V. a écrit :
Je conseillerais bien d'apprendre à lire les DTD, mais c'est un mécanisme vieillot abandonné par HTML5 (ouf), donc c'est un peu inutile.

Je ne sais pas si ça va faire avancer le sujet, mais je suis passé par là. Pour info, j'ai débuté avec les technos du web en début d'année.
La première fois que j'ai tenté d'étudier une dtd, ça a engendré une grande confusion (bloc/block/%block). Je ne sais pas si tu (Florent) t'en souviens, on avait évoqué ça il y a quelques semaines (résumé sur display et consort), et tu avais bien remis les choses au clair.

Depuis, j'ai repris une dtd (xhtml strict) et je l'ai décortiquée. Autrement dit, j'ai reconstruit l'arbre récursif en ne conservant que les éléments. Résultat : ça aide beaucoup, j'ai une vision vraiment structurelle, sans me soucier d'un quelconque mode de rendu, ou de pseudo-catégories censées aider mais plus sources d'embrouille qu'autre chose (dans mon cas), et qui plus est incomplètes.

Par contre, c'est moins glamour pour un tuto, donc je vous souhaite bon courage...

Voila, c'était la séquence "témoignage" de la journée, vous en faites ce que vous voulez Smiley ravi
Bonne soirée
Modifié par Seven tears (26 Feb 2010 - 04:59)