Default Settings of Unrecognized HTML Elements

Default settings of unrecognized HTML elements

It's not so much unrecognized elements, as all elements. Remember that CSS supports XML as well as HTML. In XML, all elements are unrecognized

In the CSS 2.1 spec, section 6.1.1 says:

6.1.1 Specified values

User agents must first assign a specified value to each property based
on the following mechanisms (in order of precedence):

1. If the cascade results in a value, use it. Except that, if the value is 'inherit', the specified value is defined in “The 'inherit'
   value” below.

2. Otherwise, if the property is inherited and the element is not the root of the document tree, use the computed value of the parent
   element.

3. Otherwise use the property's initial value. The initial value of each property is indicated in the property's definition.

By definition, unrecognized elements won't be mentioned in the user agent style sheet, and since we're talking about the default behaviour, won't be mentioned in the author style sheet either. So 1 does not apply.

The display property is defined in 9.2.4 The 'display' property. In the rules there, it says Inherited: no, so 2 does not apply.

So 3 applies. Again from the rules at 9.2.4, we have Initial: inline, so the elements are inline.

For HTML block level elements, they are block by default simply because they are listed as such in the user-agent's style sheet. Similarly for other display values such as table, list-item etc.

How should user agents handle unrecognized HTML elements?

Some excellent advice from @Andy E. This is just some add-ons to that.

The HTML5 draft does define how to parse unknown elements, however, it is distinctly non-trivial. To see the rules, see http://dev.w3.org/html5/spec/tree-construction.html

Note that the first version of Firefox to use these rules is FireFox 4, and the first version of IE to use the rules is IE 10. Older versions have a number of different and often very strange behaviours.

HTML has no notion of "legality", only validity or conformance to a standard. You are free to decide whether you want your pages to conform to any particular standard or not. There is no W3C standard of HTML where use of arbitrarily named elements is conforming.

It is generally advisable to make your HTML conforming to avoid unpredictable errors in browsers and other HTML consumers that you haven't tested against.

In HTML what happens with the content of unrecognised Tags?

It's standardized in HTML5.

There's two different cases. For <![if lt IE 8]>, this is processed in non IE browsers as a "bogus comment" and results in a comment node being added to the DOM. For what IE does, see Axel Fontaine's answer.

For <video ...> browsers other than IE (version 8 or earlier) will create a element in the DOM called "video" and it's contents will be children of the "video" element. IE, if the HTML5 shiv is used, will do the same thing.

For IE prior to IE9, without the HTML5 shiv, the <video ...> tag will cause one element called "VIDEO" will be created. It will be empty. The embed and any other contents will be siblings of it. Then the </video> tag will cause another element to be added to the DOM called "/VIDEO"

As a side issue, the <embed> element is void, so </embed> is never correct. Adding it causes an element called "/EMBED" to be added to the DOM in IE versions prior to IE9.

Unrecognized HTML a tag attribute: data-is-disabled

This is a data attribute (http://www.w3schools.com/tags/att_global_data.asp). These are typically used to interact with JavaScript, so you cannot assume it's not used based on HTML only.

Besides: CSS may also target these links (e.g. a[data-is-disabled]

main element not working in Internet Explorer 11

The HTML5 main element is not supported by Internet Explorer (see browser support data).

You'll need to define main as a block-level element for width to work.

Make this adjustment:

main {
  display: block;  /* new */
  width: 200px;
}

Because the main element is not recognized by Internet Explorer – meaning it's not defined in IE's default style sheet – it uses CSS initial values (per the spec).

The initial value of the display property is inline.

The width property is ignored by inline elements. From the spec:

10.3.1 Inline, non-replaced
elements

The width property does not apply.

By defining the main element as a block-level element in author styles, the width property will work.

More details:

• Default settings of unrecognized HTML elements
• Default style sheet for HTML 4
• main property browser compatibility
• display property definition and initial value

Warning: The tag p2 is unrecognized in this browser

https://developer.mozilla.org/en-US/docs/Web/HTML/Element

HTML element p2 does not exist. Try using only p.

Addition:
It may work with static content built purely of html and css, however it's not a recommended practice.

Check:
Why does CSS work with fake elements?

---

Related Topics