bare bones HTML5 page template

Question

I am a lazy programmer, which is why I often frequent this very site.
Occasionally, I cannot, for want of better searching, find what I am looking for on here.

Today I am posing this question:
What is a good HTML5 "bare bones, blank web page" template to begin my projects with?

Currently, I was looking at using this little beauty I found at sitepoint:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>The HTML5 Herald</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">

  <link rel="stylesheet" href="css/styles.css?v=1.0">

  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
  <script src="js/scripts.js"></script>
</body>
</html>

Now, I will admit to only searching for about 30 minutes, that is a long time to achieve a blank page!

I also became aware of html5 boilerplate as I was putting tags for this question - very in-depth, handy, and a little too much for a quick 'bare bones, get me going sir' template to grab and run, heck, you have to download stuff.
HTML5 Reset appears to be alot slimmer, and a good starting point to pare away at..yet..

Define "good". Minimal is doctype, title (not empty) and a single block element, say div. — RobG, Sep 10 '15 at 05:29
i was thinking something along the lines of the sitepoint example I provided, I was just looking for a similar question to this one without much luck (but many "bare bones template for xxxx" other type questions) so wanted to make one for future reference with the potential of refinement :) — RozzA, Sep 10 '15 at 07:53
`I am a lazy programmer, which is why I often frequent this very site.` ahhh hahahaha Honesty is valuable. — Martin, Dec 22 '16 at 11:26

score 1 · Answer 1 · answered Mar 31 '23 at 11:53

A good source of inspiration for the bare-bones HTML5 boilerplate is are the "classless" CSS frameworks, or other lightweight CSS frameworks. You may look into Pico.css, Simple.css or Bulma documentation for example. Here is my take in 2023:

<!doctype html>

<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Base-bones HTML5</title>
    <!-- You may want to add other icon formats and sizes, but have this at the least: -->
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="your.css">
  </head>

  <body>
    <main>
      Base-bones HTML5
    </main>
    <script src="your.js"></script>
    <noscript>
      <!-- Optional, place it wherever it makes sense -->
      JavaScript is not enabled.
    </noscript>
  </body>

</html>

bare bones HTML5 page template

1 Answers1