Frontend Dogma

5 More HTML Concepts You Didn’t Know

by on , tagged , (toot or tweet about this)

The first summary of the “HTML Concepts” series covered “body-ok,” the “nothing” content model, constraint validation, indicators for layout tables, and common idioms.

Let’s look at another five concepts:

1. Form Owners

Form owners are essentially form elements that so-called form-associated elements are tied to. These are the following: button, fieldset, input, object, output, select, textarea, img, as well as form-associated custom elements.

Form ownership refers to the connection of a form-associated element with a form owner: The element is associated with its nearest ancestor form element—unless it’s a form-associated listed element (anything that’s not an img) and has a form attribute that overrides this association.

2. Commands and Facets

Commands are probably what you think they are. A command is defined as “the abstraction behind menu items, buttons, and links.” It’s what you issue when you interact with them, that is, click or press on either.

Facets, then, are rarely mentioned anywhere, but they are something a command has. There are the following facets: label, access key, hidden state, disabled state, and action.

3. Focusable Areas

Quite generally speaking, focusable areas are elements that have a tabindex and that are therefore being rendered are focusable areas.

For the tabindex attribute, its purpose is exactly to manage focusable areas. It “allows authors to make an element and regions that have the element as its DOM anchor be focusable areas, allow or prevent them from being sequentially focusable, and determine their relative ordering for sequential focus navigation.”

4. 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 and its own browsing context—which makes browsing context an important but also basic concept.

5. 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, one that is not in the HTML, SVG, or MathML namespace, 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.

—The original posts come with a little more detail, and the HTML specification has even more. Follow the HTML concepts series on (RSS feed just for posts about web development)!