Is using nested spans in HTML 5 valid?
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 strong
, em
, time
, and etc, but also additional span
tags.
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.
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 <form>
tags, <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.