<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>
<a href="https://www.example.com" target="_blank">Visit Example</a>
<img src="image.jpg" alt="Description of Image" />
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
</ol>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
</form>
<form>
<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>
</form>
<form>
<input type="checkbox" id="subscribe" name="subscribe" />
<label for="subscribe">Subscribe to newsletter</label>
</form>
<form>
<input type="submit" value="Send" />
</form>
<header>
<h1>My Website</h1>
</header>
<footer>
<p>Copyright © 2025</p>
</footer>
<div>This is a block-level container.</div>
<span>This is an inline container.</span>
<!-- This is a comment and won't display on page -->
This is line one.<br>
This is line two.
<strong>Bold Text</strong>
<em>Italic Text</em>
<img src="pic.jpg" alt="Image description" width="300" height="200" />
<meta charset="UTF-8" />
<title>Page Title</title>
<link rel="stylesheet" href="styles.css" />
<script>
// JavaScript code here
</script>
<a href="https://example.com" target="_blank">Visit Example</a> <!-- Link opening in new tab -->
<ul> <!-- Unordered list -->
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol> <!-- Ordered list -->
<li>First</li>
<li>Second</li>
</ol>
<table border="1"> <!-- Table with border -->
<tr> <!-- Table row -->
<th>Header 1</th> <!-- Table header -->
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td> <!-- Table data cell -->
<td>Data 2</td>
</tr>
</table>
<form action="/submit" method="post"> <!-- Form start with POST method -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" /> <!-- Text input field -->
<input type="submit" value="Send" /> <!-- Submit button -->
</form>
<input type="text" name="username" placeholder="Username" /> <!-- Text input -->
<input type="password" name="password" placeholder="Password" /> <!-- Password input -->
<input type="email" name="email" placeholder="Email" /> <!-- Email input -->
<input type="radio" id="option1" name="choice" value="1" /> <label for="option1">Option 1</label> <!-- Radio button -->
<input type="radio" id="option2" name="choice" value="2" /> <label for="option2">Option 2</label>
<input type="checkbox" id="check1" name="subscribe" /> <label for="check1">Subscribe</label> <!-- Checkbox -->
<textarea name="message" rows="4" cols="30" placeholder="Enter your message"></textarea> <!-- Multi-line text input -->
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
</select>
<button type="button">Click Me</button> <!-- Regular button -->
<button type="submit">Submit</button> <!-- Submit button in form -->
<iframe src="https://www.example.com" width="300" height="200"></iframe> <!-- Embed external page -->
<audio controls> <!-- Audio player with controls -->
<source src="audio.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
<video width="320" height="240" controls> <!-- Video player with controls -->
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas> <!-- Drawing area -->
<style>
body { background-color: lightblue; } <!-- Internal CSS example -->
</style>
<script src="script.js"></script> <!-- Link to external JavaScript file -->
<link rel="stylesheet" href="styles.css" /> <!-- Link external CSS file -->
<meta charset="UTF-8" /> <!-- Character encoding -->
<meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Responsive design -->
<script>
alert("Hello, world!"); <!-- Simple alert -->
</script>
<script src="script.js"></script> <!-- Link to external JavaScript file -->
<div class="container">
<p>This is inside a div container.</p>
</div>
<p>This is <span style="color: red;">red text</span> inside a paragraph.</p>
<header>
<h1>Website Title</h1>
</header>
<footer>
<p>© 2025 Your Company</p>
</footer>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<section>
<h2>Section Title</h2>
<p>Content for this section.</p>
</section>
<article>
<h3>Article Title</h3>
<p>Article content goes here.</p>
</article>
<aside>
<p>Sidebar content or related information.</p>
</aside>
<main>
<h1>Main content of the page</h1>
</main>
<figure>
<img src="image.jpg" alt="Description" />
<figcaption>Caption for the image.</figcaption>
</figure>
<table border="1">
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Alice</td><td>25</td></tr>
</table>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<input type="submit" value="Submit" />
</form>
<input type="text" placeholder="Enter your name" />
<textarea rows="4" cols="50">Enter text here...</textarea>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
<button type="button">Click Me</button>
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<fieldset>
<legend>Personal Info</legend>
<label>Name:</label>
<input type="text" />
</fieldset>
<iframe src="https://example.com" width="300" height="200"></iframe>
<audio controls>
<source src="audio.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<nav>
<a href="#home">Home</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
<header>
<h1>Website Title</h1>
<p>Welcome to our website!</p>
</header>
<footer>
<p>© 2025 Your Company. All rights reserved.</p>
</footer>
<section>
<h2>About Us</h2>
<p>We provide excellent services.</p>
</section>
<article>
<h2>Blog Post Title</h2>
<p>This is the content of the blog post.</p>
</article>
<details>
<summary>More info</summary>
<p>Here is some additional information.</p>
</details>
<details>
<summary>Click to expand</summary>
<p>Expanded content shown here.</p>
</details>
<p>This is a <mark>highlighted</mark> word.</p>
<time datetime="2025-06-02">June 2, 2025</time>
<progress value="70" max="100">70%</progress>
<meter value="0.6">60%</meter>
<p>Use the <code>print()</code> function to display output.</p>
<pre>
This text
preserves whitespace
and line breaks.
</pre>
<blockquote cite="https://example.com">
<p>This is a quoted text from a source.</p>
</blockquote>
<p>He said, <q>This is important.</q></p>
<p>This is a normal sentence. <small>This part is smaller.</small></p>
<p>E = mc<sup>2</sup></p>
<p>H<sub>2</sub>O is water.</p>
<p>This is <strong>important</strong> text.</p>
<p>This is <em>emphasized</em> text.</p>
<p>This is <b>bold</b> text.</p>
<p>This is <i>italic</i> text.</p>
<p>This is <u>underlined</u> text.</p>
<p>Line 1.<br>
Line 2.</p>
<hr>
<img src="image.jpg" alt="Example Image">
<a href="https://example.com">Visit Example</a>
<button type="button">Click Me</button>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>
<input type="text" name="username" placeholder="Enter username">
<textarea name="message" rows="4" cols="50">
Enter your message here...
</textarea>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
</select>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<div>
<p>This is a paragraph inside a div.</p>
</div>
<span style="color:red;">This is red text.</span>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>30</td>
</tr>
</table>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
<iframe src="https://example.com" width="300" height="200"></iframe>
<script>
alert("Hello, world!");
</script>
<header>
<h1>Welcome to My Website</h1>
</header>
<footer>
<p>© 2025 My Website. All rights reserved.</p>
</footer>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<h2>About Us</h2>
<p>We provide web development services.</p>
</section>
<article>
<h2>Latest News</h2>
<p>Our new product launches next week!</p>
</article>
<aside>
<p>Related articles and links go here.</p>
</aside>
<main>
<h1>Welcome to Our Website</h1>
<p>Here is the main content.</p>
</main>
<figure>
<img src="image.jpg" alt="Sample Image">
<figcaption>This is a caption.</figcaption>
</figure>
<address>
1234 Main St.<br>
Anytown, USA<br>
Email: info@example.com
</address>
<p>This is a <mark>highlighted</mark> text.</p>
<time datetime="2025-06-02">June 2, 2025</time>
<progress value="70" max="100">70%</progress>
<meter value="0.6">60%</meter>
<details>
<summary>More info</summary>
<p>Here is some additional information.</p>
</details>
<dialog open>
<p>This is a dialog box.</p>
</dialog>
<details>
<summary>Click to expand</summary>
<p>Hidden content shown here.</p>
</details>
<p>Normal text <bdi>مُحَمَّد</bdi> inside paragraph.</p>
<p>Left to right: <bdo dir="ltr">مرحبا</bdo></p>
<p>Thisisaverylongwordthatmightneed<wbr>breaking.</p>
<data value="12345">Order Number</data>
<template>
<div>This is a template content.</div>
</template>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<picture>
<source media="(min-width:650px)" srcset="large.jpg">
<source media="(min-width:465px)" srcset="medium.jpg">
<img src="small.jpg" alt="Sample Image">
</picture>
<p>According to <cite>Wikipedia</cite>, the earth is round.</p>
<p>Use the <code>print()</code> function in Python.</p>
<data value="2025">Year</data>
<p><dfn>HTML</dfn> stands for HyperText Markup Language.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
<p>Error message: <samp>File not found</samp></p>
<p>The variable <var>x</var> stores the value.</p>
<ruby>
漢<rp>( </rp><rt>Kan</rt><rp>)</rp>
字<rp>( </rp><rt>ji</rt><rp>)</rp>
</ruby>
<ruby>漢<rt>Kan</rt></ruby>
<ruby>漢<rp>( </rp><rt>Kan</rt><rp>)</rp></ruby>
<p>This is a <b>bold</b> text.</p>
<p>This is a <strong>strong</strong> text.</p>
<p>This is an <i>italic</i> text.</p>
<p>This is an <em>emphasized</em> text.</p>
<p>This is a <mark>highlighted</mark> text.</p>
<p>This is a <small>small</small> text.</p>
<p>This is a <del>deleted</del> text.</p>
<p>This is an <ins>inserted</ins> text.</p>
<p>H<sub>2</sub>O is water.</p>
<p>E = mc<sup>2</sup>.</p>
<p>He said, <q>Hello!</q></p>
<blockquote>
This is a block quote.
</blockquote>
<pre>
Line 1
Line 2
Line 3
</pre>
<p>Line 1<br>Line 2<br>Line 3</p>
<p>Text above the line.</p>
<hr>
<p>Text below the line.</p>
<p>LongWord<wbr>Break</p>
<p><abbr title="HyperText Markup Language">HTML</abbr></p>