5 HTML Naming Rules to Help AI Agents Make Decisions via UI

When an AI agent (such as MultiOn or a GPT-4o-based browser agent) enters your website, it focuses on the code structure rather than pixels. While it takes milliseconds for a human user to recognize a 'Buy' button by its color and position, the expression <button id="btn-382"> means nothing to an AI agent. If the agent has to analyze the entire DOM tree and surrounding text to understand what that button does, the processing cost (token usage) increases, and the risk of making an incorrect action (hallucination) rises.

Optimizing the AI agent site navigation process is not just about SEO; it is a matter of survival in the 'Agentic Web' era. LLMs (Large Language Models) must be able to infer the function of an HTML element from its name. In this guide, we will examine 5 technical naming rules that will ensure agents can perform actions on your site without getting lost.

1. Apply the Action-Object Pattern

AI agents try to understand what elements on a page 'do'. Instead of using obfuscated IDs, you should use a structure that defines the action and the object being affected. For example, using id="add-to-cart-button" instead of id="cart-1" for a cart button allows the agent to instantly map the 'add' action to the 'cart' object.

This rule applies not only to buttons but also to form fields. Using name="search-query" instead of name="q" for a search box clarifies what the agent should enter there. LLMs follow semantic context; therefore, verb-noun combinations shorten the 'reasoning' steps of agents.

2. Embed Hierarchical Context into the ID

There might be multiple 'Submit' buttons on a page: one for newsletter signup, another for a contact form. An AI agent might confuse these two buttons while scanning the DOM. Hierarchical naming tells the agent which section the element belongs to. The difference between id="footer-newsletter-submit" and id="contact-form-submit" prevents the agent from filling out the wrong form.

Technically, reflecting the hierarchy we use in CSS selectors into ID and Name attributes prevents the agent from getting lost within the 'DOM tree depth'. The agent can understand where the element is just from its name, without having to look at the parent nodes. This directly impacts crawling speed.

3. Avoid Abbreviations and Use Full Words

Developers often use abbreviations like btn-sub, nav-lnk, or usr-pref to reduce file size or write code quickly. However, for LLMs, the word 'sub' could mean 'subscribe', 'submit', 'substitute', or 'subject'. For AI agent site navigation efficiency, ambiguity is the greatest enemy.

Using full words (id="navigation-link-home") ensures the agent finds the result closest to the correct meaning during the 'embedding' process. Remember, agents read your code like a text document. The more 'human-readable' your code is, the more 'machine-processable' it becomes for AI.

4. Align with Schema.org and Standard Name Attributes

AI models have been trained on a vast portion of the internet. Structured data standards like Schema.org and widely used HTML standards are dominant in this training data. When defining the name attribute for form elements, stick to browser autocomplete standards and Schema properties.

• For full name field: name="full-name" or name="name"
• For email: name="email"
• For phone: name="telephone" or name="phone"

These standard names allow the agent to infer that 'this field is likely expecting an email'. Using custom names (e.g., name="user_mail_address_field") causes the agent to hesitate and perform additional analysis.

5. Include State Indicators

AI agents manage not only static pages but also dynamic interfaces. They need to understand whether a menu is open or closed, or if a button is disabled. Accessibility attributes like aria-expanded are very valuable, but reflecting this state in ID or class names provides double confirmation to the agent.

For example, naming conventions like id="faq-item-1-active" for an accordion menu element or id="submit-button-loading" for a loading state allow the agent to develop a 'non-visual' understanding of the page's current state. This helps agents performing DOM manipulation plan their next step.

Technical Checklist

• Do all interactive elements (button, input, a) have a unique and descriptive ID?
• Are ID and Name attributes consistent with the 'action-object' structure?
• Are full English words used instead of abbreviations?
• Do form fields have name attributes that match standard 'autocomplete' values?
• Is the section where the element is located (header, footer, sidebar) specified in the naming?

Example Scenario: Bad vs. Good Practice

The code blocks below represent a filtering area on an e-commerce site. Compare which one an AI agent can decide on faster.

<!-- BAD: The AI agent must look at parent divs to understand what this button filters -->
<div class="filter-box">
  <input type="checkbox" id="c1" name="cat" value="12">
  <label for="c1">Electronics</label>
</div>

<!-- GOOD: The AI agent understands what to do just by looking at the input -->
<div class="category-filter-section">
  <input type="checkbox" id="category-checkbox-electronics" name="filter-category-electronics">
  <label for="category-checkbox-electronics">Electronics</label>
</div>

Common Mistakes

• Random ID Assignment: IDs like _ngcontent-c12 automatically generated by modern frameworks (React, Vue) are 'noise' for agents.
• Overly Long Names: Creating 200-character IDs in the name of being descriptive can strain token limits.
• Visual-Only Naming: Instead of id="red-button", you should use id="cancel-order-button". Color is secondary information for the agent's functional decision.