Custom Tags... Why Not

Custom tags... why not?

Custom tags are not evil

just consider this:

They are not recognized in IE 6-8 by default -> you have to use JavaScript to introduce each custom tag you use on the page e.g: document.createElement('custom-tag') This means your website will only render correctly with JavaScript turned on
In most browsers your custom tags will be treated as inline elements like <span>, this means you have to write CSS to declare them as custom-tag { display: block }
There is no resource I found that could proof that custom tags have any negative impact on search engines. In fact Google released Angular.js which promotes custom tags (<pane> and <tab>) in its examples on the front page.
Most HTML Editors will mark your custom tags as invalid HTML, because they are not in the official spec.

To summarize:

Use custom tags when there are important elements that have more
meaning than <div> and there is no existing HTML 4/5
equivalent. This is especially true for web applications which
parse the DOM for special tags/attributes/classes to create
components (like Angular.js).
If all you build is a simple website with normal content, stick
to standard HTML. You will want your website to work also without
JavaScript turned on.
If you build a web application where custom tags could really
help to make the source cleaner and express special semantics, use
them. All negative implications mentioned above (JavaScript has to be
turned on / CSS declaration) won't matter for these cases. The same
rules apply to custom attributes.

For more details on this topic: IE compatibility for Angular.js

What are the reasons NOT to use custom HTML tags?

Short answer: I haven't heard any very compelling reasons to avoid them.

However, here are some recurring arguments I've heard made:

Doesn't work in old IE (just document.createElement("my-tag"); should fix that).
Global namespace clashes (same applies to class names, and custom elements in general).
CSS selector performance (doh, this is just about the last thing you should worry about).
Separation of functionality, meaning and presentation. This is actually the only argument I've heard that IMHO has any valid basis to it. You're of course better off with semantic HTML (search engines and all that), but if you were going to use a div for it otherwise, I don't see why you couldn't use a custom tag instead.

Is it bad practice to define a custom HTML tag

Creating custom HTML tags are perfectly fine nowadays, however, you need to know how to properly create them, for a better browser support. Make sure they have a "meaning", or "role" for better readability. It is great when working with web components.

Here is a good article about creating custom html elements:
https://www.smashingmagazine.com/2014/03/introduction-to-custom-elements/

HTML custom tags not working

It looks like you're trying to create a Custom Element but you haven't registered it yet. To create your own XFoo element would look something like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Custom Element</title>
  </head>
  <body>
    <!-- Create a template for the content inside your element -->
    <template>
      <h1>Hello from XFoo</h1>
    </template>

    <!-- Register your new element -->
    <script>
    var tmpl = document.querySelector('template');

    var XFooProto = Object.create(HTMLElement.prototype);

    XFooProto.createdCallback = function() {
      var root = this.createShadowRoot();
      root.appendChild(document.importNode(tmpl.content, true));
    };

    var XFoo = document.registerElement('x-foo', {
      prototype: XFooProto
    });
    </script>

    <!-- Use the element you've just registered as a tag -->
    <x-foo></x-foo>

    <!-- OR, create an instance using JavaScript -->
    <script>
    var el = document.createElement('x-foo');
    document.body.appendChild(el);
    </script>
  </body>
</html>

Unfortunately this approach depends on native APIs which currently only ship in Chrome 34. As someone else mentioned, a much easier approach to creating your own custom element would be to use Polymer. Polymer is a library that adds support for Web Components (essentially what you're trying to build) to all modern browsers. That includes IE 10+, Safari 6+, Mobile Safari, current Chrome and current Firefox.

I've put together a jsbin which shows how to create your own x-foo element using Polymer.

Is it safe to create Custom HTML Tags?

@PrisonerZER0 I wouldn't call "Olde browsers" the word "safe". Somewhat of an oxymoron. Even M$ has put IE in a coffin. https://www.microsoft.com/en-us/windowsforbusiness/end-of-ie-support

Us supporting them is only asking for trouble. Thanks for the shout.

I created the snuggsi ツ (https://github.com/devpunks/snuggsi) library as a suite of conventions over the web components/custom elements native browser spec. My philosophy is you shouldn't need to know node, webpack, babel, etc. Should only need to know basic HTML,CSS,JS to be productive in 2017. The following snippet is a perfect example.

Feel free to reach out on github as it seems like you are up to snuff with modern platform development. We won't need these convoluted front end tools where we are going Feel free to reach out on github so i can help you get started!

<hello-world>

 Hello {planet}

</hello-world>

<!-- more info @ https://github.com/devpunks/snuggsi -->

<script src=//unpkg.com/snuggsi></script>

<script>

// Element Definition -----------------------------

Element `hello-world`

// Class Description ------------------------------

(class extends HTMLElement {

  get planet ()

    // "automagic" token binding

    { return 'world ' }

  onclick ()

    // "automagic" event registration

    { alert (this) }

})

</script>

What are valid HTML5 custom tags?

TL;DR: There are no valid custom HTML5 tags.

I think you may be referring to this Custom Element Working Draft proposed by the Web Applications Working Group, which describes this:

The custom element type identifies a custom
element interface and is a sequence of
characters that must match the NCName
production, must contain a U+002D HYPHEN-MINUS
character, and must not contain any uppercase
ASCII letters. The custom element type must not
be one of the following values:

annotation-xml

color-profile

font-face

font-face-src

font-face-uri

font-face-format

font-face-name

missing-glyph

Additionally, according to HTML5 specification, HTML tag names can only start with ASCII letters. If we assume that the Custom Element proposal does not propose any changes to the HTML Syntax specification, then elements starting with hyphens-minus character is not a valid HTML tag name. If we combine what the Custom Element Working Draft proposal and the HTML5 Syntax specification says, then we can conclude that <-custom> is not a well-formed HTML and so cannot be a valid Custom Element because the tag name does not start with ASCII letter. On the other hand, custom- is both a well-formed HTML and a valid Custom Element.

Note that Custom Element is a Working Draft, not a W3C Recommendation. This means that Custom Elements is not valid in HTML5. Don't get your hopes up either, a lot of Working Drafts that are proposed in W3C never got anywhere (and for good reasons too, not all of the proposals are good).

<rant>Personally I hope that this proposal got shot down. I spent some time reading this proposal, it looks like this proposal tried to reinvent XML Namespace and SGML poorly, and probably forgot about what HTML and the semantic web is supposed to be. In any case, HTML5 syntax already allows authors to use elements that aren't specified in HTML5 specification, I don't see any need to standardize how to create custom elements any further than that. I hope that there would be people in HTML5 working group sane enough to realize how bad this proposal is and vote this proposal off. Keep HTML5 closed from author-defined custom modifications.</rant>

If you want to define your own custom vocabularies, I suggest you should write an XML application with XHTML5, which actually specifies how you can define your own custom elements with XML namespaces. Unlike HTML, XML is designed to be extensible.

As for your question about custom data attribute, this is what the HTML5 specification says:

A custom data attribute is an attribute in no namespace whose name starts with the string "data-", has at least one character after the hyphen, is XML-compatible, and contains no uppercase ASCII letters.

So with your examples, these are valid data-* attributes:

data-my-attribute

while these are not:

my-attribute

As far as I can tell, the Custom Elements Working Draft does not specify any additional syntactical requirement for custom attributes on Custom Elements, nor does it explicitly permit using arbitrary non-data-* attributes and how custom attributes interacts with existing HTML attributes, although we can reasonably infer that allowing custom attributes is probably the intent of the proposal.

As for your question about CSS, yes you understood correctly, those are valid CSS selectors to target those Custom Elements. CSS can be used to style any elements, not just elements defined by HTML, but also other markup languages like SVG, MathML, as well as arbitrary XML vocabularies when using XHTML. The CSS Selectors specification does not actually depend on HTML vocabulary in any substantial way (although HTML is used heavily in the examples, as it's what most people are most familiar with). It is for this reason that CSS Selector syntax can be used to refer to any elements in the document, including custom elements that aren't specified in the HTML specification. Styling custom tag already works in all major browsers today. You can use any arbitrary tag names, and select them with the selector that you expect, and CSS will style them as you would expect them to be. There is no requirement for having hyphen-minus in the tag name for this to work.

Custom tags (templatetags) not loading

You need to {% load %} your custom tags in your template.

Remove from INSTALLED_APPS as that's only for apps (but your app should definitely be in there, e.g. home)
add {% load custom_tags %} at the top of the templates using these tags.

Custom Tags... Why Not