J'écris un article et je me pose une question stupide concernant les boites en html

Tout le monde sait que tous les éléments HTML sont des boites. Sauf que je n’en suis pas si certain que cela… J’écris un article à ce propos et j’aimerais pas dire n’importe quoi Donc est-ce que <br> est aussi une boite? A ma connaissance on ne peut pas lui définir des dimensions des bordures et que sais-je encore. Donc d’après moi ce n’est pas une boite et il n’est pas le seul et pourtant on dit partout que tous les éléments HTML sont des boites ! Est-ce que quelqu’un a la réponse et où peut-on lire quelque chose à ce sujet ?

C’est con je sais mais ça me travaille…

Le modèle de boite qu’on a du t’apprendre est une simplification de la structure arborescente d’une page HTML.

Un modèle plus exacte est ceci:

Ou encore ceci:

La plupart des éléments peuvent avoir des enfants (et donc on pourrait les assimiler à des boites). Mais certain éléments ne peuvent pas (on peut également les voir comme des boites trop petites pour englober d’autres boites).

C’est le cas des éléments auto-fermant et des éléments vides.

Ok on est bien d’accord avec l’arborescence d’une page html mais ça ne répond pas à la question si tous les éléments sans exception sont des boites oui ou non.

Donc si je comprends bien ce que tu dis même les éléments vides ne pouvant pas contenir des enfants devraient être considérés quand même comme des boites, petites certes mais boites quand même.

Ce qui me perturbe alors comment assimiler un élément comme <br> comme une petite boite, si d’autre part en CSS ce qu’on appelle modèle de boite doit avoir un contenu, un padding, une bordure, une marge … <br> n’a rien de tout ça, donc ça ne devrait pas être une boite…

Alors <br> est une boite ou n’en est-il pas une indépendamment du fait qu’on ne peut rien mettre dedans.

Oh ! Je comprends mieux ta question. Tu parles du modèle en boite de CSS.

Salut,

Je crois que tu fais référence au box model du CSS.

Je suis pas sûr qu’on puisse dire que tout élément est une boite, car les éléments head, meta ou encore script ne sont même pas visible. Je ne sais pas d’où tu sors cette affirmation.

Et puisque tu prends l’exemple concret de <br>, il n’y a qu’à voir sa doc

<br> n’a aucun rôle purement stylistique et il sert uniquement à créer une rupture de ligne au sein d’un bloc de texte. Cet élément pourra très peu être mis en forme avec CSS.

Bien qu’il soit possible d’appliquer une marge (margin sur les éléments <br> afin d’augmenter l’espacement entre les lignes de texte d’un même bloc, ce n’est pas une bonne pratique. Pour obtenir le même effet, on pourra utiliser la propriété line-height.

Donc tu peux toujours set les propriétés CSS, mais ce n’est pas une bonne pratique.

EDIT : grilled

Je me demande si la question ne fait pas plutôt référence à la distinction block vs inline ? (il est rès courant que nous traduisons bloc par boite, d’où l’affirmation ?)

En fait j’ai lu a de nombreuses reprises, je ne sais plus où il y a de cela bien longtemps dans des bouquins et sites sérieux que tout élément est une boite puisque HTMl est sensé ne pas être une langue de programmation mais de description et par conséquent pour afficher n’importe quoi il faut que ce quelque chose existe physiquement et sa place soit réservée sous forme de boite.

Donc il faut que ce soit une boite même s’il n’y a rien dedans, sinon on ne peut l’afficher. Ce qui serait valable même pour <br>

J’ai donc essayé de mettre un fond ou une bordure à br, ça ne marche pas

Ensuite j’ai découvert en bidouillant que <br> mis dans un flexconteneur ne fait rien quelque soit l’endroit où on le met. Ce qui finalement est normal mais fallait y penser.

Au final je ne sais plus boite ou pas boite

Et d’ailleurs c’est quoi une boite. Uniquement un bloc ou aussi autre chose ? Mais quoi?

Est-ce que ce serait simplement de la place réservée par HTML pour chacun de ses éléments y compris ceux qui s’affichent pas comme <méta> par exemple etc?

Bref, la mémoire dans laquelle html place chacune de ses balises? Bizare tout ça !

HTMl est sensé ne pas être une langue de programmation mais de description

Exactement, mais pas de description graphique comme peut l’être un fichier dwg, HTML est un langage de description sémantique. Il dit "tiens, voilà ce texte est un paragraphe, il arrive après ce titre et les deux appartiennent à un article". Il ne se préoccupe absolument pas de comment il est affiché. C’est le navigateur qui va se charger d’afficher au mieux. Par contre on peut lier du CSS qui va donner des indications au navigateur pour effectuer son rendu, d’où le nom de style.

et par conséquent pour afficher n’importe quoi il faut que ce quelque chose existe physiquement et sa place soit réservée sous forme de boite.

Alors c’est vrai que si tu forces une aire de 0px² sur un élément qui devrait s’afficher, tu ne le verra pas. Mais pas toutes les balises html correspondent à un élément affiché.

Donc il faut que ce soit une boite même s’il n’y a rien dedans, sinon on ne peut l’afficher. Ce qui serait valable même pour <br>

ce n’est pas valable pour <br> car on n’affiche pas l’élément <br>, on interprête le sens de l’élément <br> qui dit "il y a une rupture de ligne" pour provoquer une rupture de ligne dans le contenu.

Et d’ailleurs c’est quoi une boite. Uniquement un bloc ou aussi autre chose ? Mais quoi?

Là c’est à toi de nous dire à vrai dire, c’est toi qui a introduit ce terme. Puisque tu as parlé de boite html, ache l’as pris au sens boite sémantique et a écrit sa première réponse. Après, puisque tu parles de marges, fond, taille etc… ça nous as fait pensé au CSS et donc en CSS il existe le box model qui est un ensemble de propriété qui décrivent la composition de l’aire qu’occupe l’élément. Et il existe aussi la propriété "display" qui peut prendre la valeur "block", c’est une propriété qui va décrire l’influence graphique des autres éléments sur celui-ci (block doit être posé tel que décrit, inline est intégré au contenu du parent, flex doit se placer dans la suite du flux de ses voisins)

Bref, la mémoire dans laquelle html place chacune de ses balises? Bizare tout ça !

html ne manipule pas la mémoire, c’est le navigateur qui se gère (et conduit à des différences de performances et compatibilités)

Excusez moi du retard. J’étais absent. Je viens de découvrir les réponses. En résumé je ne sais toujours pas ce qu’il faut conclure au final et pour moi ça reste un mystère. Je reste sur mon idée initiale à savoir que tout élément html n’est pas une boite.

Je viens de trouver un article qui dit que tout élément html est une boite pour css et il décrit ce dont on a déjà parlé à savoir "le modèle de boite".

Voici le lien https://www.scientillula.net/ISN/HTML_CSS/css_boites.html

Je pense que c’est une affirmation abusive vu tout ce qu’on a déjà dit ci-dessus. Le modèle de boite css pour certains éléments ok, mais pas pour tous les éléments…

Dans cet autre site on lit "Lorsque l’on implante un élément HTML dans une page web, il occupe un espace, qui a la forme d’une boîte rectangulaire sur l’écran de visualisation" Lien https://www.devenir-webmaster.com/V2/TUTO/CHAPITRE/HTML-CSS/11-le-modele-de-boite/

https://www.devenir-webmaster.com/V2/TUTO/CHAPITRE/HTML-CSS/12-inline-block/

et en cherchant bien on en trouve plein de sites qui disent ça…

Alors qui a raison ?

Et encore ça "Comme je l’ai déjà mentionné, à l’intérieur d’un document HTML chaque élément est une boîte rectangulaire. "… Voici le lien https://la-cascade.io/articles/cacher-des-elements-avec-css

Ou encore ça " Chaque élément HTML peut être vu comme une boîte rectangulaire qui peut éventuellement contenir d’autres éléments HTML enfants. La boîte de l’élément parent est appelée le contenant et les éléments enfants constituent le contenu."

Voici le lien https://iut-info.univ-reims.fr/users/nocent/web/?section=13

C’est clair tous ces gens disent que tous les éléments html sont des boites !

Ah… Ce sont des mauvais raccourcis…

Si tu reviens à la base, le HTML c’est du balisage sémantique, de la description du contenu. Il y a des paragraphes, des listes, des titres, mais en aucun cas des boîtes… Comme le contenu suit une structure, on peut décrire son arborescence (le plan en quelque sorte si tu préfères) et le balisage utilisé se traduit bien avec les schémas évoqués par ache ; mais ce ne sont toujours pas des boites en soi. Tu indiques/marques/écrits un paragraphe et non une boîte, tu y indiques éventuellement un saut de ligne (la cas de ton <br>), mais pas une boîte…

Maintenant, quand on arrive à la représentation (puisqu’il faut bien qu’à un moment ton texte balisé soit affiché…) sur écran ou papier surtout on raisonne traditionnellement en terme de boîtes. C’est pour cela que je parle de raccourci : ce ne sont pas les éléments HTML qui sont des boîtes, c’est la traduction que l’on fait pour l’affichage.

Je viens de trouver un article qui dit que tout élément html est une boite pour css

Ici, il y a même deux raccourcis. La boite, comme je viens de l’indiquer est la représentation (et la façon d’appréhender) par CSS : on fait donc comme la typographie traditionnelle en imprimerie. Mais il s’agit des éléments affichés (implémentés), pas tout élément dans l’absolu.

Lorsque l’on implante un élément HTML dans une page web, il occupe un espace, qui a la forme d’une boîte rectangulaire sur l’écran de visualisation

Comme l’a déjà rappelé romantik, il y a des éléments qui ne sont pas destinés à l’affichage (par exemple la balise <meta> et il y en a d’autres) comme <br> ! Tu peux en rajouter (ou inverser) et jouant du visibility: et du display:
Maintenant, si tu veux absolument rester dans la visualisation des boîtes, il faut alors pousser jusqu’au caractère et au delà (j’aurais façon LaTeX sauf qu’en vrai il y a aussi les ressorts…) ; Du coup il faut voir certaines boîtes comme ayant une surface nulle… (l’aire de 0px²…)

Attention aussi à ne pas mélanger les notions et les perspectives

Je pense que c’est une affirmation abusive vu tout ce qu’on a déjà dit ci-dessus. Le modèle de boite css pour certains éléments ok, mais pas pour tous les éléments…

Le DOM est une arborescence, pas des boîtes. Cela concerne le document HTML. Cf les schémas de ache…

Ou encore ça " Chaque élément HTML peut être vu comme une boîte rectangulaire qui peut éventuellement contenir d’autres éléments HTML enfants. La boîte de l’élément parent est appelée le contenant et les éléments enfants constituent le contenu."

…c’est plutôt maladroit, mais c’est le même type d’analogie (les boîtes) que certains font pour les répertoires et les fichiers.
Le DOM est une chose, le modèle de boîte CSS est encore autre chose.

Merci d’être allé chercher les citations sources, on peut ainsi confirmer que toutes ces sources parlaient bien du box model de css.

Je suis d’accord avec Gil Cot, ce sont des raccourcis qui peuvent induire en erreur. La notion de boite est une notion CSS, donc la représentation des éléments html, pas les éléments en eux-même. Cela sous-entend donc que ce sont les éléments html affichés qui sont des boites, et pas tous sont affichés.

En conclusion, je trouve que tu as bien fait de te poser la question. Effectivement, tu as raison, pas tout les éléments html sont des boites. J’espère même qu’avec nos réponses tu as compris que même dire qu’un quelconque élément html est une boite est un raccourci, c’est en fait sa représentation graphique qui se fait sous forme de boite, car c’est une notion CSS et non HTML.

Alors j’ai pas vraiment trouvé une liste des éléments qui applique ou non le modèle de boite à part la doc de chacun des éléments. Par contre je pense qu’on peut justifier ça par le fonctionnement même de CSS en gardant à l’esprit que le modèle de boite est une notion CSS, et que c’est le navigateur qui va collecter les informations de style dont il a besoin pour effectuer le rendu du document html. Donc lorsque l’information est décrite dans le css mais n’est pas pertinente, ça ne va avoir aucun effet sur le rendu parce que le navigateur ne va pas l’utiliser.

Merci à tous, je pense qu’on a épluché la question sous tous les angles et que toutes ces précisions ont été utiles afin de dissiper les malentendus.