Can <Span> Tags Have Any Type of Tags Inside Them

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.

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.

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

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 I declare a span tag inside a div tag?

you can have span tag inside div tag.

since span is an inline tag, by adding display : block or inline-block to span tag you can give it signifigance for its style to be visible.

 #menu1 a:visited {

    display: inline-block;
    color: #00ff00;
    }

http://jsfiddle.net/pmahent/j2dfd8r0/6/

Is it bad to put span / tags inside option / tags, only for string manipulation not styling?

From the HTML 5spec:

Content model:
If the element has a label attribute and a value attribute: Nothing.
If the element has a label attribute but no value attribute: Text.
If the element has no label attribute and is not a child of a datalist element: Text that is not inter-element whitespace.
If the element has no label attribute and is a child of a datalist element: Text.

So depending on context there are two things that you can put inside an <option> — text or nothing at all — you may not put a <span> or any other element there.

From the HTML 4.01 spec:

<!ELEMENT OPTION - O (#PCDATA)         -- selectable choice -->

(Even the HTML 3.2 and HTML 2 specs say: <!ELEMENT OPTION - O (#PCDATA)*>)

An option element cannot have any child elements. So yes, it is bad.

Can <Span> Tags Have Any Type of Tags Inside Them