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%;
    }
  }
}

Answer 1

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.

Answer 2

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