HTML Attributes & Selectors

The lang attribute identifies the language of an element's content.

<html lang="en">
<body>
  <p>Welcome to Codementrix.</p>
  <p lang="or">ନମସ୍କାର</p>
</body>
</html>

The root language is set to English, while the second paragraph identifies Odia content using the language tag or. Correct language information helps speech synthesis, pronunciation, translation tools, and accessibility technologies.

Dir

The dir attribute specifies text direction.

<p dir="ltr">Left-to-right text</p>

<p dir="rtl">مرحبا بالعالم</p>

<p dir="auto">Direction determined from the content</p>

Common values include ltr, rtl, and auto. Use the direction that matches the content rather than selecting a direction purely for visual positioning.

Hidden

The hidden attribute indicates that an element is not currently relevant and should not be rendered normally.

<p hidden>This content is currently hidden.</p>

JavaScript can change the hidden state:

const message = document.getElementById("message");

message.hidden = false; // Show the element
message.hidden = true;  // Hide the element

The element must have an ID such as message for this example to work.

Hidden content is not a security mechanism. Do not place secrets in hidden elements or assume hidden information cannot be inspected.

Tabindex

The tabindex attribute influences whether an element can receive keyboard focus and how it participates in sequential keyboard navigation.

<div tabindex="0">
  This container can receive keyboard focus.
</div>

Values to understand:

• tabindex="0" — allows focus and places the element in the normal sequential focus order according to the document and browser behavior.
• tabindex="-1" — allows programmatic focus but generally excludes the element from sequential Tab navigation.
• Positive values — assign explicit focus-order priorities and are generally best avoided because they can make navigation confusing.

Prefer native interactive elements such as buttons and links instead of making generic containers interactive without implementing the necessary keyboard behavior and accessibility semantics.

Spellcheck

The spellcheck attribute provides a hint about whether the browser should check spelling and grammar where supported.

<textarea spellcheck="true"></textarea>

<input type="text" spellcheck="false">

Spellcheck is a hint, not a guarantee that every browser will use the same behavior.