<span class="drop" />
Can HTML spans be closed like this?
Asked
Active
Viewed 2.6k times
10 Answers
50
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h2>Will test page</h2>
<p>some stuff <span class="drop" /></p>
</body>
</html>
A few helpful references:
-
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. – Anonymoose May 12 '10 at 07:59
-
3"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 May 12 '10 at 08:18
-
2As @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 May 12 '10 at 10:43
-
1Thank you Alohci and Kobi, you've helped to clarify this much better than I did. – wsanville May 12 '10 at 12:16
-
I wanted to point out that even if the doctype is XHTML and passes the w3c validator browsers will interpret the document in unexpected ways. For example, if you add this to the first example: '
some stuff I should not be part of the span!
'. Based on the XML document the span tag is closed, so the rest of the content should be part of the parent paragraph and not the span itself. However, when you open it in Chrome and inspect the DOM it will look like this: 'I should not be part of the span!' which is incorrect. – Jose Cifuentes Feb 26 '16 at 17:22 -
If anyone knows why that happens and can shed more light on this issue, please post your findings. – Jose Cifuentes Feb 26 '16 at 17:27
13
No, this isn't supported by all browsers.
Here's an example with divs: http://jsbin.com/upovu
Kobi
- 135,331
- 41
- 252
- 292
-
3+1 This is the real point here: even if the XHTML spec technically allows for self-closing tags, if the browsers don't support it it hardly matters. :( – devios1 Nov 29 '12 at 23:20
3
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
- 262,204
- 82
- 430
- 521
1
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.
Quentin
- 914,110
- 126
- 1,211
- 1,335
0
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
- 1,149
- 8
- 14
-
1It 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 May 12 '10 at 07:51
0
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
- 16,230
- 17
- 74
- 137
-1
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
- 31,350
- 13
- 63
- 94
-
4For 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 May 12 '10 at 07:50
-
Here's a use for it:
This is the paragraph we need to link to, with either of two anchor names.
– Dave Burton Jun 04 '18 at 23:54 -
I find no information about this in the provided link. Has the source been updated? Because as it stands, the link is not relevant for the question or answer. – Nasso Dec 15 '21 at 13:22
-1
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
Roger Lipscombe
- 89,048
- 55
- 235
- 380
Zhivago
- 169
- 1
- 2
- 10