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.

Tags:

Html

Validation

Recent Posts