Scribd
Upload
10 views2 pages

Inedec

This document is an HTML example showcasing various HTML elements and their usage, including headers, navigation, main content, and footer sections. It demonstrates text formatting, inline styles, an image, and a simple form. The document also includes CSS for basic layout styling.

Uploaded by

osmanovr196
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
10 views2 pages

Inedec

This document is an HTML example showcasing various HTML elements and their usage, including headers, navigation, main content, and footer sections. It demonstrates text formatting, inline styles, an image, and a simple form. The document also includes CSS for basic layout styling.

Uploaded by

osmanovr196
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

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>&copy; 2025 Example Company. All rights reserved.</p>
</footer>
</body>
</html>

You might also like