CODEWITHSUNDEEP
htmlcss
Magnar Myrtveit
Magnar Myrtveit

Reputation: 2740

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 <summary> 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?

Upvotes: 4

Views: 72

Answers (1)

junkfoodjunkie
junkfoodjunkie

Reputation: 3178

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.

Upvotes: 3

Related Questions