How does browser/HTML decide where focus of cursor should be?

Question

If we don't manually set any of the HTML elements to be focused using javascript, how does HTML decide which element to be focused?

Answer 1

It is done via tabindex attribute. By default it goes through focusable elements by position in page, but you can modify this behaviour.

From linked article:

Focusing non focusable elements:

tabindex=0

When tabindex is set to 0, the element is inserted into the tab order based on its location in the source code. If the element is focusable by default there’s no need to use tabindex at all, but if you’re repurposing an element like a span or div, then tabindex=0 is the natural way to include it in the tab order.

Ignore some focusable elements:

tabindex=-1

When tabindex is set to a negative integer like -1, it becomes programmatically focusable but it isn’t included in the tab order.

And finally: choose by yourself the order, no matter position of the element:

tabindex=1+

It imposes a tab order on the content that bears no resemblance to the expected tab order.

Answer 2

If you mean "What tells the browser which elements can be focused?" then you are looking for the tabindex attribute. Adding this to an element will allow an input device (i.e. mouse, keyboard) to trigger a focus state on the element.

If your question is basically, "how are things focused on?", this is done using an input device, i.e. mouse, and keyboard.

Answer 3

if you mean when the page loads you can use the autofocus attribute

<input type="text" autofocus>

Answer 4

There is actually no element that gets the focus by default.

We can check this pretty easily by creating a simple site and log

document.querySelectorAll(":focus")

to the console.

You will see that it will return an empty array, meaning that no element is focused.