0

According MDN span's permitted content is Phrasing content and div is Flow content.

I was looking at the html generated source of Facebook and I noticed they wrapped the "find friends" main search input in a span and marked it display:block. To me this seems ridiculous since a div is a block level element and a span is inline.

And according to MDN:

<span> is very much like a <div> element, but <div> is a block-level element whereas a <span> is an inline element.

Why didn't they just use a div? Is a span a better choice because it is for phrasing content? Or maybe it was just not a big deal to them?

Is there any reason that one should wrap a search input in a span vs a div?

Johnston
  • 20,196
  • 18
  • 72
  • 121
  • And what element is that span wrapped in? A div is not "a span with `display: block`". HTML and CSS are two separate things entirely. A div is a div and a span is a span - the only thing they have in common is that they are nonsemantic. – BoltClock Jan 26 '16 at 06:15
  • @BoltClock from MDN " is very much like a
    element, but
    is a block-level element whereas a is an inline element." https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span. It is wrapped in a div.
     – Johnston Jan 26 '16 at 06:23
  • 1
    That's just an oversimplification and, IIRC, a holdover from HTML 4. As you've already stated, a span is phrasing content and a div is flow content. Making a span `display: block` doesn't change the fact that the span is phrasing content (and likewise for making a div `display: inline`). Again I ask, what element is the span wrapped in? Because a span doesn't mean anything on its own. – BoltClock Jan 26 '16 at 06:26
  • but is a search input flow content? Or is the big issue that the span was set to block? – charlietfl Jan 26 '16 at 06:26
  • @BoltClock as I stated above. It is wrapped in a div. And as charlietfl asks. Is a search input flow content? – Johnston Jan 26 '16 at 06:28
  • @charlietfl Is a search input flow content? So a span is ok set to block as long as it contains flow content? – Johnston Jan 26 '16 at 06:30
  • seems like a pretty trivial issue to me ... passes validation, doesn't affect aria, has no cross browser display issues. Not even sure what the context of this question is...theoretical or real world problem – charlietfl Jan 26 '16 at 06:31
  • I missed that, sorry. I don't know if Facebook is a good model of semantic markup. The spec says an input can be used in contexts where phrasing content is expected - and most places that accept flow content also accept phrasing content. – BoltClock Jan 26 '16 at 06:31
  • if it wasn't for out of spec concepts...lots of what we do now would never have been done ... `` – charlietfl Jan 26 '16 at 06:37

1 Answers1

0

The type of a content is decided by the arrangement of it in the page - not by the type of CSS used on it.

This particular span is used inside a <div> element with no siblings. This gives a clear idea about the type of content it is used as.

Using a display: block in such an arrangement seems very legitimate.

Charlie
  • 22,886
  • 11
  • 59
  • 90