Custom HTML tag

In this article we will talk how we can define own html tags. Also we discuss what are their uses on real web application.

Lets focus on the topic. What are custom HTML tags? Custom HTML tags can be anything for eg: <MYTAG/>. Undestanding of HTML and XML is a must to understand the points discussed in this article. So if you dont know what is xml and hmtl, stop here and come back later, after few months or years. 

Popints we discuss in the article. 

  1. Can you really use your own tag?
  2. Why do you need custom HTML and whats is usages? 
  3. One real world example.

How to create a custom HTML tag?

It’s very simple and easy. Just use any tag tar is not listed as HTML tags. It can be anything but make sure it follows XML guidelines. For eg: <CONT> <CONT/> is one example.

Why do you need it?

The standard HTML tag has their own layout implementation and will be rendered according to the browser or css applied. But with a custom HTML tag , there is no default layout implementation so it will be ignored until the css is applied instead of being part of the DOM tree. For eg: DIV element displayed as a block. So what are its usages if browsers rendering engine ignores it. Simple, it is still part of the DOM tree and you can add any rules like other DOM elements.

There might be others usages of creating custom element but mine is very simple.

One real world example of custom HTML element.

This is a part of content management system. One feature is to let users edit the page content. The page here contains different blocks. Each block is wrapped by the custom HTML tag called <CONT>. Here <DIV> tag can be used to represent as a wrapper but I want the tag that does not have any layout. Using <CONT> tag instead of using DIV tag lets me separate each block that can be edited in a separate editor (for eg: Video editor, photo editor, Text Editor, etc), and renders the whole page much similar to the final page (where the editing features are disabled). 


Like us

See also

How to embed instagram video?

How to embed instagram video on the webpage and show your creativity.