Can a span be closed using ?

<span class="drop" />

Can HTML spans be closed like this?

-------------Problems Reply------------

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:

  • W3C Validator
  • XHTML vs HTML

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

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.

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.

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

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.

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

And the answer is no.

  • In HTML: you cannot.
  • In XHTML: you can.
  • In HTML Compatible XHTML: you cannot.

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.

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.

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

Category:html Views:0 Time:2010-05-12
Tags: html css layout

Related post

  • Problems adding HTML .before .after an img with JQuery - JQuery closing tags 2011-05-11

    Alright, so I am trying to close up an img within a (I know, I know... not my template) using JQuery. What is happening is this - JQuery is closing the tag I am adding with the .before... I don't want it closed until the .after I am adding... I reall

  • Exception safety/handling with .Net HtmlTextWriter? 2008-11-13

    I am using a .Net HtmlTextWriter to generate HTML. try { htw.RenderBeginTag( HtmlTextWriterTag.Span ); htw.Write(myObject.GenerateHtml()); htw.RenderEndTag( ); } catch (Exception e) { GenerateHtmlErrorMessage(htw); } In this example, if an error exce

  • How to search and replace by comparing two PHP arrays 2009-11-15

    I have this string where I've put all opening tags into (array) $opened and all closing tags into (array) $closed, like so: '<div> Test </div> <div> <blockquote> <p>The quick</p> <blockquote> <p>brown f

  • jQuery slideToggle: Hiccups after sliding up in IE 8 2010-02-11

    I am using the jQuery slideToggle() function to show and hide a span. Here is my code: $(".slideButton") .click(function(event) { $(".slideText").slideToggle("slow"); event.preventDefault(); }); <span class="slideText" style="display:none"> bla

  • How to index a MySQL table, where 99% of time I need to query 1% of the data 2010-02-25

    Hi I have a MySQL table, let's say it is a helpdesk ticketing system. It has a CLOSED column, which I want to index. 99% of time, I will need to only select on OPEN tickets, so something like "SELECT * FROM TICKET_TABLE where CLOSED='N'; " And over t

  • Empty UL inside LI element 2010-05-20

    Can anyone explain me why <ul> elementa cannot be empty? And why this HTML: <ul> <li class="header"> <a href="#">Work</a> <ul/> </li> <li class="header"> <a href="#">New</a> <ul/> <

  • What is the best way to change the cursor in JQuery 2010-07-08

    I am new to JQuery. I am trying to add some code in my HTML web page to change the cursor, but I am not sure if it is the best way to do it using JQuery alone rather than doing some self-custom declaration in an external CSS. (I don't know if JQuery

  • Using jQuery slideToggle() without display:none? 2010-09-20

    I'm trying to use jQuery's slideToggle function to show or hide a panel which has been hidden using CSS position, rather than display:none (as this causes issues with a Google Map in one of my panels). At the moment I'm just hiding and showing the pa

  • How to espace when calling jquery append? 2011-08-29

    I append the following html: <span sytle="color:#000000" /> The color value is stored in a variable: var my_color = "#000000"; var a = $("#a"); Below is what I have tried: a.append('<span style="color: ' + my_color + '"</span>'); Is th

  • Why these links don't change the height of my div? 2011-09-08

    The links don't change the "holder" height at all, really I don't know what is wrong HTML: <div id="holder"> <a class="button" href="#"><span>home</span></a> <a class="button" href="#"><span>example</span

  • If I already have a table of tickets set up to split into pages, how can I make it have page links at the bottom? 2011-09-18

    This question is answered. Click here to see the answer that answered my question. Edit: I still don't know exactly how to do this. Could someone help? I get the fact that it's called "pagination" but I don't know how to make it display page links at

  • How to increase the height of my dropdown? 2011-12-28

    I have a dropdown in HTML. When I hover on it, it expands. I added a new entry in the dropdown, and when I hover on it, I want my new entry visible completely (I added Comp3 in dropdown. I can see the upper part of it, but not completely Comp3). I tr

  • Why I can't use a style in table? 2012-02-25

    <table border="0"> <tr> <td width="230px"> <span style="size:11px;">NAZWA</div> </td> <td width="230px;"> </td> </tr> </table> but it doesn't works. Also any style with class and id doesn't

  • What are all the valid self-closing elements in XHTML (as implemented by the major browsers)? 2008-09-18

    What are all the valid self-closing elements (e.g. <br/>) in XHTML (as implemented by the major browsers)? I know that XHTML technically allows any element to be self-closed, but I'm looking for a list of those elements supported by all major b

  • How do I align spans or divs horizontally? 2008-10-22

    My only problem is making them line up three-across and have equal spacing. Apparently, spans can not have width and divs (and spans with display:block) don't appear horizontally next to each other. Suggestions? <div style='width:30%; text-align:c

  • ASP.NET GridView second header row to span main header row 2008-11-24

    I have an ASP.NET GridView which has columns that look like this: | Foo | Bar | Total1 | Total2 | Total3 | Is it possible to create a header on two rows that looks like this? | | Totals | | Foo | Bar | 1 | 2 | 3 | The data in each row will remain unc

  • Is writing self closing tags for elements not traditionally empty bad practice? 2008-12-08

    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? Pe

  • How can I remove unused, nested HTML span tags with a Perl regex? 2009-03-20

    I'm trying to remove unused spans (i.e. those with no attribute) from HTML files, having already cleaned up all the attributes I didn't want with other regular expressions. I'm having a problem with my regex not picking the correct pair of start and

  • IE8 & FF XHTML error or badly formed span? 2009-07-23

    I recently have found a strange occurrence in IE8 & FF. The designers where using js to dynamically create some span tags for layout (they were placing rounded corner graphics on some tabs). Now the xhtml, in js, looked like this: <span class=

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.081 (s). 11 q(s)