Ran into a problem on my web page where the footer in the master page wasn't displaying correctly for one particular page. On that page, I had a
<div style="clear:both" />
at the bottom.
After banging my head at it for a while, I saw that all I needed to change to get the footer to show up properly was to change that line to:
<div style="clear:both"></div>
I don't understand why writing it this way should produce a different result. Aren't they semantically equivalent? I checked and double-checked that this was the only change I made. Flipping back and forth between the two would change the behavior of the footer.
So my question is... are those not equivalent? What's the difference between them?
Edit: The odd part is, they both do what I want to the stuff above them in the page. I mean, in the self-closing div tag's case, if I remove it entirely the page definitely reacts, so it must be doing SOMETHING with it and not just ignoring it completely.
The first option is not valid html; the second is.
<div />
really confuses IE, so always go for<div><div/>
.You would not be able to put content in a "
<div />
".self terminating tags are valid in XML, but not in this case for HTML
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:
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:<div />
is valid depending upon yourDOCTYPE
It's valid XHTML Transitional & XHTML StrictDEMO: http://wecodesign.com/demos/stackoverflow-1411182.htm
VALIDATION: http://validator.w3.org/check?uri=http%3A%2F%2Fwecodesign.com%2Fdemos%2Fstackoverflow-1411182.htm&charset=%28detect+automatically%29&doctype=Inline&group=0
If you want to use a single tag and not have a useless empty
<div>
on the page, try using a<br />
for your clears.Some may question my usage of
!important
here; however, this is the reason why it exists! We know that when we clear something, we want it to do a specific task no matter what.Take for example:
In this particular case, you would add
!important
to your hidden class, because it's pretty clear that it's supposed to hide stuff no matter what<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.