Menu
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.
683
Code with closing tags is much more readable and easy to follow. It is much easier to visually inspect a page with well laid out markup. Working with this markup is easier for developers.
It is used to indicate that there is no content between the opening and closing tags. Some few examples of self-closing tags in HTML are <input/>, <hr/>, <br/>, <img/>, etc. Self-closing tags in HTML only have attributes and do not contain any content, and they also cannot have any children.
Not closing tags can lead to browser incompatibilities and improperly rendered pages. That alone should be enough reason to properly close your tags.
Some HTML tags (like img and br ) don't have their own content. These are known as self closing tags or empty tags. They look like this: A simple example: <br /> The br tag inserts a line break (not a paragraph break).
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.
148
Web-browsers have DOM inspectors which show us the structure of the resulting DOM tree. For instance, in Firebug:
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.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
