Unquoted Attribute Values?

I’m currently working on the Product Landing Page project, and every so often I run my code through an HTML validator to make sure there aren’t any errors. When I ran my code through however, the validator said that trailing slashes on the self closing element tags would interfere with unquoted attribute values…Under what circumstances would you want, or need, to use unquoted attribute values? I didn’t even realize you could do that.

You don’t want or need it, so I can’t tell you why you would, but you really shouldn’t.

HTML is a forgiving and pretty resilient language.


Here is the link the validator gives. Which has an example of why trailing slashes can be an issue.

That’s interesting. Good to know. I have been using quoted attributes for an element I type, but that github article states that a trailing slash should not be used to mark a self closing tag?

" However, the following reason does not concur with what the HTML standard states —

  • :x: I use a trailing slash to mark start tags as self-closing. "

Every time a FCC project asks me to place an element that is self closing, it will automatically place a trailing slash with a space at the end of the tag at the next step. If that doesn’t follow the HTML standard then why is it done automatically on FCC? Does the space before the trailing slash mitigate that issue? Thank you for any answers you can give, I hope my questions are making sense. Just trying to make sure I understand details.

It is an ongoing issue that has been partially fixed, at least for the tests. At one point some tests required closing slashes on elements where it is optional.

The code you see when going to a new step is pre-generated (seed code). Any such issues have to be fixed for all the steps which can be a lot of code to fix. It may be seen as having low importance compared to the effort needed to “fix” it everywhere as it is still valid HTML, even if some think the (unnecessary) trailing slashes are a problem (as seen in the validator link).

My guess is the “issue” comes from a mix of Prettier formatting (as seen in the link, it is an ongoing issue) and React developers being so used to seeing it (React requires elements to be closed) that it went unnoticed in the initial QA of the challenges.


As an aside. Propper semantic HTML has long been an issue in the dev world. It is slowly getting better, like for example, most people won’t use a div for a button anymore. Which was a real issue at one point (and still is to some extent, but as said, it is much better now).

I appreciate the thorough explanation. That is very interesting. I’ll have to pay close attention to these things moving forward.