ansaurus

Question

Is there a difference between <div /> and <div></div>?

Answer 1

+11 A:

If I remember right - <div /> is invalid. Use <div></div> if you want it to work everywhere. The closing tag is required, so doing things like <div class="Clear" /> won't work.

All grouping elements will behave the same way. You'll see the same behavior with both DIV and SPAN.

EDIT: Found this link while looking at the link in the answer posted by @Donut - its a matrix that shows which elements have an optional closing tag requirement (among other things.) Looked interesting, so I thought I'd post it here to share with everyone else as well.

Scott Ivey 2009-09-11 14:23:26

+ 1 for correct answer. I edited this answer only to make the html tag show up. (marked it as code)

David Stratton 2009-09-11 14:25:34

Alternatively, you can use < and > in an answer (of course this is a comment and the rules are different)

pavium 2009-09-11 14:29:42

Yeah - totally wasn't thinking when answering that one - thanks for fixing it for me :)

Scott Ivey 2009-09-11 14:33:01

I thought span was an inline element.

Joel Coehoorn 2009-09-11 14:35:34

...not to say span's end tag isn't required, though. It's just confusing in the context of the preceding sentence.

Joel Coehoorn 2009-09-11 14:37:35

yeah, you're right. They are both GROUPING elements, not necessarily block. I'll update the answer to clarify.

Scott Ivey 2009-09-11 14:39:05

Answer 2

+21 A:

<div /> is not a valid markup. A self-closing tag is not permitted.

You need to use the full version <div></div>.

A self closing div tag would make no sense, since it will result in an empty div. An empty div is usually not rendered by most of the browsers.

Developer Art 2009-09-11 14:23:37

Clearly, this seems to be the correct answer. I'm not understanding, though, if <div /> is invalid, why it still affects the stuff above it on the page as I hoped it would. I see this in FF3, FF2, IE6, and IE7. If I remove the self-closing div entirely, the page definitely behaves differently.

Sterno 2009-09-11 14:30:16

It's only invalid under HTML 4.01. In the absence of a DOCTYPE, browsers are permitted to be more lenient in what they accept.

kdgregory 2009-09-11 14:34:18

Because the <div/> is erroneously treated by browsers as a not yet closed <div> tag. So everything that goes after it is considered to be inside of it. Since the tag is never finished in the rest of the document, the document itself is malformed and results in rendering discrepancies.

Developer Art 2009-09-11 14:36:11

@Sterno, i guess it just depends on how each browser's rendering engine deals with invalid doctype markup.

Chad 2009-09-11 14:36:30

<div /> is valid (in XHTML), but if your XHTML is processed as HTML (i.e. by being served with a text/html content-type instead of the correct application/xhtml+xml) then it will be processed as tag soup and treated as an opening tag not a self-closing tag.

David Dorward 2009-09-11 14:39:02

Answer 3

A:

The first option is not valid html; the second is. <div /> really confuses IE, so always go for <div><div/>.

ilivewithian 2009-09-11 14:25:29

fixed html tags, sentence structure.

Joel Coehoorn 2009-09-11 14:36:24

Answer 4

+3 A:

self terminating tags are valid in XML, but not in this case for HTML

Nico 2009-09-11 14:25:45

Answer 5

A:

why would you have a empty div tag on a page? <.../> tags are for tags with no contents.

Chad 2009-09-11 14:25:52

Well, it's true, I found out I did want a <br> rather than a div. Really, it was the clear:both behavior that I wanted to make the page elements above it align correctly.

Sterno 2009-09-11 20:12:03

Answer 6

+19 A:

Donut 2009-09-11 14:26:25

Scott Ivey 2009-09-11 14:31:15

Answer 7

+6 A:

It depends on the DOCTYPE that you're using.

For XHTML, which is XML, the two tags are equivalent. You would signal this to the browser by including one of the following DOCTYPEs as the first line in your page:

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"&gt;

For HTML 4.01, which is what all (?) browsers assume when there's no DOCTYPE, certain tags must be expressed as open-close. Most of the block-level tags require this, including such non-markup tags as <SCRIPT>. If you look at the WDG HTML documentation, you'll see whether a particular tag requires open-close or can be expressed as an empty tag, via the "syntax" item:

Syntax      <DIV>...</DIV>

kdgregory 2009-09-11 14:32:35

Browsers switch between XML parsing and tag soup parsing based on the content-type, not the Doctype. The Doctype switches between Quirks and Standards mode, which has little impact on how the markup is parsed (but lots in how CSS and JS is treated).

David Dorward 2009-09-11 14:40:03

ansaurus

tags:

views:

answers:

Is there a difference between <div /> and <div></div>?

related questions