If i am not wrong a *div* was never allowed inside a *p* (because the
content model of *p*s is phrasing content
<https://stackoverflow.com/a/34683474/1658543>). I tested it:
HTML 2.0
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Is a in a p allowed? Lets see.</title>
</head>
<body>
<p><div></div></p>
</body>
</html>
results in
element "DIV" undefined.
The div element did not exist in html 2.0.
HTML 3.2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Is a in a p allowed? Lets see.</title>
</head>
<body>
<p><div></div></p>
</body>
</html>
results in
end tag for element "P" which is not open.
I dunno what happens here. Shouldnt the validator complain something like:
*divs
inside of ps are not allowed*?
HTML 4.1 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd";>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Is a in a p allowed? Lets see.</title>
</head>
<body>
<p><div></div></p>
</body>
</html>
Same message.
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>Is a in a p allowed? Lets see.</title>
</head>
<body>
<p><div></div></p>
</body>
</html>
results in
document type does not allow element "div" here.
Nice error message, thanks to the DTD.
HTML 5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Is a in a p allowed? Lets see.</title>
</head>
<body>
<p><div></div></p>
</body>
</html>
Back to ambiguous messages:
No p element in scope but a p end tag seen.
Background: HTML5 allows some end tags to be left away - a never ending
source of confusion and bugs in my opinion. The gory details are listed here
<http://w3c.github.io/html/syntax.html#optional-tags>. Quote:
A p element’s end tag may be omitted if the p element is immediately
> followed by an address, article, aside, blockquote, details, div, dl,
> fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header,
> hr, main, nav, ol, p, pre, section, table, or ul element, or if there is no
> more content in the parent element and the parent element is an HTML
> element that is not an a, audio, del, ins, map, noscript, or video element,
> or an autonomous custom element.
So:
- My guess is Jeremy Ruston once added a *p* (in order to get a quick
margin bottom),
- He forgot about it,
- Starting with HTML5, W3C introduces optional end tags,
- Now TiddlyWiki uses the HTML5 doctype,
- The *p* gets implicitely closed before the *div,*
- The closing *p* after the div results in the validator considering the
markup to be structurally invalid (it actually is just not semantically
valid, but the validator can not detect this, at least not without
backtracking).
The solution is either to use a *div* with a class instead of the *p.*
Or, even sexier, to use a custom element like <in-text></in-text>. *This
will validate, as long as the custom element contains hyphens*! This is not
a bug in the W3C validator, see this Stackoverflow Answer
<https://stackoverflow.com/questions/10830682/is-it-ok-to-use-unknown-html-tags/27869027#27869027>.
In the comments the developer of the W3C Validator confirms this
<https://stackoverflow.com/questions/10830682/is-it-ok-to-use-unknown-html-tags/27869027#comment72073089_27869027>
and he explains his reasoning in another answer
<https://stackoverflow.com/a/28711028/1658543>.
For example, the following html5 document validates both with the W3C
validator and with the mentioned html5lib parser:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Are custom ellements allowed? Lets see.</title>
</head>
<body>
<inside-of-text><tiddler-module> ... </tiddler-module></inside-of-text>
</body>
</html>
(If you remove the hyphens in those custom elements it will not longer
validate)
I do this myself. It makes sense in a web app (but not in a basic document
which is intended to be crawled by search engines or autoformatted in handy
displays). The markup in the html and the css is cleaner, no surprises from
browser stylesheets and the validator doesnt complain. There are quite a
few people who do this. Eg Lichess or AngularJS ui-select.
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/f9f70aae-df37-47ab-a1fe-f76ccb2fb8d4%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
