tags:

views:

248

answers:

10
<span class="drop" />

Can HTML spans be closed like this?

+7  A: 

No, this isn't supported by all browsers.
Here's an example with divs: http://jsbin.com/upovu

Kobi
+1 for helping me understand this better :)
wsanville
A: 

No http://www.w3schools.com/tags/tag_span.asp

The span tag is useful for hooking css onto a particular segment of text or part of a document. I can't think of any useful/sensible reason that a span tag would self close.

Finbarr
For example, a placeholder in which later insert content using JavaScript. (Yes, one could take it's parent and go inserting the span itself, but that might differ from page to page or be conditional etc...)
Konerak
+1  A: 

Since the tag provides no visual change by itself, it doesn't make sense to me to have an auto-closing span block with no content. The tag provides a way to add a hook to a part of a text or a part of a document. When the text is hooked in a span element you can add styles to the content, or manipulate the content with for example JavaScript.

However, to answer your question, yes the html code block posted is valid.

Ben.Vineyard
It may be, but the browsers don't get it right. As for "make sense" - you can always think on something: it can display an icon, float around, be draggable, highlight (think semi-transparent) or serve as a marker for JavaScript. I can go on and on :)
Kobi
+1  A: 

AS far as I know, this can only be used when you set the Doctype to Xhtml.

Kyle Sevenoaks
A: 

No, it's not. You can close like this ONLY if you can't insert in tag something For example: you can`t insert tag or text inside tag img, so you can close tag like this

Roman
+2  A: 

This is what the spec says for HTML 4.01 and for XHTML 1.0.

No, it's a container unlike an image or (deprecated) horizontal rule.

graham.reeds
Horizontal rules are not deprecated.
DisgruntledGoat
Quite correct - the values it accepts are deprecated.
graham.reeds
+15  A: 

Whether or not this is valid depends on your doctype, basically whether or not you're using XHTML or HTML.

When using XHTML, all major browsers will support self closing tags like the example you provided. Take the following example, this is valid because I'm specifying the page is using XHTML (in other words, HTML that is valid XML).

Update: Based on the very good comments below, browsers will only interpret all self closing tags correctly if the mime type is text/xml or application/xhtml+xml, see here for the details. For pages served as text/html (the vast majority), see here here for the tags that can be self closing.

This example will validate:

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

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <title></title>
</head>
<body>
    <h2>Will test page</h2>
    <p>some stuff <span class="drop" /></p>
</body>
</html>

However, this example is not valid, because I've switched the doctype to HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <title></title>
</head>
<body>
    <h2>Will test page</h2>
    <p>some stuff <span class="drop" /></p>
</body>
</html>

A few helpful references:

wsanville
Good way to point out that HTML (which came from SGML) is not XML. It just kind of looks like XML and you can apply tricks to kind of pretend it's like XML.
Anonymouse
"When specifying a doctype of XHTML, all major browsers will support self closing tags like the example you provided.". Completely wrong. Validators will accept it, but browsers won't. Browsers require the page to be served with an XML content type, before they'll support self closing tags like this.
Alohci
As @Alochi said, the HTML may be valid (which is cute), but what is the use if it isn't supported by browsers? Look at this example: http://jsbin.com/ujayu3/2 . According to your answer, nothing should be red. In fact, the browser behaves as if the span isn't closed;
Kobi
Thank you Alohci and Kobi, you've helped to clarify this much better than I did.
wsanville
+1  A: 

Easiest way to check is using http://validator.w3.org/

And the answer is no.

modz0r
+2  A: 

Testing the following fragment on validator.w3.org:

<p><span class="drop" /></p>

Validating as HTML 4.01 Strict

# end tag for "SPAN" omitted, but its declaration does not permit this

Validating as XHTML 1.0 Strict

# The uploaded document was successfully checked as XHTML 1.0 Strict.
Salman A
+1  A: 

You must write HTML compatible XHTML if you wish to serve it as text/html, and you must serve it as text/html if you want it to work in IE <= 8.

David Dorward