Quick question about self closing tags.

[Schmoopy]

Ok, this should be relatively straight forward, but I was under the impression that self closing tags were either ended like this: <br>, or <br/> (depending on doctype) but I keep coming across: <br /> with a space before the slash, is there any particular reason for this?

Or is it just a way to make it more legible, it just seems rather arbitrary to me. I've only come across it since learning PHP, so is it specific to that, or what?

Any help appreciated,

Jack.

[rangana]

It is needed for compatability with old browsers and to separate it from the last attribute's value (incase there are attributes).

For further reading:
http://www.westciv.com/style_master/house/good_oil/xhtml/index.html
http://www.dynamicdrive.com/forums/showthread.php?t=7934

Hope that helps.

[Schmoopy]

Oh I see, thanks for that :)

[Twey]

<foo /> is XML (and thus XHTML), and is equivalent to <foo></foo>. SGML (and thus HTML) is smarter, and allows definitions of empty tags in the DTD, such that this isn't necessary and an empty tag is considered to be closed as soon as it's opened; thus, <foo> is perfectly valid. <foo />, on the other hand, is equivalent to <foo>&lt; in SGML-compliant parsers, one of the reasons that XHTML cannot be safely served as text/html.

[Snookerman]

I've seen some codes that have self closing div tags: <div />, usually with an id value. Is that really valid and what is the difference?

[Twey]

Yes, it is entirely valid. As I said above, <div /> is, in XML/XHTML, entirely equivalent to <div></div>.

[Snookerman]

Ok, so can any content be added to this container or does that have to made through css?

[Twey]

It's exactly equivalent to <div></div>. You can do anything to it that you can do with any other empty <div>.

[Snookerman]

Could this be done with other tags that are usually empty? E.g. <script type="text/javascript" src="jquery-1.2.6.min.js" />
Would that work?

[rangana]

Could this be done with other tags that are usually empty? E.g. <script type="text/javascript" src="jquery-1.2.6.min.js" />
Would that work?

Doing so will work on FF, but will break on IE (I've encountered that).

You might find this thread useful too:
http://www.webmasterworld.com/html/3614746.htm

[Snookerman]

After some testing I realized that:

<div id="foo" />
<a href="#">Link</a>
Is the equivalent of:

<div id="foo">
<a href="#">Link</a>
</div>
not:

<div id="foo"></div>
<a href="#">link</a>

So the self-closing div container does not close itself directly. Everything that comes after it is actually included in it. This could be useful for wrapper containers, e.g.

<div id="wrapper">
<div id="container">
<div id="position">
<div id="content">Lorem ipsum</div>
</div>
</div>
</div>
could be written:

<div id="wrapper" />
<div id="container" />
<div id="position" />
<div id="content">Lorem ipsum</div>

That is why it might not always work for the script tag, since the code that comes after it would be parsed as script code.

[Twey]

Could this be done with other tags that are usually empty? E.g. <script type="text/javascript" src="jquery-1.2.6.min.js" />
Would that work?Yes.
Doing so will work on FF, but will break on IE (I've encountered that).All of this will break in IE, since IE does not support XHTML. If you've set up the page properly, IE will not even attempt to render it — it will offer a download options dialogue.
After some testing I realized that:
<div id="foo" />
<a href="#">Link</a>Is the equivalent of:
<div id="foo">
<a href="#">Link</a>
</div>not:
<div id="foo"></div>
<a href="#">link</a>No. That's how it will probably be rendered if you serve the XHTML page with an HTML Content-Type (text/html instead of application/xhtml+xml), since the browser (most of which are not SGML-compliant, and therefore don't understand NET) will interpret <div /> to mean <div>, and you get left with just an improperly closed tag. However, if you use XHTML, <div /> is exactly equivalent to <div></div>.

[Snookerman]

I see this is more complicated than I thought.

If you've set up the page properly
Could you please show us how to do this, how to set it up so it will be rendered as xhtml?

[Twey]

If you're on Apache, I generally recommend adding a handler for a new extension:
AddType application/xhtml+xml .xhtml .xhtYou can also, if you have server-side scripting support, send the header manually, with something like (PHP):
header('Content-Type: application/xhtml+xml; charset=utf-8');