Home/ Questions/Q 8897913
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T00:28:25+00:00

Possible Duplicate: Can a span be closed using <span />? <p>This is a test

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0