Arrange elements in the DOM to be in logical order

Bad - https://ujghes.csb.app/

<button class="btn" style="float: right;">Apple 🍎</button>
<button class="btn">Orange 🍊</button>
<button class="btn">Grapes 🍇</button>

In this example, the tab order would be illogical because the Apple button is visually floated to the right using the float property, but it appears first in the source code. Therefore, if a user presses the tab key to navigate through the buttons, the focus will jump from Orange to Grapes and then back to Apple. This can be confusing for users who may expect the focus to move from left to right.

Good - https://7en3rw.csb.app/

<button class="btn">Orange 🍊</button>
<button class="btn">Grapes 🍇</button>
<button class="btn">Apple 🍎</button>

In this example, the tab order would be logical because the buttons appear in the order they are listed in the source code. If a user presses the tab key to navigate through the buttons, the focus will move from Orange to Grapes and then to Apple, which matches the visual layout from left to right.

Be careful when changing the visual position of elements using CSS to avoid creating an illogical tab order.