Can I use custom elements and attributes as valid HTML?

Question

Can I use this (custom elements, custom attributes) on (for examples) IE 9 with this CSS? Is this valid? What are the negatives?

I want to have more readable code... without divs.

HTML

<row center>
  <column number="6">A</column>
</row>

CSS / LESS

row {
  background: #444;
  display: flex;

  &[center] {
    justify-content: center;
  }

  column {
    background: #222;
    color: #fff;

    &[number="6"] {
      padding: 1rem;
      width: 50%;
    }
  }
}

I dont think there are any major negatives. What's the purpose of using custom elements? — Sachin, Nov 04 '15 at 20:39
The negatives are that some browsers may not recognise them leading to unpredictable behaviour. A better question is "What are the overriding reasons for using them over more traditional elements?" — Paulie_D, Nov 04 '15 at 20:43
are you using a library or framework to create custom elements? — Peter Girnus, Nov 04 '15 at 20:51
You can't write custom elements when you're not using a library or framework. Take a look at https://angularjs.org/, Angular, for example, is a framework that supports custom elements by using directives — Nike Sprite, Nov 04 '15 at 21:02
What is your DOCTYPE declaration? Do you care about writing valid code? — jeffjenx, Nov 04 '15 at 21:19
@NickSpriet he can write custom elements if he types them into a text editor, it's just not a great idea — miken32, Nov 05 '15 at 00:30

score 2 · Answer 1 · answered Nov 05 '15 at 00:29

2

The case against custom elements has been made by other answers. As an alternative to this idea, HTML 5 has a number of new elements. These include <article>, <aside>, <figure>, <header>, <nav>, and <section>. Using these elements should make your page layout semantically meaningful, save you from puzzling over a sea of <div> and <span> elements, and be understood by modern browsers.

answered Nov 05 '15 at 00:29

miken32

42,008
16
111
154

Their is others semantic elements very useful: list (`ul`/`ol`/`li`, `dl`/`dt`/`dd`), `table`, `main`, ... – Yukulélé Nov 05 '15 at 00:45

score 1 · Answer 2 · answered Nov 04 '15 at 23:42

Making up your own markup language:

May conflict with additional features added to HTML in the future (at least if you tell the browser it is HTML with a Content-Type: text/html HTTP header).
Won't be properly understood by user agents which you can't completely override with CSS (such as screen readers, text browsers and search engines).
Won't be understood by other developers who may have to maintain your code in the future.
Can't use an HTML validator for a cheap, basic QA pass

score 1 · Answer 3 · edited May 23 '17 at 12:31

The W3C is developing a standard call Custom Elements, which allows authors to define their own elements. You can read about it here:

Custom Elements, defining new elements in HTML
Custom Elements allow web developers to define new types of HTML elements. The spec is one of several new API primitives landing under the Web Components umbrella, but it's quite possibly the most important. Web Components don't exist without the features unlocked by custom elements:
- Define new HTML/DOM elements
- Create elements that extend from other elements
- Logically bundle together custom functionality into a single tag
- Extend the API of existing DOM elements
Introduction to Custom Elements

Custom Elements enable developers to create their own custom HTML tags, let them use those tags in their sites and apps, and enable easier component reuse.
W3C Custom Elements

Provide a way for Web developers to build their own, fully-featured DOM elements. Though it was long possible to create DOM elements with any tag names in HTML, these elements weren't very functional. By giving Web developers the means to both inform the parser on how to properly construct an element and to react to lifecycle changes of an element, the specification eliminates the need for DOM-as-a-render-view scaffolding that has to exist today in most web frameworks or libraries.

However, if your goal for today is to write more readable code, then consider sticking with standard HTML elements (or just div and span elements) and using class and id values for descriptions. You can be as descriptive as you like with classes and ids. See my answers here for guidance:

Important note from that spec: *Publication as an Editor's Draft does not imply endorsement by the W3C Membership* — Quentin, Nov 04 '15 at 23:43
Other important note from that spec: *developers must convey the semantics using ARIA roles, states and properties* (which will probably break the author's goal of having simpler markup) — Quentin, Nov 04 '15 at 23:45
@quentin, *Custom Elements* (as I'm sure you know) is a part of HTML5 web components, which is aggressively being pursued and developed by W3C, Google and other big players. The goal is to make it available to all, so I'm not sure your characterization of *breaking the author's goal* of simplicity is valid. I think it will be accessible without much difficulty in the future. — Michael Benjamin, Nov 04 '15 at 23:50
@Quentin, And yes, I'm aware of the status of the spec. This line is similar to your citation: *This is a public copy of the editors’ draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don’t cite this document other than as work in progress.* ~ from the [flexbox spec](https://drafts.csswg.org/css-flexbox/). — Michael Benjamin, Nov 04 '15 at 23:54

Can I use custom elements and attributes as valid HTML?

HTML

CSS / LESS

3 Answers3