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

Question

I want to create something like

    
        aaa
        bbb
    
          


        

Answer 1

You can just do some custom css styling, this will create a tag that will make the background color red:

redback {background-color:red;}

 

<redback>This is red</redback>

Answer 2

The point of HTML is that the tags included in the language have an agreed meaning, that everyone in the world can use and base decisions on - like default styling, or making links clickable, or submitting a form when you click on an <input type="submit">.

Made-up tags like yours are great for humans (because we can learn English and thus know, or at least guess, what your tags mean), but not so good for machines.

Answer 3

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.

Answer 4

As Nick said, custom tags are not supported by any version of HTML.

But, it won't give any error if you use such markup in your HTML.

It seems like you want to create a list. You can use unordered list <ul> to create the rool elements, and use the <li> tag for the items underneath.

If that's not what you want to achieve, please specify exactly what you want. We can come up with an answer then.

Answer 5

In some circumstances, it may look like creating your own tag names just works fine.
However, this is just your browser's error handling routines at work. And the problem is, different browsers have different error handling routines!

See this example.
The first line contains two made-up elements, what and ever, and they get treated differently by different browsers. The text comes out red in IE11 and Edge, but black in other browsers.
For comparison, the second line is similar, except it contains only valid HTML elements, and it will therefore look the same in all browsers.

body {color:black; background:white;} /* reset */

what, ever:nth-of-type(2) {color:red}
code, span:nth-of-type(2) {color:red}

<p><what></what> <ever>test</ever></p>

<p><code></code> <span>test</span></p>

Another problem with made-up elements is that you won't know what the future holds. If you created a website a couple of years ago with tag names like picture, dialog, details, slot, template etc, expecting them to behave like spans, are you in trouble now!

Answer 6

This is not an option in any HTML specification :)

You can probably do what you want with <div> elements and classes, from the question I'm not sure exactly what you're after, but no, creating your own tags is not an option.