HTML code style: No trailing slash, add note about prettier

[rubiesonthesky]

Description

• Remove section about trailing slash, it's conflicting with Prettier HTML code guidelines are conflicting with Prettier format #20523
  It seems that there was already comment about if the section is relevant or not.
• Add section about format, copied from Javascript code style page
• Added heading "Complete HTML document"
  This is not so clear change, but I feel it's highly confusing that there are "general guidelines" and then it's said that these only affect small subset of examples. When I first reading this page, it seemed to say that these general guidelines do not affect if you are just having snippet of code. This change can be dropped off from this PR, if it does not fit.

[github-actions]

Preview URLs

• /en-US/docs/MDN/Writing_guidelines/Writing_style_guide/Code_style_guide/HTML

External URLs

URL: /en-US/docs/MDN/Writing_guidelines/Writing_style_guide/Code_style_guide/HTML
Title: Guidelines for styling HTML code examples

• https://prettier.io/ (1 time) (Note! This may be a new URL 👀)
• https://prettier.io/docs/en/index.html (1 time) (Note! This may be a new URL 👀)

[teoli2003]

I will only ask about it in our Editorial meeting to be sure, so meanwhile, I'm "Requesting changes" to be sure it is not merged by error.

I don't think there will be any opposition from the content peers, but we never now.

[Rumyra]

None from me - looks good - thanks @rubiesonthesky & @teoli2003

[teoli2003]

Thanks!

[hsivonen]

I find it sad that the course of action here is to change MDN instead of changing Prettier. HTML permitting the no-op slashes means that the HTML spec doesn't ask people to waste time modifying their Appendix C-era markup, but I think the history of this aspect of the spec doesn't support the position of adding slashes as a matter of automated formatting. To the extent readers write code manually without the same tool, the slashes interact poorly with another HTML feature: unquoted attribute values (demo). Prettier itself doesn't trip over this: It adds a space before the slash and also adds quotes, even though either one would be sufficient. The result looks like what was needed to make Netscape 4 tolerate Appendix C, which makes the result have code smell of obsolete practices. Similar energy as recommending the "Web-safe" intersection of the Windows and Mac 256-color palettes.

[rubiesonthesky]

I think, maybe this should be considered again before taking Prettier actually in use with full force. There have been some confusion in issues (at least 1 issue, where it was not clear that <br> and <br /> are same thing), and some PRs have tried to remove the trailing slashes as unnecessary. Though one could argue that these are same kind of things than adding / removing semicolons or commas.

Since browsers remove the trailing slashes from HTML when looking the code, I think maybe it would be better to not use them. But I think, maybe this should be discussion that should be opened in some visible place, so the decision would be found easily later on and there maybe could be wider arguments why / why not.

Here is more discussion about this and link to relevant discussion in Prettier repository #21036

[OnkarRuikar]

I think we better open a community discussion quickly before we have all valuable inputs scattered over PRs, and before people spending time and energy doing the same debate over multiple PRs.

Ping @schalkneethling

[wbamberg]

I think we better open a community discussion quickly before we have all valuable inputs scattered over PRs, and before people spending time and energy doing the same debate over multiple PRs.

Ping @schalkneethling

-> mdn/mdn-community#242 I hope I have done a reasonable job of capturing the issue there.