Which HTML elements can receive focus?

In HTML, elements that can gain focus primarily include interactive elements and others that can gain focus via specific attributes.

1. Link elements (<a>): Link elements can gain focus when they have the href attribute.

   • Example: <a href="https://www.example.com">Visit website</a>

2. Input elements (<input>): Most types of <input> elements can gain focus, except for those with type="hidden".

   • Example: <input type="text" placeholder="Enter text">

3. Button elements (<button>): All <button> elements can gain focus by default.

   • Example: <button>Click me</button>

4. Select elements (<select>): <select> elements (e.g., dropdown select boxes) can gain focus.

   • Example: <select><option value="option1">Option 1</option></select>

5. Text area elements (<textarea>): <textarea> elements can gain focus.

   • Example: <textarea rows="3">Enter content</textarea>

Additionally, some elements cannot gain focus by default, but can be made focusable by setting the tabindex attribute.

• tabindex="0": The element gains focus in the natural document flow order.
• tabindex="1" or higher positive values: Elements with these values can gain focus and their order can be customized.
• tabindex="-1": Elements with tabindex="-1" can gain focus programmatically (e.g., via JavaScript), but not via keyboard navigation (e.g., Tab key).

For example, an element like <div tabindex="0">I can now gain focus</div> can be made focusable.

Understanding which elements can gain focus is crucial for improving website accessibility and user experience, especially when handling keyboard navigation and form controls. It also helps developers better control the interactivity of page elements.