<<< Home << Web < HTML Notes Top Bottom < Prev Next >

Getting Started With HTML

Topics on this page:

  1. Tags, attributes and values
  2. Case sensitivity
  3. Use of quotes
  4. Coding style

Top Tags Case Quotes Style Bottom

Tags, Attributes and Values

Take a minute to learn the terms "tag", "attribute" and "value". If you use these incorrectly, people will assume you're a newbie and won't take you seriously.

Here's an example of a complete HTML statement: 

<hr size="5" noshade="noshade" width="50%" />

The first thing in the statement identifies the type of statement or tag. In this example, this is an <hr> tag, or simply an HR tag. Don't refer to a "SIZE" or "NOSHADE" tag - there's no such thing.

SIZE, NOSHADE and WIDTH are attributes. These are "keywords" that have special meaning within the tag.

The SIZE and WIDTH attributes have attribute values or simply values. The SIZE attribute has been given a value of 5, and the WIDTH attribute has been given a value of 50%.

For HTML, the NOSHADE attribute can be written simply as noshade. XHTML requires that it be written as noshade="noshade" because XHTML does not allow attributes without values.


Top Tags Case Quotes Style Bottom

Case Sensitivity

In general, HTML is not case-sensitive. Tags and attributes can be written in upper case (<BODY>) or lower case (<body>) or a combination (<BoDy>).

XHTML, on the other hand, is case-sensitive. Tags and attributes HAVE to be written in lower case. It's a good idea to use lower case in your HTML documents just to make future conversion to XHTML a bit easier.

HTML values are not case-sensitive. The major exception that pops to mind is a URL, as in: 

<a href="index.html">Home page</a>
<img src="abc.gif">

Unix servers use case-sensitive names. The file names in the HREF and SRC attributes must match the file name exactly.


Top Tags Case Quotes Style Bottom

Use of Quotes

In HTML, some values need to be enclosed in quotes. Others don't. The rules for this are defined in the HTML 4.0 standard. Browsers don't always enforce these rules today, but it is expected that future browsers will be less forgiving. So either use quotes all of the time, or learn the rules for when you need them and when you don't.

XHTML requires that ALL values be enclosed in quotes. It's a good idea to use quotes around all values in your HTML documents to make future conversion to XHTML a bit easier.

You always need quotes when a value contains one or more blanks. Blanks serve as separators between attributes, so omitting the quotes in this case will cause your code to be misinterpreted. Example: 

<font face=comic sans ms>

Without the quotes, this is interpreted as face=comic. "sans" and "ms" are treated as separate valueless attributes and ignored because the browser doesn't recognize them. Code this as face="comic sans ms".

For HTML, you do not need quotes if a value consists only of alphabetic characters, digits, periods and minus signs. Examples: 

name=abc
size=-1
width=100
src=abc.gif

You need quotes if the value contains any other characters. Examples: 

size="+2"
width="50%"
src="images/abc.gif"

Top Tags Case Quotes Style Bottom

Coding Style

As you learn HTML, you'll develop your own unique coding style. Try to develop a style that makes your code easy to read and that let's you find a particular section of code easily when you want to make changes. A browser doesn't care - you can string all of the code for a page on a single line with no extra whitespace at all and the browser will display the page just fine. But imagine how hard it will be to try to read and understand that code - or to make changes to it.

I find that code is a lot easier to work with if you use a lot of short lines of code rather than fewer long lines. If you're using an editor that supports word wrapping, turn that capability off so that you see the actual lines that you're creating. Start a new line for any "major" tag - how you define major is up to you. Leave a blank line between different sections of related code.

Since most tags have to be closed, an indenting scheme can help greatly in helping you make sure you've included your closing tags. Some people use the tab key for this - I find that the 8 characters per tab causes far too much indentation, and I use a 2-character indentation.

Here's an example of how I might code a simple page. You may find you prefer a little different scheme from this layout, and that's perfectly all right. Play with some different methods of indenting and breaking your lines, and use what you find most comfortable.

Don't worry if you don't recognize all of the tags I've used in this example. I'm simply demonstrating a method of formatting your HTML code. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
          "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
  <title>Always include a title!!!</title>
  <link rel="stylesheet" type="text/css" href="root.css">
</head>

<!-- Begin body -->
<body bgcolor="#ffffff">

<!-- Some headings -->
<center>
  <h1> Main Heading </h1>
  <h2> Subheading </h2>
</center>

<!-- A nested list -->
<ol>
  <li> Item number 1. </li>
  <li>
    Item number 2.
    <ul>
      <li> Inner list item 1. </li>
      <li> Inner list item 2. </li>
    </ul>
  </li>
  <li> Item number 3. </li>
</ol>

<!-- A quote -->
<p>
  Mark Twain once said:
</p>

<blockquote>
  Well, Huck, let's hightail it into town and have us a grand
  old time.
</blockquote>

<p>
  Well, maybe he didn't really say that. But he could have.
</p>

</body>
</html>

Top Tags Case Quotes Style Bottom

<<< Home << Web < HTML Notes Top Bottom < Prev Next >