The Basics!

You have to start somewhere.

Introduction

This section introduces HTML and describes what it is and why it is created the way it is. When we understand what HTML is aiming to achieve, certain aspects of it, which we will learn about in coming sections will make more sense.

What is HTML

HTML stands for Hyper Text Markup Language. It is a language for describing information or content.

Think about your typical page. It consists of various components. We may have headings, paragraphs, lists etc. HTML is a series of tags which we use on the content to identify to the browser (it's rendering engine to be more specific) if it is a heading, or list, or paragraph etc.

About these Tags

The syntax of HTML is reasonably easy, it all revolves around tags. A tag is used to identify information and follows the following format:

<tagName>

So what we have is a tag name, enclosed within a less than ( < ) and greater than ( > ) symbols. The tag name is case insensitive. You may write it in all uppercase, lowercase or a mixture. Whichever style you choose, however, you should be consistent.

In the next section we'll look at the basic template for a HTML document and you'll see just how these tags are implemented.

Attributes

We may also include attributes within the tag if we need to include more information. We do this by way of attributes.

<tagName attribute="value" >

Some points to note:

  • A tag may contain several attributes.
  • You may have spaces on either side of the equals sign ( = ) but it is generally preferred to not do so. As a space is the separator between individual attributes and the tag name and the first attribute it is easier to read without spaces around the =.
  • If the value doesn't contain any spaces then it is possible to leave out the quotes surrounding it. If it does contain spaces then the quotes are necessary. In general most people prefer to always use quotes for consistency.
  • The quotes may be single ( ' ) or double ( " ) but again whichever you use, make sure you are consistent.

Containers

A lot of the tags that you use are what is called a container. They identify a piece of content as being of a certain type by surrounding it. We do this by way of an opening tag at the beginning of the content and a closing tag at the end of the content. The closing tag is identified by placing a slash ( / ) in front of the tag name like so:

<tagName>Some content</tagName>

The Official Specification

The success of the world wide web is partly due to the fact that everyone speaks the same language (HTML + CSS + Javascript). For this to work effectively we need a common standard which everyone may work from.

The organisation which manages these standards is called the World Wide Web Consortium ( W3C ). On their website you may access the official standards for Web Based technologies as well as get information on updates to the standards.

Here is the official standard for HTML 4.01

Here is the official standard for HTML 5 (Note: Currently a work in progress)

The official specifications are quite detailed and can be quite daunting to read. As you dive further into web development you may find yourself referring to this document from time to time but by then you're knowledge and understanding of HTML will have improved so it won't seem as daunting. You don't necessarily need to know all of it to be a competent web developer either so in the rest of this tutorial we'll focus on getting a solid understanding of the important stuff. Then you can easily branch out into the rest as needed.

You may be curious as to how HTML 5 can still be in draft form when it is already being used by many websites and is one of the hot topics in web development at the moment? Standards need to be quite solid before they are officially released. As these web technologies get bigger they take longer to make sure everything is correct and that new features are implemented in a way that is going to work properly and not interfere adversely with other features and that the documentation is concise and unambiguous. There is fierce competition between browser vendors at the moment so they are always keen to make sure they have the latest technologies. Many of them are implementing HTML5 technologies now, in preparation for when it is officially released. Website developers, who are always keen to make their websites stand out from the crowd have also been keen to implement these new technologies (even though they are not officially standard yet). The HTML5 specification is getting stable now as it gets closer to being finished so this hasn't caused too much trouble in general but it is something you shoudl be aware of if you start using some of the fancy new stuff HTML5 introduces.

Separation of Purpose

You'll notice that we said HTML identifies components of information. What it doesn't do is say anything about how it should look. Cascading Style Sheets (CSS) serves the purpose of adding visual style to those components. We can then use another technology, Javascript, to add interactivity.

What we have here is a separation of purpose.

  • HTML is purely for identifying what information is.
  • CSS is purely for giving visual style to the elements defined by the HTML.
  • Javascript allows us to add interactivity to the elements defined by the HTML.

Separating tools into specific defined purposes is a common approach in computing. It allows for manageability and flexibility, especially as our projects get larger. When designing web pages it is particularly powerful. You'll fully appreciate this when we start playing with CSS in later tutorials so for now you'll just have to believe me.

Another benefit of this separation is that it makes the code cleaner and easier to read. Rather than having a document with all the different code for different aspects of it mixed in amongst each other and with the content, we instead have separate files, each dedicated to a specific purpose.

You should always strive to write your code as cleanly and elegantly as possible. The easier it is to read and understand the better.

This separation of purpose does mean that our pages are going to be a little bland and boring to begin with but if we learn to write elegant, clean, well structured HTML then we will have a solid foundation from which to build the fun stuff (CSS and Javascript). A lot of the time when people have problems with their CSS and Javascript it can be traced back to poorly written HTML. If you take the time to work through this tutorial you'll save yourself a lot of potential hassle later down the track.