Frontend Dogma

And 4 More HTML Concepts You Didn’t Know

by on , tagged , , (toot this)

Following two summaries for the “HTML Concepts” series, here’s the third and for now last summary—the last one as the series is currently not being continued. (If you feel it should go on, please share feedback.)

1. Browsing Contexts

A browsing context is where a user agent displays a document—which often is a tab or window, but can also be an iframe or frame. Every browsing context has its own DOM, origin, navigation and history, as well as cookies. That is, every site or app has a browsing context—which makes browsing context an important but also basic concept.

2. Unstyled Documents

An unstyled document is a document that has no author style sheets, no (meaning none of its elements has any) presentational hints, no style attributes; that is not in the HTML, SVG, or MathML namespace; and that has no focusable area (other than the viewport), no hyperlinks, no Window object, and no registered event listeners. It could “just result in a wall of text,” but may also be displayed in other manners—an unstyled document, which should be something that the browser represents using a DOM, could be “rendered in a manner that is useful for a developer,” as with syntax highlighting or a visualization of the respective document tree.

3. Customized Built-In Elements

HTML allows to define custom elements, i.e., you can build your own fully-featured DOM elements.

One special type of custom element is the customized built-in element—a custom element built on an existing HTML element. This allows for reuse and enhancement of functionality already available.

The way this works is roughly like this: Pick an element to build on and extend; define a class for it, similar to an autonomous custom element; have that class extend the respective element; for the define method, also specify an extends option; add an is attribute to the customized element in question, with the name of the customized element.

But: We’re still waiting for support in Safari.

4. Kinds of Elements

There are six kinds of elements in HTML:

The respective element groups include one (template) to about a hundred elements (the normal ones).

—The original posts come with a little more detail, and the HTML specification, of course, has even more.