Magnar Myrtveit Magnar Myrtveit - 29 days ago 6
CSS Question

Connection between html content types and inline/block elements

In html, some elements have restrictions on what type of content they allow. An example is the

element, where the content must be either phrasing content or one element of heading content. This is valid html:

<details>
<summary><span>Foo</span></summary>
...
</details>


While this is invalid:

<details>
<summary><div>Foo</div></summary>
...
</details>


Since
<div>
is not phrasing content nor heading content.

But what about this?

<details>
<summary><span style="display: block">Foo</span></summary>
...
</details>


To my understanding, this should still be valid html, since
<span>
is phrasing content, but due to
display: block
, the
<span>
element will behave the same way as a
<div>
would.

Is there any connection between different types of contents and
inline
/
block
elements, or are they completely different things?

Can I expect browsers to render things correctly when a specific type of content is required, but that content is styled to behave differently than it normally would?

Answer

There is no connection between elements and semantics, and how you chose to display those elements - the CSS is just styling, and can be made to do whatever. Semantic markup (HTML) is a completely different matter. And there is no correlation between those two, making the display: block completely valid.