[Bug] Misplaced closing p tags.

registrierungs genervter

unread,

Mar 24, 2019, 4:43:45 PM3/24/19

to tiddl...@googlegroups.com

When trying to parse the document structure of an edited TiddlyWiki using the html5lib parser in strict mode i found that the wiki has closing p tags at wrong locations. See error 5 and 6 when validating tiddlywiki.com with the W3C validator. I tried also validating an empty TiddlyWiki and here those misplaced tags are not present.

PMario

unread,

Mar 25, 2019, 4:34:32 AM3/25/19

to TiddlyWiki

Hi,

You are right. the div and the p tag have to change places. I'll create a fix and a PR.

-m

PMario

unread,

Mar 25, 2019, 5:13:37 AM3/25/19

to TiddlyWiki

Hi,

I had a closer look. There seems to be a problem with the validator in strict mode. If you open the TW source 2 lines above is the opening p-tag.

BUT at the moment TW UI creates some unnecessary "invalid" p-tags. ... So the validator may be confused. ...

-----------

Be aware! The content that you described, is dynamically created from: https://github.com/Jermolene/TiddlyWiki5/blob/master/editions/tw5.com/tiddlers/hellothere/HelloThere.tid and is only shown if Javascript is deactivated.

----------------

The whole TW file is based on several templates. The file itself is dynamically created, and contains a lot of redundant info. ...

So if you want to "reverse-engineer" the content, you can probably save a lot of time if you describe what you try to achieve, and we tell you, how you can easily find the right pieces. Since that exactly the same procedure, that TW has to do at startup.

-m

Jeremy Ruston

unread,

Mar 25, 2019, 6:19:41 AM3/25/19

to tiddl...@googlegroups.com

Hi Mario

I’ve just been checking this out too. It seems that the problem is this construction:

</div></p>

In other words, a paragraph containing an empty div.

If I paste that fragment into the text input node of https://validator.w3.org/nu/#textarea in place of the paragraph tag in the default document, then I get the same error.

The rule that is being broken is that HTML 4 doesn’t permit DIVs within other block level elements. This stackoverflow answer discusses it:

https://stackoverflow.com/a/10763952

Best wishes

Jeremy

--
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 tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
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/aa0ac5cf-a655-4acc-91bf-912e8497b9fb%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Message has been deleted

registrierungs genervter

unread,

Mar 26, 2019, 12:52:50 AM3/26/19

to TiddlyWiki

If i am not wrong a div was never allowed inside a p (because the content model of ps is phrasing content). 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. 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. In the comments the developer of the W3C Validator confirms this and he explains his reasoning in another answer.

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.

@TiddlyTweeter

unread,

Mar 26, 2019, 11:28:04 AM3/26/19

to TiddlyWiki

Ciao registrierungs genervter (Is that your actual name :)

Great post!

Very illuminating & informative.

Looks definitive.

I deleted my last post as utterly naive on HTML 5 in-browser.

The "spare" p's in TW look like clutter. But escape detection in 5 validation so live on?

Is that the central practical issue?

From a minor idiot who does smell an issue.

Thanks and best wishes

Josiah

@TiddlyTweeter

unread,

Mar 26, 2019, 11:36:28 AM3/26/19

to TiddlyWiki

Ciao registrierungs genervter

I think Arlen's recent thread relates to this too?-

https://groups.google.com/forum/#!topic/tiddlywiki/VBrRCeYka1I

Best wishes

Josiah

registrierungs genervter

unread,

Mar 28, 2019, 4:49:36 AM3/28/19

to tiddl...@googlegroups.com

@TiddlyTweeter

No, it is not my normal name :-)

I agree with you and Arlen Beiler regarding the ps. It has three aspects:

ps are better than brs because p is semantic and br is not. p is also easier to parse.
but wrapping divs into ps results in invalid html (structurally and semantically).
It also causes problems with the CSS styling (eg. one can not remove the margin from the p based on its children. That would require a parent selector like :has but that is not supported).

A div should actually just behave like a div in html5 and always close a p. For example the parsetree from here currently gets transformed to this DOM:

p
    "Some "
    em
        "italics"
    " and a "

    tiddler
        ...

    "."

but it should be this DOM:

p
    "Some "
    em
        "italics"
    " and a "

tiddler
    ...

p
    "."