What are inline elements and block-level elements?

[debiru]

• https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
• https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

In HTML LS or HTML5, the concepts of inline elements and block-level elements should have been removed. Why does MDN continue to describe inline elements and block-level elements?

I believe it would be more accurate to rewrite the description based on the categorization of elements in HTML5. And I think it will eliminate confusion. For example, the following statement is inaccurate.

Content model
Generally, inline elements may contain only data and other inline elements. An exception is the inline a element which may contain block level elements such as div.

Not only the a element, but also, for example, the del or ins elements can be parents of the p or div elements.

In addition, the current explanatory text is mixed with HTML 4.01-era explanations, giving the impression that it is difficult to understand.

• https://developer.mozilla.org/en-US/docs/Web/CSS/display/multi-keyword_syntax_of_display

On a related note, it is interesting to note that the terms inline element and block-level element appear here as well. I don't think we should confuse the inline-level and block-level of display property in CSS with the expressions inline element and block-level element in HTML. Don't you think these should be strictly differentiated and described?

I don't think we should describe expression the inline element or block-level element any more, do you? However, the page itself can remain. I suggest that the core of the description should be worded in a more HTML5-friendly manner.

[debiru]

Having said that, it is difficult to determine where to rewrite.

If anyone (especially the maintainers of the English version of the document) thinks that the use of the expressions "inline element" and "block-level element" is a source of confusion, please comment. It will help us determine if the document should be revised.

[OnkarRuikar]

In HTML LS or HTML5, the concepts of inline elements and block-level elements should have been removed. Why does MDN continue to describe inline elements and block-level elements?

Clearly HTML doesn't use these but CSS still uses these terms https://www.w3.org/TR/css-display-3/#inline-level and are very much required to explain layouts. I think these pages need to be moved to CSS documentation and reworded accordingly, so that readers will get the idea that these are CSS terms and not HTML, then there won't be any confusion.

---

developer.mozilla.org/en-US/docs/Web/CSS/display/multi-keyword_syntax_of_display
On a related note, it is interesting to note that the terms inline element and block-level element appear here as well. I don't think we should confuse the inline-level and block-level of display property in CSS with the expressions inline element and block-level element in HTML. Don't you think these should be strictly differentiated and described?

If we do the above and link every occurrence of block-level and inline-level to the the new locations readers won't be confused.

[debiru]

Thank you for your comment.

I too believe that the expressions inline-level (box or element) and block-level (box or element) in CSS still make sense today. I think it would be preferable to remove the expressions inline element and block(-level) element in HTML, as they are the source of misunderstanding.

In fact, the discussion had the following background.

Recently, the Japanese community has been debating the question, "Can block-level elements be included in inline elements?" has been a controversial expression. More precisely, there was discussion about the removal of the concepts of inline and block-level elements in HTML5. At that time, the presence of inline elements and block-level elements documents in the MDN was the spearhead.

However, I am the maintainer of the Japanese documentation and cannot directly touch the English documentation (I can create pull requests, but not make fundamental policy decisions), which is why I started this topic.

I hope in some way, the English version of said document will be improved :)

[OnkarRuikar]

• The PR CSS: move block-level and inline-level pages from HTML to CSS content#25891 has been merged. Hopefully we got most of the change in.

[debiru]

Thank you very much for your work in creating the PR. It was very helpful because I didn't know where to start.

I greatly appreciate your support.