HTML User Interaction and Focus

Advanced

HTML user interaction is the layer where document semantics meet actions such as focusing a control, activating a command, editing a region, selecting text, or completing a drag-and-drop operation. This lesson owns the cross-cutting interaction model; individual element lessons continue to own the semantics of the elements themselves.

Focus is a browser-managed interaction state

A document can have a currently focused area. Focus is not simply a CSS outline and it is not equivalent to “the element the pointer is over”. HTML defines which things can be focusable, which can participate in sequential focus navigation, and how focus changes when interaction moves between focus targets.

<button type="button">First action</button>?

Focusable areas have eligibility rules

The HTML focus model treats a focusable area as an interaction target only when the relevant conditions are satisfied. Natural focusability, a non-null tabindex value, disabled controls, inert subtrees, rendering state, and other platform rules all affect whether an area can receive focus.

<button type="button" disabled>Disabled</button>?

tabindex changes focus participation, not element semantics

The tabindex content attribute supplies an integer used by the focus model. A value of 0 can place an otherwise non-focusable element into sequential focus navigation. A negative value can make an element programmatically focusable without making it sequentially focusable. Positive values create an explicit relative order inside a focus-navigation scope and should be treated as a specialized mechanism rather than a general page-layout tool.

<div tabindex="-1">Focusable target</div>?

Sequential focus navigation is an ordered user path

Sequential focus navigation is the user-agent-defined path through focusable areas when the user uses a sequential navigation mechanism such as the Tab key. The path is not simply the document source order in every case: tabindex values, focus-navigation scopes, shadow-tree behavior, platform conventions, and the eligibility of each target participate in the model.

<a href="#one">One</a> <button type="button">Two</button>?

autofocus requests an initial focus target

The autofocus attribute requests that an element be focused when the document or relevant interaction context is initialized. It is a request participating in the HTML focus processing model, not a guarantee that the user agent will ignore stronger interaction constraints or focus every matching element.

<input autofocus>?

Focus management connects HTML behavior to APIs

Authors sometimes move focus after an interaction, for example after opening an interactive region or revealing a new task. The HTML Standard defines the focus model and focus-management concepts; the concrete JavaScript methods used to manipulate focus belong to the platform APIs. Use those APIs to implement a requirement without treating them as a replacement for native HTML focus behavior.

<p tabindex="-1">Result target</p>?

Activation behavior turns interaction into element commands

Some HTML elements have activation behavior. A user can activate such an element through an interaction modality, and HTML defines how that activation leads to the element’s activation behavior. For elements with activation behavior, non-pointer interaction can result in a click as the common activation signal. This is why a native button can be operated by keyboard without authors inventing a separate keyboard-only command path.

<button type="button">Save</button>?

User activation is a security-sensitive interaction state

HTML tracks user activation separately from focus. Sticky activation records whether a window has ever received an activation, while transient activation represents a recent activation that may expire or be consumed. Some powerful browser APIs are gated on these states so that scripts cannot invoke user-sensitive actions without a meaningful user interaction.

navigator.userActivation?

Native interaction states can cooperate without becoming duplicates

The existing element and global-attribute lessons remain the primary owners for their specific features. This lesson only explains their interaction relationships: hidden content is not an ordinary focus target; inert subtrees are removed from normal interaction; modal dialogs make the surrounding document inert; popovers have their own top-layer and light-dismiss behavior; and focus navigation operates within those constraints.

<div popover>...</div>?

Editing and selection are related to focus but are not the same state

An editing host can receive focus while the user’s selection identifies text or an insertion range inside the editing context. Focus answers “which interaction context is active?”; selection answers “what content or insertion range is selected?” HTML defines editing-related concepts and boundaries, while the detailed Selection and editing APIs belong to the later platform API curriculum.

<p contenteditable="true">Editable text</p>?

Drag and drop has a defined data model and event boundary

HTML defines an event-based drag-and-drop mechanism and the drag data store behind it. The model has a source, possible intermediate targets, and an end point or cancellation. The draggable global attribute participates in deciding what can be dragged, while the DataTransfer object carries drag data during the operation.

event.dataTransfer.setData("text/plain", "card")?

Native interaction should remain the primary authoring path

When HTML already provides the interaction semantics you need, start with the native element or attribute that owns them. A generic element plus custom scripts may reproduce part of the visual result while silently losing keyboard activation, focus behavior, user-agent conventions, or other processing rules. H358 is the cross-cutting map that helps you see those relationships; it does not replace the individual element lessons.

<button type="button">Use the native control</button>?

Ownership boundaries for the rest of Foxipa

This lesson owns the cross-cutting HTML interaction model: focusability, sequential focus navigation, autofocus, activation behavior, user activation, interaction-state relationships, editing/selection boundaries, and HTML drag-and-drop concepts. The global-attributes lesson remains the detailed owner for global attributes such as tabindex, autofocus, inert, contenteditable, and draggable; dialog remains the dialog owner; popover remains part of the global-attributes/native-interaction coverage; element lessons retain their element-specific behavior; and later Web Platform lessons own the general DOM, Events, Selection, Fetch, navigation, storage, workers, and other APIs.