Basic HTML5 Skeleton Document

25th January 2010

By Tim Trott

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>

Enjoyed this post? Why not share it!

If you enjoyed this post, please share it with others. Click one of the social media buttons below to share on Facebook, Twitter, LinkedIn, Pinterest or email to a friend.

About the Author

Tim Trott

Tim Trott is a creative photographer, traveller, astronomer and software engineer with a passion for self-growth and a desire for personal challenge. Follow Tim on these networks:

Lonewolf Online1 Like Like Page

Be the first of your friends to like this

Further Reading

Minimal Responsive Mobile First CSS Skeleton

A minimal, no-nonsense, responsive, mobile first CSS3 skeleton which demonstrates media queries for varying screen sizes. No frameworks, no JavaScript just the absolute bare bones.

Social Media Colours Hex, RBG, SCSS, PS Swatches

Social integration of for any project is must and so are social icons, colours and links. We've created a social media colours palette for all the popular social networks so you don't need to visit each of them.

Using CSS3 Media Queries for Responsive Design

CSS3 introduced media queries into the web development world. Media queries are the foundation for responsive design. They let you create layouts specific for screen sizes such as tablets and smartphones. This article provides you with a brief overview of media queries with the basic syntax for common screen sizes.

CSS3 Message Notification Bars Reloaded

A while back I published a post detailing a simple but effective CSS2 notification messages. This was a successful post but needed updating, so here is an updated collection of CSS3 notification message styles.

2 thoughts on “Basic HTML5 Skeleton Document”

jimbo
6th April 2018 at 12:00 am
thanks this helps me a lot getting started with new html projects, nice clean document to work from
Reply
Vladimír ?unát
23rd July 2015 at 12:00 am
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

Basic HTML5 Skeleton Document

HTML5 Skeleton

XHTML Skeleton

Leave a Reply Cancel reply