Lesson 1 of 6

Lab 01 — HTML, the DOM, and how QA reads a page

Title: HTML structure, tags, and the page QA automates against

Description: Learn what HTML is, how a document is built (html, head, body), and the tags you see on every app: headings, buttons, links, images, and containers.

Why it matters for QA: Playwright and Selenium locate elements in the DOM. If you cannot read markup, you cannot write stable locators, debug failing clicks, or tell a frontend bug from a broken test.

HTML stands for HyperText Markup Language.

HTML is the language used to build web pages.

Every website contains HTML:

  • buttons
  • forms
  • menus
  • images
  • tables
  • links
  • text blocks

Browsers read HTML and display a page visually.

QA engineers work with HTML every day because automation tools interact with HTML elements.

Why QA Engineers Must Know HTML

QA engineers use HTML to:

  • inspect web pages
  • understand page structure
  • create locators
  • debug failed tests
  • automate UI testing
  • analyze frontend bugs

Without HTML knowledge:

  • Selenium becomes difficult
  • Playwright becomes difficult
  • XPath becomes confusing
  • CSS selectors become confusing

HTML is one of the most important frontend basics for QA Automation.

1. Basic HTML Document Structure

htmlhtml
<!DOCTYPE html>

<html>

<head>
    <title>My Website</title>
</head>

<body>

    <h1>Welcome</h1>

    <p>Hello QA Engineer</p>

</body>

</html>

Explanation of Structure

<!DOCTYPE html>:

  • Tells the browser: “This document uses HTML5.”

<html>:

  • Root element of the page.
  • Everything inside the page is usually inside <html>.

<head> Contains:

  • page title
  • styles
  • scripts
  • metadata

Usually users do not see content from <head> directly.

<title>:

  • Browser tab title.
<title>Login Page</title>

<body>:

  • Visible page content.
  • Everything users see is usually inside <body>.

2. Common HTML Tags

Headings

htmlhtml
<h1>Main Title</h1>
<h2>Subtitle</h2>
<h3>Section</h3>

h1 is the biggest heading.

h6 is the smallest.

Button

htmlhtml
<button>Login</button>

Buttons are very important for QA testing.

QA checks:

  • clicks
  • disabled state
  • loading state
  • visibility
  • text
  • color changes
  • hover behavior

Link

htmlhtml
<a href="https://example.com">
    Open Site
</a>

href = destination URL.

Image

htmlhtml
<img src="logo.png" alt="Company Logo">

Attributes

src - Image path.

alt - Alternative text. Useful for:

  • accessibility
  • testing
  • SEO

3. Containers

div

Generic block container.

htmlhtml
<div>
    Content
</div>

Very common in modern frontend apps.

span

Small inline container.

htmlhtml
<span>Status</span>

4. Nested Elements

HTML elements can contain other elements.

Example:

htmlhtml
<div>

    <h1>Shop</h1>

    <button>Buy</button>

</div>

5. HTML Tree Structure

htmlhtml
div
 ├── h1
 └── button

This structure becomes important for:

  • XPath
  • CSS selectors
  • DOM navigation

6. QA Practice

Analyze HTML:

htmlhtml
<div>

    <h1>Dashboard</h1>

    <p>Welcome User</p>

    <button>Logout</button>

</div>

Questions:

  • What is the parent element?
  • Which element is clickable?
  • Which tag contains text?