Other Parts: Text elements,  Links & Lists,  Images,  Tables, Troubleshooting.

This is a Guide to the key HTML elements that make a Web Page easily readable by anyone on the Internet, regardless of his or her operating system - Windows, Linux, Mac or UNIX - independent of the Browser used - MS Internet Explorer, Netscape, Opera, Safari or whatever. An understanding of the tags and the appropriate modifying attributes will allow you to design your own page, or to edit and improve one developed by a special editor like Front Page.

What Is an HTML Document?

Almost every page you look at on the Internet is an HTML (HyperText Markup Language) document whose tags are interpreted by the Browser that you are using. Browsers, such as Netscape, MS Internet Explorer, Opera, Mozilla, Safari etc, do not interpret HTML tags exactly the same way, so the appearance of the document on you screen will depend somewhat upon the Browser that you use.
HTML documents are plain-text (also known as ASCII) files that can be created using any text editor (SimpleText on a Macintosh; Notepad in Windows; UltraEdit in DOS, Mac, Linux or Windows). You can also use a word processor such as Word or WordPerfect but you must remember to save your document as "text only with line breaks".

You can also create Web pages using WYSIWYG ("what you see is what you get") editors such as Claris Home Page or Adobe PageMill, both for Windows and Macintosh), or FrontPage created by Microsoft, which allow you to design your HTML document visually, as if you were using a word processor, instead of writing the markup tags in a plain-text file and imagining what the resulting page will look like. However most of them produce unwieldy documents that do not always look like what you want, and often use tag coding that is not read correctly by all Browsers. It is desirable for you to understand basic HTML Markup code so that you can clean them up before uploading to a server for others to read on the Internet.

The International Standards Organization (ISO) and the W3C Organization have established standards for writing and interpreting HTML. All tags described in this Guide comply with HTML standard version 4.01 and also the more stringent XHTML standard version 1.0. They will be read correctly by Netscape version 2 or newer, Internet Explorer version 3 or newer, and any version of Mozilla, Opera or Safari.

In order for you to understand the references better, start a text editor in a separate window and type all the examples. Save as a file with the name "test.html" in your folder "My Documents". At any time you can see how your Browser interprets this file - While your Browser is open on your screen, click on "File", then "Open" (or type Ctrl O), then click "Browse" and open "test.html" in your "My Document" folder. As you keep adding new text in your "test.html" file, click on the "Refresh" icon of your Browser, you will instantly see the latest additions on your screen.

Cascading Style sheets
A Quick Guide to help you design quickly and effectively the preferred way.

W3C Standards Document
This is pretty heavy reading! The link is provided just for your information.

For the "test.html", for easy use and editing you need a Text editor with HTML tags color-coded. Try UltraEdit which is worth every penny of the very reasonable price, it includes a checker which will find your errors! You can download and try it out free for 30 days.

Tags Explained

Any text document on the Web consists of elements. Some examples of elements are heads, tables, paragraphs, and lists.
To denote the various elements in an HTML document, you use tags. HTML tags consist of a left angle bracket (<), a tag name, and a right angle bracket (>). Tags are usually paired (e.g., <h1> and </h1>) to start and end the tag instruction. The end tag looks just like the start tag except a slash (/) precedes the text within the brackets. The most important HTML tags are listed in the left column.

Some elements may include an attribute, which is additional information that is included inside the tag. For example, you can specify the alignment of paragraphs (left, center or right) by including the appropriate attribute within the paragraph tag. In this guide we will only include the most common attributes.

NOTE:Many Tutorials tell you that HTML is not case sensitive, in fact they will show all tags as upper case. However the stricter XHTML specifications are case sensitive and require that ALL tags and attributes, be written in lower case.
<title> is not the same as <TITLE> or <TiTlE>.
Values of attributes should always be enclosed in quotation marks " " in spite of advice to the contrary in some tutorials.
The trend is towards the stricter interpretation, therefore it is good practise to always follow this rule and in this Reference Guide we will do so.

Not all tags are supported by all World Wide Web browsers. In this Guide we will include only those tags and attributes that are universally supported.

The Minimal HTML Document

Every HTML document must contain certain standard HTML elements and tags. Each document consists of head and body elements. The head contains the title, and the body contains the actual text that you will see in the Browser. It is made up of paragraphs, lists, and other elements. Browsers expect specific information because they are programmed according to HTML and SGML specifications.

The Required elements are shown in this sample bare-bones document:

<html>
<head>
  <title>A Simple HTML Example</title>
</head>
<body>
  <h2>HTML is Easy To Learn</h2>
  <p>Welcome to the world of the 
  World Wide Web.
  This is the first paragraph. 
  While short it is still a paragraph!
  </p>

  <p>And this is the second paragraph.
  </p>
</body>
</html>

NOTE: as you follow this Guide and type the examples, please make sure that you keep in between the body tags <body> and </body>.

This is how this code is interpreted by your Browser:

HTML is Easy To Learn

Welcome to the world of the World Wide Web. This is the first paragraph. While short it is still a paragraph!

And this is the second paragraph.

Note: The contents of the "head" section are not visible. The "head" contains information that is only used by the Browser itself.

Return to Top of page,        or to Web Design Table of Contents.

Return to Home Page.
Copyright © 2002 B. C. Biega. All rights reserved.

Original Nov 2003, Last update Feb. 28, 2012