6

Possible Duplicate:
Can a span be closed using <span />? 

<p>This is a test <span id='span1' style='display:inline-block;'></span> to see if I can embed an inline block.</p>

<p>This is a test <span id='span2' style='display:inline-block;'/> to see if I can embed an inline block.</p>​

http://jsfiddle.net/T7ByE/

The first line embeds a span with a regular closing tag, while the second uses a self-closing tag. The first line works properly, while the second has a bizarre result.

I'm just curious why there is such a difference in the handling of the element in each case. I'm aware that under non-strict xhtml, self-closing tags aren't very well supported. It appears the self-closing tag is being treated as just an open tag.

Is there a good reason modern browsers still don't support self-closing html tags? Am I expected to change the doctype or something to get this to work?

The irony is I actually started with an explicit closing tag, but ran it through the browser's xml parser and back to html, and the parser felt like collapsing the empty element into a self-closing tag, which promptly broke everything.

Community
  • 1
  • 1
devios1
  • 36,899
  • 45
  • 162
  • 260
  • 5
    This is an interesting read: http://stackoverflow.com/questions/2816833/can-a-span-be-closed-using-span – 3dgoo Nov 29 '12 at 01:55

3 Answers3

3

Is there a good reason modern browsers still don't support self-closing html tags?

Backwards compatibility.

Am I expected to change the doctype or something to get this to work?

You want to use XML, you need to send your document as XML (application/xhtml+xml, to be specific). This has mainly to do with the MIME type, not the doctype. Of course, there's no way to make it work in IE <9.

user123444555621
  • 148,182
  • 27
  • 114
  • 126
  • Just to confirm, setting the DOCTYPE alone isn't enough to get the browser to interpret the data as xhtml. – devios1 Dec 04 '12 at 20:44
2

Web-browsers have DOM inspectors which show us the structure of the resulting DOM tree. For instance, in Firebug:

enter image description here

As you can see, Firefox doesn't recognize the self-closing tag, but treats it like a start-tag instead. Firefox will close that SPAN element automatically when it reaches the end of the paragraph, meaning that the SPAN will contain the remaining text of the paragraph.

Now, since you're inserting a DIV element into the SPAN element, the DIV will be laid out below the text-content of that SPAN element. This is because the DIV element is a block-level element. Block-level elements that appear after text-content, are laid out below that text-content.

Šime Vidas
  • 182,163
  • 62
  • 281
  • 385
1

When you self enclose a tag like span, as far as I can imagine***, you're not actually self enclosing it - those tags don't have that ability. What you're actually doing is leaving it open. And when you leave stuff open, the browser takes a liberty, and closes them itself, usually, at the end of their parent's closing tag.

So in your example, in case nº2, you get an inline-block that goes all the way until the end of the p element. Now, inside that inline-block you're appending a block level element. Well, this time and again... by putting a block inside an inline (inline-block) the browser takes another one of its liberties and (basically) puts all the content surrounding the block element in as many block level elements as it needs to (that's 1 or two - no more).

In your case you get one "anonymous" block around the text preceding the inserted div ("to see if I can embed an inline-block.").

Since blocks stack vertically, it's no surprise, then, the appearance you get on the second paragraph.

See a colored fiddle at: jsfiddle.net/T7ByE/1/ (not clickable) to see it better.

Relevant Links
display:block inside display:inline

***it kind'a seems that depending on your content type spans can actually be self enclosing*

Community
  • 1
  • 1
João Paulo Macedo
  • 15,297
  • 4
  • 31
  • 41
  • Not depending on the doctype so much as the content type. That self-closing syntax is an XML feature and is implemented by XML parsers. The syntax is allowed in HTML5, but it does not self-close tags unless you use an XML parser. Also, is the quality filter not allowing you to post the answer if you make that fiddle link clickable? – BoltClock Nov 29 '12 at 02:47
  • Updated! Hadn't read the comments from that page. I understood from the answer alone both a specific content type and doctype were needed for a self enclosing tag like span to work. // Yes. It doesn't let me link to the fiddle without "posting relevant code" (not those exact works probably). – João Paulo Macedo Nov 29 '12 at 02:56