A silly TiddlyWiki heads-up: do avoid "<" immediately followed by an alpha character with a ">" later (even on another line)

#1

EDIT: This is about usage in TiddlyWiki, not about usage in Talk.TiddlyWiki. (Although the heads-up applies, the problem that is, to Talk.TiddlyWiki too.)

Because it will get treated as an HTML tag.

For example:

<DoNotDoThis   blah blah blah>

< DoNotDoThis   blah blah blah>

The first line will get processed as an HTML tag and disappear.

The second line wil be rendered A-1 because there is a non-alphabetic character between the “<” and the “D”, so not seen as an HTML tag.

1 Like
#2

So I usually use 《》…

What does < xxx > mean in daily non-technical text? I rarely use this.

#3

Interesting observation @Charlie_Veniot thanks for the heads up, I see why its happening because “arbitrary” html tags are permitted but the must begin <name, I like the concept of using self named tags to organise content.

  • I like exploring the possibilities when a quirk is found.

I experimented and came up with this;

<more style.display={{!!more}}> <<transclusion>></more>

If the field more contains “none” the content of that tag will be hidden, empty it will show.

  • However other curious possibilities exist see Property Values at bottom here

Other possibilities abound using class.

#4

I think the best way to deal with it is send a private mail to the user and tell them how to fix their post. So they do not make that error in the future. I think that’s the only way to keep the standards high.

Many users copy paste the content from posts here into tiddlers. So we (the experienced users) should make sure, that code here in the threads actually works.

Putting a space in between the bracket and the tag name does not work. So I’m not the biggest fan of that suggestion.

#5

My post was about usage in TiddlyWiki, not about usage in Talk.TiddlyWiki.

I’ve updated the OP to reflect the intended scope of usage/discussion.

#6

Ditto. Bigly.

They make for awesome visual cues to identify what/where.

#7

I might find myself using < and > in my writing to highlight a particular word or sentence.

As an alternative to bold/italics/underline/whatever.

For example: press the <UP> key to ...

#8

Someone might accidentally paste in something like this:

5<x 
x>y

… but of course it comes out as

5y
#9

I often use “press the <UP> key to”,

but I also change the class that makes in red to a grey. But I also use a simple html button <button>UP</button> which you can add a mouse over later, change to a $button widget or add class / styling.

I continue to explore the use of arbitary html tags offline, here is a hint of ways to use them;

<style>
h { display: ; }
</style>

* This is text <h hidden notes/> containing hidden notes you cant see, edit to view (using attributes)
* This is text <h title="mouse over notes">^^Ⓘ^^</h> with extra Info in a tooltip
* This is text <h title="mouse over notes"></h> with extra Info, add text/symbol to mouse over.
  • use h { display: none; } to hide all h tags.
#10

TL;DR

Please use the existing possibilities which HTML provides before you try to invent new HTML tags, which are very likely to cause problems in the long run.

IMO there are 2 severe problems with your H tag.

  1. It’s way to similar to h1, h2 … which are valid HTML tags.
    So the whole thing is error prone if naming is misleading.
  2. The format used is also prone to error and will result in invalid HTML code.

Add 2)
In your example hidden and notes are attributes for the “h” element. There is a HTML specification how attribute name have to be built.

If you look at the HTML attribute reference you’ll see that hidden is a valid html attribute which has a meaning and will impact rendering.

Try this without the style display: none

* <h hidden notes>This text is hidden - 
till someone changes the attribute "hidden" to "Hidden"</h>

So it’s very likely that using plain text as attributes will clash with the existing and future HTML spec.

What should be allowed is: <x-yz note="your text comes here."/> But

HTML has a comment feature which will never be rendered <!-- comment --> and will not pollute the DOM.

#11

@pmario I understand your warnings, my above examples where just demonstrating, and not a guide to their usage, but I don’t think the caveats are sufficient to “not use arbitrary html tags”.

A wiki making use of them should document them if they are to be used by the author, and if you must you can add a namespace or prefix, including the data-

  • I would also advise against arbitrary attributes although I/OT demonstrated they can be used again including data-

The html standard allows you to use custom tags that contain a - because I guess they plan never to use a hyphen in a standard tag.

Top 10 Rules For Using Custom HTML Tags:

1.     Always follow the naming rules for custom tags.
2.     Choose descriptive tag names so your markup reads well.
3.     Use short tag names to make your HTML source code smaller in file size.
4.     Never use self-closing custom tags because they are invalid.
5.     Never use a custom tag if a native HTML tag is more appropriate.
6.     Use custom HTML tags to replace divs and avoid div-soup markup.
7.     Remember to set custom tags to display:block in CSS if you're using them for page structure.
8.     Make separate custom tags for each specific purpose to keep your CSS clean and organized.
9.     Use custom attributes on custom elements to add properties or CSS hooks.
10.    Spread the word about why custom HTML tags are so good! (Share this page!)

I may share some helpful examples elsewhere.

#12

I’m OK with all the info in the new post.

As I wrote. There are rules for custom-tags and it seems you know them.

I think you should have used the rules in your examples. Most users do not know that info, so they copy paste our examples and think it’s OK. But it’s not.

I think it’s important to be precise as good as we can.