Using of trailing slash in void element

Question

Since I use prettier extension to write HTML in VS code it adds trailing slashes in void elements when I format it. Then I put it into html validator to check for errors and it stated info like this "**Info: Trailing slash on void elements has no effect and interacts badly with unquoted attribute values. I dont get it. What its trying to say? if its a problem how can I get rid of this in prettier extension.

Note: there were no error in my html code.

I wanted the validator to state that the "coding is alright, good to go" something like that.

Answer 1

Straight to the answer: I think there's no way to filter that behaviour on Prettier (...and you shouldn't anyway).

Those 2 points you asked in your question, mean:

1. https://github.com/validator/validator/wiki/Markup-%C2%BB-Void-elements#trailing-slashes-in-void-element-start-tags-do-not-mark-the-start-tags-as-self-closing

Using or not using the trailing slash has no special meaning because self closing tag are as such by html specification not because you add the slash or not; Here you can read a discussion about that: https://github.com/orgs/mdn/discussions/242

2. https://github.com/validator/validator/wiki/Markup-%C2%BB-Void-elements#trailing-slashes-directly-preceded-by-unquoted-attribute-values

There's an example shown in the link you shared, where if the attribute is not quoted, its value will be set with the trailing slash following even if you intended to give it another meaning.

The question isn't perfectly focused and is mixing shades of truth.

The point is you can't configure Prettier to ignore those warnings but yet there's no value on hiding them.

And yet those warnings are valid because the scope of validation is wider than HTML5 itself. So Prettier won't ever change that and I agree with that.

People should stop using the trailing slash and avoid finding shortcuts to allow them. So stick with the warnings and don't color those as unnecessary hiding them under the carpet.