What Elements Can a Span Tag Contain in HTML5

What elements can a span tag contain in HTML5?

Only inline elements may be contained within inline elements. span is an inline element. So, tags like a, img, sup, etc. can go within a span, but block level elements like div and p cannot.

UPDATE

In reality, different elements which default to inline display behave differently. Some "inline" elements may allow block elements (a for example), while others don't (like span).

If you're interested in what an HTML tag may contain, your most official source is the WHATWG page on HTML elements. You can check any HTML element and see what content is permitted (see 'Content Model' for each element):

http://www.whatwg.org/specs/web-apps/current-work/multipage/#auto-toc-4

Here's the definition of the span tag, which indicates that only 'phrasing' content is allowed.

http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-span-element

Can span tags have any type of tags inside them?

The span element is an inline element, which should contain only other inline elements and no block elements.

From the spec:

Generally, block-level elements may
contain inline elements and other
block-level elements. Generally,
inline elements may contain only data
and other inline elements. Inherent in
this structural distinction is the
idea that block elements create
"larger" structures than inline
elements.

The generic block-level grouping element is the div. The generic inline-level grouping element is the span.

Again, from the spec:

The DIV and SPAN elements, in
conjunction with the id and class
attributes, offer a generic mechanism
for adding structure to documents.
These elements define content to be
inline (SPAN) or block-level (DIV) but
impose no other presentational idioms
on the content.

Is it valid to have a span tag inside i tag?

Yes, it is valid to have a <span> tag as the content of an <i> tag. However, it is not valid to have a <div> tag as the content of an <i> tag.

See the MDN docs for <i> tag here.

Permitted content : Phrasing content.
Tag omission : None, both the starting and ending tag are mandatory.
Permitted parents : Any element that accepts phrasing content.

The brief excerpt above from the MDN docs shows the permitted content for <i> tag as Phrasing content.

See relevant sections of the Phrasing content docs below.

Phrasing content defines the text and the mark-up it contains. Runs of phrasing content make up paragraphs.
Elements belonging to this category are <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> and plain text (not only consisting of white spaces characters).
A few other elements belong to this category, but only if a specific condition is fulfilled:
<a>, if it contains only phrasing content
<area>, if it is a descendant of a element
<del>, if it contains only phrasing content
<ins>, if it contains only phrasing content
<link>, if the itemprop attribute is present
<map>, if it contains only phrasing content
<meta>, if the itemprop attribute is present

Can you have a span within a span ?

HTML4 specification states that:

Inline elements may contain only data and other inline elements

Span is an inline element, therefore having span inside span is valid.
There's a related question: Can <span> tags have any type of tags inside them? which makes it completely clear.

HTML5 specification (including the most current draft of HTML 5.3 dated November 16, 2017) changes terminology, but it's still perfectly valid to place span inside another span.

What elements can be contained within a a tag?

Inline elements ( a, span, strong, em among others ) can contain other inline elements and text nodes. An anchor can contain a span, which can contain a text node.

Generally, block-level elements may
contain inline elements and other
block-level elements. Generally,
inline elements may contain only data
and other inline elements. Inherent in
this structural distinction is the
idea that block elements create
"larger" structures than inline
elements.

From http://www.w3.org/TR/html401/struct/global.html

As noted in other answers, you can't nest an a in an a.

HTML5 microdata: span content?

Yes, this is wrong. Neither Microdata nor HTML5 define a content attribute for the span element.

Several people wanted to use it, see for example the code in these questions:

Hide Microdata property value in 'content' attribute?
Categories for Product in schema.org?
Is the "content" attribute valid for the <span> tag > if so is it a good practice?
schema.org product availability tags markup

I’m not sure where exactly this confusion is coming from.

(It doesn’t help that Google’s Structured Data Testing Tool incorrectly uses the content attribute instead of the element content; but at least all other Microdata parsers seem to do it correctly.)

Maybe some people got confused because RDFa (but not Microdata) defines and allows the content attribute for span. See HTML+RDFa’s Extensions to the HTML5 Syntax:

For the avoidance of doubt, the following RDFa attributes are allowed on all elements in the HTML5 content model: @vocab, @typeof, @property, @resource, @prefix, @content, @about, @rel, @rev, @datatype, and @inlist.

Is a span tag with a href attribute considered valid?

Well, that is pretty clear…

But if you want it to behave like a link, you can wrap it in an anchor tag, such as

<a href="http://www.example.com"><span>My span is a link !</span></a>

Displaying an element similar to p inside a span?

p has a meaning.

If your content matches p’s definition, you should use p. Then you should use a div instead of a span (unless there is no other suitable candidate):

<div>
  <p>…</p>
</div>

If your content doesn’t match p’s definition, you shouldn’t use p. Then you could use span instead of p (if there is no other suitable candidate):

<span>
  <span>…</span>
</span>

span and div don’t have meanings. So you only have to consider where they are placed syntactically (block vs. inline). You can swap them without losing/changing any semantics:

<div>
  <span>…</span>
</div>

<div>
  <div>…</div>
</div>

Note that all this doesn’t have anything to do with how these elements are styled. You can style a block-level element with CSS so that it appears as inline and vice-versa: display:inline; resp. display:block;.

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>

b vs span in HTML5

The first example is fairly straightforward. You are trying to make "CS 101 Final" catch the eye, because it's more important than the "Your score for" text is. So that's

Your score for <strong>CS 101 Final</strong> is 42%.

With <b>, you're not trying to catch the eye. You want the whole text to be read evenly, but you marking certain words and phrases as being of use to the reader (utilitarian purposes). Frankly, there aren't many uses for this. The spec gives examples of keywords in an adventure game and in a report but it's not easy to find many uses.

The second example is trickier. Here, "Answer" is being stylistically offset. The word "Answer" is definitely not more important than the actual answer text, nor does it need to be brought to the particular attention of the reader for any other reason. It's just being marked as distinct from the actual answer text. However, the spec, in the "Common idioms without dedicated elements" section, suggests the use of <b> to mark the speaker in a conversation, and using it could be seen as being analogous to that. But basically it's just styling, so <span> with a class is likely the best choice.

What criteria do I use to decide on a b or a span tag?

As you can see from the above, it's a process of elimination. Is <strong> or <em> or <cite> appropriate? Yes - use them. No - Is <b> or <i> appropriate? Yes - use them. No then use <span>

What Elements Can a Span Tag Contain in HTML5