8

In the <button> specification part we see that permitted content is only Phrasing content. It's valid HTML code part (checked here):

<button>
    <span></span>
</button>

This is not valid HTML code part (checked here):

<button>
    <div></div>
</button>

Error: Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)

But we can change display property of the <span>:

<button>
    <span style="display: block"></span>
</button>

And it looks like we use a <div> instead a <span>, but the HTML is valid. Is it OK (by the specification) to use a permitted content element and change its display property?

sergdenisov
  • 8,327
  • 9
  • 48
  • 63
  • 2
    There is a rational case that the button element's content model should have been **flow content excluding interactive elements** in HTML5, but no-one made a convincing case for it, so it retained its traditional content model. Older browsers would have struggled with it, but it needn't have affected defining the right semantics. – Alohci Jan 28 '16 at 01:34
  • @Alohci interesting thing, could you include the link on the source? – sergdenisov Jan 28 '16 at 15:07
  • 1
    Found this via Google. Probably relevant SO questions: [_Nesting block level elements inside the

    tag… right or wrong?_](https://stackoverflow.com/q/4291467/1079869) and [_Putting a block level element inside a

    element_](https://stackoverflow.com/q/18930438/1079869)

    – Matias Kinnunen Aug 15 '21 at 06:41

2 Answers2

3

Even though you style a span with display: block you still can't put block-level elements inside it:

<div><p>correct</p></div>
<span style="display: block;"><p>wrong</p></span>

The (X)HTML still has to obey the (X)HTML DTD (whichever one you use), no matter how the CSS alters things.

So they are different, and thus there is nothing problematic here.

Peyman Mohamadpour
  • 17,954
  • 24
  • 89
  • 100
  • I understand, thanks, this is not the answer to my question. Sorry, I corrected my question. – sergdenisov Jan 27 '16 at 22:57
  • you can use `span` with any `CSS` style applied. – Peyman Mohamadpour Jan 27 '16 at 23:01
  • 1
    `` becomes *block-level* element, but `phrasing content` elements are `inline-level` by default, it's OK? – sergdenisov Jan 27 '16 at 23:06
  • Yes it is, this is most similar with `img` where it is a block level element, though it flows inline, like text, and you know that it is `phrasing content` too. so the fact of having the display property of `block` or not, does not necessarily define the `phrasing content` thing – Peyman Mohamadpour Jan 27 '16 at 23:12
  • What's about [this answer](http://stackoverflow.com/a/30278612/2570353)? Seems like [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) with `display: block` becomes *flow content*. – sergdenisov Jan 27 '16 at 23:49
  • @SergeyDenisov - I don't how you infer that from Jon Hanna's excellent answer. *Flow content* is an HTML concept. `display: block` is a CSS concept. They are orthogonal. Don't mix them up. – Alohci Jan 28 '16 at 01:21
  • @Alohci from that answer: "A link can be inside a sentence, so it's phrasing. But as of HTML 5, one is also allowed to have a link containing whole blocks of text, in which case it is not phrasing.". [span](https://developer.mozilla.org/ru/docs/Web/HTML/Element/span) consists in *flow content* and *phrasing content* categories. When does it become *flow content*? – sergdenisov Jan 28 '16 at 09:10
  • @SergeyDenisov - Both spans and links are always both flow content and phrasing content. In that sense, saying that the link is not phrasing is not strictly accurate. But a link has a transparent content model, the effect of which is that it behaves for content model purposes as if its children were children of its parent. – Alohci Jan 28 '16 at 09:33
  • @Alohci you said Jon Hanna's answer is excellent. He said: "A sub-heading or an article cannot be inside a sentence, so they are not phrasing.". `` cannot be inside a sentence too. BTW, thanks for your help, I just want to understand. – sergdenisov Jan 28 '16 at 11:25
  • "`` cannot be inside a sentence too." Yes it can. *Sentence* is a semantic concept as are *sub-heading* and *article*. `display: block` is styling concept and therefore completely independent. – Alohci Jan 28 '16 at 12:51
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/101906/discussion-between-sergey-denisov-and-alohci). – sergdenisov Jan 28 '16 at 15:09
1

But in HTML5 some block elements may be placed inside inline! we say about putting block elements inside link and in other cases it doesn't have sense. “Block-level” links in HTML5

Igor Ivancha
  • 3,413
  • 4
  • 30
  • 39