Why does the browser go crazy when I write things

Question

I mean, aren't <div/> and <div></div> supposed to be exactly the same thing?

By browser I mean the latest Firefox and Internet Explorer. And by go crazy I mean ignore styles of tags that contain the <div/>.

Answer 1

aren't <div/> and <div></div> supposed to be exactly the same thing?

Only in XML. Are you serving your web page as XML (application/xhtml+xml)? If so you can use either, but you'd be sacrificing compatibility with IE versions before IE9.

If like most people you are serving an XHTML page as text/html, you must abide by the compatibility guidelines, one of which is that you must only use self-closing tags for elements that have an EMPTY content model, ie. the ones where in HTML you'd use a single tag with no close-tag (<img> et al).

Otherwise, you've just written what non-XML HTML parsers will see as a start-tag with no end-tag, which is likely to mess the page's nesting up. <div/> will put the whole of the rest of the page inside that div.

Answer 2

and are not same because div is a block element and can't be used as single line element

Answer 3

<div></div> tag is part of the HTML and XHTML standard, while <div/> is part of only the XHTML standard. At the top of your web page, you need to declare which version of HTML or XHTML you website is targeting.

Goto http://www.w3schools.com/ to learn the differences, and when and how to use either format.

Specifically, check this page out for a quick simple explanation - http://www.w3schools.com/xhtml/xhtml_html.asp.

Check out this page for more info on declaring your DOCTYPE/version: http://www.w3schools.com/tags/tag_doctype.asp

Answer 4

I went to the (W3C Validator) and input the following document into the fragment validator:

<div/>

When validated as HTML 4.01 it errors with this message:

The sequence

<FOO />

can be interpreted in at least two different ways, depending on the DOCTYPE of the document. For HTML 4.01 Strict, the '/' terminates the tag <FOO (with an implied '>'). However, since many browsers don't interpret it this way, even in the presence of an HTML 4.01 Strict DOCTYPE, it is best to avoid it completely in pure HTML documents and reserve its use solely for those written in XHTML.

And when validated as XHTML 1.0 it passes with a warning about UTF-8, not related to this.

So in short, the answer to your question is: because it's not valid.

Answer 5

Also note that sometimes certain browsers (namely internet explorer) sporadically removes empty divs, where both <div/> and <div></div> count as such. In such cases, I either use <div>&nbsp;</div> (when the div needs to be visible/block whatever) or <div><!----></div> (when the div is a placeholder for example, corner divs).