Rectangle 27 1

html Why does CSS work with fake elements?


var wee = document.createElement('wee');
console.log(wee.toString()); //[object HTMLUnknownElement]

the reason CSS can style non-standard tags

(I'm sure this will draw flames, but there's my 2 cents)

Not necessarily. They're "non-conforming". What's the difference? Something can "not conform" and still be "allowed". The W3C aren't going to send the HTML police to your home and haul you away.

Not only does HTML specify how elements should be treated w.r.t. CSS, the CSS spec is, for the most part, document language-agnostic by design as well (this is already kinda-sorta implied in some other answers, but I note it here for convenience). If there's any behavior that is specific to HTML and/or XHTML, it is always indicated, even in informative text (e.g. "an HTML element's ID is specified by the id attribute"), not just normative text (see Backgrounds and Borders 3 for an example).

Note: if you want to use a custom tag, just remember a change to the HTML spec at a later time could blow your styling up, so be prepared. It's really unlikely that the W3C will implement the <imsocool> tag, however.

Possibly, but unlikely. (replace "will" with "might") The only way this should result in a rendering issue is if your custom element conflicts with another specification, such as a change to the HTML spec or another specification being honored within the same system (such as SVG, Math, or something custom).

That said, strict validators will declare your non-standard elements to be "invalid". but that's because the validator's job is to ensure conformance to whatever spec it's validating for, not to ensure "legality" for the browser or for use.

The HTMLUnknownElement interface must be used for HTML elements that are not defined by this specification (or other applicable specifications).

The W3C left things this way for a reason. Conformance and specifications are defined by a community. If you happen to have a smaller community consuming HTML for more specific purposes and they all agree on some new Elements they need to make things easier, they can have what the W3C refers to as "other applicable specifications". (this is a gross over simplification, obviously, but you get the idea)

The reason you can access and alter custom elements using JavaScript is because the specification even talks about how they should be handled in the DOM, which is the (really horrible) API that allows you to manipulate the elements on your page.

There are a few things about the other answers that are either just poorly phrased or perhaps a little incorrect.

User agents must treat elements and attributes that they do not understand as semantically neutral; leaving them in the DOM (for DOM processors), and styling them according to CSS (for CSS processors), but not inferring any meaning from them

Note
Rectangle 27 1

html Why does CSS work with fake elements?


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

"They are not allowed by the HTML specification" Not necessarily true. They do not conform to the HTML Namespace specification, but the HTML5 spec is a much broader thing that allows for custom specifications, and explicitly states how to handle such things in regards to CSS and API handling (DOM).

(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.)

(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.

+1 For "They might conflict with future standards". Remember it might work now but it has to work for 3-4 years after you have started.

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

Another really important point: Special browsers for blind people or people with otherwise limited ability use the proper HTML elements for different things (ease on-page navigation by following headers, for example). So the missing semantics+default rendering might not affect normal browsers too much, but these special browsers will probably be confused, drastically reducing the usability of your web site.

I like to have a <ninja> tag to hide dom elements instead of applying style display:none eg: <ninja>Some hidden stuff</ninja>

There are already libraries, most notably Angular.js, that allow you to extend HTML with custom elements. Perhaps not in the sense that you mean as the elements are just parsed by javascript and translated to real ones usually, but if you are looking to extend html with custom tags, you can do it with Angular

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).

Why does CSS work with fake elements?

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

Note
Rectangle 27 1

html Why does CSS work with fake elements?


Edit: Please see the comment from BoltClock below regarding type vs tag vs element. I usually don't worry about semantics but his comment is very appropriate and informative.

Although there are already a bunch of good replies, you indicated that your professor prompted you to post this question so it appears you are (formally) in school. I thought I would expound a little bit more in depth about not only CSS but also the mechanics of web browsers. According to Wikipedia, "CSS is a style sheet language used for describing ... a document written in a markup language." (I added the emphasis on "a") Notice that it doesn't say "written in HTML" much less a specific version of HTML. CSS can be used on HTML, XHTML, XML, SGML, XAML, etc. Of course, you need something that will render each of these document types that will also apply styling. By definition, CSS does not know / understand / care about specific markup language tags. So, the tags may be "invalid" as far as HTML is concerned, but there is no concept of a "valid" tag/element/type in CSS.

Although you've mentioned that "tags" has become a common term for elements, which I can't and won't disagree with, that doesn't change the fact that the correct term for them is still "elements". A tag is specifically a syntax feature of HTML and XML, and may not exist in other document languages that are compatible with CSS. So, saying that CSS styles "tags" as people often call them isn't doing a whole lot of justice to the document language agnosticism of CSS.

Don't forget SVG! CSS works with SVG too.

Here is an easy way to think of the basic flow from engine to engine: parser -> CSS -> rendering. In reality it is much more convoluted but this is good enough for starters.

Modern visual browsers are not monolithic programs. They are an amalgam of different "engines" that have specific jobs to do. At a bare minimum I can think of 3 engines, the rendering engine, the CSS engine, and the javascript engine/VM. Not sure if the parser is part of the rendering engine (or vice versa) or if it is a separate engine, but you get the idea.

Whether or not a visual browser (others have already addressed the fact that screen readers might have other challenges dealing with invalid tags) applies the formatting depends on whether the parser leaves the "invalid" tag in the document and then whether the rendering engine applies styles to that tag. Since it would make it more difficult to develop/maintain, CSS engines are not written to understand that "This is an HTML document so here are the list of valid tags / elements / types." CSS engines simply find tags / elements / types and then tell the rendering engine, "Here are the styles you should apply." Whether or not the rendering engine decides to actually apply the styles is up it.

Note
Rectangle 27 1

html Why does CSS work with fake elements?


@Alohci I mean not allowed in the sense that they would be discarded from the DOM as opposed to being semantically invalid

@Andrew Steitz: Think of it this way: element : type :: person : name. You can have many elements of different types, with each element being of a single type, and in the same way you can have many people, each having a name. Selectors work on a document tree, and every selector can match some number of document tree elements, which you can narrow down with a class selector, an ID selector, an attribute selector... or a type selector. Whatever you use, you are still matching elements. So "element selector" wouldn't make sense in this case - all of these things would be element selectors.

@BoltClock'saUnicorn : True, but class, ID, and attribute are all, uh, attributes (LOL) of an "element", i.e. the "thingy" inside the angle brackets. They describe the "element" whose opening tag they reside in. Yes, <a> and <div> are specific "types" of elements, but I doubt anyone would call class, ID, and attributes "elements". I TOTALLY agree that all selectors are really "element" selectors but in COMMON USAGE, people usually refer to "type" selectors as "element" selectors. That was the point of my previous comment. Sorry it was unclear. :-)

@ExplosionPills - The HTML specs do not say that unknown elements are disallowed, but since every element has an enumerated list of element names that are allowed as its children, (i.e. its content model), it doesn't have to. There is simply nowhere an unknown element is permitted as the child of a permitted element. Applying HTMLUnknownElement to such elements is part of the precessing spec - i.e. what HTML consumers must do with documents valid or not - and not part of what authors must do to make their documents valid.

Authors must not use elements, attributes, or attribute values that are not permitted by this specification or other applicable specifications, as doing so makes it significantly harder for the language to be extended in the future.

I think most of us think of them as element selectors but it makes sense that they are "officially" type selectors.

I thought this was called the element selector, but apparently it is actually the type selector. The spec goes on to talk about CSS qualified names which put no restriction on what the names actually are. That is to say that as long as the type selector matches CSS qualified name syntax it is technically correct CSS and will match the element in the document. There is no CSS-specific restriction on elements that do not exist in a particular spec -- HTML or otherwise.

I'm not sure specifically where or if the spec says that unkown elements are allowed, but it does talk about the HTMLUnknownElement interface for unrecognized elements. Some browsers may not even recognize elements that are in the current spec (IE8 comes to mind).

There is a draft for custom elements, though, but I doubt it is implemented anywhere yet.

There is no official restriction on including any tags in the document that you want. However, the documentation does say

Note
Rectangle 27 1

html Why does CSS work with fake elements?


The Point of Valid CSS/HTML | StackOverflow

  • Compliant browsers can render [valid HTML faster]
  • Custom tags are invalid in HTML. This may lead to rendering issues.
  • It makes your web page more likely to work in browsers you haven't tested.
  • 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.
  • Makes future development more difficult since code is not portable.
  • Valid HTML offers a lot of benefits such as SEO, speed, and professionalism.
  • Validation as a debugging tool
  • Validation as a future-proof quality check
  • Validation is a sign of professionalism

Another argument for valid code is, if you need to hand over to another developer or you're working in a team, the other members or new developer should instantly understand what you're trying to achieve . . . With invalid, made up tags, this can become very difficult...

Note
Rectangle 27 1

html Why does CSS work with fake elements?


<!-- Custom tags in use, refer to their CSS for aid -->

If you do decide to use them then, make sure to COMMENT your html!! Some people may have some trouble figuring out what it is so a comment could save them a ton of time.

Custom elements are still elements. We can create, use, manipulate, and compose them just as easily as any standard or today.

"Other developers may have no clue what to do if they don't know about custom tags." I hate that argument. Other developers are supposed to learn new stuff too and if they don't understand techniques used in your code, they should be grateful to you for pointing out shortcomings in their knowledge. Maybe that's a bit unfair in this case, because custom tags only exist as a draft, but I've heard the same argument when using proper standardized techniques.

@GolezTroi, it's not that you should never do things that challenge other developers, it's a question of cost-benefit. If doing something in a way that is harder for the next developer legitimately makes your code better and cleaner, do it. But don't do gnarly things just for fun.

@JoshPowell Comments should not be about the what and how (the code already says that, and if it is not clear enough, rewrite the code until it is), but should tell me why. There are few things worse than loads of comments that just say that the sendmail function sends mail or something like that. Id be more interested in why you send mail and if the function name makes that obvious, great! Then I dont need a comment, which is the ideal case. Ill read the code anyway.

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

For example, after registering a special kind of button called super-button, use the super button just like this:

Here is a very helpful article I found and figured I would share, Custom Elements.

I'm not saying I support that but a lot of developers don't continue to learn. There is almost no reason to not comment something if it is a little complex or new. We all comment our scripts correct? To show what we are executing and how, same with custom tags.

If you are interested in this concept then I recommend to do it the right way.

Learn the tech Why Custom Elements? Custom Elements let authors define their own elements. Authors associate JavaScript code with custom tag names, and then use those custom tag names as they would any standard tag.

Of course, if it's just about adding comments. I though you meant that you shouldn't use custom elements at all because other people wouldn't understand. Adding a small comment when you add a lesser used technique is a good thing to do. Be careful with comments in HTML, though. They can end up on the client, consuming bandwidth and possibly revealing implementation details that you don't want your visitors to learn about. But alternatively you may add comments as PHP/ASP comments, so they are still in the template, but remain on the server.

The choice is entirely up to you and you should base it on what the project is asking for.

There is a lot you can do with it and it does make your script beautiful as this article likes to put it. Custom Elements defining new elements in HTML.

This is possible with html5 but you need to take into consideration of older browsers.

This seems like a very good library to use but I did notice it didn't pass Window's Build status. This is also in a pre-alpha I believe so I would keep an eye on this while it develops.

When you make your own custom tag/elements the older browsers will have no clue what that is just like html5 elements like nav/section.

Note
Rectangle 27 1

html Why does CSS work with fake elements?


@OnoSendai A block element may have the display property of block, but it isn't required. For instance, anchor tags were promoted to block status (meaning you're allowed to put block elements like divs inside them), but still have the inline display property.

@OnoSendai You made me doubt, but I really think they are rendered as 'block elements without additional markup', so basically like divs.

@cimmanon: a elements have a transparent content model now so whether they are block or inline depends on whether their ancestor is block or inline. This answer is talking about unknown elements, for which HTML does not define a content model. As far as CSS is concerned, if there is no browser default display value it uses the initial value.

Also, teachers seem to have gaps in their knowledge, sometimes. This might be due to the fact that they need to teach students the basics about a given subject, and it doesn't really pay off to know all ins and outs and be really up to date. I once got detention because a teacher thought I programmed a virus, just because I could make a computer play music using the play command in GWBasic. (True story, and yes, long ago). But whatever the reason, I think the advice not to use custome elements is a sound one.

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

Here is a question about the Javascript fix. Turns out it is indeed IE7 that doesn't support these elements out of the box.

Here is a related question I found when looking for an example.

In older browsers (I think IE7-) you can apply a Javascript-trick after which they will work as well.

Really? I thought they where rendered as <span> tags. Live and learn...

The initial value of display is inline, so @OnoSendai's comment is correct.

Unknown elements are treated as divs by modern browsers. That's why they work. This is part of the oncoming HTML5 standard that introduces a modular structure to which new elements can be added.

Yes, quite. But especially: they don't serve additional purpose. And they are new to html5. In earlier versions of HTML an unknown tag was invalid.

Note
Rectangle 27 1

html Why does CSS work with fake elements?


github

Actually you can use custom elements. Here is the W3C spec on this subject:

As pointed out by @Quentin: this is a draft specification in the early days of development, and that it imposes restrictions on what the element names can be.

It should be noted that that is a draft specification in the early days of development, and that it imposes restrictions on what the element names can be.

Note
Rectangle 27 1

html Why does CSS work with fake elements?


var wee = document.createElement('wee');
console.log(wee.toString()); //[object HTMLUnknownElement]

the reason CSS can style non-standard tags

(I'm sure this will draw flames, but there's my 2 cents)

Not necessarily. They're "non-conforming". What's the difference? Something can "not conform" and still be "allowed". The W3C aren't going to send the HTML police to your home and haul you away.

Not only does HTML specify how elements should be treated w.r.t. CSS, the CSS spec is, for the most part, document language-agnostic by design as well (this is already kinda-sorta implied in some other answers, but I note it here for convenience). If there's any behavior that is specific to HTML and/or XHTML, it is always indicated, even in informative text (e.g. "an HTML element's ID is specified by the id attribute"), not just normative text (see Backgrounds and Borders 3 for an example).

Note: if you want to use a custom tag, just remember a change to the HTML spec at a later time could blow your styling up, so be prepared. It's really unlikely that the W3C will implement the <imsocool> tag, however.

Possibly, but unlikely. (replace "will" with "might") The only way this should result in a rendering issue is if your custom element conflicts with another specification, such as a change to the HTML spec or another specification being honored within the same system (such as SVG, Math, or something custom).

That said, strict validators will declare your non-standard elements to be "invalid". but that's because the validator's job is to ensure conformance to whatever spec it's validating for, not to ensure "legality" for the browser or for use.

The HTMLUnknownElement interface must be used for HTML elements that are not defined by this specification (or other applicable specifications).

The W3C left things this way for a reason. Conformance and specifications are defined by a community. If you happen to have a smaller community consuming HTML for more specific purposes and they all agree on some new Elements they need to make things easier, they can have what the W3C refers to as "other applicable specifications". (this is a gross over simplification, obviously, but you get the idea)

The reason you can access and alter custom elements using JavaScript is because the specification even talks about how they should be handled in the DOM, which is the (really horrible) API that allows you to manipulate the elements on your page.

There are a few things about the other answers that are either just poorly phrased or perhaps a little incorrect.

User agents must treat elements and attributes that they do not understand as semantically neutral; leaving them in the DOM (for DOM processors), and styling them according to CSS (for CSS processors), but not inferring any meaning from them

Note
Rectangle 27 1

html Why does CSS work with fake elements?


github

Actually you can use custom elements. Here is the W3C spec on this subject:

As pointed out by @Quentin: this is a draft specification in the early days of development, and that it imposes restrictions on what the element names can be.

It should be noted that that is a draft specification in the early days of development, and that it imposes restrictions on what the element names can be.

Note