search

jgthms / html-reference

HTML Reference: a free guide to all HTML5 elements and attributes
https://htmlreference.io
MIT License
979 stars 136 forks source link

Bug: img & input are inline-block tags #4

Open awebdeveloper opened 7 years ago

awebdeveloper commented 7 years ago

Plz add a inline-block section. img & input are inline-block tags

SelenIT commented 7 years ago

Strictly speaking, there is no such thing as "inline-block tags", as well as there are no "inline tags" and "block tags" since HTML4/XHTML1 (where the "block and inline elements" concept came from) became outdated.

As of HTML5, there are elements with different content models and different default presentation. The latter can be overridden via CSS, the former can't. There is "phrasing content", roughly corresponding to "inline elements" from HTML4, and "flow content", roughly corresponding to "inline and block elements" (all visually displayed elements). But their default presentation can be different (form controls and media elements usually behave as inline blocks, table elements have table-specific presentation rules, ruby element has its own layout model, etc.). The nesting rules are also more complicated than "inline contains inlines, block contains inlines or blocks" (e.g. the a element can contain blocks, but can't contain other interactive elements, lists can contain only list items, tr can contain only table cells, etc.). So, in my opinion, the old "inline"/"block" dichotomy shouldn't be applyed to HTML5 at all, it brings more confusion than clarity.

But even if we simply call the phrasing content "inline" and non-phrasing flow content "block" (which looks a huge oversimplification to me), some elements in the table seem to be categorized incorrectly. For example, select and ruby elements should be categorized as "inline" (they don't break text lines and can be contained in other phrasing elements), and dt element should be categorized the same way as dd and li elements (and definitely not as "inline").

SelenIT commented 7 years ago

Still, how can the dd element be 'inline' by any definition? Even in HTML4, although it was listed neither as inline nor as block, it had the flow content model (that includes block content), which is impossible for 'inline' elements. In HTML5, it also has the "Flow content" content model and is rendered by default as display:block.

So, in terms of inline-vs-block dichotomy (leaving aside its applicability to HTML5), it should be labelled as 'block', not 'iline' (or — even better — as none of them, just like the dt element currently is).