Can a Span Be Closed Using <Span />

Can a span be closed using span / ?

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

Invalid span tag. Expected closing br tag

A span is an inline element, and a smallest element of xhtml tree.
styling tags like <u>, <i>, <strong> can be reside there.

A <br> or a <hr> is a full width element. Hence it is suggested to use <br> inside a <div></div>

When to use span instead p ?

You should keep in mind, that HTML is intended to DESCRIBE the content it contains.

So, if you wish to convey a paragraph, then do so.

Your comparison isn't exactly right, though. The more direct comparison would be

When to use a <div> instead of a <p>?

as both are block level elements.

A <span> is inline, much like an anchor (<a>), <strong>, emphasis (<em>), etc., so bear in mind that by it's default nature in both html and in natural writing, that a paragraph will cause a break before and after itself, like a <div>.

Sometimes, when styling things — inline things — a <span> is great to give you something to "hook" the css to, but it is otherwise an empty tag devoid of semantic or stylistic meaning.

Prevent line-break of span element

Put this in your CSS:

white-space:nowrap;

Get more information here: http://www.w3.org/wiki/CSS/Properties/white-space

white-space

The white-space property declares how white space inside the element is handled.

Values

normal
This value directs user agents to collapse sequences of white space, and break lines as necessary to fill line boxes.

pre
This value prevents user agents from collapsing sequences of white space. Lines are only broken at newlines in the source, or at occurrences of "\A" in generated content.

nowrap
This value collapses white space as for 'normal', but suppresses line breaks within text.

pre-wrap
This value prevents user agents from collapsing sequences of white space. Lines are broken at newlines in the source, at occurrences of "\A" in generated content, and as necessary to fill line boxes.

pre-line
This value directs user agents to collapse sequences of white space. Lines are broken at newlines in the source, at occurrences of "\A" in generated content, and as necessary to fill line boxes.

inherit
Takes the same specified value as the property for the element's parent.

Are (non-void) self-closing tags valid in HTML5?

(Theoretically) in HTML 4, <foo / (yes, with no > at all) means <foo> (which leads to <br /> meaning <br>> (i.e. <br>>) and <title/hello/ meaning <title>hello</title>). I use the term "theoretically" because this is an SGML rule that browsers did a very poor job of supporting. There was so little support (I only ever saw it work in emacs-w3m) that the spec advises authors to avoid the syntax.
In XHTML, <foo /> means <foo></foo>. This is an XML rule that applies to all XML documents. That said, XHTML is often served as text/html which (historically at least) gets processed by browsers using a different parser than documents served as application/xhtml+xml. The W3C provides compatibility guidelines to follow for XHTML as text/html. (Essentially: Only use self-closing tag syntax when the element is defined as EMPTY (and the end tag was forbidden in the HTML spec)).
In HTML5, the meaning of <foo /> depends on the type of element:
- On HTML elements that are designated as void elements (essentially "An element that existed before HTML5 and which was forbidden to have any content"), end tags are simply forbidden. The slash at the end of the start tag is allowed, but has no meaning. It is just syntactic sugar for people (and syntax highlighters) that are addicted to XML.
- On other HTML elements, the slash is an error, but error recovery will cause browsers to ignore it and treat the tag as a regular start tag. This will usually end up with a missing end tag causing subsequent elements to be children instead of siblings.
- Foreign elements (imported from XML applications such as SVG) treat it as self-closing syntax.

What is the difference between HTML div and span elements?

div is a block element
span is an inline element.

This means that to use them semantically, divs should be used to wrap sections of a document, while spans should be used to wrap small portions of text, images, etc.

For example:

<div>This a large main division, with <span>a small bit</span> of spanned text!</div>

Note that it is illegal to place a block-level element within an inline element, so:

<div>Some <span>text that <div>I want</div> to mark</span> up</div>

...is illegal.

EDIT: As of HTML5, some block elements can be placed inside of some inline elements. See the MDN reference here for a pretty clear listing. The above is still illegal, as <span> only accepts phrasing content, and <div> is flow content.

You asked for some concrete examples, so is one taken from my bowling website, BowlSK:

<div id="header">  <div id="userbar">    Hi there, <span class="username">Chris Marasti-Georg</span> |    <a href="/edit-profile.html">Profile</a> |    <a href="https://www.bowlsk.com/_ah/logout?...">Sign out</a>  </div>  <h1><a href="/">Bowl<span class="sk">SK</span></a></h1></div>

Can a Span Be Closed Using <Span />