Web Design that taps into the haromny and vision of your dreams.

Basic HTML5 Skeleton Document

By on in HTML/CSS

251 words, estimated reading time 2 minutes.

I'm always creating basic HTML pages by hand, writing out the same skeleton code time and time again. I've decided to create a page with some basic HTML which I can now use to copy & paste to save time. Here is the most basic XHTML framework where you can just fill in the blanks.

HTML5 Skeleton

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="/css/main.css">
    <link rel="icon" href="/favicon.png">
  </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="js/scripts.js"></script>
  </body>
</html>

XHTML Skeleton

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Your Title</title>
  <meta name="Description" content="Your description" />
  <meta name="Keywords" content="Your, comma delimited, keywords" />
  <meta equiv="content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" media="all" href="your-css-stylesheet.css" />
</head >
<body>
  <!-- Your Content -->
</body>
</html>

Last updated on: Friday 24th August 2018

 

Comments

Have a question or suggestion? Please leave a comment to start the discussion.

jimbo

jimbo

thanks this helps me a lot getting started with new html projects, nice clean document to work from

Reply to jimbo
Vladimír ?unát

Vladimír ?unát

This tends to have problems with UTF-8 content. I just did a quick test in firefox, no digging. Using upper-cased "UTF-8" instead fixed that for me.

Reply to Vladimír ?unát

 

Leave a Reply

Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Your email address will not be published.