Skip to content

Instantly share code, notes, and snippets.

@teddyzetterlund

teddyzetterlund/README.md

Last active September 18, 2022 06:19
Show Gist options
  • Save teddyzetterlund/1570926 to your computer and use it in GitHub Desktop.
Save teddyzetterlund/1570926 to your computer and use it in GitHub Desktop.
Download ZIP
HTML Templates
Raw
README.md

Base Templates

HTML Templates

A small collection of HTML templates with various attributes to solve the basic needs when starting a new project a new project or prototyping a new front-end feature.

Minimal HTML Template

It doesn't get more minimal than this. HTML5 templates can technically be even more minimal, but this template takes a couple of things in to consideration:

  • Keep everyone happy by specifying the language used.
  • We want UTF-8 encoding set for security and convienence.
  • All web pages should have a title.

Simple HTML Template

Unfortunatly the previous, minimal, template isn't as friendly as we'd like it to be. This simple HTML template takes care of that and adds the following features:

  • Screenreader-accessibility.
  • Stylable in Internet Explorer.
  • Less likely to confuse less proficient reviewers.

Standard HTML Template

This template is meant as the very core of a real web page and therefore adds the following features to the simple HTML template:

  • Meta description tag for SEO purposes.
  • View port meta tag, since we're being responsive in 2012.
  • Link to a style sheet, since we want to keep things organized.

Standard HTML Template with jQuery

Last, but not least - and most likely used the most, we have the standard HTML template with jQuery inclusion pre-entered.

  • Includes the latest jQuery version from Google CDN, with a local fallback if needed.
Raw
html_tmpl_minimal.html
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<style>
</style>
Raw
html_tmpl_with_javascript.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<title></title>
<link rel="stylesheet" href="/stylesheets/application.css">
</head>
<body>
<script src="/javascripts/application.js"></script>
</body>
</html>
Raw
html_tmpl_with_jquery.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<link rel="dns-prefetch" href="//ajax.googleapis.com">
<meta name="viewport" content="width=device-width">
<title></title>
<link rel="stylesheet" href="/stylesheets/application.css">
</head>
<body>
<!-- Grab Google CDN's jQuery, with protocol relative URL; fall back to local if offline. -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/javascripts/libs/jquery-1.7.1.min.js"><\/script>')</script>
<script src="/javascripts/application.js"></script>
</body>
</html>
Raw
html_tmpl_without_javascript.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<title></title>
<link rel="stylesheet" href="/stylesheets/application.css">
</head>
<body>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment