<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Complete HTML Elements Example</title>
<style>
/* Basic CSS for layout demonstration */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, nav, main, footer {
padding: 20px;
margin: 10px;
border: 1px solid #ddd;
}
nav a {
margin-right: 10px;
text-decoration: none;
color: #333;
}
pre {
background: #f4f4f4;
padding: 10px;
overflow-x: auto;
}
</style>
</head>
<body>
<!-- Header section using <header> -->
<header>
<h1>Main Heading (H1)</h1>
<h2>Secondary Heading (H2)</h2>
</header>
<!-- Navigation section using <nav> -->
<nav>
<a href="#home">Home</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
<!-- Main content area using <main> -->
<main>
<!-- Section with various text formatting elements -->
<section>
<h3>Section Title (H3)</h3>
<p>This is a sample paragraph. It demonstrates several text formatting
elements:</p>
<p>
<b>Bold text</b> is used for visual emphasis, while <strong>strong
text</strong> indicates importance.
Similarly, <i>italic text</i> provides a stylistic variation, and
<em>emphasized text</em> denotes stress.
</p>
<p>
You can also use <mark>marked text</mark> to highlight information,
and <small>small text</small> for less prominent details.
</p>
<p>
To show corrections, use <del>deleted text</del> for removals and
<ins>inserted text</ins> for additions.
</p>
<p>
For formulas, H<sub>2</sub>O demonstrates a subscript and
2<sup>3</sup> shows a superscript.
</p>
<!-- Line break and horizontal rule -->
<p>Line one.<br>Line two starts after a line break.</p>
<hr>
<!-- Preformatted text -->
<pre>
function greet(name) {
return "Hello, " + name + "!";
}
console.log(greet("World"));
</pre>
<!-- Image element -->
<p>Below is an example image:</p>
<img src="https://th.bing.com/th/id/OIP.Wpkyw6MLdFkO3pcMRONKVAHaJe?
rs=1&pid=ImgDetMain" alt="Example Image">
<!-- Inline text formatting with <span> -->
<p>Some inline text with a <span style="color: blue;">styled
span</span> element.</p>
<!-- Simple form with input and button -->
<form action="#" method="post">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your
email">
<button type="submit">Submit</button>
</form>
</section>
<!-- Additional headings (H4, H5, H6) -->
<section>
<h4>Heading Level 4 (H4)</h4>
<h5>Heading Level 5 (H5)</h5>
<h6>Heading Level 6 (H6)</h6>
</section>
</main>
<!-- Footer section using <footer> -->
<footer>
<p>© 2025 Example Company. All rights reserved.</p>
</footer>
</body>
</html>
