I have noticed jQuery (or is it Firefox) will turn some of my <span class="presentational"></span> into <span class="presentational" />
Now my question is, is this okay to write my markup like this? Will any browsers choke on it?
Personally, I think it looks cleaner to do <span class="presentational" /> if it's going to be empty.
An addition to the other answers: in IE, having elements such as <span /> in your mark-up will cause all kinds of problems with DOM traversal methods in JavaScript. Have a look at the following XHTML document:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<script type="text/javascript">
function show() {
var span = document.getElementById("span");
alert(span.innerHTML);
}
</script>
</head>
<body onload="show();">
<p id="p1">Paragraph containing some text followed by
an empty span<span id="span"/></p>
<p id="p2">Second paragraph just containing text</p>
</body>
</html>
The idea is that when the page loads, the JavaScript will get a reference to the empty span and display its HTML contents. That will be an empty string, right? Not in IE it won't. In IE, you get all the content after the span in the whole document:
</P>
<P id=p2>Second paragraph just containing text</P>
Also, the second <p> shows up in the span's childNodes collection. That same <p> is also in the body's childNodes collection, meaning a node can effectively have multiple parents. This isn't terribly good news for scripts that rely on traversing the DOM.
I have also blogged about this.