Find your next starting point

Little examples. Real possibilities.

Explore 25 original examples. Every one has source code, a preview and an explanation.

Original working examples

25 examples

JavaScriptOriginal example

Live digital clock

A readable clock that updates once a second using your local time.

View example
JavaScriptOriginal example

Print a page

A user-activated print button and a clean print stylesheet for an article.

View example
ToolsOriginal example

Search text inside a page

Highlight matches in an article and move through results without searching navigation or controls.

View example
JavaScriptOriginal example

Today's date on a calendar

A semantic month table with weekday headers, leap-year handling and today's date highlighted.

View example
CSSOriginal example

Scrolling text button

A stable, accessible button with a moving visual label, a pause control and reduced-motion support.

View example
HTMLOriginal example

Data table with headers

Read a small table with a caption, scoped headers and a keyboard-accessible overflow region.

View example

This is a curated first collection. Historical paths are restored only when the old purpose is supported by evidence and the new example serves that purpose.

More examples from the existing collection

HTML 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.

100+ Examples
Interactive Editor
Live Preview

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>
Live preview with documented supplements. Links and forms are demonstrations.
Original illustrative preview
Welcome to My Website

This is my first HTML page.

Try it Yourself

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>
Live preview with documented supplements. Links and forms are demonstrations.
Original illustrative preview
This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6
Try it Yourself

Links and Navigation

HTML Links

A labelled section target is supplied for this link demonstration.

<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>
Live preview with documented supplements. A labelled section target is supplied for this link demonstration. Links and forms are demonstrations.
Original illustrative preview
Visit HTML Free Codes





Go to Section 1

Section 1 — the target of this local anchor demonstration.

Try it Yourself

Images and Media

HTML Images

Labelled sample illustrations replace missing original images. Original URLs remain in the editor. The snippet includes CSS inside its HTML.

<img src="landscape.jpg" alt="Beautiful landscape" width="300">
<img src="avatar.jpg" alt="User avatar"
     style="border-radius: 50%; width: 100px; height: 100px;">
Live preview with documented supplements. Labelled sample illustrations replace missing original images. Original URLs remain in the editor. The snippet includes CSS inside its HTML. Links and forms are demonstrations.
Original illustrative preview
landscape.jpg
avatar.jpg
Try it Yourself

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>
Live preview with documented supplements. Links and forms are demonstrations.
Original illustrative preview
Name Age City
John 25 New York
Alice 30 London
Try it Yourself

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>
Live preview with documented supplements. Links and forms are demonstrations.
Original illustrative preview
Try it Yourself

CSS Integration

Styled Card Component

Labelled sample illustrations replace missing original images. Original URLs remain in the editor. Preview adjustment: the card button uses #3658bf for readable contrast. The original #007bff stays in the snippet; Copy HTML includes the adjustment. The snippet includes CSS inside its HTML.

<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>
Live preview with documented supplements. Labelled sample illustrations replace missing original images. Original URLs remain in the editor. Preview adjustment: the card button uses #3658bf for readable contrast. The original #007bff stays in the snippet; Copy HTML includes the adjustment. The snippet includes CSS inside its HTML. Links and forms are demonstrations.
Original illustrative preview
product.jpg

Amazing Product

This is a great product that you'll love.

Try it Yourself

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>
Live preview with documented supplements. The snippet includes CSS inside its HTML. Links and forms are demonstrations.
Original illustrative preview
Item 1
Item 2
Item 3
Item 4
Try it Yourself

Browse Examples by Category

Forms & Input

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!

Continue Learning

1

Practice with Examples

Try all the examples above and modify them to understand how they work.

2

Take the Quiz

Test your HTML knowledge with our interactive HTML quiz.

3

Build Projects

Start building your own HTML projects using the code playground.

Sample contact and navigation controls above are demonstrations. They do not contact anyone or open a destination.