The Basic HTML5 Template is perfect for testing code snippets. Its purpose is to save you time from having to code a new template every time you want to start working on a new script or test some other code sample. It is just the very basics, and it only supports modern browsers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Basic HTML5 template for quick sample and testing pages.
No compatibility for older browsers.
Author: Alexandar Tzanov -->
<title>Basic HTML 5 Template</title>
<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport" />
<!-- <link href=“./template/test.css?v=1.0" rel="stylesheet" type="text/css"> -->
<style>
body {
font-size: 12px;
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
color: black;
}
#wrapper {
margin: 28px auto 28px auto;
width: 1024px;
}
header {
text-align: center;
padding: 8px;
margin-bottom: 10px;
background: -webkit-linear-gradient(rgba(230,160,9,0.67) 0%, #ffffff 100%)
}
section {
padding: 8px;
background: white;
}
footer {
text-align: center;
padding: 8px;
margin-top: 10px;
background: -webkit-linear-gradient(#ffffff 10%, rgba(230,160,9,0.67) 90%);
color: grey;
}
</style>
<!-- <script type="text/javascript">
// Do something!
</script> -->
</head>
<body>
<div id="wrapper">
<header>
<h1>Hello World.</h1>
</header>
<section id="secton1">
<h2>Intro</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<footer>
<p>Source Code DNA by Alexandar Tzanov.</p>
</footer>
</div>
<!-- Best to load the JavaScript files last to improve the page speed. -->
<!-- <script src=“./lib/test.js" type="text/javascript" charset="utf-8"></script> -->
</body>
</html>I am also including a couple of articles about font sizing using different CSS size units, in particular: REM and EM.
