Is there a problem with using invented tags and attributes?

Question

I was looking at some websites and noticed some tags that are not patterns like <div> <span> etc....

So I decided to test and saw that these tags work normally with css and javascript, but that left me with a question. Is there a problem using these "invented tags and attributes"?

var el = document.getElementsByTagName("nomedatag")[0];
el.textContent = el.getAttribute("nomedoatributo");

nomedatag{
  display:block;
  width:150px;
  height:150px;
  background-color:#333;
  color:#fff;
}

<nomedatag nomedoatributo="Texto"></nomedatag>

Answer 1

If you test a custom elements those in the code validator of the W3C itself you will see that will return an error:

Link for you to test yourself: https://validator.w3.org/#validate_by_input

---

Properties of user-agent

Most of the tags as <div>, <label>, etc have default attributes defined by itself user-agent as an example display:block in div. Already one custom element as <teste> will not receive any style from user-agent, which in most cases tb is not very useful...

---

Nonnormative

Custom Elements are still a Draft in the HTML5 specifications as you can see here http://w3c.github.io/webcomponents/spec/custom/

"Although authors can always use non-standard elements in their documents, with application-specific behavior added after the fact by script or similar, these elements have historically been non-conforming and not very functional."

---

Good Practice and Semantics

"In general, the name of the element to be extended cannot be determined simply by looking at the interface of the element extends, as many elements share the same interface (for example, q and blockquote both sharing HTMLQuoteElement)."

To use our custom internal element, we use the attribute is in one element button:

<button is="plastic-button">Click Me!</button>

---

Downside to use this type of element: http://w3c.github.io/webcomponents/spec/custom/#drawbacks-of-Autonomous-custom-Elements

• Mismanagement of tabindex
• Compromised semantics, needs to role and aria atributos, other than a article, section, etc that already have an intrinsic semantics of the tag itself
• Doesn’t have the styles of user-agent

Answer 2

In HTML5, the use of "invented" tags is not recommended unless you are using technologies such as WebComponents. Learn more about them here.

Regarding the HTML specification tags (such as <div>, <span>, <section>, etc), you can create custom attributes as long as they follow the pattern data-*, for example:

<span data-person-age="16">Luiz Felipe</span>

Otherwise, it will break the HTML validation of your site.