Tutorial on Creating Your First HTML 5 Page

Posted in Tutorials

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

In this tutorial we will create a very simple HTML 5 page. We will keep it as simple as possible so that you can get something up and running quickly.

HTML 5 is a significant change from HTML 4.  It comes with brand new tags and a new doctype plus more.   However older browsers that was in existence prior to HTML 5 will not know of these news tags.  Of course, we will want our page to be viewable on these older browser as well. Therefore there are various tricks and techniques that we have to employ in order to get our HTML 5 page to render on older browsers.

The easiest way to start is to start with an HTML 5 template that has all these techniques and best practices coded for you already.   HTML 5 Boilerplate is the popular template to use.  We will use this template as the skeleton for our HTML page.

1.  First download the latest HTML5 Boilerplate from http://html5boilerplate.com/

In this tutorial we are using version 4.0.0.

2.  After you have downloaded and extracted the zip file into a new folder on your hard disk, you will see a bunch of files like the following…

3.  The main file that we are interested in is index.html.   Open this file in your favorite text editor. (I’m using Dreamweaver).

4.  Note the new doctype is now the following…

<!DOCTYPE html>

This is the new doctype for HTML5.  If you see this, it means that the author intends for this to be an HTML 5 document.

HTML5 doctype

5.  Without changing any code, just test it by running the index.html file in your browser.   We are using Chrome for this viewing. As of this writing in October 2012, Chrome version 22 is the browser that supports the most features of the latest HTML5 specifications, according to HTM5Test.com. That is why many web designers like to using Google Chrome during development.

You will see the following in the browser …

First HTML5 page viewed in Chrome

which indicates that everything currently works.

You can say that this is your first “Hello World” HTML5 page.  Of course, we now want to start writing some code so that we can understand how all the pieces are put together.

6.  Let’s add a title to our page by typing in “Our First HTML5 Page” into the index.html file in between the <title> tags as shown…

Add Page Title

This is known as the “Page Title”.  After saving the file and refreshing the browser, you should see that our page title shows up in the browser tab.

Page Title Shown in Tab

7.  HTML5 Boilerplate intends for you to delete things from it that you do not need.  One of the things that it puts in near the bottom of the HTML file is a code snippet intended for Google Analytics.  Since we will not be using that in this example, we will delete it.  If you don’t know what Google Analytics is, then you don’t need it.

Delete the code as that is marked as shown…

Delete Google Analytics Code

If you save file and view in browser, you will see that the deletion had no effect.

8.  Let’s make the background color be a pale gray.   Styling information is done in CSS.  And if you are using HTML5, you would be using CSS3 (as opposed to CSS2).   The CSS code is found in the main.css file within the css folder.  You can see that our index.html file links to this css file via the link tag shown below …

HTML links to CSS file

8.  Now open up the main.css file in your editor and look for the section that says “Author’s custom styles” — that’s for us.

Add first CSS rule

9.  We write our first CSS rule into that section.   The code shown above highlighted by the red rectangle is the code that we just added.  This tells the browser to set the background color of our page to be light gray (which is the hexidecimal color #CCCCCC).  Save changes in the CSS file and refresh browser.   Our page now has gray background.

Gray background

10.  Now you may have noticed that the index.html page also links to another css file called normalize.css.

Normalize css

11. You don’t have to worry about that css file.  Not all browsers may use the same default styling for a HTML page.  Hence, one technique is to use CSS to make the styling consistent among browsers .   This is known “normalizing the styles” and the code for doing that is known as “css reset code”.  That is what is contained within normalize.css.

12.  Also within normalize.css, you will see this code …

Set block display for new tags

This is to allow older non-HTML5 browser to work well with the new HTML5 tags (some of which are article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary).

The CSS contain styling to make these new tags display as “block style” tags.   Shown above is the “display” property with the “block” value for these new tags.  Don’t worry about what that means for now since this is your first  HTML5 page.  We have to take things one step at a time.  Just know that the above CSS code is needed to make older browser work with the new HTML5 tags.

13.  Next, let’s give some definition to our content area containing the text by adding some borders and a different content background color to set it apart from the background color.  In the index.html file, we will add an “article” tag (one of the new HTML5 tags) around the text content as shown…

Article tags

Note that the starting tag (the first tag) is <article>

And the closing tag is </article> with the extra slash at the end.  That is how most tags work.  They come in pairs with a starting tag and a closing tag.  Save changes and refresh browser.

14.  You will see no effect until we add styling rule for the article tag.  Let’s add the article CSS rule to the main.css file…

CSS Page definition

We set the width of our page to be 500 pixels with the line …

width: 500px;

The margin property has two values …

margin: 20px auto

The first value 20px represents the top and bottom margins of our page.  The second value represents the left and right margins of our page.  Since we set that to “auto”, it has the effect of making the page be centered horizontally across the browser.

Saving the file and running in browser, we get  …

First HTML5 page centered

15.  In CSS3, we can have rounded corners and drop shadows like …

Corners and Drop Shadows

by adding the following two lines to our article CSS rule as shown below …

CSS rule for corners and drop shadows

For the border-radius property, we set the roundness to 8 pixels (the greater the value, the more rounded).

The first two values of the box-shadow property represents the horizontal and vertical offset respectively.  The third value is the amount of blur.  And the fourth value is the color of the shadow.

16. One last thing before we are done, the text content is too close to the left edge of the page.  Add a bit of padding around the article element by ….

Pad article

and we should get …

After padding

Since  we had only specified one value for the padding property, it will use the 30 pixels as padding for the top, right, bottom, and left edges.

In this case, since all the properties of the article CSS rule is unique, it does not matter which order you place the properties in.  We just like putting the padding property where it was.

And that is your first HTML 5 page.