Home › Code Snippets › HTML Snippets › HTML Boilerplate

HTML Snippet

HTML Boilerplate

The modern HTML5 template for 2026 — every line explained.

Last updated: October 2026

Quick answer: Every HTML page should start with <!DOCTYPE html>, a <html lang="en"> element, <meta charset="UTF-8">, and <meta name="viewport" content="width=device-width, initial-scale=1.0">. Add a title, description, canonical URL, and Open Graph tags for production. This template covers all of them.

🎬 Visual Reference

Every tag in the boilerplate, shown with what it does. Use this as a quick lookup while writing HTML.

<!DOCTYPE html> standards mode

Tells the browser to use standards mode. Without it, modern CSS breaks. Must be the first line.

<html lang="en"> accessibility + SEO

Declares the page language. Screen readers and search engines use it.

<meta charset="UTF-8"> character encoding

Supports every character in every language. Place in the first 1024 bytes.

<meta name="viewport"> mobile rendering

Makes the page render at the device width. Without it, mobile users see a zoomed-out desktop.

<title> tab + SERP headline

Shown in the browser tab and used as the clickable headline in search results. Under 60 characters.

<meta name="description"> SERP snippet

The snippet shown under your title in search results. Aim for 150-160 characters.

<link rel="canonical"> avoid duplicates

The preferred URL for this content. Prevents duplicate content penalties.

<meta property="og:*"> social previews

Controls how your page appears when shared on Facebook, LinkedIn, Discord, Slack, and more.

<link rel="icon"> favicon

The small icon shown in browser tabs, bookmarks, and mobile home screens.

The Complete Boilerplate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

    <title>Your Page Title Here</title>
    <meta name="description" content="A 150-160 character summary of this page.">

    <link rel="canonical" href="https://example.com/page">

    <!-- Open Graph -->
    <meta property="og:title" content="Your Page Title">
    <meta property="og:description" content="Social preview summary.">
    <meta property="og:image" content="https://example.com/social.png">
    <meta property="og:url" content="https://example.com/page">
    <meta property="og:type" content="website">

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="/favicon.png">

    <!-- Styles -->
    <link rel="stylesheet" href="/style.css">
</head>
<body>

    <h1>Page Content</h1>

</body>
</html>

Copy this into every new HTML file. It covers rendering, accessibility, SEO, social sharing, and performance.

What Each Tag Does (Line by Line)

<!DOCTYPE html> — Tells the browser to use standards mode. Without it, browsers use quirks mode and modern CSS breaks. Must be the very first line.

<html lang="en"> — Declares the page language. Screen readers use it. Google uses it. Change en to your language code if it isn't English.

<meta charset="UTF-8"> — Sets the character encoding. Supports every language and emoji. Place it in the first 1024 bytes.

<meta name="viewport"> — Makes mobile rendering correct. Without it, mobile users see a zoomed-out desktop version.

<title> — The browser tab and SERP headline. Under 60 characters. This is the single most important SEO tag.

<meta name="description"> — The SERP snippet below the title. 150-160 characters.

<link rel="canonical"> — The preferred URL. Prevents duplicate content issues.

<meta property="og:*"> — Social sharing preview. Used by Facebook, LinkedIn, Discord, Slack.

<link rel="icon"> — The favicon shown in browser tabs and bookmarks.

The Minimum Viable Boilerplate

If you only want the absolute essentials (perfect for quick prototypes):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Page</title>
</head>
<body>
    <h1>Hello</h1>
</body>
</html>

That's 10 lines. It renders correctly on all devices and is a valid HTML5 document. Add the rest as your site grows.

The Full Production Boilerplate

For a real site, add these extras:

<!-- Twitter / X Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Title">
<meta name="twitter:description" content="Summary.">
<meta name="twitter:image" content="https://example.com/card.png">

<!-- Additional SEO -->
<meta name="robots" content="index, follow">
<meta name="author" content="Your Name">
<meta name="theme-color" content="#0f172a">

<!-- Performance hints -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Structured data -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "WebPage",
    "name": "Your Page",
    "description": "A summary."
}
</script>

These extras matter when you're serious about SEO, social sharing, and page speed. Start with the basic template and add them as you need them.

🎯 Boilerplate Tags Cheatsheet

Tag	Purpose	Required?
`<!DOCTYPE html>`	Standards mode rendering	Yes
`<html lang>`	Language declaration	Yes
`<meta charset>`	Character encoding	Yes
`<meta viewport>`	Mobile rendering	Yes
`<title>`	Tab and SERP headline	Yes
`<meta description>`	SERP snippet	Strongly recommended
`<link canonical>`	Duplicate content prevention	Recommended
`<meta og:*>`	Social sharing preview	Recommended
`<link icon>`	Favicon	Recommended

⚠️ Common Mistakes

Omitting <!DOCTYPE html>. This forces browsers into quirks mode and breaks modern CSS. Always include it.
Placing <meta charset> too late. It must appear in the first 1024 bytes. If it's after other tags, the encoding may not apply.
Forgetting the viewport meta tag. Mobile users will see a zoomed-out desktop layout.
Using a duplicate title on every page. Each page needs a unique title. Duplicate titles confuse Google and hurt rankings.
Setting og:image to a relative URL. Open Graph requires absolute URLs. /image.png will not work — use https://example.com/image.png.
Leaving out the canonical tag on multi-URL pages. If your page is accessible via both /page and /page.html, search engines may treat them as duplicates.
Using user-scalable=no in viewport. This disables pinch-to-zoom and breaks accessibility for many users.

❓ Frequently Asked Questions

What is an HTML boilerplate?

An HTML boilerplate is a starter template that includes all the essential structure and meta tags every HTML document needs. It saves you from writing the same setup code on every new page or project.

Is <!DOCTYPE html> required?

Yes. Without it, browsers fall back to quirks mode, which renders pages using legacy rules and often breaks modern CSS. Always start HTML files with <!DOCTYPE html>.

What does the viewport meta tag do?

The viewport meta tag tells mobile browsers to render the page at the device's actual width instead of a default zoomed-out width. Without it, mobile users see a zoomed-out, desktop-sized version of your page.

What are Open Graph meta tags?

Open Graph tags control how your page appears when shared on social media. og:title sets the headline, og:image sets the preview image, and og:description sets the summary. They are used by Facebook, LinkedIn, Discord, Slack, and many other platforms.

Do I need all these meta tags in a modern boilerplate?

You need charset, viewport, title, and description on every page. The rest (Open Graph, Twitter cards, canonical, favicon) become essential as your site grows. Starting with a complete boilerplate saves refactoring later.

🎯 What's Next?

💬 Dialog & Popover

Native modals and tooltips.

🖼️ Semantic Layouts

header, main, section, article.

📍 Permissions Elements

Native geolocation and camera.

🟨 All HTML Snippets

Browse every HTML snippet.

← All HTML Snippets

Master Code On The Go