HTML (HyperText Markup Language) is the standard markup language used to create and structure content on web pages. For Selenium testers, understanding HTML is extremely important because Selenium interacts directly with web elements created using HTML. A tester who understands HTML can inspect web pages, identify elements, create reliable locators, debug automation failures, and build stable Selenium test scripts.
HTML knowledge is not only useful for developers. It is also a fundamental skill for manual testers, automation testers, QA engineers, and Selenium professionals because almost every web application that is automated with Selenium is built using HTML, CSS, and JavaScript.
JustAcademy's Selenium Automation Testing Course covers Selenium WebDriver, locators, WebElements, browser automation, TestNG, Page Object Model, data-driven testing, cross-browser testing, reporting, debugging, and real-time automation projects. HTML fundamentals provide the foundation required to understand and automate these web elements effectively. :contentReference[oaicite:0]{index=0}
HTML stands for HyperText Markup Language. It is a markup language used to define the structure and content of a web page.
HTML tells the browser what different pieces of content represent. For example, HTML can define:
Example:
<h1>Login Page</h1>
<p>Welcome to the application.</p>
<button>Login</button>
The browser reads this HTML and renders the corresponding content as a web page.
Testers working with Selenium need to understand the HTML structure of the application because Selenium identifies and interacts with web elements through the DOM.
HTML knowledge helps testers:
For example, if Selenium needs to enter a username, the tester should understand the HTML element representing the username field:
<input id="username" name="username" type="text">
The tester can then create a locator such as:
driver.findElement(By.id("username")).sendKeys("admin");
HTML and Selenium have a direct relationship in web automation.
HTML
↓
Web Page
↓
DOM
↓
Web Elements
↓
Selenium Locator
↓
WebDriver
↓
Automation Action
For example:
<button id="loginBtn">Login</button>
Selenium can locate the button using:
driver.findElement(By.id("loginBtn")).click();
Therefore, HTML provides the structure while Selenium provides the automation mechanism.
A web page is a document displayed inside a web browser. A typical web page can contain HTML for structure, CSS for presentation, and JavaScript for behavior.
Web Application
↓
HTML → Structure
CSS → Design
JavaScript → Behavior
↓
Browser
↓
Rendered Web Page
Selenium primarily interacts with the rendered web page through the browser and the DOM.
A basic HTML document normally contains elements such as <!DOCTYPE html>, <html>, <head>, and <body>.
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is my web page.</p>
</body>
</html>
An HTML element normally consists of an opening tag, content, and a closing tag.
<p>Hello Selenium</p>
Here:
<p> is the opening tag.
Hello Selenium is the content.
</p> is the closing tag.
Some HTML elements are void elements and do not require a closing tag.
<input type="text">
<img src="logo.png" alt="Logo">
<br>
HTML tags define the type or purpose of an element.
| Tag | Purpose |
|---|---|
| <h1> | Main heading |
| <h2> | Secondary heading |
| <p> | Paragraph |
| <a> | Hyperlink |
| <img> | Image |
| <input> | Input control |
| <button> | Button |
| <form> | Form |
| <select> | Dropdown control |
| <table> | Table |
| <div> | Generic block container |
| <span> | Generic inline container |
Attributes provide additional information about an HTML element. Attributes are written inside the opening tag.
<input id="username" name="user" type="text">
In this example:
id="username" is an ID attribute.
name="user" is a name attribute.
type="text" specifies the input type.
Attributes are extremely important for Selenium because many Selenium locators are created using attributes.
The id attribute uniquely identifies an element within a page when used according to HTML's uniqueness requirement.
<input id="username" type="text">
Selenium:
driver.findElement(By.id("username")).sendKeys("admin");
A stable and unique ID is often a convenient locator for Selenium automation.
The name attribute provides a name for an HTML element and is commonly used in form controls.
<input name="email" type="email">
Selenium:
driver.findElement(By.name("email")).sendKeys("[email protected]");
The class attribute assigns one or more CSS classes to an element.
<button class="login-button primary">Login</button>
CSS selector:
driver.findElement(By.cssSelector(".login-button")).click();
Class names can be useful for locating elements, but testers should check whether the class is stable and sufficiently specific.
The type attribute defines the type of certain HTML elements, especially input elements.
<input type="text">
<input type="password">
<input type="email">
<input type="checkbox">
<input type="radio">
<input type="submit">
CSS example:
input[type="password"]
XPath example:
//input[@type='password']
The value attribute can define an initial value associated with an input or other form control.
<input type="text" value="John">
XPath:
//input[@value='John']
Testers should consider whether the value is static or dynamically generated before using it as a locator.
The placeholder attribute provides a hint inside an input field.
<input type="text" placeholder="Enter Username">
CSS selector:
input[placeholder='Enter Username']
XPath:
//input[@placeholder='Enter Username']
Placeholder text can change during UI redesigns, so testers should verify its stability before using it as the primary locator.
The title attribute can provide additional information about an element, often displayed as a tooltip.
<button title="Submit Form">Submit</button>
XPath:
//button[@title='Submit Form']
The alt attribute provides alternative text for images.
<img src="logo.png" alt="Company Logo">
Selenium locator:
By.cssSelector("img[alt='Company Logo']")
Alt text can also be useful for accessibility and image identification.
HTML provides heading elements from <h1> to <h6>.
<h1>Main Heading</h1>
<h2>Section Heading</h2>
<h3>Subsection</h3>
<h4>Topic</h4>
<h5>Subtopic</h5>
<h6>Smallest Heading</h6>
Selenium can locate headings using tag names or other attributes.
driver.findElement(By.tagName("h1")).getText();
The <p> element represents a paragraph.
<p>Welcome to Selenium Training.</p>
Selenium:
String text = driver.findElement(By.tagName("p")).getText();
The <a> element creates hyperlinks.
<a href="/login">Login</a>
Selenium can locate the link using:
driver.findElement(By.linkText("Login")).click();
Or:
driver.findElement(By.cssSelector("a[href='/login']")).click();
The <button> element represents a clickable button.
<button id="loginBtn">Login</button>
Selenium:
driver.findElement(By.id("loginBtn")).click();
Buttons are among the most frequently automated web elements.
The <input> element is used to collect user input.
<input type="text" id="username">
Selenium:
driver.findElement(By.id("username")).sendKeys("admin");
Common input types include:
A text field allows users to enter text.
<input type="text" id="firstName">
Selenium:
driver.findElement(By.id("firstName")).sendKeys("John");
To clear existing content:
driver.findElement(By.id("firstName")).clear();
A password field is commonly represented using type="password".
<input type="password" id="password">
Selenium:
driver.findElement(By.id("password")).sendKeys("Admin@123");
An email input can be defined using:
<input type="email" id="email">
Selenium:
driver.findElement(By.id("email"))
.sendKeys("[email protected]");
A checkbox allows the user to select or deselect an option.
<input type="checkbox" id="rememberMe">
Selenium:
driver.findElement(By.id("rememberMe")).click();
Testers can also check whether a checkbox is selected:
boolean selected = driver.findElement(By.id("rememberMe")).isSelected();
Radio buttons are used when users need to select one option from a group.
<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">
Selenium:
driver.findElement(By.cssSelector("input[value='male']")).click();
A standard HTML dropdown can be created using the <select> element.
<select id="country">
<option value="india">India</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
Selenium:
Select country = new Select(driver.findElement(By.id("country")));
country.selectByVisibleText("India");
The <option> element represents an option inside a standard HTML select control.
<select id="city">
<option value="mumbai">Mumbai</option>
<option value="delhi">Delhi</option>
<option value="pune">Pune</option>
</select>
Selenium can select an option using:
Select city = new Select(driver.findElement(By.id("city")));
city.selectByValue("mumbai");
The <textarea> element is used for multi-line text input.
<textarea id="message" name="message"></textarea>
Selenium:
driver.findElement(By.id("message"))
.sendKeys("This is a test message.");
The <form> element groups controls used to collect or submit user data.
<form id="loginForm">
<input id="username">
<input id="password" type="password">
<button type="submit">Login</button>
</form>
Understanding forms helps testers identify relationships between inputs, labels, buttons, and validation messages.
The <div> element is a generic block-level container frequently used to organize page content.
<div class="login-container">
<input id="username">
<button id="login">Login</button>
</div>
Testers often encounter many nested div elements while inspecting modern applications.
Instead of relying only on generic div tags, use stable attributes and meaningful relationships when creating locators.
The <span> element is an inline container commonly used for text or small portions of content.
<span class="error-message">Invalid password</span>
Selenium:
String message = driver.findElement(
By.cssSelector(".error-message")
).getText();
The <label> element provides a descriptive label for a form control.
<label for="username">Username</label>
<input id="username" type="text">
The for attribute connects the label to the input's id.
This relationship can be useful when understanding a form's structure and creating XPath expressions.
HTML supports ordered and unordered lists.
<ul>
<li>Selenium</li>
<li>TestNG</li>
<li>Java</li>
</ul>
<ol>
<li>Open Browser</li>
<li>Open Application</li>
<li>Login</li>
</ol>
Tables are commonly used to display structured data.
<table id="employees">
<tr>
<th>Name</th>
<th>Role</th>
</tr>
<tr>
<td>John</td>
<td>Tester</td>
</tr>
</table>
Selenium can locate table rows:
List<WebElement> rows =
driver.findElements(By.cssSelector("#employees tr"));
The main table-related elements are:
<table> – table container.
<tr> – table row.
<th> – header cell.
<td> – data cell.
Example XPath:
//table[@id='employees']//tr
Specific cell:
//table[@id='employees']//tr[2]/td[1]
HTML comments are written using:
<!-- This is a comment -->
Comments are not displayed as normal page content. They can be useful for developers but generally are not suitable as Selenium locators.
HTML elements can be nested inside other elements.
<div class="login">
<form>
<div class="username">
<input id="username">
</div>
</form>
</div>
Understanding nesting is essential for XPath and CSS selectors.
For example:
//div[@class='username']//input
In HTML, an element containing another element is its parent, while the contained element is its child.
<div class="login">
<input id="username">
</div>
Here:
div is the parent.
input is the child.
XPath:
//div[@class='login']/input
Elements that share the same parent can be siblings.
<div>
<label>Username</label>
<input id="username">
</div>
XPath can navigate between them:
//label[text()='Username']/following-sibling::input
The Document Object Model (DOM) represents an HTML document as a hierarchical tree of objects.
HTML
└── BODY
└── DIV
└── FORM
├── INPUT
├── INPUT
└── BUTTON
Selenium interacts with elements represented within this DOM structure.
<html>
<body>
<div id="login">
<form>
<input id="username">
<input id="password">
<button>Login</button>
</form>
</div>
</body>
</html>
Tree representation:
html
└── body
└── div#login
└── form
├── input#username
├── input#password
└── button
Browser Developer Tools are extremely important for Selenium testers. They allow testers to inspect HTML, CSS, JavaScript, network activity, console messages, and other browser information.
Suppose Developer Tools displays:
<input id="username" name="username" type="text" placeholder="Enter Username">
Possible Selenium locators include:
By.id("username")
By.name("username")
By.cssSelector("#username")
By.cssSelector("input[name='username']")
By.xpath("//input[@id='username']")
Suppose the HTML is:
<button id="loginBtn" class="btn primary">Login</button>
Possible locators:
By.id("loginBtn")
By.cssSelector("#loginBtn")
By.cssSelector("button.btn.primary")
By.xpath("//button[@id='loginBtn']")
By.xpath("//button[text()='Login']")
CSS selectors are commonly used in Selenium to identify elements.
#username
.login-button
input
input[name='username']
button.login-button
input[type='text'][name='username']
XPath is an expression language used to navigate through elements in an XML or HTML document.
Basic XPath:
//input[@id='username']
By text:
//button[text()='Login']
Using contains:
//button[contains(text(),'Login')]
Using starts-with:
//input[starts-with(@id,'user')]
| Absolute XPath | Relative XPath |
|---|---|
| Starts from the root element | Starts from a relevant element or condition |
| Usually long | Usually shorter |
| Highly dependent on DOM hierarchy | Can be based on stable attributes or relationships |
| More vulnerable to structural changes | Can be more maintainable when well designed |
Absolute:
/html/body/div/form/input[1]
Relative:
//input[@id='username']
HTML knowledge directly affects locator quality.
HTML Element
↓
Inspect Attributes
↓
Identify Stable Attribute
↓
Choose Locator Strategy
↓
Test Locator
↓
Use in Selenium
A tester should not simply copy a long XPath without understanding the underlying HTML.
Some attributes are more useful for automation when they are stable and unique.
Common examples include:
Example:
<button data-testid="login-button">Login</button>
CSS:
By.cssSelector("[data-testid='login-button']")
Modern web applications can generate dynamic IDs, classes, and other attributes.
Example:
<button id="button_928374">Submit</button>
If the number changes on each execution, this locator may be fragile:
By.id("button_928374")
A more flexible XPath might be:
By.xpath("//button[starts-with(@id,'button_')]")
However, testers should always prefer a truly stable attribute when one is available rather than relying unnecessarily on generated patterns.
Many applications provide custom data attributes specifically for testing and application behavior.
<button data-testid="submit-button">Submit</button>
CSS:
By.cssSelector("[data-testid='submit-button']")
XPath:
By.xpath("//button[@data-testid='submit-button']")
Dedicated testing attributes can make automation locators clearer when the development team intentionally maintains them.
ARIA attributes support accessibility and can also provide useful information when inspecting web elements.
<button aria-label="Login">Sign In</button>
CSS:
button[aria-label='Login']
XPath:
//button[@aria-label='Login']
Testers should understand that accessibility attributes have semantic purposes and should not be modified merely for automation without considering accessibility requirements.
Some HTML elements may exist in the DOM but not be visible to the user.
<input id="hiddenField" type="hidden" value="123">
The presence of an element in the DOM does not automatically mean that it is visible or interactable.
Selenium provides methods such as:
isDisplayed()
isEnabled()
isSelected()
Example:
WebElement element = driver.findElement(By.id("hiddenField"));
System.out.println(element.isDisplayed());
| State | Meaning |
|---|---|
| Present | Element exists in the DOM |
| Displayed | Element is visible to the user |
| Enabled | Element can generally receive the relevant interaction |
| Selected | Checkbox/radio/option is selected |
Understanding these differences helps testers diagnose Selenium interaction failures.
Forms are one of the most common areas automated with Selenium.
<form id="registrationForm">
<input id="name" type="text">
<input id="email" type="email">
<input id="password" type="password">
<input id="terms" type="checkbox">
<button type="submit">Register</button>
</form>
Automation:
driver.findElement(By.id("name")).sendKeys("John");
driver.findElement(By.id("email")).sendKeys("[email protected]");
driver.findElement(By.id("password")).sendKeys("Test@123");
driver.findElement(By.id("terms")).click();
driver.findElement(By.cssSelector("button[type='submit']")).click();
Web applications frequently display validation messages when users enter invalid data.
<span class="error-message">
Invalid email address
</span>
Selenium:
String message = driver.findElement(
By.cssSelector(".error-message")
).getText();
Validation messages are useful for functional and negative testing.
| HTML Attribute | Example | Possible Selenium Locator |
|---|---|---|
| id | id="username" | By.id("username") |
| name | name="email" | By.name("email") |
| class | class="login" | By.className("login") |
| type | type="password" | By.cssSelector("input[type='password']") |
| value | value="India" | By.cssSelector("[value='India']") |
| data-testid | data-testid="login" | By.cssSelector("[data-testid='login']") |
| aria-label | aria-label="Search" | By.cssSelector("[aria-label='Search']") |
HTML uses special characters and entities to represent reserved characters.
For example:
< → <
> → >
& → &
" → "
Testers may encounter these entities when inspecting page source or HTML content.
Modern HTML provides semantic elements that describe the meaning of content.
Examples include:
<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>
Example:
<header>
<h1>Online Store</h1>
</header>
<main>
<section>
<h2>Products</h2>
</section>
</main>
Semantic structure can help testers understand the page hierarchy.
An iframe embeds another HTML document within the current page.
<iframe id="paymentFrame" src="payment.html"></iframe>
If a required element is inside an iframe, Selenium generally needs to switch into that iframe before interacting with the element.
driver.switchTo().frame("paymentFrame");
driver.findElement(By.id("cardNumber"))
.sendKeys("4111111111111111");
driver.switchTo().defaultContent();
Links are created using the anchor element.
<a href="/products">Products</a>
<a href="/contact">Contact</a>
Selenium:
driver.findElement(By.linkText("Products")).click();
Attribute-based CSS:
driver.findElement(By.cssSelector("a[href='/products']")).click();
Images are represented using the <img> element.
<img src="logo.png" alt="Company Logo" id="logo">
Possible locators:
By.id("logo")
By.cssSelector("img[alt='Company Logo']")
By.xpath("//img[@alt='Company Logo']")
Testers should distinguish between HTML frames/iframes and browser windows or tabs.
An iframe is an HTML element:
<iframe src="content.html"></iframe>
A new browser window or tab is handled through Selenium window handles rather than an iframe locator.
Modern applications often update the DOM dynamically without a complete page refresh.
Examples include:
Testers need to understand that the HTML structure can change during test execution.
HTML knowledge helps testers understand when an element exists but is not yet ready for interaction.
WebDriverWait wait =
new WebDriverWait(driver, Duration.ofSeconds(10));
WebElement loginButton = wait.until(
ExpectedConditions.elementToBeClickable(
By.id("loginBtn")
)
);
loginButton.click();
The locator identifies the element, while the explicit wait synchronizes the test with the application's state.
The original page source and the current DOM are related but are not always identical after JavaScript modifies the page.
For automation testing, the current DOM shown in Developer Tools is often particularly useful when investigating dynamically generated elements.
For example, JavaScript may add:
<div id="dynamicMessage">
Login successful
</div>
after the page initially loads.
HTML knowledge is useful when creating Page Object classes because each page object normally contains locators representing the page's web elements.
public class LoginPage {
private By username = By.id("username");
private By password = By.id("password");
private By loginButton = By.id("loginBtn");
public void login(String user, String pass) {
driver.findElement(username).sendKeys(user);
driver.findElement(password).sendKeys(pass);
driver.findElement(loginButton).click();
}
}
The HTML structure helps determine which locators should be stored in the page object.
When a Selenium test fails to locate an element, inspect the HTML before changing the test randomly.
| Fragile Approach | Better Approach |
|---|---|
| /html/body/div[2]/form/div[1]/input | //input[@id='username'] |
| //button[3] | //button[@id='submitBtn'] |
| By.tagName("div") | By.cssSelector("#loginContainer") |
| Dynamic generated ID | Stable data-testid or other stable attribute |
| Very long XPath | Short stable CSS/XPath |
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
</head>
<body>
<div class="login-container">
<h1>Login</h1>
<form id="loginForm">
<label for="username">Username</label>
<input
id="username"
name="username"
type="text"
placeholder="Enter Username"
>
<label for="password">Password</label>
<input
id="password"
name="password"
type="password"
placeholder="Enter Password"
>
<label>
<input type="checkbox" id="remember">
Remember Me
</label>
<button id="loginBtn" type="submit">
Login
</button>
</form>
<a href="/forgot-password">
Forgot Password?
</a>
</div>
</body>
</html>
driver.findElement(By.id("username"))
.sendKeys("admin");
driver.findElement(By.id("password"))
.sendKeys("Admin@123");
driver.findElement(By.id("remember"))
.click();
driver.findElement(By.id("loginBtn"))
.click();
The HTML attributes make the elements easy to identify.
<form id="registrationForm">
<input id="firstName" name="firstName" type="text">
<input id="lastName" name="lastName" type="text">
<input id="email" name="email" type="email">
<input id="password" name="password" type="password">
<input id="terms" type="checkbox">
<button id="registerBtn" type="submit">
Register
</button>
</form>
Selenium:
driver.findElement(By.id("firstName"))
.sendKeys("John");
driver.findElement(By.id("lastName"))
.sendKeys("Doe");
driver.findElement(By.id("email"))
.sendKeys("[email protected]");
driver.findElement(By.id("password"))
.sendKeys("Test@123");
driver.findElement(By.id("terms"))
.click();
driver.findElement(By.id("registerBtn"))
.click();
<div class="product-card" data-product-id="101">
<img src="laptop.jpg" alt="Laptop">
<h2 class="product-name">Laptop</h2>
<span class="price">₹50,000</span>
<button class="add-cart">Add to Cart</button>
</div>
Possible Selenium locator:
By.cssSelector(
"[data-product-id='101'] .add-cart"
)
XPath:
//div[@data-product-id='101']//button[contains(text(),'Add to Cart')]
Consider:
<div class="search-box">
<input
id="search"
name="search"
type="text"
placeholder="Search products"
>
<button id="searchBtn">Search</button>
</div>
Tag: input
ID: search
Name: search
Type: text
Button ID: searchBtn
CSS:
#search
XPath:
//input[@id='search']
Selenium:
driver.findElement(By.id("search"))
.sendKeys("Laptop");
driver.findElement(By.id("searchBtn"))
.click();
| HTML Concept | Example | Selenium Relevance |
|---|---|---|
| Tag | <button> | Identifies element type |
| ID | id="login" | Common locator |
| Name | name="email" | Common form locator |
| Class | class="btn" | CSS/Class locator |
| Attribute | type="text" | CSS/XPath condition |
| Text | Login | Text-based XPath |
| Parent | <div> containing input | XPath relationship |
| Child | <input> inside div | XPath/CSS relationship |
| Sibling | label + input | XPath sibling navigation |
| iframe | <iframe> | Requires frame switching |
Open Web Application
↓
Inspect HTML
↓
Identify Target Element
↓
Understand Tag and Attributes
↓
Check Stability
↓
Create CSS / XPath / Other Locator
↓
Test Locator in Developer Tools
↓
Use Selenium findElement()
↓
Perform Action
↓
Validate Result
HTML fundamentals are an important foundation for Selenium automation. JustAcademy's Selenium Automation Testing Course with Java includes Selenium WebDriver, locators and WebElements, browser automation, TestNG, data-driven testing, Page Object Model, cross-browser testing, automation framework concepts, reporting, debugging, and real-time automation projects. :contentReference[oaicite:1]{index=1}
Understanding HTML before learning advanced Selenium concepts makes it easier to inspect web pages, identify elements, create locators, troubleshoot failures, and understand how Selenium interacts with the browser.
For more information about the Selenium training program:
JustAcademy Selenium Training Course
To register for a course demo:
Register for JustAcademy Course Demo
HTML is the foundation of every web page that Selenium automates. Testers do not need to become full-stack HTML developers, but they should understand the HTML concepts required to inspect and automate web applications.
The most important HTML concepts for Selenium testers include:
The key relationship to remember is:
HTML
↓
DOM
↓
Web Element
↓
Locator
↓
Selenium WebDriver
↓
Automation Action
↓
Validation
Key Rule: A Selenium tester who understands HTML can inspect the DOM more effectively, create better locators, understand WebElements, troubleshoot automation failures, and build more maintainable web automation scripts.
