5

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>
4

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.

  • 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 '18 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 '18 at 14:43
9

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 directly answers the question, and should have been the accepted answer. – Manngo Jun 15 at 7:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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