Learn Java , Selenium

HTML Elements and Basic Examples

Headings: <h1> to <h6> and Page Title

<h1>, <h2>, ... <h6>: Used for headings. <h1> is the main heading, <h6> is the smallest.

<h1>Main Title</h1>
<h2>Subheading</h2>

<title>: Sets the title of the web page (shown in browser tab), goes inside <head>.

<title>My Web Page</title>

Paragraphs

<p>: Defines a paragraph.

<p>This is a paragraph of text.</p>

Links & Images

<a>: Anchor tag for hyperlinks (add target="_blank" to open in new tab).

<a href="https://example.com">Visit Example</a>

<img>: Embeds an image (always specify src and alt).

<img src="image.jpg" alt="Description of image">

Line Break

<br>: Inserts a line break.

Line one.<br>
Line two.

Inline Styling

style attribute: Add CSS styles directly on an HTML element (not recommended for large projects).

<p style="color:red; font-size:18px;">Red text.</p>

Tables

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>23</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>30</td>
  </tr>
</table>

Lists

Unordered List

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Ordered List

<ol>
  <li>First</li>
  <li>Second</li>
</ol>

id, class, div

id: Identifies one unique element.

<div id="uniqueBox">Content</div>

class: Groups multiple elements.

<div class="commonBox">Box 1</div>
<div class="commonBox">Box 2</div>

<div>: Generic container for layout/styling.

<div style="background:#eef;">Wrapped content</div>

Linking CSS Stylesheet

Put the following inside the <head> section:

<link rel="stylesheet" href="styles.css">

Input Elements

Text Input

<input type="text" name="username" placeholder="Enter name">

Checkbox

<input type="checkbox" id="subscribe" name="subscribe">
<label for="subscribe">Subscribe</label>

Radio Button

<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

Button

<button type="button">Click Me</button>

Label

<label> improves form accessibility by connecting to input via for attribute.

<label for="username">Name:</label>
<input type="text" id="username" name="username">

Embedding Content: <iframe>

<iframe src="https://www.example.com" width="300" height="200"></iframe>

Basic JavaScript Example

<button onclick="alert('Hello!')">Show Alert</button>
<script>
  function sayHello() {
    alert('Hello!');
  }
</script>
<button onclick="sayHello()">Show With Function</button>
Scroll to Top