1
<div class='clear'></div>

/*which comes out to be below one in FF (seen via firebug) */

<div class='clear'/>

/*is this the last empty div declaration is semantically valid ? */
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
Gaurav Mishr
  • 572
  • 6
  • 21

7 Answers7

3

In XHTML, the construct is valid (and identically equivalent to your original source) but not HTML compatible.

HTML compatibility doesn't matter when it comes to viewing a representation of the DOM as seen by the browser. It does matter when writing markup.

As an aside, adding empty elements purely for styling purposes is ugly and should be avoided if possible. See http://www.ejeliot.com/blog/59 for some alternative methods for containing floats.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
2

If you're asking if those two tags are equivalent and valid: yes, yes they are.

See this question for practical considerations.

Community
  • 1
  • 1
Cory Petosky
  • 12,458
  • 3
  • 39
  • 44
  • 1
    Not for pure HTML, though. There the latter one would be utterly invalid :-) – Joey Nov 17 '09 at 12:34
  • I thought we all switched to XHTML in 2002? :) – Cory Petosky Nov 17 '09 at 12:41
  • I switched away from XHTML in 2002 when I came to the conclusion that writing HTML compatible XHTML was more trouble then it was worth when I could just write HTML instead. – Quentin Nov 17 '09 at 12:50
  • What's the benefit to writing HTML-compatible XHTML? (Most of the things I do on the web use only simple (X)HTML constructs, I'm not an expert in this area) – Cory Petosky Nov 17 '09 at 12:59
  • 1
    HTML compatible XHTML works when you serve it as text/html. If you use the correct content type (application/xhtml+xml) then Internet Explorer will ask if you want to open it in another application or save it to disk. – Quentin Nov 17 '09 at 13:00
1

Yes, why wouldn't it be?

David M
  • 71,481
  • 13
  • 158
  • 186
1

According to the HTML 4.01 DTD <div /> is not valid.

jensgram
  • 31,109
  • 6
  • 81
  • 98
0

A DIV is a block level container. The second example can't contain anything... so my bet would be no (for an HTML4 doctype)

If you want to use a dummy element for clearing purposes - have you considered <br />?

Edit

There are more effective ways of clearing than using using a block level container. Applying a clear class to <br /> is one example - but 'overflow: hidden' on the parent element is usually much more elegant.

codeinthehole
  • 8,876
  • 3
  • 25
  • 34
  • A div does get used to clear in a container. If you have items floating, without a clearing div
    your container will not expand to the height of the floating divs within it. So yes, a div like this is useful, and yes I believe this is valid syntax.     – Zoidberg Nov 17 '09 at 12:32
  • yes i have considered
    too but i was wondering for
    Cool ! stack overflow is damn fast
     – Gaurav Mishr Nov 17 '09 at 12:32
  • 1
    @Zoidberg: there are more effective ways of clearing than using using a block level container. Applying a clear class to
    is one example - but 'overflow: hidden' on the parent element is usually much more elegant.     – codeinthehole Nov 17 '09 at 12:36
  • We never stop learning! I took a course and the CSS instructor had said to use a DIV, he was a smart guy, but perhaps being a CSS guy, you don't have your head in HTML standards as much. – Zoidberg Nov 17 '09 at 12:48
  • Basically, I think there are many ways of achieving the same thing - preference comes into it, but there are core principles that are worth sticking to. One that I like to follow, is to try to use mark-up only for marking content .. which had always made me feel using extra syntax for clearing was undesirable, so I avoid doing so whenever possible. I don't envy people who are instructing on courses, because available techniques move so quickly. – codeinthehole Nov 17 '09 at 12:59
0

Whether this is valid or not depends on the DOCTYPE of the document you are writing. I would suggest to get a definitive answer you try the here:

http://validator.w3.org/

Neil Foley
  • 1,763
  • 1
  • 13
  • 32
0
<div class='clear'></div>

and

<div class='clear'/>

both are same. Though i prefer former one over the later.

Rakesh Juyal
  • 35,919
  • 68
  • 173
  • 214