HTML Syntax

HTML is a relatively simple programming language that allows users to communicate their Web designs to internet browsers.

Just like spoken languages it has rules about grammar and syntax, however, unlike spoken languages there is no room for error. Computers are notoriously intolerant of poor grammar and syntax. They are also completely unable to divine what your real intentions are from a badly written piece of code.

So, code carefully and clearly so that you can easily track down errors should any arise.

Formatting and Style Tags

When using basic HTML coding you will use two separate types of tags: formatting and style also known as block-level and in-line respectively.

Block-level Elements

The content of your Web site will be entered between pairs of block level tags. Their purpose it to give a page structure.

To make your code clear: all starting block-level tags should be placed on a new line.

In-line Elements

Generally in-line elements do not begin a new line; they occur between block-level elements.

Inline elements are like the garnish on top of your information. They allow you to style, colour and resize your information. Images, movies and sound files are also examples of inline elements.

Inline styles should be used sparingly: the more you use them the less impact they will have.

Valid XHTML 1.0 Transitional

Initial Page Set-up

HTML files are a combination of plain text (regular words and phrases) and paired "tags". Tags allow you to add style and structure to your plain text by telling browsers how to display it.

Almost all tags you use will be inserted in pairs; one to begin the formatting and one to end the formatting. In this way html operates like a word processing program i.e. you have to tell your program when to start and when to stop applying a style.

  1. At the top of the document place this command:

    <html>

    This tag tells the browser that the following characters are going to be in the computer language "html".

  2. Underneath this "tag" place its pair so your code will look like this:

    <html>
    </html>

    The closing or ending tag always has a / in front of it. This signifies that the tag is closed.

  3. Between these two "tags" place another pair of tags:

    <html>
    <head>
    </head>

    </html>

    The head tags assign an area in your .html document where you can place information that affects the page but will not be displayed as such. The exception to this is the <title> tag.

  4. Between the head tags open a <title> tag, enter the title of your Web page then close the tag:

    <html>
    <head>
    <title>Your Page name here</title>
    </head>
    </html>

  5. Below the closing head tag place another pair of tags the <body> and </body> tags:

    <html>
    <head>
    <title>Bob's World of Trees</title>
    </head>
    <body>
    </body>

    </html>

    That is the final set of paired tags for initial page set-up. Between these two tags is where the information that will be displayed on the page goes.

    Notice that all tags start on a new line. The computer doesn't care about this at all but it makes things a lot easier for a human when you make additions or changes to your page. Careful, clear page layout also helps when it comes to finding and fixing errors (debugging).

  6. Save the document now!!!
  7. Start your browser, click: File→ Open→ Browse now choose your index.html from your hard disk, server or floppy disk.

    If everything is correct you should see… nothing. That's right you just made a blank page but if you look at the very top of the screen on the left hand side you should see your page's title.

    Screen capture showing page title.Your title will show in the top left-hand corner of the browser.

Next section: Adding Page Content →