Can Microdata Be Applied on Any Type of HTML Element

Can Microdata be applied on any type of HTML element?

Simply put, "Yes". Check out the Google page yourself to see them use it in different tags: https://support.google.com/webmasters/answer/176035?hl=en

microdata without span tag

You can use every HTML5 element for Microdata. But note that some elements have special rules for determining the value, and some elements come with additional requirements if used with Microdata.

If your question is if there is another inline HTML5 element that has no meaning (= span): no, there isn’t.

If your question is how to use span without the applied CSS: add a class to "your" span elements and overwrite any applied CSS with CSS’s class selector:

<span class="never-style-span-directly" itemprop="example">…</span>

CSS:

span {color:blue;}
.never-style-span-directly {color:inherit;}

SEO microdata in a div container?

Microdata can be used on any HTML element (but note that some elements come with special rules). So yes, re-use your existing markup.

Side note: you are not using the Breadcrumb type correctly; the itemprop="child" must be specified on an HTML element that is a descendant of the parent entry’s itemscope. So it’s not possible to use the child property in a ul (without nesting the list entries). See my answer to a question where the OP used similar markup.

Structured markup data of website name

Microdata can be used on any HTML5 element (while some elements come with special rules), so you don’t have to use the title element.

If you want to keep the markup in the head, or if you don’t have the site name as visible content on your homepage, you could use the meta element:

<head itemscope itemtype="http://schema.org/WebSite">
  <title>Welcome to Foobar!</title>
  <meta itemprop="name" content="Foobar" />
  <link itemprop="url" href="https://example.com/" />
</head>

But if you have the site name as visible content, for example in the page header, you could make use of it:

<header itemscope itemtype="http://schema.org/WebSite">
  <h1 itemprop="name"><a itemprop="url" href="https://example.com/">Foobar</a></h1>
</header>

Splitting schema.org Microdata over multiple divs or elements

No, a parser will probably see what you're suggesting as 3 separate Local Business entities.

But you can have other text between the various properties in http://schema.org/LocalBusiness as follows:

<div itemscope itemtype="http://schema.org/LocalBusiness">
  <a itemprop="url" href="url"><div itemprop="name"><strong>name</strong></div></a>
  <p>
     This paragraph is not used by schema.org
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit pretium
     massa, in consectetur velit. Vivamus aliquam, turpis in pellentesque pulvinar,
     lectus diam fermentum velit, quis fermentum arcu turpis in orci. Duis egestas
     urna vel velit suscipit mollis. Nulla sed diam massa.
  </p>
  <div itemprop="description">My Description</div>
</div>

How is Value determined for an Anchor Tag with Microdata?

The Microdata spec (which is now merely W3C Note) defines:

If the element is an a, area, or link element

The value is the absolute URL that results from resolving the value of the element's href attribute relative to the element at the time the attribute is set, or the empty string if there is no such attribute or if resolving it results in an error.

Exception: when the a/area/link element has an itemscope attribute, then the itemprop "value is the item created by the element", not the href value.

Why use Schema.org microdata to mark up web page elements?

This answer is primarily about the WebPageElement types (like SiteNavigationElement).

For WebPage, see my answer to the question Implicity of web page structure in Schema.org (tl;dr: it can be useful to provide WebPage, even for the current page).

For WebSite, similar reasons from the answer above apply. HTML doesn’t allow you to state something about the whole site (and, by the way, a Google rich result makes use of this type).

Schema.org is not restricted to HTML5.

Schema.org is a vocabulary which can be used with various syntaxes (like JSON-LD, Microdata, RDFa, Turtle, …), stand-alone or in various host languages (like HTML 4.01, XHTML 1.0/1.1, (X)HTML5, XML, SVG, …). So having other ways to specify that something is (or: is about; or: represents) a site-wide navigation, a table etc. is the exception rather than the rule.

But there can be reasons to use these types even in HTML5 documents, for example:

The HTML5 markup and the annotations from Microdata/RDFa are two "different worlds": a Microdata/RDFa parser is only interested in the annotations, and after successfully parsing a document, the underlying markup is of no relevance anymore (e.g., the information that something was specified in a table element is lost in the Microdata/RDFa layer).
By using types like WebPageElement, you can specify metadata that is not possible to specify in plain HTML5. For example, the author/license/etc. of a table.
You can use these types to specify data about something which does not exist on the current document, e.g., you could say on your personal website that you are the author of a table in Wikipedia.

That said, these are not typical use cases relevant for a broad range of authors. Unless you have a specific reason for using them, you might want to omit them. They are not useful for typical websites. Using them can even be problematic in some cases.

See also my Schema.org issue The purpose of WebPageElement and mainContentOfPage, where I suggested to deprecate WebPageElement and the mainContentOfPage property.

Microdata and not all content in same place

Wrap

Yes, you can wrap the whole content in such a div. You could also use the body or html element instead.

<body itemscope itemtype="http://schema.org/LocalBusiness">
  <!-- all "itemprop" in here will belong to this "LocalBusiness",
       unless they are nested under another "itemscope" -->
</body>

`itemref`

Another option is to use the itemref attribute. It allows you to add properties from anywhere on the page to an item.

<div id="a">
  <span itemprop="name">Seattle, WA</span>
  <img itemprop="image" src="img.jpg" alt="Sample Image">
</div>

<div itemscope itemtype="http://schema.org/LocalBusiness" itemref="a b c">
</div>

<span id="b" itemprop="telephone">(123) 456-6789</span>

<div>
  <p id="c" itemprop="description">some description text</p>
</div>

You have to make sure that these referenced properties are not nested under another itemscope, otherwise they get added to this item, too.

Hide

If you need to hide elements for Microdata, use link (for URI values) and meta (for any other string values) elements. These two elements are hidden by default in the browser stylesheets.

<div itemscope itemtype="http://schema.org/LocalBusiness">
  <meta itemprop="name" content="Seattle, WA">
  <link itemprop="image" href="img.jpg">
</div>

Hide Microdata property value in 'content' attribute?

In HTML5, the content attribute is only allowed on the meta element. Microdata doesn’t define it as global attribute either. But RDFa extends HTML to make content a global attribute.

According to your example, you are using Microdata. So you shouldn’t use the content attribute for span.

Microdata defines a way to add name-value pairs without having to mark up visible content: Microdata extends HTML5 to allow meta and link in body (in the future, this will be defined in the HTML5 spec directly; see the "Contexts in which this element can be used" for link and meta in the HTML 5.1 Editor’s Draft).

So instead of

<span itemprop="name" content="Generic Name Here"></span>

you should use

<meta itemprop="name" content="Generic Name Here" />

For schema.org, see Missing/implicit information: use the meta tag with content:

This technique should be used sparingly. Only use meta with content for information that cannot otherwise be marked up.

Can Microdata Be Applied on Any Type of HTML Element