Ultimate HTML Masterclass (Part 2: Examples)

1. HTML Basics Examples

1.1 Basic HTML Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
</head>
<body>
    <h1>Welcome to HTML Learning</h1>
    <p>This is my first HTML page created for practice.</p>
</body>
</html>

Demonstrates a full HTML structure with <!DOCTYPE>, <html>, <head>, and <body>.

1.2 Using Attributes

<p id="intro" class="highlight">This paragraph has an id and a class.</p>
<img src="image.jpg" alt="A sample image" width="300" height="200">
<a href="https://example.com" target="_blank" title="Visit Example">Go to Example</a>

id and class can be used for styling or scripting.
alt improves accessibility.
title shows a tooltip.

2. Headings and Paragraphs Examples

<h1>Main Heading</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
<p>This is a paragraph under the subsection. It explains the content in detail.</p>
<p>This is another paragraph with <strong>important text</strong> and <em>emphasized text</em>.</p>

Explanation:

<strong> for semantic bold
<em> for emphasis
Multiple paragraphs are separated naturally

2.1 Text Formatting Examples

<p>This is <b>bold</b> text and this is <i>italic</i> text.</p>
<p>Highlighted: <mark>Important Information</mark></p>
<p>Math: E = mc<sup>2</sup>, H<sub>2</sub>O</p>
<p>Small text: <small>This text is smaller than normal</small></p>

3. Links Examples

3.1 Absolute and Relative Links

<a href="https://example.com" target="_blank">Visit Example Website</a>
<a href="about.html">Go to About Page</a>

3.2 Anchor Links

<a href="#section1">Jump to Section 1</a>
<h2 id="section1">Section 1</h2>
<p>This is section 1 content.</p>

4. Lists Examples

4.1 Unordered List

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
</ul>

4.2 Ordered List

<ol>
    <li>Step One</li>
    <li>Step Two</li>
    <li>Step Three</li>
</ol>

4.3 Nested Lists

<ul>
    <li>Fruits
        <ul>
            <li>Apple</li>
            <li>Banana</li>
        </ul>
    </li>
    <li>Vegetables
        <ul>
            <li>Carrot</li>
            <li>Spinach</li>
        </ul>
    </li>
</ul>

4.4 Description List

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

5. Images and Multimedia Examples

5.1 Images

<img src="flower.jpg" alt="A beautiful flower" width="400" height="300">
<img src="logo.png" alt="Company Logo">

5.2 Audio

<audio controls>
    <source src="song.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

5.3 Video

<video width="400" controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

6. Tables Examples

<table border="1">
    <caption>Student Scores</caption>
    <tr>
        <th>Name</th>
        <th>Math</th>
        <th>Science</th>
    </tr>
    <tr>
        <td>Ali</td>
        <td>95</td>
        <td>90</td>
    </tr>
    <tr>
        <td>Aisha</td>
        <td>88</td>
        <td>92</td>
    </tr>
</table>

6.1 Merged Cells

<table border="1">
    <tr>
        <th rowspan="2">Name</th>
        <th colspan="2">Subjects</th>
    </tr>
    <tr>
        <th>Math</th>
        <th>Science</th>
    </tr>
    <tr>
        <td>Ali</td>
        <td>95</td>
        <td>90</td>
    </tr>
</table>

7. Forms Examples

<form action="submit.html" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" placeholder="Enter your name"><br><br>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="Enter your email"><br><br>
    
    <label>Gender:</label>
    <input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="female"> Female<br><br>
    
    <label for="country">Country:</label>
    <select id="country" name="country">
        <option value="pakistan">Pakistan</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select><br><br>
    
    <input type="submit" value="Submit">
</form>

7.1 Textarea Example

<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50" placeholder="Write your message here"></textarea>

8. Semantic HTML5 Examples

<header>
    <h1>My Website Header</h1>
    <nav>
        <a href="#home">Home</a> |
        <a href="#about">About</a>
    </nav>
</header>

<main>
    <article>
        <h2>Blog Post Title</h2>
        <p>This is a blog post paragraph.</p>
        <figure>
            <img src="image.jpg" alt="Sample Image">
            <figcaption>Image Caption Here</figcaption>
        </figure>
    </article>
    
    <aside>
        <h3>Related Posts</h3>
        <ul>
            <li>HTML Basics</li>
            <li>Forms Tutorial</li>
        </ul>
    </aside>
</main>

<footer>
    <p>© 2026 My Website</p>
</footer>

9. Advanced HTML5 Examples

9.1 Canvas Placeholder

<canvas id="myCanvas" width="300" height="150"></canvas>
<p>Canvas requires JavaScript to draw shapes.</p>

9.2 SVG Example

9.3 Data Attributes

<div data-user-id="12345" data-role="admin">Admin Panel</div>

9.4 Interactive Tags

<details>
  <summary>Click to expand</summary>
  <p>This content is hidden until the user clicks the summary.</p>
</details>

<dialog open>
  <p>This is a dialog box.</p>
</dialog>

10. Meta, SEO, and Accessibility Examples

<meta name="description" content="Complete HTML course for beginners to advanced">
<meta name="keywords" content="HTML, HTML5, tutorial, web development">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<img src="logo.png" alt="Company Logo" />
<a href="about.html" title="About Us">About Us</a>

Notes:

Proper meta tags improve SEO
alt attributes are crucial for screen readers
Use semantic elements for accessibility

11. Mini Projects (Code Examples)

11.1 Personal Portfolio Page

<header>
    <h1>John Doe</h1>
    <nav>
        <a href="#about">About</a>
        <a href="#projects">Projects</a>
        <a href="#contact">Contact</a>
    </nav>
</header>

<main>
    <section id="about">
        <h2>About Me</h2>
        <p>Front-end web developer with passion for learning HTML.</p>
    </section>
    
    <section id="projects">
        <h2>Projects</h2>
        <ul>
            <li>HTML Portfolio</li>
            <li>Blog Layout</li>
            <li>Media Gallery</li>
        </ul>
    </section>
    
    <section id="contact">
        <h2>Contact</h2>
        <form action="submit.html" method="post">
            <label for="email">Email:</label>
            <input type="email" name="email" id="email">
            <input type="submit" value="Send">
        </form>
    </section>
</main>

<footer>
    <p>© 2026 John Doe</p>
</footer>

11.2 Simple Blog Layout

<article>
    <h2>Blog Post Title</h2>
    <p>Introduction paragraph with <em>emphasis</em> and <strong>important text</strong>.</p>
    <figure>
        <img src="post-image.jpg" alt="Post image">
        <figcaption>Image Caption</figcaption>
    </figure>
</article>