Master HTML Effortlessly

Jumpstart your web development journey with easy-to-follow guides, live examples, and interactive learning tools.

Get Started

1. Basic Web Page Structure

This is the most basic structure every HTML page must follow.


<!DOCTYPE html>

<html>

  <head>

    <title>My First Page</title>

  </head>

  <body>

    <h1>Welcome</h1>

    <p>This is a simple page.</p>

  </body>

</html>

Welcome

This is a simple page.

2. Student Profile Card

A clean card layout for student information.


<div class="card">

  <h3>Aanchal Tyagi</h3>

  <p>Web Development Student</p>

  <p>Email: [email protected]</p>

</div>

Aanchal Tyagi

Web Development Student

Email: [email protected]

3. Contact Form

A simple form to collect user input.


<form>

  <label>Name:</label><br>

  <input type="text" placeholder="Your name"><br>

  <label>Message:</label><br>

  <textarea rows="3"></textarea><br>

  <button>Send</button>

</form>

4. Blog Post Layout

Simple layout for blog content using semantic tags.


<article>

  <h2>Why Learn HTML?</h2>

  <p>HTML is the foundation of all websites...</p>

  <footer>Posted on: June 19, 2025</footer>

</article>

Why Learn HTML?

HTML is the foundation of all websites. It defines the structure of content and is easy to learn for beginners.

5. Image with Caption

Display an image with a caption using the <figure> and <figcaption> tags.


<figure>

  <img src="https://via.placeholder.com/150" alt="Sample">

  <figcaption>This is a sample image.</figcaption>

</figure>

6. Simple Table

A basic table to display data in rows and columns.


<table border="1">

  <tr><th>Name</th><th>Age</th></tr>

  <tr><td>Aanchal</td><td>21</td></tr>

  <tr><td>Alex</td><td>22</td></tr>

</table>

Name	Age
Aanchal	21
Alex	22

7. Unordered List

An unordered list of items using the <ul> and <li> tags.


<ul>

  <li>HTML</li>

  <li>CSS</li>

  <li>JavaScript</li>

</ul>

HTML
CSS
JavaScript

8. Simple Navigation Bar

A basic navigation bar using the <nav> and <a> tags.


<nav>

  <a href="#">Home</a> |
  <a href="#">About</a> |
  <a href="#">Contact</a>

</nav>

9. Audio Player

Embed an audio player using the <audio> tag.


<audio controls>

  <source src="audio.mp3" type="audio/mpeg">

  Your browser does not support the audio element.

</audio>

10. Video Player

Embed a video player using the <video> tag.


<video width="320" height="240" controls>

  <source src="movie.mp4" type="video/mp4">

  Your browser does not support the video tag.

</video>