"Web Essentials" is the boilerplate template / style guide for the basic HTML and CSS of any website.
Table of Contents
Jump to:
Check out the HTML file to see everything come together.
Here are the essential meta tags:
<head>
<!-- essentials -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>__TITLE__ • __SITE_NAME__</title>
<meta name="description" content="__DESCRIPTION__" />
<!-- extras -->
<meta name="author" content="__AUTHOR__" />
<link rel="canonical" href="https://example.com/" />
<meta name="application-name" content="__SITE_NAME__" />
<meta name="theme-color" content="#0000ff" />
<!-- open graph -->
<meta property="og:type" content="website" />
<meta property="og:title" content="__TITLE__ • __SITE_NAME__" />
<meta property="og:description" content="__DESCRIPTION__" />
<meta property="og:url" content="https://example.com/" />
<meta property="og:site_name" content="__SITE_NAME__" />
<meta property="og:locale" content="en_US" />
<meta property="og:image" content="./icon512.png" />
<meta property="og:image:alt" content="__SITE_NAME__ logo icon" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="512" />
<meta property="og:image:height" content="512" />
<!-- icons -->
<link rel="icon" href="./favicon.ico" type="image/x-icon" />
<link rel="icon" href="./icon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="./apple-touch-icon.png" />
<!-- stylesheets -->
<link rel="stylesheet" href="./index.css" />
</head>The essential things you'll need to change (find and replace) here are:
example.com__SITE_NAME____TITLE____DESCRIPTION____AUTHOR__#0000ff(theme color)
Here's an example of how you might markup your content:
<main>
<article>
<header>
<h1>Heading 1</h1>
</header>
<h2>Heading 2</h2>
<p>Paragraph with some <strong>bold text</strong>.</p>
<form>
<label for="cheese">
Cheese
<input
type="text"
name="cheese"
id="cheese"
placeholder="What cheese do you want?"
/>
</label>
<button type="submit">Submit</button>
</form>
</article>
</main>Key things to note here:
- I have a particular preference to wrap my form elements inside the
<label>tag. - I prefer the hierarchy of
body > main > [article | section]
Check out the stylesheet file to see how to style these:
- Root / Color Variables
- Base / Root
- Main / Section / Article
- Typography / Type
- Headers
- Links
- Blockquotes
- Details & Summary
- Sub & Sup
- Bold / Strong
- Small
- Lists
- Line / Horizontal Rule
- Tables
- Multimedia
- Code
- Form elements