HTML Examples
Here are various HTML examples demonstrating different features and functionalities of HTML:
1. Basic HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic HTML Structure</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a basic HTML structure example.</p>
</body>
</html>
2. HTML Forms
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Form Example</title>
</head>
<body>
<h1>Contact Us</h1>
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
3. HTML Tables
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Table Example</title>
</head>
<body>
<h1>Product List</h1>
<table border="1">
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>Apple</td>
<td>$1.00</td>
<td>10</td>
</tr>
<tr>
<td>Orange</td>
<td>$0.80</td>
<td>20</td>
</tr>
</table>
</body>
</html>
4. HTML Lists
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Lists Example</title>
</head>
<body>
<h1>Unordered List</h1>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h1>Ordered List</h1>
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
</body>
</html>
5. HTML Links
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Links Example</title>
</head>
<body>
<h1>Links Example</h1>
<a href="https://www.example.com" target="_blank">Visit Example.com</a><br>
<a href="mailto:info@example.com">Email Us</a>
</body>
</html>
6. HTML Images
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Images Example</title>
</head>
<body>
<h1>Images Example</h1>
<img src="https://via.placeholder.com/150" alt="Placeholder Image" width="150">
<p>Above is a placeholder image.</p>
</body>
</html>
7. HTML Videos and Audio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Media Example</title>
</head>
<body>
<h1>Media Example</h1>
<h2>Video</h2>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<h2>Audio</h2>
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
</body>
</html>
8. HTML Forms with Input Types
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Form Inputs Example</title>
</head>
<body>
<h1>Form Inputs Example</h1>
<form>
<label for="text">Text:</label>
<input type="text" id="text" name="text"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<label for="date">Date:</label>
<input type="date" id="date" name="date"><br><br>
<label for="checkbox">Check me:</label>
<input type="checkbox" id="checkbox" name="checkbox"><br><br>
<label for="radio1">Option 1:</label>
<input type="radio" id="radio1" name="radio" value="1"><br>
<label for="radio2">Option 2:</label>
<input type="radio" id="radio2" name="radio" value="2"><br><br>
<label for="select">Select:</label>
<select id="select" name="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select><br><br>
<label for="textarea">Textarea:</label><br>
<textarea id="textarea" name="textarea" rows="4" cols="50"></textarea><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
9. HTML Inline and Block Elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Inline and Block Elements</title>
<style>
.block { display: block; margin: 10px 0; }
.inline { display: inline; margin: 0 10px; }
</style>
</head>
<body>
<h1>Inline and Block Elements</h1>
<div class="block">This is a block-level element.</div>
<span class="inline">This is an inline element.</span>
<span class="inline">Another inline element.</span>
<div class="block">Another block-level element.</div>
</body>
</html>
10. HTML Semantics
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Semantics Example</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>About Us</h2>
<p>We are a small company...</p>
</section>
<article>
<h2>Latest News</h2>
<p>Our latest news...</p>
</article>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>
These examples cover a range of common HTML functionalities and elements, helping to illustrate the basics and more advanced features of HTML.
Web Technology View More
Learn Ansible
Ansible is an open-source automation tool that sim..
Learn HTML
HTML5 supports multimedia elements such as audio a..
Learn Angular 3
Angular..
Learn PHP
Introduction to PHP: A Powerful Scripting Language..
Learn Angular 2.0
Angular 2..
Learn Python
Python Tutorials..
Learn C# Sharp
C# Syntax - Learn the basic syntax of C# programmi..
Learn CSS
What is CSS?..
Learn Node Js
Node.js: A Powerful JavaScript Runtime for Server-..