Skip to content

Instantly share code, notes, and snippets.

@fbuys

fbuys/html-skeleton-with-csp-aria.html

Forked from dfkaye/html-skeleton-with-csp-aria.html
Created May 21, 2023 22:06
Show Gist options
  • Save fbuys/5ab72cfa882299b61f7fbbdbdb4d9c24 to your computer and use it in GitHub Desktop.
Save fbuys/5ab72cfa882299b61f7fbbdbdb4d9c24 to your computer and use it in GitHub Desktop.
Download ZIP
Expanded version of Josh W. Comeau (2020), HTML Skeleton (adds CSP, ARIA, custom tag name)
Raw
html-skeleton-with-csp-aria.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Josh W Comeau (2020), HTML Skeleton (starter for every web page) → https://joshwcomeau.com/snippets/html/html-skeleton -->
<!-- see also my HTML5 boilerplate gist → https://gist.github.com/dfkaye/1ed260cf8cf1990b13aaa272dab0bf97 -->
<title>Your Page Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Your name">
<meta name="description" content="Brief description">
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Brief description">
<meta property="og:image" content="/some-image.png">
<meta property="og:url" content="/this-page.html">
<meta property="og:site_name" content="Your Site Name">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image:alt" content="image description">
<meta http-equiv="Content-Security-Policy"
content="style-src 'self' 'nonce-4AEemGb0xJptoIGFP3Nd';
style-src-elem 'nonce-4AEemGb0xJptoIGFP3Nd';
script-src-elem 'self' 'strict-dynamic' 'nonce-4AEemGb0xJptoIGFP3Nd';">
<link rel="stylesheet" nonce=4AEemGb0xJptoIGFP3Nd href='https://fonts.googleapis.com/css?family=Bitter:400,400italic,700'>
<link rel="stylesheet" nonce=4AEemGb0xJptoIGFP3Nd href="/css/index.css">
<script type="module" nonce=4AEemGb0xJptoIGFP3Nd src="/js/index.js"></script>
<link rel="icon" nonce=4AEemGb0xJptoIGFP3Nd type="image/svg+xml" href="/favicon.svg">
</head>
<body>
<header>
<h1>Your content here!</h1>
</header>
<nav>
<ul>
<li><a href="/" aria-current="true">This page</a></li>
</ul>
</nav>
<main>
<article>content</article>
</main>
<footer role="contentinfo">
<!-- custom tag name to test browser support copy { display: flex } -->
<copy>&copy; 2020</copy>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment