A modern HTML and CSS boilerplate template that acts as a starting point for your own pages, with focus on semantics and accessibility, and clean code that works across browsers. With essential components, minimally styled for you to build on top of.
Optimized for accessibility Semantic elements used for structure.
Modular design Stackable sections and standalone components following modular design practices.
Responsive adjustments Simple CSS media query definitions to adjust layout for mobile across all modules.
- Support for major browsers
- Built semantically with accessibility in mind
- Mobile-responsive ready
- Dark mode compatibility
- Essential pre-built components
- Blocks Edit ready for drag and drop editing
<!DOCTYPE html>
HTML5 Doctype is enough to trigger standards mode on supported browsers.
<html lang="en">
Set language for browsers, and screen readers. If you need to set language direction, add dir="ltr" for left-to-right, or dir="rtl" for right-to-left reading.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<title>Starter page template</title>
<meta name="apple-mobile-web-app-title" content="Page template">
<meta property="og:site_name" content="Blocks Edit">
<meta property="og:type" content="website">
<meta name="description" content="Standard layout components for designing and building web pages.">
<meta name="author" content="Blocks Edit">
<link rel="canonical" href="https://blocksedit.com/starter-page-template/">
<meta property="og:image" content="meta-preview.png">
- Set the character encoding standard
viewportelement controls the page's dimensions and scaling. This is particularly important for mobile devices, to make sure content is not zoomed in or outcolor-schemetells the browser dark mode settings.light darkmeans you support both.light onlymeans you only support light stylingapple-mobile-web-app-titleallows setting an alternate, shorter title for your website, shown when website is added to the home screen of mobile devicesog:site_namethe name for your site, it could also be the name of a section on your site, like the blogog:typeuse website for info pages, and article for blog posts, with more options availabledescriptiondescribes the current page, which is used in some search engine resultscanonicalfull URL with no extra variables like campaign referrer infoog:imagethe preview thumbnail image
<link rel="apple-touch-icon" href="appicon.png">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
For an external stylesheet, an icon used in browser bookmarks and tabs, and an icon used for the home screen of mobile devices.
<header class="container"> </header>
<main class="container"> </main>
<footer class="container"> </footer>
Standard header, body, and footer elements that act as containers for content.
<img src="feature-image-2000.png" srcset="feature-image-1200.png 1200w, feature-image-2000.png 2000w, feature-image-2400.png 2400w" width="960" height="400" class="fill" alt="Feature Image">
With responsive alternate image sizes using srcset.
<h1>H1 headline</h1>
<h2>H2 headline</h2>
<h3>H3 headline</h3>
Primary headlines and subheadlines.
<p>More text copy goes here. It could be as long as you need it to be as there is plenty of room to let it flow!</p>
<ul>
<li>List item</li>
</ul>
Paragraph and unordered lists.
<a href="#" class="btn">Call to Action</a>
<section class="row">
<div class="col-6">
<img src="https://fpoimg.com/960x400?text=Content%20Image&bg_color=60bcde&text_color=ffffff" width="480" height="200" class="fill" alt="960x400 - Content Image">
</div>
<div class="col-6">
Text next to an image, in a two-colum section, split 50/50.
</div>
</section>
Uses columns for layout.
/* Global */
:root {
color-scheme: light dark;
--primary: #444;
--secondary: #0b72c7;
--helvetica: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
--georgia: 'Georgia', 'Times New Roman', serif;
}
/* Reset */
*, * :before, * :after {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
Main brand colors and font sizes used are set as variables.
/* Layout */
.container {
margin: 0 auto;
padding-bottom: 50px;
width: 80ch;
text-align: left;
@media (max-width: 990px) {
width: 100%;
padding-right: 30px;
padding-left: 30px;
}
@media (max-width: 480px) {
padding-right: 20px;
padding-left: 20px;
}
}
.row {
@media (min-width: 480px) {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 1fr auto;
gap: 20px;
}
}
@media (min-width: 480px) {
.col-2, .col-3 { grid-column: auto / span 6; }
.col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { grid-column: auto / span 12; }
}
@media (min-width: 600px) {
.col-2, .col-3, .col-4 { grid-column: auto / span 6; }
.col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { grid-column: auto / span 12; }
}
@media (min-width: 800px) {
.col-2 { grid-column: auto / span 2; }
.col-3 { grid-column: auto / span 3; }
.col-4 { grid-column: auto / span 4; }
.col-5 { grid-column: auto / span 5; }
.col-6 { grid-column: auto / span 6; }
.col-7 { grid-column: auto / span 7; }
.col-8 { grid-column: auto / span 8; }
.col-9 { grid-column: auto / span 9; }
.col-10 { grid-column: auto / span 10; }
.col-11 { grid-column: auto / span 11; }
.col-12 { grid-column: auto / span 12; }
}
Container and CSS grid layout system setup.
This template has been put together by the Blocks Edit team. Blocks Edit makes any HTML template editable in a visual editor. So you can setup your own design for your team to build and edit landing pages on their own.