Code File for HTML
1.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 All Tags Demo</title>
</head>
<body>
<header>
<h1>HTML5 Complete Tags Demonstration</h1>
<nav>
<a href="#text">Text</a> |
<a href="#forms">Forms</a> |
<a href="#media">Media</a>
</nav>
</header>
<main>
<!-- TEXT FORMATTING -->
<section id="text">
<marquee> Move this text</marquee>
<q>Inline quote</q>
<pre>Preformatted text</pre>
<code>[Link]("Hello");</code>
<hr>
</section>
<!-- LINKS & MEDIA -->
<section id="media">
<h2>Media</h2>
<img src="[Link] alt="Sample Image">
<br><br>
<audio controls>
<source src="sample.mp3" type="audio/mpeg">
</audio>
<video width="320" height="240" controls>
<source src="sample.mp4" type="video/mp4">
</video>
<br>
<iframe src="[Link] width="300" height="200" align = "left"></iframe>
</section>
<!-- FORMS -->
<section id="forms">
<h2>Forms</h2>
<form>
<fieldset>
<legend>Registration</legend>
<label>Name:</label>
<input type="text" ><br><br>
<label>Email:</label>
<input type="email"><br><br>
<label>Password:</label>
<input type="password"><br><br>
<label>Gender:</label>
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female<br><br>
<label>Hobbies:</label>
<input type="checkbox"> Reading
<input type="checkbox"> Sports<br><br>
<label>Age:</label>
<input type="number" min="1" max="100"><br><br>
<label>Birthday:</label>
<input type="date"><br><br>
<label>Upload File:</label>
<input type="file"><br><br>
<label>Favorite Color:</label>
<input type="color"><br><br>
<label>Range:</label>
<input type="range" min="0" max="100"><br><br>
<label>Website:</label>
<input type="url"><br><br>
<label>Search:</label>
<input type="search"><br><br>
<label>Time:</label>
<input type="time"><br><br>
<label>Month:</label>
<input type="month"><br><br>
<label>Week:</label>
<input type="week"><br><br>
<label>Comments:</label><br>
<textarea rows="4" cols="30"></textarea><br><br>
<label>Country:</label>
<select>
<optgroup label="Asia">
<option>India</option>
<option>Japan</option>
</optgroup>
</select><br><br>
<input type="submit">
<button type="button">Click Me</button>
</fieldset>
</form>
</section>
<!-- SEMANTIC TAGS -->
<section>
<h2>Semantic Elements</h2>
<article>
<h3>Article Title</h3>
<p>Article content goes here.</p>
</article>
<aside>
<p>This is aside content.</p>
</aside>
<figure>
<img src="[Link] alt="Figure">
<figcaption>Figure Caption</figcaption>
</figure>
<details>
<summary>More Info</summary>
<p>Hidden details content.</p>
</details>
<progress value="70" max="100"></progress>
<meter value="0.6">60%</meter>
<time datetime="2026-01-01">January 1, 2026</time>
</section>
<footer>
<p>© 2026 HTML5 Demo</p>
</footer>
<noscript>Your browser does not support JavaScript!</noscript>
</body>
</html>
2.
<!DOCTYPE html>
<!-- demo -->
<html>
<head>
<title> Demo </title>
</head>
<body>
<strong>Hello Java </strong> <br>
<strike> Hello C++ </strike> <br>
<center>This will appear at the center</center> <!--You can use <center> tag to put any content
in the center of the page or any table cell. -->
<ins>Hiiiiiiiiii</ins><br/>
<del>Demo text here!!!!</del> <br>
<p>This is some <ins>newly inserted</ins> text.</p>
<!--The <ins> (inserted) tag is used to indicate text that has been inserted into a document or
content. primary purpose is to convey that the text is an addition.-->
<br/>
<mark>Marked Text</mark><br/>
<em>Demo</em><br/>
H<sub>2</sub>O<br/>
10<sup>th</sup><br/>
<fieldset>
<legend>Contact information</legend>
<address>
<p>Name : John Doe</p>
<p>Email: <a href="[Link]
<p>Phone: +1 555-1234</p>
<p>Address: 123 Main Street, Cityville</p>
</address>
</fieldset>
<!--The <fieldset> tag is used to group related elements within a form, and the <legend> tag
provides a caption or title for the <fieldset>. In this case, it is used to group and label contact
information.
The <address> tag is used to define contact information for the author or owner of a document. It
can include various contact details such as name, email, phone, and address.
The content inside the <address> tag is a placeholder; you can replace it with actual contact
information.-->
<!-- Basic Table with Borders, Sizes, and Headers -->
<table border="1" cellpadding ="10" >
<!-- cellspacing: outside cell space, cell space between two cell-->
<!--cellpadding: inside cell spacing -->
<caption>HTML Table Example</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</tbody>
</table>
<!-- Table with Padding & Spacing -->
<table border="1" >
<!-- inline css : style="margin-top: 50px-->
<caption>Table with Padding & Spacing</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</tbody>
</table>
<!-- Table with Colspan & Rowspan -->
<table border="1" cellspacing="0" cellpadding="10" style="margin-top: 20px;">
<caption>Table with Colspan & Rowspan</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td rowspan="2">Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td colspan="2">Row 2, Cell 2 and 3</td>
</tr>
</table>
<!-- Table with Colgroup (Note: Without visual styling) -->
<table border="1" cellspacing="0" cellpadding="10" style="margin-top: 20px;">
<colgroup>
<col width="0%">
<col width="30%">
<col width="50%">
</colgroup>
<caption>Table with Colgroup</caption>
<thead>
<tr> <!--<col width="20%"> col width 20%-->
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</tbody>
</table>
<p> This is car </p>
</body>
</html>
3.
<!DOCTYPE html>
<!-- demo -->
<html>
<head>
<title> Test </title>
</head>
<body>
<div style="background-color:black;color:white; width:200; height:400">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with
a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its
history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<p></p>
<p>My mother has <span style="color:blue;font-weight:bold;">blue</span> eyes and my father
has <span style="color:green;font-weight:30px;">dark green</span> eyes.</p>
<button>Click Me</button>
<h1>My First Emoji</h1>
<p>😀</p>
<div style = "background-color:palegreen; border : 3px; width:50%; height :250px; margin-right:
0px">
<p> Hello this is to understand div tag
</p>
<p> Hello this is to understand div tag
</p>
</div>
</body>
</html>