QAPage – Software Testing Jobs, QA Resources & Careers

QAPage Navigation & Directory
QAPage
Type any keyword to search live pages, tools, or press Search to query site-wide.
Press Enter to search site Press ESC to exit

HTML Full Notes PDF For Testers: Complete Learning Notes

By /

HTML Full Notes PDF QA

Beginner to Experienced Level | QAPage Learning Notes
These HTML notes for QA are designed for manual testers, automation testers, and experienced QA professionals. The language is simple, with practical website examples and testing scenarios.

1. What Is HTML?

HTML stands for HyperText Markup Language. It is used to create the structure of a webpage.
HTML tells the browser what elements should appear on a page, such as headings, paragraphs, buttons, images, links, and forms.
Example: On a login page, HTML defines the username field, password field, and Login button.
<h1>Login Page</h1><label>Username</label><input type="text"><button>Login</button> HTML Notes For QA
From a tester’s point of view: HTML helps you understand what elements exist on a webpage and how to inspect them during testing.

2. Basic Structure of an HTML Document

Every standard HTML page has a basic structure.
<!DOCTYPE html><html><head>    <title>My Website</title></head><body>    <h1>Welcome to My Website</h1>    <p>This is my first webpage.</p></body></html>
What each part means:
  • <!DOCTYPE html> tells the browser to use modern HTML standards.
  • <html> is the root element of the page.
  • <head> contains page information and resource references.
  • <title> defines the browser tab title.
  • <body> contains the page content visible to users.
Testing example: Verify that the page title is correct and that the welcome heading appears on the page.

3. HTML Tags and Elements

An HTML tag is written inside angle brackets, such as <p> or <h1>.
An HTML element usually includes an opening tag, content, and a closing tag.
<p>This is a paragraph.</p>
Here:
  • <p> is the opening tag.
  • This is a paragraph. is the content.
  • </p> is the closing tag.
Some elements, such as <img> and <input>, are void elements and do not use closing tags.
Testing example: Inspect whether the expected paragraph, image, or input field exists in the page’s HTML.

4. HTML Headings

HTML provides six heading levels, from <h1> to <h6>.
<h1>Software Testing</h1><h2>Manual Testing</h2><h3>Functional Testing</h3><h4>Login Testing</h4>
  • <h1> represents the highest-level heading.
  • <h2> represents a subsection.
  • <h3> and lower levels represent further subsections.
Testing example: Verify that the page displays the correct heading and that the heading structure makes sense for accessibility and SEO.

5. Paragraphs and Text Formatting

HTML provides elements to organize and emphasize text.
<p>This is a paragraph.</p><strong>Important message</strong><em>Please read carefully.</em><mark>Highlighted text</mark>
Common elements:
Tag
Purpose
<p>
Paragraph
<strong>
Important content
<em>
Emphasized content
<mark>
Highlighted content
<br>
Line break
<hr>
Thematic break
Testing example: Check whether important messages are displayed correctly and whether text is readable on desktop and mobile screens.

6. HTML Links

The <a> tag creates a hyperlink that allows users to navigate to another page or resource.
<a href="https://qapage.com/">Visit QAPage</a>
Here, href specifies the link destination.
What should a tester check?
  • Does the link open the correct page?
  • Is the URL correct?
  • Does the link work on mobile?
  • Does it open in the same tab or a new tab as expected?
  • Does it lead to a broken page?
Example of opening a link in a new tab:
<a href="https://example.com" target="_blank">    Open Website</a>
For links that open new tabs, testers should also consider safe handling of the new browsing context.

7. HTML Images

The <img> tag displays an image on a webpage.
<img src="logo.png" alt="Company Logo">
  • src specifies the image location.
  • alt provides alternative text describing the image.
Testing example: Check whether the image loads, the correct image is displayed, its dimensions are appropriate, and meaningful alternative text is provided where needed.

8. HTML Lists

HTML supports ordered lists and unordered lists.
Ordered list:
<ol>    <li>Open the website</li>    <li>Enter login details</li>    <li>Click Login</li></ol>
Unordered list:
<ul>    <li>Manual Testing</li>    <li>Automation Testing</li>    <li>API Testing</li></ul>
  • <ol> displays a numbered list.
  • <ul> displays a bulleted list.
  • <li> represents a list item.
Testing example: Verify that all expected menu items, course topics, or instructions are displayed in the correct order.

9. HTML Tables

Tables display information in rows and columns.
<table>    <tr>        <th>Test Case</th>        <th>Status</th>    </tr>    <tr>        <td>Login Test</td>        <td>Pass</td>    </tr></table>
Common table elements:
  • <table> – creates a table.
  • <tr> – creates a row.
  • <th> – defines a header cell.
  • <td> – defines a data cell.
  • <thead>, <tbody>, and <tfoot> – organize table sections.
Testing example: Check that table rows, columns, headings, sorting, pagination, and displayed data work correctly.

10. HTML Forms

Forms collect information from users, such as login details, contact information, and registration data.
<form>    <label for="email">Email:</label>    <input type="email" id="email" name="email">    <button type="submit">Submit</button></form>
Important elements:
  • <form> – groups form controls.
  • <label> – provides a label for a control.
  • <input> – accepts user input.
  • <button> – creates a button.
  • <textarea> – accepts multiline text.
  • <select> – creates a dropdown.
  • <option> – defines a dropdown option.
Testing example: Enter valid and invalid values, submit the form, and verify the expected validation messages and submission results.

11. HTML Input Types

The <input> element supports different types of user input.
Input type
Purpose
Testing example
text
General text
Enter a name
password
Password entry
Check password masking
email
Email input
Test invalid email formats
number
Numeric input
Check minimum and maximum values
radio
Single selection from a group
Select one gender option
checkbox
Independent selections
Select multiple skills
date
Date entry
Select a valid date
file
File selection
Upload a PDF
submit
Form submission control
Submit the form
hidden
Hidden form value
Check whether the value is handled correctly
Example:
<input type="text" id="username"><input type="password" id="password"><input type="email" id="email"><input type="checkbox" id="terms">
Important: HTML input types provide useful browser behavior, but they do not replace server-side validation.

12. HTML Attributes

Attributes provide additional information about HTML elements.
<input    type="text"    id="username"    name="username"    placeholder="Enter username"    required>
Common attributes:
Attribute
Meaning
id
Identifies an element within the document
class
Groups elements for styling or scripting
name
Names a form field
value
Defines an element’s value
placeholder
Shows a hint in an empty field
required
Indicates that a value is required
disabled
Disables a control
readonly
Makes a supported control non-editable
href
Specifies a link destination
src
Specifies a resource location
alt
Provides alternative text for an image
Testing example: Inspect whether required fields have the correct attributes and whether disabled fields truly prevent user interaction.

13. HTML Buttons

Buttons are used to trigger actions such as submitting a form, saving data, or opening a dialog.
<button type="button">Click Me</button><button type="submit">Submit Form</button><button type="reset">Reset Form</button>
Button types:
  • button – does not submit a form by default.
  • submit – submits the associated form.
  • reset – resets form controls to their initial values.
Testing example: Verify that the button performs the correct action, prevents unintended duplicate submissions where required, and is accessible using a keyboard.

14. HTML Dropdowns

A dropdown allows users to select an option from a list.
<label for="city">Choose a city:</label><select id="city" name="city">    <option value="">Select City</option>    <option value="pune">Pune</option>    <option value="mumbai">Mumbai</option></select>
Testing example:
  • Check whether all expected options appear.
  • Verify the default selection.
  • Select each important option.
  • Check whether the selected value is saved correctly.
  • Test required-field validation.
For Selenium, the Select class works with standard HTML <select> elements.

15. HTML Radio Buttons and Checkboxes

Radio buttons normally allow one choice from a group. Checkboxes allow users to select multiple independent options.
<input type="radio" id="manual" name="testing" value="manual"><label for="manual">Manual Testing</label><input type="radio" id="automation" name="testing" value="automation"><label for="automation">Automation Testing</label><input type="checkbox" id="api" name="skill" value="api"><label for="api">API Testing</label>
Testing example: Select Automation Testing and verify that the Manual Testing option is no longer selected when both radio buttons belong to the same group.
For checkboxes, verify both selection and deselection behavior.

16. HTML Div and Span

<div> and <span> are general-purpose containers.
  • <div> is used to group larger sections of content.
  • <span> is used to group a small piece of inline content.
Example:
<div class="login-box">    <h2>Login</h2>    <p>Welcome back!</p>    <span class="message">Required field</span></div>
Testing example: Use browser developer tools to inspect the containers and understand how the webpage is organized.
These elements do not have a specific meaning by themselves, so semantic elements are preferable when they better describe the content.

17. Semantic HTML

Semantic HTML uses elements that clearly describe the purpose of their content.
Examples include:
  • <header> – introductory content or a page header.
  • <nav> – navigation links.
  • <main> – the main content of the page.
  • <section> – a thematic section.
  • <article> – self-contained content.
  • <aside> – complementary content.
  • <footer> – footer information.
Example:
<header>    <h1>QAPage</h1></header><nav>    <a href="/jobs">Jobs</a>    <a href="/notes">Testing Notes</a></nav><main>    <section>        <h2>Manual Testing</h2>        <p>Learn testing fundamentals.</p>    </section></main><footer>    <p>Learning resources for testers.</p></footer>
Testing example: Check whether the page has a logical structure and whether assistive technologies can navigate it effectively.

18. HTML Forms and Validation

HTML offers built-in validation features that help users enter appropriate values.
Example:
<form>    <input type="email" required>    <input type="password" minlength="8" required>    <button type="submit">Register</button></form>
Here:
  • required means a value must be provided.
  • minlength="8" specifies a minimum length of eight characters for the password field.
  • type="email" enables browser email-format validation.
Test scenarios:
  1. Submit the form with all fields empty.
  2. Enter an invalid email address.
  3. Enter a password shorter than eight characters.
  4. Enter valid values.
  5. Verify the success message.
  6. Bypass browser validation where appropriate and check server-side validation.
Remember that client-side validation can be bypassed. The server must independently validate submitted data.

19. HTML DOM (Document Object Model)

The DOM represents an HTML document as a structured tree of objects. JavaScript and automation tools can use this structure to find and interact with elements.
Example HTML:
<body>    <h1>Login</h1>    <input id="username">    <button id="login">Login</button></body>
The browser creates a DOM representation of these elements.
Why should testers understand the DOM?
  • To inspect elements in browser developer tools.
  • To understand element relationships.
  • To identify stable locators.
  • To investigate missing or dynamically updated elements.
  • To understand why automation scripts cannot find an element.
Example: If Selenium reports NoSuchElementException, inspect the DOM to confirm the element’s ID, location, and whether it exists at the time of the search.

20. HTML, CSS and JavaScript Differences

These three technologies work together to create most modern webpages.
Technology
Main responsibility
Example
HTML
Structure and content
Creates a Login button
CSS
Presentation and layout
Changes the button’s color and size
JavaScript
Behavior and interactivity
Validates a form or opens a menu
Example: On a login page, HTML creates the username field, CSS styles it, and JavaScript may display a validation message.
For testers, understanding these differences helps identify whether a defect relates to structure, appearance, or behavior.

21. HTML for Manual Testers

Manual testers do not need to become HTML developers, but basic HTML knowledge makes web testing easier.
Important activities:
  • Inspect elements using browser developer tools.
  • Verify text, labels, links, and form controls.
  • Identify element attributes.
  • Check required and disabled fields.
  • Test form validation.
  • Inspect page structure and accessibility.
  • Report missing elements and incorrect links.
Example: A tester finds that the Submit button is visible but does nothing. The tester checks the page behavior, records the steps to reproduce, and reports the defect with the expected and actual results.

22. HTML for Automation Testers

Automation testers use HTML knowledge to locate elements reliably and interact with them through tools such as Selenium WebDriver.
Example HTML:
<input id="email" name="email" type="email"><button id="login">Login</button>
Corresponding Selenium Java code:
driver.findElement(By.id("email"))      .sendKeys("tester@example.com");driver.findElement(By.id("login"))      .click();
What should automation testers understand?
  • IDs, classes, names, and other attributes.
  • XPath and CSS selectors.
  • Parent-child and sibling relationships.
  • Input types and form controls.
  • The difference between the DOM and visible page content.
  • How dynamic elements are created or updated.
  • Why some elements are hidden, disabled, or not interactable.
Best practice: Prefer stable, unique IDs or dedicated test attributes when available. Avoid fragile locators that depend on long, changing HTML paths.

23. HTML for Experienced Testers

Experienced testers should understand not only the basic tags but also how HTML affects test reliability, accessibility, security, and compatibility.
Focus on these areas:
  • Dynamic DOM: Elements may be added, removed, or updated after API responses or user actions.
  • Accessibility: Check labels, alternative text, keyboard navigation, and semantic structure.
  • Browser compatibility: Verify that forms and HTML features behave correctly across supported browsers.
  • Responsive design: Check whether page elements remain usable on different screen sizes.
  • HTML validation: Look for invalid markup that can cause unexpected browser behavior.
  • Security awareness: Check whether user input is safely handled and rendered, including potential cross-site scripting (XSS) risks.
  • Testability: Encourage stable attributes such as data-testid when appropriate.
  • Shadow DOM: Some web components encapsulate their internal elements, requiring specific inspection and automation techniques.
Example of a dedicated test attribute:
<button data-testid="login-button">    Login</button>
A tester can use this attribute as a locator if the application and test team agree to maintain it.

24. Common HTML Interview Questions

  1. What is HTML, and why is it used?
  2. What is the difference between a tag and an element?
  3. What is the difference between id and class?
  4. What are HTML attributes?
  5. What is the difference between a div and a span?
  6. What is the purpose of the alt attribute?
  7. What is the difference between radio buttons and checkboxes?
  8. What is the difference between GET and POST in an HTML form?
  9. What is semantic HTML?
  10. What is the DOM?
  11. What is the difference between HTML, CSS, and JavaScript?
  12. How do you inspect HTML elements in a browser?
  13. How does HTML knowledge help Selenium testers?
  14. What is client-side form validation?
  15. Why is server-side validation also necessary?
  16. What are hidden and disabled elements?
  17. How do you identify a stable locator?
  18. What is the Shadow DOM?
  19. How do you test an HTML form?
  20. How can incorrect HTML affect automation testing?

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top