Before diving into this section, it's important to understand why learning HTML is essential when working with Selenium WebDriver. Selenium WebDriver automates browsers by locating and interacting with web elements such as buttons, text fields, and links. These web elements are built using HTML. To locate and interact with them, we need to understand how elements are structured in HTML and how attributes like id, class, type, and name work.
Learning HTML Basics will help you identify the right web elements to interact with during automation. Lets start
What is HTML?
HTML is an acronym for HyperText Markup Language. It is the standard language used to design and structure web pages. HTML defines the structure and content of a web page by using a series of elements, tags, and attributes to organize text, images, and other multimedia content.
HTML Elements
HTML elements are the basic building blocks of the web page. Each HTML element represents a part of the content, such as a heading, a text input, an image, or a button.
An HTML element is made up of an opening tag, content, and a closing tag in most cases.
Example:
<p>This is a Paragraph</p>
Here,
<p> is an opening tag.
This is a paragraph is the content.
</p> is the closing tag.
Some tags, like <img> and <input>, are self-closing tags.
Example:
<img src=”image.jpg”>
Here are the important HTML tags and their purpose.
| Element Tag | Purpose |
|---|---|
| <html> | Root element of the page. |
| <head> | Metadata (title, links to CSS, etc.) |
| <body> | Actual content (buttons, text, images) |
| <h1> to <h6> | Headings |
| <p> | Paragraph Text |
| <a> | Defined hyperlinks (Anchor Tag) |
| <input> | Used to take user inputs like text fields, checkboxes, radio buttons, etc. |
| <button> | Used to create clickable buttons. |
| <img> | Embeds images into the web page. |
| <div> | A container for grouping HTML elements (commonly used in page layouts). |
| <span> | An inline container used to group text or elements for styling. |
| <select> | Creates a dropdown list (important for selecting options). |
| <option> | Defines the items/options inside a <select> dropdown. |
| <table> | Used to create a table layout for displaying data. |
| <tr> | Defines a row inside a table. |
| <td> | Defines a cell inside a row of a table. |
| <form> | Groups together input elements that will be submitted to a server. |
| <label> | Defines a label for an input element (improves form accessibility). |
HTML Attributes
Attributes provide additional information about an HTML element. They are always specified in the opening tag and usually come in name-value pairs, like name="value".
Let’s take our previous self-closing tag example
<img src=”image.jpg”>
In this example:
<img> is an HTML Tag
src = “image.jpg” is an attribute
src is the attribute name, and “image.jpg” is the attribute value.
Attributes help define the behavior or appearance of elements. For example, the src attribute tells the browser which image to load. Let's see some of the attributes and their purpose.
| Attribute | Purpose | Example |
|---|---|---|
| id | Unique Identifier | <input id="username"> |
| class | Grouping similar elements | <div class="menu"> |
| name | Naming an element | <input name="email"> |
| type | Specifies the type of input, such as a checkbox or button | <input type="password"> |
| src | Specifies the path to media resources like images, videos, or scripts | <img src="logo.png"> |
| href | URL for links | <a href="https://www.qafeast.com">Click</a> |
| value | Sets the value for inputs | <input value="Hello"> |
| placeholder | Shows a hint inside the input fields | <input placeholder="Enter name"> |
| title | Tooltip text when the user hovers over the element | <button title="Submit Form">Submit</button> |
| alt | Alternate text for images | <img src="logo.png" alt="Site Logo"> |
| for | Links a <label> to an input field by matching the id | <label for="username">Username</label> |
| text | The visible text inside an element (not an attribute but often targeted) | <button>Login</button> |
Here is an example of how HTML elements and attributes are combined to build a web page. Open a text editor, paste this HTML block, save the file with a .html extension, and open it in a browser to see how HTML is structured.