Skip to content

Instantly share code, notes, and snippets.

@jamesmishra
Last active July 10, 2021 12:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jamesmishra/e1a10928dad41b370c3e8e62960756c9 to your computer and use it in GitHub Desktop.
Save jamesmishra/e1a10928dad41b370c3e8e62960756c9 to your computer and use it in GitHub Desktop.
HTML boilerplate
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- This meta tag may only be necessary on corporate intranet sites.
See https://stackoverflow.com/questions/26346917/why-use-x-ua-compatible-ie-edge-anymore -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Unique page title - My Site</title>
<script type="module">
document.documentElement.classList.remove('no-js');
document.documentElement.classList.add('js');
</script>
<link rel="stylesheet" href="/assets/css/styles.css">
<!-- make sure that your process for compiling CSS creates a separate file for
print styles. that makes it easier for browsers to load this page faster
if they know that print styles are not needed. -->
<link rel="stylesheet" href="/assets/css/print.css" media="print">
<meta property="og:url" content="https://www.mywebsite.com/page">
<link rel="canonical" href="https://www.mywebsite.com/page">
<!-- the name of the larger website--not this specific page.-->
<meta property="og:site_name" content="Provose">
<!-- Twitter handle representing this website. -->
<meta name="twitter:site" content="@neocrym">
<meta name="description" content="Page description">
<meta property="og:title" content="Unique page title - My Site">
<meta property="og:description" content="Page description">
<meta property="og:image" content="https://www.mywebsite.com/image.jpg">
<meta property="og:image:alt" content="Image description">
<meta property="og:locale" content="en_US">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<!-- Specify the website favicon and touch icons. -->
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/my.webmanifest">
<meta name="theme-color" content="#FF00FF">
</head>
<body>
<!-- Content -->
<script src="/assets/js/xy-polyfill.js" nomodule></script>
<script src="/assets/js/script.js" type="module"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment