Why does CSS work with fake elements?

Question

In my class, I was playing around and found out that CSS works with made-up elements.

Example:

imsocool {      color:blue;  }

<imsocool>HELLO</imsocool>

When my professor first saw me using this, he was a bit surprised that made-up elements worked and recommended I simply change all of my made up elements to paragraphs with ID's.

Why doesn't my professor want me to use made-up elements? They work effectively.

Also, why didn't he know that made-up elements exist and work with CSS. Are they uncommon?

Answer 1

Why does CSS work with fake elements?

(Most) browsers are designed to be (to some degree) forward compatible with future additions to HTML. Unrecognised elements are parsed into the DOM, but have no semantics or specialised default rendering associated with them.

When a new element is added to the specification, sometimes CSS, JavaScript and ARIA can be used to provide the same functionality in older browsers (and the elements have to appear in the DOM for those languages to be able to manipulate them to add that functionality).

(Although it should be noted that work is underway to define a means to extend HTML with custom elements, but this work is in the early stages of development at present so it should probably be avoided until it has matured.)

Why doesn't my professor want me to use made-up elements?

• They are not allowed by the HTML specification
• They might conflict with future standard elements with the same name
• There is probably an existing HTML element that is better suited to the task

Also; why didn't he know that made-up elements existed and worked with CSS. Are they uncommon?

Yes. People don't use them because they have the above problems.

Answer 2

TL;DR

• Custom tags are invalid in HTML. This may lead to rendering issues.
• Makes future development more difficult since code is not portable.
• Valid HTML offers a lot of benefits such as SEO, speed, and professionalism.

Long Answer

There are some arguments that code with custom tags is more usable.

However, it leads to invalid HTML. Which is not good for your site.

The Point of Valid CSS/HTML | StackOverflow

• Google prefers it so it is good for SEO.
• It makes your web page more likely to work in browsers you haven't tested.
• It makes you look more professional (to some developers at least)
• Compliant browsers can render [valid HTML faster]
• It points out a bunch of obscure bugs you've probably missed that affect things you probably haven't tested e.g. the codepage or language set of the page.

Why Validate | W3C

• Validation as a debugging tool
• Validation as a future-proof quality check
• Validation eases maintenance
• Validation helps teach good practices
• Validation is a sign of professionalism