Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

HTML spec compliance

See original GitHub issue

 ~ ¶ prettier --version 
2.7.1
 ~ ¶ echo '<!doctype html><html lang=en><title>hello</title></body>' | prettier --parser html 
[error] stdin: SyntaxError: Unexpected closing tag "body". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (1:50)
[error] > 1 | <!doctype html><html lang=en><title>hello</title></body>
[error]     |                                                  ^^^^^^^
[error]   2 |

Unclear why prettier is complaining about an “Unexpected closing tag” and linking to a random page of the HTML Standard. Perhaps use a correct HTML parser such as https://github.com/inikulin/parse5? The https://validator.w3.org/ reports no warnings or errors on this.

Issue Analytics

State:
Created a year ago
Comments:17 (12 by maintainers)

Top GitHub Comments

2reactions

thorn0commented, Sep 14, 2022

@jleedev Your points and use case are definitely valid, but if I’m not mistaken, you’re the first person on this issue tracker who requests this while the HTML support was added as early as 2018. So this sounds rather like a good idea for a plugin than something to be considered for the core.

Also, what would the expected behavior be? How is Prettier supposed to format such markup?
> console.log(parse5.serialize(parse5.parse(
  `<!doctype html><html lang=en><title>hello</title></body>`)))
<!DOCTYPE html><html lang="en"><head><title>hello</title></head><body></body></html>

Most of the time a code formatter isn’t expected to print tags that were absent in the input (head, tbody, etc). Prettier is a practical tool, it’s a “code formatter” in the first place, and only then an “AST printer”. Unlike JS, any HTML tag soup can be somehow parsed by a browser. If Prettier worked that way too, that would lead to a messy editing experience. Imagine, you entered the opening tag for a div but not the closing one yet and hit save. What happens next is the rest of the markup is reindented because it’s inside this div now. Theoretically, that’d be correct, but practically annoyingly inconvenient. So a trade-off needs to be made, and using the parser from Angular is such a tradeoff. The Angular team faced a similar dilemma themselves, and they decided that what makes sense for browsing doesn’t necessarily make sense for authoring. E.g., unclosed tags most of the time are unintentional mistakes, something for the developer to fix, so tools shouldn’t try to work them around, an explicit error is much more useful.

<b><p>html
<b><p>parsing
<b><p>algorithm

This is an example of what I’m talking about. It’d be less confusing if Prettier/Angular just refused to parse the code in this case. The current formatting/parsing is useless and looks like a bug to me.

I would appreciate the computer telling me that I have entered something strange, either by specifically calling out the parse that happened, or simply by showing me how browsers parse this

I agree, for educational and debugging purposes, it’d be really cool to be able to explore how browsers see things. But as I described above, in the day-to-day editing experience, this isn’t exactly what’s expected from a formatter.

Could use --parser=html5 to say “use the web compatible parser”

Yes. And this can be implemented as a plugin.

1reaction

alexander-akaitcommented, Sep 14, 2022

Yeah, but it is a breaking change, because now we don’t do it, not sure we can shipped it for v3

Top Results From Across the Web

HTML Standard

1.7.1 Serializability of script execution; 1.7.2 Compliance with other specifications; 1.7.3 Extensibility. 1.8 HTML vs XML syntax; 1.9 Structure of this ...

Standards - W3C

W3C develops these technical specifications and guidelines through a ... the standards for building and Rendering Web pages, including HTML, CSS, SVG, Ajax, ......

compliance.html [plain text] - Apple Open Source

<html><head><meta http-equiv="Content-Type" content="text/html; ... and is likely to formally adopted in a future revision of the specification.

Short Note on HTML conformance checking - TPGi

Errors. Errors are instances where the code you are checking does not conform to MUST level requirements defined in the HTML specification. 1....

HTML5test - How well does your browser support HTML5?

HTML5 defines rules for embedding SVG and MathML inside a regular HTML document. ... The Web SQL Database specification is no longer being...