Is it standard in HTML 5 if we use span in span?
<span class="fake-input"> <span id="fake-input"></span> <span id="deftext">No file selectedspan</span> </span>
This looks like a job for a div:
<div class="fake-input"> <span id="fake-input"></span> <span id="deftext">No file selectedspan</span> </div>
If you wanted to take that further, you might be using
<input> tags, etc, but that's going further off topic.
Divs and spans have no semantic value or automatic styles; they're there for you to assign this to them. However, commonly you'd use divs for block elements, and spans for inline elements.
You won't get a validation error, but I don't see nested spans much these days.
Nesting span tags is valid HTML.
A span tag is non-semantic markup intended for grouping inline content, and is a valid wrapper for phrasing content. This includes tags like
time, and etc, but also additional
You can confirm this by pasting the following code into the W3C Markup Validator:
<!DOCTYPE html> <html lang="en"> <head><title>Nested Spans Test</title></head> <body> <span class="fake-input"> <span id="fake-input"></span> <span id="deftext">No file selectedspan</span> </span> </body> </html>
Also, keep in mind that valid HTML isn't as big a deal as you might think, as invalid HTML is unlikely to effect SEO rank or page display, so long as the markup can be parsed.
In a case like this, with a faux inputs being built out of
<span> tags, a much bigger concern should be accessibility and I would recommend looking into including proper
aria- attributes that expose the relationships and functionality of these elements to anyone using a screen reader or who isn't viewing them with your custom styles.