HTML5 Code Tutorial

Introduction to HTML

HTML is the foundation of web page design. Not Java. Not Script. Not XHTML.

If you want to learn these other more advanced features of web page design, do yourself a favor and get grounded in the basics of HTML first.

Why Learn HTML

Creating websites with HTML code gives you complete control over the appearance and functionality of your web site.

If you don't want to be a web designer, you will still need at least a basic knowledge of coding.

Even if you decide to use a tool that doesn't require you to learn to code, a basic knowledge of HTML will help when problems arise.

If you want to build your website with a template that someone else has designed, you will also need some knowledge of HTML to turn it into a website.

HTML5 Introduction

The focus of HTML5 seems to be on improving content structure on a web page for people authoring documents that require heavy editing features.

For most of us structuring the content of web pages using the h1-h6 heading elements will remain the same.

What's New?

We will list some of the new tags below and designate a web page for those that need further discussion.

The following elements have been introduced to produce a better structure of the content of a web page and are for authors that need heavier editing features:

<section></section> represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.
See: Section Element

<article></article> represents an independent piece of content of a document, such as a blog entry or newspaper article.
See: Article Element

<aside></aside> represents a piece of content that is only slightly related to the rest of the page.
See: Aside Element

<hgroup></hgroup> represents the header of a section.
See: HGroup Element

<header></header> represents a group of introductory or navigational aids.
See: Header Element

<footer></footer> represents a footer for a section and can contain information about the author, copyright information, etc.
See: Footer Element

<nav></nav> represents a section of the document intended for navigation.
See: Nav Element

Other New Elements

<video></video> and <audio></audio>
For multimedia content. Both provide an API so application authors can script their own user interface, but there is also a way to trigger a user interface provided by the user agent. source elements are used together with these elements if there are multiple streams available of different types.
See: Video Element

*Use of the new tags article, section, header, footer, hgroup, nav and aside is a matter of the taste or the need of the author.

For a complete list of New Elements visit W3.org

All of the new structure tags accept Global Attributes.

What's Gone or Changed?

We list just a few that might be helpful to designers of basic web pages.

New Meta for Character Set

<meta charset="utf-8">

Strong or Bold

The strong tag is used to emphasize the importance of text:
<strong></strong>

The Bold Tag is used to darken and thicken text simply to draw a reader's attention:
<b></b>

The Line Break Tag

All attributes of the line break tag have been deprecated.
See: See: Line Break Tag

Form Input

There is a new required attribute that can be added to your form input fields.
<input type="text" name="city" size="30" required="required">

Choose a Tool

To make the learning process a little easier, decide on the tool that you want to use and learn to use it before you start the actual construction of your site. I highly recommend the free html editor AlleyCode.

If you'd like a simple lesson in creating a basic web page with a text editor like NotePad or WordPad and then viewing it in a browser,Click Here

For managing large websites, I recommend NoteTab Standard by Fookes software.

Storage

Don't just dump your page files anywhere. Create a folder named htdocs and store each page that you create in that folder. Create another folder inside the htdocs folder and name it images. Store the pictures that you want to use on your web pages in the images folder.

Note: When using an images folder be sure to add the path information to your image code.
Example: <img src="images/imagename">

This Tutorial

This tutorial is in transition.

The website and tutorial are being converted to HTML5.

Test in Multiple Browsers

Test your code in at least two different browsers. Note the differences in appearance. There are still differences in the way Mozilla FireFox, Chrome, Opera, Safari and Internet Explorer handle the code.

Test Web Pages at Different Monitor Resolutions

People are viewing web pages these days with all kinds of devices. Some of these devices use monitor resolutions as low as 800x600 and as high as 1920x1200. If you build static web pages (pages with fixed width settings) your website is going to look and perform quite differently at each monitor resolution.

Online Website Builders

In the past we discouraged the use of online website builders. We found them hard to learn and editing an existing site was even harder.

We still try to discourage their use, but have realized that some people simply can't grasp the art of coding.

As with many aspects of internet technology the advancement of Active X controls and javascript have improved online web development tools so drastically that almost anyone can build and maintain a website using one.

If you decide to go the online website builder route we suggest that before you start adding content to your pages you come back and visit our Website Design Tutorial and learn a little about researching and planning your website.