HTML Code Snippets

Ready-to-use HTML code snippets for common patterns and components. Click any code block to copy!

Basic Document Template

Start every HTML project with this basic template structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Page description">
    <title>Page Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
        </nav>
    </header>

    <main>
        <h1>Welcome</h1>
        <p>Page content goes here</p>
    </main>

    <footer>
        <p>© 2025 Company Name</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>

Basic Contact Form

Complete contact form with validation and common input types:

<form action="/submit" method="POST">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
    </div>

    <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
    </div>

    <div>
        <label for="message">Message:</label>
        <textarea id="message" name="message" rows="4" required></textarea>
    </div>

    <button type="submit">Send Message</button>
    <button type="reset">Clear Form</button>
</form>

Data Table

Properly structured table with headers and semantic markup:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>john@example.com</td>
            <td>555-0123</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>jane@example.com</td>
            <td>555-0456</td>
        </tr>
    </tbody>
</table>

Video Embed

Responsive video embed with multiple source formats:

<video width="100%" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    Your browser does not support the video tag.
</video>

Responsive Image

Image with srcset for different screen sizes:

<img 
    src="image-medium.jpg" 
    srcset="image-small.jpg 480w, 
            image-medium.jpg 768w, 
            image-large.jpg 1200w"
    sizes="(max-width: 480px) 100vw, 
           (max-width: 768px) 90vw, 
           1200px"
    alt="Responsive image description"
>

Audio Embed

Audio player with multiple format support:

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

Card Component

Reusable card component structure:

<article class="card">
    <img src="card-image.jpg" alt="Card thumbnail">
    <div class="card-content">
        <h3>Card Title</h3>
        <p>Card description goes here.</p>
        <a href="#" class="btn">Learn More</a>
    </div>
</article>

Hero Section

Landing page hero section with call-to-action:

<section class="hero">
    <div class="hero-content">
        <h1>Welcome to Our Site</h1>
        <p>This is a great place to start</p>
        <a href="#" class="btn btn-primary">Get Started</a>
    </div>
</section>

Meta Tags for SEO

Essential meta tags for search engine optimization:

<!-- Basic SEO Meta Tags -->
<meta name="description" content="Page description for search results">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<meta name="author" content="Author Name">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Open Graph Meta Tags -->
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description">
<meta property="og:image" content="image.jpg">
<meta property="og:url" content="https://example.com">

<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description">
<meta name="twitter:image" content="image.jpg">

Structured Data (Schema.org)

JSON-LD structured data for rich search results:

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "Company Name",
    "url": "https://example.com",
    "logo": "https://example.com/logo.png",
    "description": "Company description",
    "address": {
        "@type": "PostalAddress",
        "streetAddress": "123 Main St",
        "addressLocality": "City",
        "addressRegion": "State",
        "postalCode": "12345",
        "addressCountry": "US"
    },
    "contactPoint": {
        "@type": "ContactPoint",
        "telephone": "+1-XXX-XXX-XXXX",
        "contactType": "Customer Service"
    }
}
</script>

Breadcrumb Navigation

Semantic breadcrumb navigation structure:

<nav aria-label="Breadcrumb">
    <ol>
        <li><a href="/">Home</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/blog/web-design">Web Design</a></li>
        <li aria-current="page">How to Code HTML</li>
    </ol>
</nav>

Accessible Dropdown Menu

Accessible dropdown with proper ARIA attributes:

<nav>
    <ul>
        <li>
            <button aria-expanded="false" aria-haspopup="true">
                Products
            </button>
            <ul>
                <li><a href="/products/software">Software</a></li>
                <li><a href="/products/hardware">Hardware</a></li>
                <li><a href="/products/services">Services</a></li>
            </ul>
        </li>
    </ul>
</nav>

Blog Post Structure

Semantic article structure for blog posts:

<article>
    <header>
        <h1>Article Title</h1>
        <p class="meta">
            By <span class="author">Author Name</span>
            on <time datetime="2025-01-30">January 30, 2025</time>
        </p>
    </header>

    <section>
        <p>Article content goes here...</p>
    </section>

    <footer>
        <p>Tags: <a href="/tag/html">#HTML</a> <a href="/tag/web">#Web</a></p>
    </footer>
</article>

Modal Dialog (HTML5)

Native HTML5 dialog element:

<dialog id="modal">
    <form method="dialog">
        <h2>Dialog Title</h2>
        <p>Dialog content goes here.</p>
        <div>
            <button type="submit">Close</button>
            <button type="submit" value="confirm">Confirm</button>
        </div>
    </form>
</dialog>

<button onclick="document.getElementById('modal').showModal()">
    Open Dialog
</button>

💡 Pro Tip

The "Copy" button on each code snippet makes it easy to copy the entire code to your clipboard. Just click the button and paste it into your project!

Back to Resources