"New HTML tags"

@arvgtaMar 30.2012

Hello all,

I have invented the following tool “New HTML tags”:

~~[url]~~http://4nf.org/[/url]

What do you think of it?

Thanks in advance and kind regards

to post a comment

HTML

28 Comments(s) _↴

@RodionGorkMar 30.2012 — #Hm... Excuse me, but do you believe the site is self-explanatory?

@CharlesMar 30.2012 — #I'm going to take a stab in the dark and guess what it is that you are up to. Please note that "HTML documents are constrained to conform to the HTML DTD both before and after processing any SCRIPT elements." ( http://www.w3.org/TR/REC-html40/interact/scripts.html#h-18.2.4 ) I suspect that you are perpetrating an abomination.

@spufiMar 30.2012 — #If I were to make new HTML tags, I would just make a XML standard specifically for web pages.

@arvgtaauthorMar 30.2012 — #Thanks for both your replies!

Apart from the "nofollow alternative" with the <an tag the design is that the abbreviations are at the start of text nodes in the DOM. These textual abbreviations are then expanded to arbitrarily complex HTML pieces. If you use a tool like "Firebug" you can see the HTML generated after initial load and should find that it is sound, too, according to any W3C specification.

Having said that, it may also be breaching the W3C spec to introduce new tags like "fb:like" (Facebooks custom "Like" Tag). What do you think about their approach then?

Sure introducing custom XML is nice but can you specify replacing arbitrarily complex HTML? With arbitrarily complex HTML I mean blocks ot HTML that may have functionally dependent arguments in JavaScript for example.

My prime example is the "Facebook Like!" tag. This is expanded from the text node to:

<div id="fb-root"></div><jscript>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</jscript><div class="fb-like" data-href="%js%window.location.href%sj%" data-send="true" data-width="450" data-show-faces="true"></div>

(There are two custom bits for handling JS - the "jscript" tag I introduced, which is parsed client side even when using AJAX, in contradiction to normal <script> tags; and %js% + %sj% that enclose JavaScript arguments and return the respective string back.

If you look at the above example, "Facebook Like!" (14 bytes) is an abbreviation for HTML "worth" about 439 bytes. Also, these tags can be maintained throughout time, offering a layer of abstraction which I can't think of setting up with mid-tier technology like PHP. Furthermore, in the case of the "Twitter!" substitution you save an outoing link:

<a href='http://twitter.com/share' class='twitter-share-button' data-url='%js%window.location.href%sj%' data-count='horizontal' data-via='%js%window.location.hostname%sj%' data-related='pubcon' data-text='%js%document.title%sj%'>Tweet</a><jscript src="http://platform.twitter.com/widgets.js"></jscript>

...which keeps PageRank on the site! What's the point of throwing PR at a PR 9 site??

So these "new HTML tags" are good value in my opinion. The challenge is now to identify and support more of them to increase the added value of the tool and making it worthwhile to include...

What do you think of other features like the "Google Analytics Substitution"?

Cheers!

@CharlesMar 30.2012 — #As I suspected, an abomination.

@arvgtaauthorMar 30.2012 — #Why, what's so "evil" about what I'm proposing?

The prime aim is to simplify routine tasks and accelerate time-to-market!

What's wrong with that?

@spufiMar 30.2012 — #

1. <jscript> is MS technology.

2. There just seems to be too much code for something that is suppose to be "A new tag."

@arvgtaauthorMar 30.2012 — #Hi Spufi,

<jscript> tag is the first thing that came to my mind instead of the <script> tag, that doesn't get parsed in AJAX applications, when injected to the DOM.

No intended connotation with MS ;-) (and I hope they don't use a <jscript> tag)

If you believe it or not, writing "Facebook Like!", in a certain sense uniquely defines writing:

<div id="fb-root"></div><jscript>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</jscript><div class="fb-like" data-href="%js%window.location.href%sj%" data-send="true" data-width="450" data-show-faces="true"></div>

(That's to say, the latter is functionally dependent on the tag. There's only one non-trivial JS parameter: window.location.href)

I agree it seems a lot of code that has been substituted, but doesn't that make life easier for someone who just uses my tag? Moreover, the underlying code of Facebook may change, but the tag I'm providing will be insulated against that.

@ketamireMar 31.2012 — #Well it's not exactly "new" since it seems you still need to put dividers around the text. Nevertheless it looks awesome! Expanding it's word bank will definitely help others.

@spufiMar 31.2012 — #And then something processes the page with scripting disabled.

@CharlesMar 31.2012 — #What you need is some sort of server side pre-processor. And instead of using new tags you could use processing instructions, <? ... ?>. I'd bet that you could do a lot with something like that.

@WyCnetMar 31.2012 — #It looks like you are trying on one part to help so-called content deliverers to hide/disguise their activities...

Why does that remind me of a seventies hide the garbage technique?

@arvgtaauthorApr 04.2012 — #Thanks for all your replies!

@Ketamire: Glad you think that this will help others - so do I :-)

@Spufi: If scripting is disabled, a redirect is issued and the "new HTML tags" are parsed nevertheless. Only JS is not processed then...

@Charles: What kind of server side pre-processor are you thinking about? Anything specific in mind?

@WyCnet: It's not supposed to be for disguising activities. There is supposed to be the possibility to hide boring code or links from search-engines, though...

@arvgtaauthorApr 05.2012 — #Whatever should become of this thread, just wanted to say special thanks to "Ketamire" for the support! You've obviously seen the "simplicity" in using it, which is intended from the start. On an different note, I know by now how hard it is to give support in public, where our daily news is "not exactly" doing a good job of that.

You must be a very brave man!

(just thought I have to give "full credit" on that one ;-) )

@CharlesApr 05.2012 — #It doesn't matter how simple you think that you have made things, the costs out weigh any benefit. What you have created is evil and should be removed from the face of the Earth.

@NoEffinWayApr 05.2012 — #What you need is some sort of server side pre-processor. And instead of using new tags you could use processing instructions, <? ... ?>. I'd bet that you could do a lot with something like that.[/QUOTE]

YEAH! I think you are onto something. You could even use it to define variables and interact with databases....OH! You could even use it to edit cookies and shorten smething like:

[CODE]<div id="fb-root"></div><jscript>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</jscript><div class="fb-like" data-href="%js%window.location.href%sj%" data-send="true" data-width="450" data-show-faces="true"></div>[/CODE]

into <?=somevar;?> !!!

Seriously though, had you done the samething (make the library) in php, I would actually think it was decent. (Well, if you did it WELL)

@aes123Apr 06.2012 — #These are very nice tools for using the HTML for creating the design of the site.Thanks for sharing.

@arvgtaauthorApr 07.2012 — #YEAH! I think you are onto something. You could even use it to define variables and interact with databases....OH! You could even use it to edit cookies and shorten smething like:

[CODE]<div id="fb-root"></div><jscript>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</jscript><div class="fb-like" data-href="%js%window.location.href%sj%" data-send="true" data-width="450" data-show-faces="true"></div>[/CODE]

into <?=somevar;?> !!!

Seriously though, had you done the samething (make the library) in php, I would actually think it was decent. (Well, if you did it WELL)[/QUOTE]

Do you mean something like this?

http://ejohn.org/blog/javascript-micro-templating/

Thanks for both of your positive feedback!

Much appreciated ?

@CharlesApr 07.2012 — #No, that--like what you are proposing--runs client side and is very bad. We're proposing something more like: http://www.php.net/ .

@arvgtaauthorApr 07.2012 — #Thanks Charles!

Very interesting! Maybe you could specify a bit more, what both of you are thinking of!

Some kind of PHP that pre-processes <? ... ?> tags and maybe interacts with the database and uses/introduces variables?

NoEffinWay - can you explain that a bit more?

Thanks very much!

@arvgtaauthorApr 18.2012 — #What a pity.

It seems you both had somewhat of the same idea.

Maybe one of you could elaborate on it...

Any other comments on these "new HTML tags"?

(http://4nf.org/)

@nathanwallApr 18.2012 — #Although a couple of the posters are being a little cruel in the tone of their jokes, I do agree that this is a good concept with the wrong approach.

I, also, started down a similar road to this 7 or 8 years ago, but quickly decided it was a dead end. For one thing, pages written this way won't validate. You have two options for validation: create your own DTD with your extended tags defined or process server-side. Of the two, I would choose option 2 for two reasons: (1) option 1 is going to be wrought with browser conflicts, especially among old browsers, "lite" browsers, or browsers that fit special purposes (screen readers, search engine bots, etc). (2) option 1 is an long, uphill battle to get a new DTD recognized -- HTML5 is still being worked on and it's been how many years?

So I would agree that it should be done server-side, not client-side.

You could, as suggested, write a PHP library. That would be a great option. However, I think there may be better options than that. An option that sounds good to me is (A) create your own DTD to use [b]server-side[/b], thereby avoiding the problems discussed above and allowing you to create pages the way you already are (? use Node.js to process your document and (C) send compatible HTML to the client.

@arvgtaauthorApr 25.2012 — #Sorry for the delay and thanks very much for your post Nathanwall!

It's great to hear you like the idea as such, even though I agree that the approach might not be ripe for the market quite yet. You even researched this yourself that long ago. Yes, my research also goes back to that time.

I started the first version off in pure JavaScript. It was heavily criticised for relying on JS that heavily...

You, Charles and NoEffinWay seem to agree that things could be even a bit more server side in PHP.

At the moment, the architecture is such, that the page with extended tags is being pulled into the DOM, if Ajax is enabled. Otherwise, in a noscript tag, a redirect is performed with the tags also being extended, but obviously no JS functionality. This gives rise to the effect that a short version of the HTML with the abbreviations can be viewed in the browser and by the search engine alike. This results in all the SEO advantages that are possible.

I have talked to my main client page manager and he says the SEO effects are desirable and seem to work well and without risk. So I don't want to loose them completely.

I'm easy about the W3C validator, if that's what you mean. At the moment, the tags are only parsed in text nodes (i.e. at the very left of them). They're only text. Therefore they validate, even if the underlying HTML is faulty! I spawned a whole thread on the DTD topic and agree that it is a very cumbersome route. No, not necessary, as these "tags" are text anyway...

We seem to agree that a PHP library is the minimum route. That would be very safe play. Don't mean to be cheeky but I'm aiming a bit higher than that. One of the biggest advantages of these "text tags" is that they're completely platform independent. You can route them into the mid-tier or even into the back-end. It doesn't matter, whether the user uses PHP or Java, for example. What I'm coding in PHP doesn't marry the user to PHP.

That should stay that way, if possible...

Maybe you can explain what you mean by:

"(? use Node.js to process your document and (C) send compatible HTML to the client." (as we can skip (A) ) ?

Maybe Charles or NoEffinWay can explain what further pre-processing can be done in PHP?

Thanks a million to all of you!

@KorApr 25.2012 — #[B]arvgta[/B]

Noble effort, but it looks like you try to reinvent the wheel. In fact your wheel is squared.

HTML is a mark-up language, not a scripting one, so that you can not use the self paradigms of HTML to create a sort of custom HTML "library/framework" without altering its DTD, which is not of a general purpose utility.

Well, in fact, a "New HTML tags" mark-up language was already invented. Its name is XML.

So, what you are trying to do is to use a scripting language (JavaScript, PHP... whichever) to translate your custom mark-up language into the standard HTML language. What for? Maybe some present HTML mark ups or tokens are obfuscated or verbose, but that will not make your custom ones easier to handle without a documentation. Further more, if you rely on a different language (JavaScript, PHP, etc) to create another language (HTML) you should presume that the former (or the later, or both) will never change in the near future. Which is not the case.

@arvgtaauthorApr 29.2012 — #I don't see the point about making a custom DTD, because the new tags are in text nodes, not in HTML.

Yes, that's a good point. Maybe I really only want to deliver, what XML doesn't deliver and that is new tags that stand for arbitrarily complex substituions of HTML.

I'm not too worried about JavaScript or PHP changing as we go along, because I'm only using such basic features...

Are there any participants who can see the sense in providing tags like these:

http://4nf.org/htmla.txt

in bigger style. In a next step, I intend to route them into a database on 4nf.org. The idea then would be to select these tags in "point and click" fashion.

There's quite obviously not much of a variety of such tags yet, but the database could become really huge.

What do you think?

@zaibattApr 30.2012 — #Just trying to get it....

@arvgtaauthorMay 01.2012 — #It's easier to explain this way. Have a look at a few of these tags:

http://4nf.org/new-html-tags/

We've seen the Facebook Like! already.

The Current Date! is another example.

In a next step, I could try to make it self-maintaining in AJAX style, so it updates itself, without adding "weight" to it.

Other non-trivial services like supplying e.g. the Dow Jones! in real-time would be thinkable, that can maintain themselves. Or main top-story headlines of leading webpages for example.

This really is only limited by ones imagination.

Fact is, there's two few tags at the moment to make an integration worthwhile.

This way, 4nf.org could become a universal server for non-trivial abbreviations, that can be implemented rapidly.

(Amongst the other advantages of the tool in the field of SEO)

I haven't even set up a database underneath to power all this yet, which would make further automation of the user experience possible.

@arvgtaauthorMay 20.2012 — #Ok, the last posts of mine were very confusing, only dreams of the future.

Sorry.

Question:

As a rule of thumb, it seems you would advise me take as much as possible

server-side?

Also in #HTML _↴

"page setting..."<Span> Question Make html visible on page

Success!

Help @arvgta spread the word by sharing this article on Twitter...

Tweet This

"New HTML tags"

28 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

"New HTML tags"

28 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

28 Comments(s) _↴

Also in #HTML _↴