HTML Free CodesHTML Examples
Master HTML fundamentals through hands-on demonstrations and executable code specimens
This collection presents extensive HTML demonstrations featuring complete markup and real-time visualization. Utilize interactive editing to modify code specimens and observe immediate rendering results.
Basic HTML Examples
Document Structure
Basic HTML Document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first HTML page.</p>
</body>
</html>This is my first HTML page.
Text and Headings
HTML Headings
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
Links and Navigation
HTML Links
<a href="https://www.htmlfreecodes.com">Visit HTML Free Codes</a>
<a href="mailto:info@example.com">Send Email</a>
<a href="tel:+1234567890">Call Us</a>
<a href="#section1">Go to Section 1</a>Images and Media
HTML Images
<img src="landscape.jpg" alt="Beautiful landscape" width="300">
<img src="avatar.jpg" alt="User avatar"
style="border-radius: 50%; width: 100px; height: 100px;">Advanced HTML Examples
Tables and Lists
HTML Table
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Alice</td>
<td>30</td>
<td>London</td>
</tr>
</tbody>
</table>| Name | Age | City |
|---|---|---|
| John | 25 | New York |
| Alice | 30 | London |
Forms and Input
Contact Form
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4"></textarea>
<button type="submit">Send Message</button>
</form>CSS Integration
Styled Card Component
<div class="card">
<img src="product.jpg" alt="Product" class="card-image">
<div class="card-content">
<h3>Amazing Product</h3>
<p>This is a great product that you'll love.</p>
<button class="btn">Buy Now</button>
</div>
</div>
<style>
.card {
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
max-width: 300px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card-image {
width: 100%;
height: 200px;
object-fit: cover;
}
.card-content {
padding: 16px;
}
.btn {
background: #007bff;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
</style>Responsive Design
Responsive Grid
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
padding: 20px;
}
.grid-item {
background: #f8f9fa;
padding: 20px;
text-align: center;
border-radius: 8px;
border: 1px solid #e9ecef;
}
</style>Browse Examples by Category
Structure & Layout
Forms & Input
Styling & Design
Interactive Elements
HTML Certificate
No signup or certificate required! HTML Free Codes is completely free and always will be. You don't need to create an account or get a certificate to learn HTML. Our focus is on providing the best free HTML education.
💡 Learning Tip:
The best way to learn HTML is by practicing. Use our code playground to experiment with the examples, modify them, and create your own projects!