Skip to content

Instantly share code, notes, and snippets.

@davidhund

davidhund/index.html

Last active September 15, 2016 20:35
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 davidhund/5a56aed9d9acd8db8b83c5daee46814c to your computer and use it in GitHub Desktop.
Save davidhund/5a56aed9d9acd8db8b83c5daee46814c to your computer and use it in GitHub Desktop.
Download ZIP
Simple HTML template boilerplate
Raw
index.html
<!DOCTYPE html>
<html class="no-js" lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="{% DESCRIPTION %}">
<title>{% TITLE %}</title>
<!-- @TODO: check http://gethead.info/ -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
{% EXTRACOMMENTS %}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Consider prefetching/preconnecting certain Domains ~~~~~~~~~~~~~~~ -->
<!-- https://css-tricks.com/prefetching-preloading-prebrowsing/
<link rel="dns-prefetch" href="{% DOMAIN %}">
<link rel="dns-preconnect" href="{% DOMAIN %}">
-->
<!-- Consider extracting/including critical CSS inline ~~~~~~~~~~~~~~~~ -->
<!--
<style>...</style>
-->
<link href="global.css" rel="stylesheet">
<!-- Consider adding favicons, or "Pragmatic Touch Icons"
https://gist.github.com/davidhund/332316f82440ef4377f3
http://realfavicongenerator.net/ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="author" href="humans.txt">
<link rel="me" href="https://plus.google.com/+DavidHund" type="text/html">
<!-- Feeds:
<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">
<link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">
-->
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@valuedstandards">
<meta name="twitter:creator" content="@valuedstandards">
<meta name="twitter:url" content="http://valuedstandards.com">
<meta name="twitter:title" content="David Hund: freelance front-end developer">
<meta name="twitter:description" content="David Hund is a Dutch freelance front-end developer building fast, accessible and effective websites.">
<meta name="twitter:image" content="http://1.gravatar.com/avatar/f0715f6a8c77292b806bab6bb2b4e227">
<!-- More info: https://dev.twitter.com/cards/getting-started -->
<!-- Validate: https://dev.twitter.com/docs/cards/validation/validator -->
<!-- Consider Cutting Mustard (test your own features!)
https://gist.github.com/davidhund/7412624 ~~~~~~~~~~~~~~~~~~~~~~~ -->
<script>
if ('querySelector' in document
&& 'localStorage' in window
&& 'addEventListener' in window) {
// Modern browser. Let's add JavaScript functionality
document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, 'js');
// etc..
}
</script>
</head>
<body>
<!-- Header ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<header role="banner">
<h1>{% TITLE %}</h1>
<a href="#navigation">Direct naar de navigatie</a>
<a href="#main">Direct naar de content</a>
<a href="#contact">Direct naar de contactinformatie</a>
</header>
<!-- Navigatie ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<nav role="navigation">
<h2>Pagina navigatie</h2>
<ul id="navigation" role="navigation">
<li><a href="#link">Link</a></li>
<li><a href="#link">Link</a></li>
<li><a href="#link">Link</a></li>
</ul>
</nav>
<!-- Main Content ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<main role="main" id="main">
<h2>Main content</h2>
<p>...</p>
</main>
<!-- Footer: Contact info ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<footer role="contentinfo">
<h2 id="contact">Contact informatie</h2>
<p>etc..</p>
</footer>
<!-- Bundled site scripts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<script src="global.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment