1. HTML Boilerplate

    The basic structure required for every HTML page.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
</head>
<body>
    <!-- Content goes here -->
</body>
</html>
  2. Headings & Paragraphs

    Used to structure content hierarchically and for text blocks.

    <h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>This is a paragraph.</p>
  3. Text Formatting

    Tags for adding semantic meaning and style to text.

    <strong>Bold text</strong>
<em>Italicized text</em>
<u>Underlined text</u>
<s>Strikethrough text</s>
<br> <!-- Line break -->
<hr> <!-- Horizontal rule -->
  4. Links (Anchor Tags)

    Create hyperlinks to other pages or resources.

    <!-- External link -->
<a href="https://www.google.com">Visit Google</a>

<!-- Link to another page on your site -->
<a href="/about.html">About Us</a>

<!-- Link that opens in a new tab -->
<a href="#" target="_blank">New Tab</a>
  5. Images

    Embed images in your webpage. The `alt` attribute is vital for accessibility.

    <img src="image.jpg" alt="A descriptive text for the image" width="500" height="300">
  6. Lists

    Organize content into unordered (bulleted), ordered (numbered), and description lists.

    <!-- Unordered List -->
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

<!-- Ordered List -->
<ol>
    <li>First Item</li>
    <li>Second Item</li>
</ol>
  7. Tables

    For displaying data in rows and columns.

    <table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data cell 1</td>
            <td>Data cell 2</td>
        </tr>
    </tbody>
</table>
  8. Forms

    Collect user input with various types of controls.

    <form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="username">

    <label for="email">Email:</label>
    <input type="email" id="email" name="user_email">
    
    <textarea name="message"></textarea>
    
    <button type="submit">Submit</button>
</form>
  9. Semantic HTML

    Elements that provide meaning and structure to the content.

    <header>Page Header</header>
<nav>Navigation Links</nav>
<main>
    <article>
        <section>A section of the article.</section>
    </article>
</main>
<aside>Sidebar content</aside>
<footer>Page Footer</footer>
  10. Generic Containers & Comments

    Used for grouping elements for styling (CSS) or functionality (JavaScript).

    <!-- This is a comment -->

<!-- Block-level container -->
<div class="container">
    Content inside a div.
</div>

<!-- Inline container -->
<p>This is a <span style="color:red;">span</span> inside a paragraph.</p>