Éléments de bloc vs éléments inline en HTML: pourquoi la distinction?

La distinction entre les blocs et les éléments en ligne m'a toujours paru étrange. La différence réside dans le fait qu'un élément de bloc occupe toute la largeur, forçant ainsi un saut de ligne avant et après l'élément, et un élément en ligne ne prend que autant que le contenu. Pourquoi ne pas avoir un seul type d'élément: un élément en ligne où vous pouvez également appliquer une hauteur / largeur personnalisée et l'utiliser? Vous voulez des sauts de ligne? Insérez un <br />, ou ajoutez peut-être une balise spéciale dans le CSS pour ce comportement. La façon dont c'est maintenant, je ne le vois pas résoudre aucun problème, et au lieu de cela, cela ne force qu'une propriété qui, à mon avis, devrait être décidée par un concepteur.

Alors pourquoi les deux types?

Vous dites:

Vous voulez des sauts de ligne? Insérez un <br />, ou ajoutez peut-être une balise spéciale dans le CSS pour ce comportement. La façon dont c'est maintenant, je ne le vois pas résoudre aucun problème, et au lieu de cela, cela ne force qu'une propriété qui, à mon avis, devrait être décidée par un concepteur.

Vous êtes sur la bonne voie - le style doit être décidé par le designer.

Mais, vous avez le problème dans l'autre sens. L'insertion d'une <br/>balise est en fait l'option qui "force une propriété qui doit être décidée par un concepteur" - à l'intérieur du document de balisage, une fois qu'elle <br/>est là, elle est là - et ce n'est qu'avec un CSS délicat / hacky que vous pouvez supprimer son effet.

Inline / block elements, d'autre part, sont des éléments purement stylisés avec une valeur par défaut pratique pour le cas d'utilisation courant. La propriété visuelle elle-même peut être modifiée instantanément par un concepteur CSS avec display:inlineou display:block.

Prenez par exemple l'élément commun pour la navigation de nos jours - <li>. Ce sont des blockéléments par défaut , mais les concepteurs les feront floatapparaître en ligne ( blocka plus de propriétés spéciales que de reprendre toute la ligne, mais c'est une conversation pour un autre jour).

La plupart des éléments ont un formatage standard ... Votre question pourrait être étendue pour dire que ce formatage devrait également être la décision du concepteur et devrait être supprimé. J'ai toujours pensé que c'était un point de départ et j'ai supprimé la mise en forme si nécessaire (souvent ce n'était pas le cas). Mais au final, il y a des choses qui sont naturelles. Si vous avez un paragraphe par exemple, vous vous attendez à ce qu'il soit un élément de bloc car c'est la nature d'un paragraphe. Indépendamment du fait que les éléments aient ou non des paramètres par défaut tels que bloc ou en ligne, je voudrais certainement dans les deux cas la possibilité de spécifier cette option. La raison pour laquelle je dis cela est que l'OMI est plus propre à briser les choses de cette façon que de lancer un<br />dans le HTML. Fait-il la même chose? Oui. Mais avec les récentes avancées en HTML, un gros effort a été concentré sur le rendre plus un langage sémantique où vous mettez moins dans le HTML en ce qui concerne le formatage et plus dans le CSS. Le <br />moyen saut de ligne qui fait généralement référence à un saut de ligne dans un paragraphe ou une autre phrase contenant une structure. En fin de compte, cela n'a pas d'importance pour moi, mais je veux personnellement avoir la possibilité d'avoir une distinction entre bloc et en ligne, alors j'espère qu'ils n'enlèveront jamais cela du côté CSS au moins!

C'est un peu comme dire qu'il n'y a pas de réelle différence entre les paragraphes et les phrases. Les paragraphes délimitent un groupe d'idées. En règle générale, une phrase correspond à une seule idée.

Le balisage concerne la sémantique, pas l'affichage. En effet, un concepteur est libre de traiter tout élément par défaut d'un style de bloc comme en ligne et vice-versa.

Dans LaTeX , il existe deux modes (hors mode mathématique): le mode horizontal et le mode vertical. Les éléments (caractères) sont de petites cases qui s'accumulent "horizontalement" dans le paragraphe. Ensuite, ces boîtes plus grandes s'accumulent verticalement. Ceci est similaire à (X) HTML: inline et block.

Cela ressemble à un problème de compatibilité descendante pour moi. L'élément en ligne était probablement un ajout ultérieur au standard HTML, et pour que les pages Web écrites en 1992 puissent toujours être consultées en 2011, il est toujours pris en charge - comme il existe une tonne de pages Web de 19 ans ...!

Je pense que les modes d'affichage sont tellement différents entre bloc et inline, qu'une distinction mérite d'être faite au niveau du balisage.