Member Avatar for nzcreativeweb

I am wondering is it possible to invent your own HTML codes? For example there are basic tags like <html>, <a href="">, <meta tag="keywords" content="your words"> etc etc etc. I'd imagine one would need some sort of programming skills to do this, but would like to know some thoughts on this :).

  • 7 Contributors
  • 8 Replies
  • 111 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by Airshow

Dani AI

Generated

Short answer: yes — but "inventing" tags is best done with the platform features that already exist today rather than trying to change browsers. is right that a new browser could interpret new syntax, but that is rarely necessary. Server-side options like 's JSP tags or XML vocabularies (as suggested) still make sense when you want compile-time or strict-data solutions. For client-side, the modern, standard approach is Web Components (Custom Elements + Shadow DOM + templates).

Here is a minimal example of a custom element (not shown earlier in the thread):

class MyBox extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});
    shadow.innerHTML = `<style>:host{display:block;padding:8px;border:1px solid #ccc}</style><slot></slot>`;
  }
}
customElements.define('my-box', MyBox);

Practical tips and cautions:

  • Custom element names must include a hyphen (for example my-box) per the spec; that prevents future clashes. See the spec and MDN for details Using custom elements and Custom elements spec.
  • For simple data on ordinary tags prefer standardized data-* attributes and element.dataset (more robust and accessible) — see Using data attributes.
  • Older IE versions do not style unknown elements well; use an HTML5 shiv or polyfills if you must support legacy browsers (see the html5shiv polyfill). For Web Components support in older browsers use the Web Components polyfills.
  • Always provide fallback content or server-rendered markup for accessibility and SEO, and use ARIA roles when appropriate.

Tie these to the thread: and observed cross-browser quirks — those are real historically and are handled today with shivs/polyfills and by following the Custom Elements rules above.

Recommended Answers

All 8 Replies

Member Avatar for ithelp

Very much possible but you need come up with your own browser which will interpret your tags the way you want.

Member Avatar for sillyboy

going further, if you start to look at server-side languages, JSP for example, lets you define your own custom tags. If you do this in JSP, you don't need the browser to interpret your "invented" tags.

Member Avatar for nzcreativeweb

Cheers for the advice, I don't know all that much about programming etc I am more geared towards web design although I know there are some good benefits for a web designer having that knowledge.

Member Avatar for essential

You can simply define your own tags using a plain XML document, and then collaborate its way using simple scripts that will evaluates your tags on the browser.

Here's simple tag examples created in plain XML document format:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE myevents [
<!ELEMENT myevents (event*)>
<!ELEMENT event (#PCDATA|hour|minute|info)*>
<!ELEMENT hour (info)>
<!ELEMENT minute (info)>
<!ELEMENT info ANY>
<!ATTLIST hour 
         id ID #IMPLIED
         name CDATA #IMPLIED
         set CDATA #REQUIRED 
         off CDATA #FIXED "0">
<!ATTLIST minute 
         id ID #IMPLIED
         name CDATA #IMPLIED
         set CDATA #REQUIRED 
         off CDATA #FIXED "0">
]>
<myevents>
<event>
<hour id="hOne" name="hOne" set="1">
<info>event&apos;s that take place if the current hour is 1</info>
</hour>
<minute id="mOne" name="mOne" set="1">
<info>event&apos;s that take place if the current minute is 1</info>
</minute>
</event>
<event>
<hour id="hTwo" name="hTwo" set="2">
<info>event&apos;s that take place if the current hour is 2</info>
</hour>
<minute id="mTwo" name="mTwo" set="2">
<info>event&apos;s that take place if the current minute is 2</info>
</minute>
</event>
<!-- 
* You must provide a lists of 12 <event> elements here including (hour | minute) enclosed in its collection.

* Those 12 <event> elements will be used as our pointer to get specific event(s), which will be displayed in the page. This elements is referenced with the JavaScript date object's ( getHours() and getMinutes() ) -->
</myevents>

I've created this tags (document) for timekeeping events in my site, and generated using AJAX to display whatever the issue i have on created tags.

Hope it helps...

Member Avatar for MidiMagic

You can write your own DOM, if you know how. But your site has to serve it too.

Member Avatar for colweb

Strange things happen if you try something. In IE6 it doesn't seem to work, but in Firefox 2 and 3 the following works:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
     <title>Strange</title>
     <style type="text/css">
          mytag	{color:green}
     </style>
</head>
<body>
     <mytag>some text</mytag>
</body>
</html>

The text is displayed in green. :D

Member Avatar for Airshow

You can do this in HTML:

<custom myAttrib="Hi there">Custom Inner Stuff</custom>

Browsers should just ignore the custom tag and its atributes, and hence they should display the "inner stuff" as if the tag wasn't there. Not much use except for colweb's point about FF honouring CSS directive - interesting. I wonder if IE7 and 8 do the same?

Custom attributes (of a regular or custom tag) may be of use to a script:

var c = document.getElementsByTagName('custom');
if(c.length){
	alert(c[0].getAttribute('myAttrib'));//gives "Hi there" reliably cross-browser (afaik).
}

Custom attibutes can be very useful for controlling the bahaviour of scripts from HTML without having to edit the script. This is a whole topic in its own right.

But,

var c = document.getElementsByTagName('custom');
if(c.length){
	alert(c[0].innerHTML);//blank in IE6 (and maybe others)
	alert(c[0].firstChild);//error in IE6 (and maybe others)
}

Conclusion : HTML custom attributes can be useful. HTML custom tags don't appear to offer anything you can't do with regular HTML tags and their behaviour is not reliable cross browser.

As Essential says, if you want to be inventive, use XML. After all, "XML" is "Extensible Markup Language".

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.