Void tags like img are rendered with invalid closing tag
dillonkearns opened this issue · 2 comments
img is a void tag and is invalid and not supported in some contexts if it is rendered with a closing tag.
https://html.spec.whatwg.org/multipage/syntax.html#void-elements
This StackOverflow answer describes it a little bit more.
This W3C HTML validator, for example, gives an error with the following input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="http://example.com/asdf.jpg" alt="foo"></img>
</body>
</html>Error: Stray end tag img.
If you remove the closing </img> (and optionally do a self-closing img tag), the error goes away.
I've been using this library for testing some output in my elm-markdown end-to-end tests and realized that a few test cases are failing because it isn't recognizing the HTML output as equal because of these void elements rendering with closing tags.
Alright, I narrowed down the issue a bit more and this package is rendering valid output. Sorry for the noise!
I confirmed that this library is giving correct output here and added a test case in case you'd like to include it for future reference: #13.
This may have something to do with nesting, because it does appear the output of Html.String.toString 0 does include closing void tags, like </img>, in some cases. I pushed this workaround in my test runner, so it's not an issue for me:
dillonkearns/elm-markdown@0174a83
Just wanted to share for reference.