Is there a way to create your own html tag in HTML5?

Solution 1:

You can use custom tags in browsers, although they won’t be HTML5 (see Are custom elements valid HTML5? and the HTML5 spec).

Let's assume you want to use a custom tag element called <stack>. Here's what you should do...

STEP 1

Normalize its attributes in your CSS Stylesheet (think css reset) - Example:

 stack{display:block;margin:0;padding:0;border:0; ... }

STEP 2

To get it to work in old versions of Internet Explorer, you need to append this script to the head (Important if you need it to work in older versions of IE!):

 <!--[if lt IE 9]> 
 <script> document.createElement("stack"); </script>
 <![endif]-->

Then you can use your custom tag freely.

<stack>Overflow</stack>

Feel free to set attributes as well...

<stack id="st2" class="nice"> hello </stack>

Solution 2:

I'm not so sure about these answers. As I've just read: "CUSTOM TAGS HAVE ALWAYS BEEN ALLOWED IN HTML."

http://www.crockford.com/html/

The point here being, that HTML was based on SGML. Unlike XML with its doctypes and schemas, HTML does not become invalid if a browser doesn't know a tag or two. Think of <marquee>. This has not been in the official standard. So while using it made your HTML page "officially unapproved", it didn't break the page either.

Then there is <keygen>, which was Netscape-specific, forgotten in HTML4 and rediscovered and now specified in HTML5. And also we have custom tag attributes now, like data-XyZzz="..." allowed on all HTML5 tags.

So, while you shouldn't invent a whole custom unspecified markup salad of your own, it's not exactly forbidden to have custom tags in HTML. That is however, unless you want to send it with an +xml Content-Type or embed other XML namespaces, like SVG or MathML. This applies only to SGML-confined HTML.

Solution 3:

As Michael suggested in the comments, what you want to do is quite possible, but your nomenclature is wrong. You aren't "adding tags to HTML 5," you are creating a new XML document type with your own tags.

I did this for some projects at my last job. Some practical advice:

1. When you say you want to "add these to HTML 5," I assume what you really mean is that you want the pages to display correctly in a modern browser, without having to do a lot of work on the server side. This can be accomplished by inserting a "stylesheet processing instruction" at the top of the xml file, like <?xml-stylesheet type="text/xsl" href="menu.xsl"?>. Replace "menu.xsl" with the path to the XSL stylesheet that you create to convert your custom tags into HTML.

2. Caveats: Your file must be a well-formed XML document, complete with XML header <xml version="1.0">. XML is pickier than HTML about things like mismatched tags. Also, unlike HTML, tags are case-sensitive. You must also make sure that the web server is sending the files with the appropriate mime type "application/xml". Often the web server will be configured to do this automatically if the file extension is ".xml", but check.

3. Big Caveat: Finally, using the browsers' automatic XSL transformation, as I've described, is really best only for debugging and for limited applications where you have a lot of control. I used it successfully in setting up a simple intranet at my last employer, that was accessed only by a few dozen people at most. Not all browsers support XSL, and those that do don't have completely compatible implementations. So if your pages are to be released into the "wild," it's best to transform them all into HTML on the server side, which can be done with a command line tool, or with a button in many XML editors.