HTML 8 : Full HTML Web Page with All Common Elements

 Full HTML Web Page with All Common Elements

ALL major HTML form and page elements typically found in modern web pages. This example includes:

  • Headings

  • Paragraphs

  • Line breaks

  • Horizontal lines

  • Images

  • Links

  • Lists (ordered and unordered)

  • Tables

  • Form elements (text box, password, radio, checkbox, dropdown, textarea, button)

  • Semantic HTML (header, nav, footer, article, section)

🌐 Full HTML Web Page with All Common Elements

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Complete HTML Web Page Elements</title>
</head>
<body>

  <!-- Header -->
  <header>
    <h1>Welcome to My HTML Demo Page</h1>
    <p>This page shows all the basic HTML elements used in a typical website.</p>
  </header>

  <!-- Navigation Menu -->
  <nav>
    <a href="#home">Home</a> |
    <a href="#about">About</a> |
    <a href="#form">Form</a> |
    <a href="#contact">Contact</a>
  </nav>

  <hr>

  <!-- Headings -->
  <section id="home">
    <h1>Main Heading (h1)</h1>
    <h2>Sub Heading (h2)</h2>
    <h3>Section Title (h3)</h3>
    <h4>Smaller Title (h4)</h4>
    <h5>Sub-sub Heading (h5)</h5>
    <h6>Tiny Title (h6)</h6>
  </section>

  <hr>

  <!-- Text formatting -->
  <section>
    <p>This is a <b>bold</b>, <i>italic</i>, and <u>underlined</u> text with <mark>highlight</mark>.</p>
    <p>This text uses <small>small</small>, <strong>strong</strong>, and <em>emphasized</em> styles.</p>
    <p>This is a new paragraph.<br>This line breaks here.</p>
  </section>

  <hr>

  <!-- Image -->
  <section>
    <h2>Image Example</h2>
    <img src="https://via.placeholder.com/150" alt="Placeholder Image" width="150">
  </section>

  <hr>

  <!-- Lists -->
  <section>
    <h2>Lists</h2>
    <h3>Unordered List:</h3>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>

    <h3>Ordered List:</h3>
    <ol>
      <li>Step 1</li>
      <li>Step 2</li>
      <li>Step 3</li>
    </ol>
  </section>

  <hr>

  <!-- Table -->
  <section>
    <h2>Table Example</h2>
    <table border="1">
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Country</th>
      </tr>
      <tr>
        <td>John</td>
        <td>john@example.com</td>
        <td>USA</td>
      </tr>
      <tr>
        <td>Priya</td>
        <td>priya@example.com</td>
        <td>India</td>
      </tr>
    </table>
  </section>

  <hr>

  <!-- Form Elements -->
  <section id="form">
    <h2>Form Elements</h2>
    <form>

      <label for="fullname">Full Name:</label><br>
      <input type="text" id="fullname" name="fullname"><br><br>

      <label for="email">Email:</label><br>
      <input type="email" id="email" name="email"><br><br>

      <label for="password">Password:</label><br>
      <input type="password" id="password" name="password"><br><br>

      <label>Gender:</label><br>
      <input type="radio" name="gender" value="male"> Male
      <input type="radio" name="gender" value="female"> Female<br><br>

      <label>Skills:</label><br>
      <input type="checkbox" name="skills" value="html"> HTML
      <input type="checkbox" name="skills" value="css"> CSS
      <input type="checkbox" name="skills" value="js"> JavaScript<br><br>

      <label for="country">Select Country:</label><br>
      <select id="country" name="country">
        <option value="us">USA</option>
        <option value="in">India</option>
        <option value="uk">UK</option>
      </select><br><br>

      <label for="bio">Bio:</label><br>
      <textarea id="bio" name="bio" rows="5" cols="40"></textarea><br><br>

      <button type="submit">Submit</button>
      <button type="reset">Reset</button>

    </form>
  </section>

  <hr>

  <!-- Footer -->
  <footer>
    <p>&copy; 2025 My Website. All rights reserved.</p>
  </footer>

</body>
</html>

🔎 Why This Page Is Useful for Selenium?

This page contains real, interactable HTML elements which Selenium can:

  • Click buttons

  • Enter text into inputs

  • Select from dropdowns

  • Click checkboxes and radio buttons

  • Extract text from tables and paragraphs

You can use this as a practice page for writing Selenium automation scripts.

Comments

Post a Comment

Popular posts from this blog

10 automation test cases for https://www.saucedemo.com/ (Sauce Demo)

 Here are 10 automation test cases for https://www.saucedemo.com/ (Sauce Demo), each with detailed steps and expected results . These are designed to simulate realistic user scenarios and we would be implemented using tools like Selenium, Cypress, or Playwright later. 🔹 Test Case 1: Valid Login Objective : Verify successful login with valid credentials. Steps : Navigate to https://www.saucedemo.com/ Enter Username : standard_user Enter Password : secret_sauce Click the Login button Expected Result : User is redirected to the inventory page ( /inventory.html ) with a list of products displayed. 🔹 Test Case 2: Invalid Login Objective : Validate error handling with incorrect credentials. Steps : Navigate to the login page Enter Username : invalid_user Enter Password : wrong_password Click the Login button Expected Result : Error message displayed: "Epic sadface: Username and password do not match any user in this service...
Read more

Java Roadmap for SDET Superstars!

Image
Java Roadmap for SDET Superstars! Your ultimate journey to mastering Java for test automation! Step 1: Java Basics – The Foundation Learn the grammar of Java 📚✨ 🧮 Variables & Data Types (int, float, boolean) ➕ Operators (+, -, *, /, %) 🔁 Loops (for, while, do-while) 🧠 Conditions (if-else, switch) 📦 Arrays & Strings Step 2: OOP – Think Like a Developer Become a Java ninja with Object-Oriented Programming 🐱‍👤⚔️ 🧱 Classes & Objects 🏗️ Constructors 👪 Inheritance 🎭 Polymorphism 🧬 Abstraction & Interfaces 🔐 Encapsulation Step 3: Exception Handling – Be Ready for Chaos Handle the unexpected like a pro! 🧨⚠️ try , catch , finally throw and throws 🚨 Custom Exceptions Step 4: Collections – Organize Like a Boss Work with lists, maps & sets like a data wizard 📦🪄 🗃️ List, Set, Map 🌀 ArrayList, HashMap, HashSet 🔁 Iteration (for-each, iterator) 🧠 Sorting & Filtering Step 5: Java 8+ – Modern & Cool Features Lev...
Read more

Mastering XPath in Selenium 4 🚀 – Supported Functions & Axes Explained

 Absolutely! Here's a complete list of XPath functions and axes supported by Selenium 4 (which uses XPath 1.0), with descriptions and examples . 🟢 XPath Features Supported by Selenium 4 🧭 ALL XPath Axes (13 Total) Axis Name Description ancestor:: All ancestors (parent, grandparent, etc.) of the current node ancestor-or-self:: All ancestors + the current node attribute:: All attributes of the current node (usually @attribute shorthand is used) child:: All direct children of the current node descendant:: All descendants (children, grandchildren, etc.) of the current node descendant-or-self:: All descendants + the current node following:: All nodes after the current node in the document following-sibling:: All sibling nodes after the current one namespace:: All namespace nodes of the current node (rarely used in HTML) parent:: Immediate parent of the current node preceding:: All nodes that come before the current node prece...
Read more