Tutorial: Basic HTML 5 Webpage

Posted in Tutorials

Tweet This Share on Facebook Bookmark on Delicious Digg this Submit to Reddit

Here we will give you a brief tutorial on a basic HTML 5 webpage.  Think of it as a “template” that you can use whenever you create a new HTML page.

Here is the HTML 5 code for a basic page…

Html5 Basic Page

The above is an image so that you have to type in the code each time, which will help you remember it.  Just kidding.  Below is the code that you can copy and paste…

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
  </body>
</html>

And if you want to use this for a responsive web design, add in the following meta tag so that mobile device shows the page in normal scale …

<meta name="viewport" content="width=device-width, initial-scale=1">

And if you need to support Internet Explorer 8 or below, add html5shiv.js and respond.js within conditional comments for IE version less than 9 …

<!--[if lt IE 9]>
  <script src="html5shiv.js"></script>
  <script src="respond.js"></script>
<![endif]-->

html5shiv.js adds HTML5 element support and respond.js adds media queries support for IE6-8.  For performance, you can put in the minified versions.

While the html5shiv.js should be placed in the head, if possible we should move our own script.js tag to the bottom of the page.  This is to enhance performance such that the downloading of the script.js file doesn’t delay the browser rendering.

And when you add in the normalize.css to reset elements to be consistent across browser, the HTML5 templates with extra bells and whistles becomes…

<!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</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="style.css">
    <!--[if lt IE 9]>
      <script src="html5shiv.js"></script>
      <script src="respond.js"></script>
    <![endif]-->
  </head>
  <body>
     <p>Your Content here</p>
     <script src="script.js"></script>
  </body>
</html>

 

The HTML5 Doctype

The first line <!doctype html> is the new HTML5 doctype. It can be written as <!DOCTYPE html> or <!doctype html> — the latter being easier to type.  The easiest way to tell if a page is HTML 5 or not is to look at this line.   Note that gone are the various transitional, strict, and whatever doctypes that was available in HTML4.

Avoid Quirks Mode

Make sure that this doctype is the very first line of the page.  If you have a blank line above it or if you forget to put in a doctype, certain browsers (for example Internet Explorer) will render your page in “Quirks Mode” which means that it thinks your page is old fashion and will use an older rendering method to render your page.  The end result is that the browser may not render your page the way it should be rendered.

HTML5 Skeleton

These sets of tags form the skeleton of the page.

<!doctype html>
<html lang="en">
  <head>
  </head>
  <body>
  </body>
</html>

If you have worked with previous version of HTML, you would be familiar with it.  The <html> tags bounds the page.  The set of <head> bounds the head of the document.  The set of <body> tags bounds the body of the page.  Put your HTML content in between the <body> tags.

The tag pairs have an opening tag (like <body>) and a closing tag (like </body>).  Note the / in the closing tag.

The <html> tag has an “lang” attribute with value “en”.  This tells the browser that your page is in English.  There is no “default language”.  So it is best to always specific a language with this attribute.

Use meta charset for security

Within the <head>, you have <meta> tags.  Line 4 is meta character set tag ..

<meta charset="utf-8">

You should always put in this line for security reasons.  Not putting it might make page vulnerable to cross-site scripting hacks if page is viewed in older Internet Explorer browser.

If instead of this line, you have …

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

That is fine too.  That is is just long form of saying the same thing.  Both tells the browser to use the utf-8 character set.

The reason why you need the charset=”utf-8″ tag is explain in a separate tutorial.

IE Edge

This line …

<meta http-equiv="X-UA-Compatible" content="IE=edge">

is optional.

Unfortunately, this line does not pass W3C validation and gives error “Bad value X-UA-Compatible”.  If your requirement is to pass W3C, just remove this line.

What the “IE=edge” does is to tell Internet Explorer browsers (“IE browsers”) to use the latest rendering engine (the “edge version”) that is in the browser.  In other words, do not render page in “Quirks Mode” or such.

We like to keep this line in, because browsers will understand it and will have no problems with it even though it doesn’t pass W3C validation.  HTML5 Boilerplate has a similar line …

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

The extra chrome=1  tells Internet Explorer to use the Google Chrome Frame rendering engine if installed.  Since Google is phasing out Chrome Frame, we don’t bother with this.

As you can see, this X-UA-Compatible line is only used to cater to and give help to Internet Explorer browsers.  Since the browser’s marketshare is dropping, you can decide for yourself whether to put in this line or not.

Page title

Put your page title between the <title> tags.  What you put there is what shows up in the browser tab and is one of the major factors that affect SEO.

Link to Stylesheet

Within the <head> section is where you link to your CSS stylesheet like this …

<link rel="stylesheet" href="style.css">

Normally, you put your style.css within a style subfolder.  Then it would be like …

<link rel="stylesheet" href="style/style.css">

Note that there is no tag pair here.  Just the single <link> tag.  Tags are “elements”.  Since the link element can not have any content within an opening or closing tag, it is known as a “void element”.

Sometimes you might see people write this line as …

<link rel="stylesheet" href="style.css" />

Note that it has a / before the ending angle bracket.  In HTML5, this / is optional and makes no difference.   People do this because this was what was typically done in previous versions of XHTML.  Think of this single tag as a merge of the opening and closing tag into one single tag.  These are known as “self-closing” tags in XHTML.

It is more technically correct to leave the / off when writing HTML5.  So in HTML5, try to write <hr> and <br> without any slashes.  Even older browser that do not understand HTML5 will have no trouble understanding <hr> and <br> (without the /)

Ending Script Tag is needed

The next line …

<script src="script.js"></script>

is how you link to script files.  A script tag can have content in between them.  It is not a void element.  So put an ending tag as shown.

Type attribute optional for link and script

Previous versions of HTML, you might see the type attribute in the <link> and <script> tags as in …

<link rel="stylesheet" href="style.css" type="text/css" />
<script src="script.js" type="text/javascript"></script>

In HTML5 the type attribute are not needed in these cases.  Because if rel=”stylesheet”, browsers know it is going to be CSS — that’s is the only stylesheet out there.   Similar, whenever <script> tag is encountered, browsers automatically assumes it is “javascript”.  Nothing else even comes close.

Minimal HTML5

The above code is not a minimal HTML5 page.  It has some extra lines that are almost always used, but technically not absolutely required.  Below is a minimal HTML5 that passes W3C validation…

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
  </body>
</html>

This article was written in July 2013 and things may have changed since then.

Related Posts

Tags

Share This