27

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>
Improve this question
1

2 Answers 2

Reset to default
37

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.

Improve this answer
0
6

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.

Improve this answer
2
  • thanks for the answer, normally i don't use nested span either but i'm using pre-built template and i don't want go to all css files for a small change :). as long as it's valid i'm fine with it :D
    – mafortis
    Sep 28, 2018 at 3:03
  • @mafortis Gotcha. Yes, it's valid. In fact, if you take some HTML5 boilerplate, plug the code into the body, and run it through a validator, it won't flag anything.
    – Henry Visotski
    Sep 28, 2018 at 14:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.