How to create custom tags for html

A private, secure home for your teams questions and answers.

Sign uporlog into customize your list.

Start here for a quick overview of the site

Detailed answers to any questions you might have

Discuss the workings and policies of this site

Learn more about Stack Overflow the company

Learn more about hiring developers or posting ads with us

This site uses cookies to deliver our services and to show you relevant ads and job listings. By using our site, you acknowledge that you have read and understand ourCookie PolicyPrivacy Policy, and ourTerms of Service. Your use of Stack Overflows Products and Services, including the Stack Overflow Network, is subject to these policies and terms.

Id like to learn how to create custom tags for html, with special attributes and behavior, if someone can give advice Id be the most grateful.

This question appears to be off-topic. The users who voted to close gave this specific reason:

recommend or find a book, tool, software library, tutorial or other off-site resource

are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead,describe the problemand what has been done so far to solve it. Nope, Sđƒӽ, Munim Munna, Console, ubik

If this question can be reworded to fit the rules in thehelp center, pleaseedit the question.

Dunno if you can do it in pure HTML but maybe you can use XHTML, the XML part has custom tags made by you

Please post an answer rather than editing the answer into your question.

Theres an interesting and in depth article from on how to work with custom elements :Custom Elements: Defining New Elements in HTML

Heres an excerpt from the article on how to do it.

The common techniques of creating elements still apply to custom elements. As with any standard element, they can be declared in HTML or created in DOM using JavaScript. Instantiating custom tags

var xFoo = new XFoo(); document.body.appendChild(xFoo);

Worth noting is that this is the correct way to do it in terms of standards and browser support.

should always be used for custom tag names (hyphen required,

should always be used for custom attributes (

required). Browsers may or may not handle arbitrary tags like

well. Generally they dont cause errors, but its completely non-standard and may cause issues in some situations. Also note that non-HTML5 content should use a non-strict doctype when doing this. JS can be used to skirt the data- attribute restriction, but its clunky.

Updated specification for Custom Elements v1: Reusable Web /web/fundamentals/getting-started/primers/

Depending on what you mean by special attributes and behavior, you can create custom HTML tags right now. The following shows up in all browsers, and even works with the various JavaScript methods:

There are just a couple things you have to keep in mind:

Hyphenation! Custom elements should consist of at least one-likemy-bookorapp-menuorheader-titleetc. Just, dont usedata-*since its reserved fordata- attributes.

All custom elements have a display ofinlineby default. You can change that with CSS or JavaScript, however.

Internet Explorer does not recognize any of these elements unless youfirstcreate them with JavaScript:

So you have to do thatbeforeyou can use them in your CSS, HTML, or JS.

I was gonna make a hasjs tag that was hidden for js-disabled users, but now I have to register it with JavaScript first. Guess Ill have to stick with div class=hasjs.

All you really have to do is define css for that tag

mytagThis text is in bold/mytag

I know this at least works for Google Chrome 47

Sure this works in chrome 47, but its not advised as it is just invalid HTML. Chrome can handle a wide range of invalid code, and while it does

, you really shouldnt be leaning on that too much as its behaviour in other browsers can be completely arbitrary.

There is now an emerging W3 standard spec, calledWeb Component Custom Elements, that enables developers to create their own custom HTML elements and register them with the browser parser. Mozilla has developed a library, named X-Tag, that makes the process of creating and working with custom elements super easy, check it

There is also a version which is ONLY supported in Chrome 54 and Opera.

class BasicElement extends HTMLElement connectedCallback() this.textContent = Just a basic custom element.; customElements.define(basic-element, BasicElement);

You can create custom html tags with following steps:

Step 1- Register a new Element. Custom elements are created using document.registerElement():

2nd argument in registerElement is optional object which describes the elements prototype.

Step 2- Instantiating custom tags Several ways to do so: Declare them:

Step 3- Attach the newly created element with document

var XFooProto = Object.create(HTMLElement.prototype); // 1. Give x-foo a foo() method. XFooProto.foo = function() alert(foo() called); ; // 2. Define a property read-only bar. Object.defineProperty(XFooProto, bar, value: 5); // 3. Register x-foos definition. var XFoo = document.registerElement(x-foo, prototype: XFooProto); // 4. Instantiate an x-foo. var xfoo = document.createElement(x-foo); // 5. Add it to the page. document.body.appendChild(xfoo);

TypeError: document.registerElement is not a function. (In document.registerElement(), document.registerElement is undefined)

Warning: document.registerElement() is deprecated in favor of customElements.define(). SourceMDN

you can use javascript:document.createElement(element)

How can I convince airport screeners to stop asking why I prefer pat-downs?

Did Valerie Jarrett say she wanted America to be a more Islamic country?

Looking for a word to describe the sound of the morning as hundreds of birds begin singing before sunrise?

What to do if a professor confused me with another student in a letter of reference?

How to stop an employee from holding the company hostage?

Why do people use GPUs for high-performance computation instead of a more specialized chip?

The Logic of Buddha: A Formal Approach

Why does array[i++%n] += i+ give different results in Java 8 and Java 10?

For the size doesnt always matters

Does Doctor Strange lose his medical license?

Find unique elements based on a given key

I cannot use some software support forums due to lack of an official phone number

How can I tell someone that I am glad to be leaving them without sounding petty?

GMing for a hyper optimized character

Was Sheridan and Franklins mission in In the Beginning ever referenced elsewhere?

Im 24 with a 4-year-old son. How to handle uncomfortable questions from people?

Why didnt Wehrmacht soldiers refuse to kill civilians?

Angel Food Cake: crushed pineapple instead of sugar?

What does the TIE designation used in the Empires starfighters names mean?

site design / logo 2018 Stack Exchange Inc; user contributions licensed undercc by-sa 3.0withattribution required.rev2018.6.6.30678