HTML Starter Templates

Below is a selection of HTML starter templates, designed for various common use cases. Each template is minimal but includes semantic structure and important meta tags.

All templates use UTF-8 encoding and the HTML5 doctype. Also included is the viewport meta tag for responsiveness. They also link to a placeholder style.css and script.js. You'll need to create these files.

Also, don't forget to replace placeholder content (like "Page Title", "Your Company", etc.) with your actual content!

Basic All-Rounder HTML Starter Template

This is a starter template to cover all bases. Well most of them. It includes plenty of meta tags, including those for social media. It includes favicons, as well as external links to font libraries. Not to mention links to external CSS and JavaScript files.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    
    <title>Your Page Title Here</title>
    <meta name="description" content="Your page description here - keep it under 160 characters">
    <meta name="keywords" content="your, relevant, keywords, here">
    <meta name="author" content="Your Name">
    
    
    <meta property="og:title" content="Your Page Title Here">
    <meta property="og:description" content="Your page description here">
    <meta property="og:image" content="https://yoursite.com/image.jpg">
    <meta property="og:url" content="https://yoursite.com">
    <meta property="og:type" content="website">
    
    
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Your Page Title Here">
    <meta name="twitter:description" content="Your page description here">
    <meta name="twitter:image" content="https://yoursite.com/image.jpg">
    
    
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    
    
    <link rel="stylesheet" href="css/style.css">
    
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    
    <a href="#main-content" class="skip-link">Skip to main content</a>
    
    
    <header role="banner">
        <nav role="navigation" aria-label="Main navigation">
            
        </nav>
    </header>
    
    
    <main id="main-content" role="main">
        
        <h1>Welcome to Your Website</h1>
        <p>Start building something amazing!</p>
    </main>
    
    
    <footer role="contentinfo">
        
    </footer>
    
    
    <script src="js/script.js"></script>
</body>
</html>

View Output

For more specific use-cases, check out the templates below. You can always copy and paste elements from multiple templates to make your own personal starter template.

Ultra-Basic HTML5 Boilerplate

The absolute bare minimum for any HTML page. Good for quick experiments or when you want to build everything from total scratch.

View Output

Simple Content Page

For pages focused on delivering textual content, such as a blog post, documentation, etc.

View Output

Landing Page / Marketing Page

For a product or service landing page, focusing on a call to action, key features, and benefits.

<!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="Promoting our amazing new product/service.">
    <title>Awesome Product - Change Your World!</title>
    
    <link rel="stylesheet" href="style.css">
</head>
<body>

<header class="site-header">
        <div class="container">
            <a href="/" class="logo">AwesomeProduct</a>
            <nav>
                <ul>
                    <li><a href="#features">Features</a></li>
                    <li><a href="#pricing">Pricing</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

<main>
        <section id="hero" class="hero-section">
            <div class="container">
                <h1>The Future of [Your Niche] is Here!</h1>
                <p class="subtitle">Discover how AwesomeProduct can revolutionize the way you [solve a problem].</p>
                <a href="#signup" class="cta-button">Get Started Now</a>
            </div>
        </section>

<section id="features" class="features-section">
            <div class="container">
                <h2>Key Features</h2>
                <div class="features-grid">
                    <div class="feature-item">
                        <img src="icon-feature1.svg" alt="Feature 1 Icon" class="feature-icon">
                        <h3>Innovative Design</h3>
                        <p>Experience a sleek and intuitive interface.</p>
                    </div>
                    <div class="feature-item">
                        <img src="icon-feature2.svg" alt="Feature 2 Icon" class="feature-icon">
                        <h3>Blazing Fast</h3>
                        <p>Optimized for speed and performance.</p>
                    </div>
                    <div class="feature-item">
                        <img src="icon-feature3.svg" alt="Feature 3 Icon" class="feature-icon">
                        <h3>Secure & Reliable</h3>
                        <p>Your data is safe with our top-notch security.</p>
                    </div>
                </div>
            </div>
        </section>

<section id="testimonials" class="testimonials-section">
            <div class="container">
                <h2>What Our Users Say</h2>
                <blockquote>
                    <p>"AwesomeProduct has changed my life! It's incredible."</p>
                    <footer>- Satisfied Customer</footer>
                </blockquote>
                
            </div>
        </section>

<section id="cta-final" class="cta-final-section">
            <div class="container">
                <h2>Ready to Get Started?</h2>
                <p>Join thousands of happy users today.</p>
                <a href="#signup" class="cta-button">Sign Up for Free</a>
            </div>
        </section>
    </main>

<footer class="site-footer">
        <div class="container">
            <p>Â© <span id="currentYear"></span> AwesomeProduct Inc. All rights reserved.</p>
            <p><a href="/privacy.html">Privacy Policy</a> | <a href="/terms.html">Terms of Service</a></p>
        </div>
    </footer>

View Output

Portfolio / Gallery Page

Great for showcasing visual work like photography, design projects, or art.

<!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="A portfolio showcasing my creative work.">
    <title>My Portfolio - Jane Doe, Designer</title>
    
    <link rel="stylesheet" href="style.css">
</head>
<body>

<header>
        <div class="container">
            <h1>Jane Doe - Creative Portfolio</h1>
            <nav>
                <ul>
                    <li><a href="/">Home</a></li>
                    <li><a href="/about.html">About Me</a></li>
                    <li><a href="/contact.html">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

<main>
        <section id="gallery" class="container">
            <h2>My Work</h2>
            <div class="gallery-grid">
                <figure class="gallery-item">
                    <a href="project1-detail.html">
                        <img src="portfolio-thumb1.jpg" alt="Description of Project 1">
                        <figcaption>Project Alpha - Web Design</figcaption>
                    </a>
                </figure>
                <figure class="gallery-item">
                    <a href="project2-detail.html">
                        <img src="portfolio-thumb2.jpg" alt="Description of Project 2">
                        <figcaption>Project Beta - Illustration</figcaption>
                    </a>
                </figure>
                <figure class="gallery-item">
                    <a href="project3-detail.html">
                        <img src="portfolio-thumb3.jpg" alt="Description of Project 3">
                        <figcaption>Project Gamma - Branding</figcaption>
                    </a>
                </figure>
                
            </div>
        </section>
    </main>

<footer>
        <div class="container">
            <p>Â© <span id="currentYear"></span> Jane Doe. All rights reserved.</p>
            
        </div>
    </footer>

View Output

Basic Dashboard / Admin Panel Layout

This could be the structural shell for a web application's backend or dashboard. Focuses on layout (sidebar, main content area).

Note: This dashboard layout implies CSS will handle the sidebar and main content positioning (e.g., using Flexbox or Grid).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard - AppName</title>
    
    <link rel="stylesheet" href="style.css">
</head>
<body class="dashboard-layout">

<aside class="sidebar">
        <div class="sidebar-header">
            <h2>AppName</h2>
        </div>
        <nav class="sidebar-nav">
            <ul>
                <li><a href="/dashboard" class="active">Dashboard</a></li>
                <li><a href="/users">Users</a></li>
                <li><a href="/products">Products</a></li>
                <li><a href="/settings">Settings</a></li>
                <li><a href="/logout">Logout</a></li>
            </ul>
        </nav>
    </aside>

<div class="main-wrapper">
        <header class="top-bar">
            <div class="user-profile">
                <span>Welcome, AdminUser!</span>
                
            </div>
        </header>

<main class="content-area">
            <div class="container-fluid"> 
                <h1>Dashboard Overview</h1>
                <p>This is where your main dashboard content will go. Charts, stats, tables, etc.</p>
                
                <section class="data-widget">
                    <h2>Recent Activity</h2>
                    <p>No recent activity to display.</p>
                </section>
            </div>
        </main>

<footer class="dashboard-footer">
            <p>Â© <span id="currentYear"></span> AppName. All rights reserved.</p>
        </footer>
    </div>

View Output

Single Page Application (SPA) Shell

For applications built with JavaScript frameworks (React, Vue, Angular, Svelte) where HTML is minimal and content is rendered dynamically.

<!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="My Awesome Single Page Application.">
    <title>My SPA</title>
    
    
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div id="app">
        
        
        <p>Loading application...</p>
    </div>

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

View Output

Basic Form Page (Contact / Signup)

A simple page primarily focused on a form, like a contact form or a basic signup form.

<!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="Contact us or sign up for our newsletter.">
    <title>Contact Us - MyWebsite</title>
    
    <link rel="stylesheet" href="style.css">
</head>
<body>

<header>
        <div class="container">
            <a href="/" class="logo">MyWebsite</a>
            <nav>
                <ul>
                    <li><a href="/">Home</a></li>
                    <li><a href="/about.html">About</a></li>
                    <li><a href="/contact.html" class="active">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

<main>
        <section id="contact-form-section" class="container">
            <h1>Get in Touch</h1>
            <p>We'd love to hear from you! Please fill out the form below.</p>

<div class="form-group">
                    <label for="email">Email Address:</label>
                    <input type="email" id="email" name="email" required>
                </div>

<div class="form-group">
                    <label for="subject">Subject:</label>
                    <input type="text" id="subject" name="subject">
                </div>

<div class="form-group">
                    <label for="message">Message:</label>
                    <textarea id="message" name="message" rows="5" required></textarea>
                </div>

<div class="form-group">
                    <input type="checkbox" id="newsletter" name="newsletter" value="subscribe">
                    <label for="newsletter" class="inline-label">Subscribe to our newsletter</label>
                </div>

<button type="submit" class="submit-button">Send Message</button>
            </form>
        </section>
    </main>

View Output