Let me get something out in the open before we start. I'm probably not the best person to ask about GUI (graphical user interface) web page editing. If you are truly set against learning anything new, stop turn off your computer now and forget about doing anything you have not already done. Everything else in life requires some learning.

The question now becomes; If you have to learn something anyway, what is the best investment of your learning time and effort?

A little background.

I started creating web pages in 1994 and used to think HTML was something hard like learning a new programming language. So I spent a lot of time and effort seeking out GUI editing tools.

In those days Netscape was the top web browser and Netscape Gold included the first widely available graphical web page editor. It was nice for something quick and dirty. Fearing HTML, I used Netscape Gold to make my first web site. Then came Microsoft Frontpage. It was a little better because it could edit more than one page at a time and even put them on the web server after I was done editing.

It was not until I bought Allaire Homesite that I started to see just how trivial this whole HTML thing really is. By the way, Allaire was bought up by Macromedia which was in turn bought up by Adobe so the Homesite editing program is long gone.

As a side note, if you are interested in Netscape Gold, it is likely still available somewhere for download. An updated version is also available based on the Gecko (Mozilla) rendering engine. It is called SeaMonkey (http://www.seamonkey-project.org/) and is still packaged as a web browser with HTML editing ability.

Homesite taught me just how simple HTML could be and should be. It did this by allowing me to almost create what I wanted with the GUI editor. I was forced into direct HTML editing to get around the limits. This one thing was more than worth the price of admission many times over.

Here is what I learned for all my time and effort.

• HTML done right is nothing more than text with some tags for headings and paragraphs. It is small, fast and easy to read the source. Any text editor, like Notepad, is powerful enough to create and maintain this kind of HTML.
• HTML done wrong is extremely complicated and very difficult for a human to read. It is often needlessly bloated, slow and prone to errors. Virtually every GUI web page editor creates variations of this kind of HTML.
• All of the time I spent learning how to use different GUI web page editors was effectively wasted compared to the time it would have taken me to go straight into learning HTML. It is really simple.

Because of this, I suggest biting the proverbial bullet and jumping into HTML right now, today.

HTML from nothing

The most important thing to know about good HTML is that it starts with content and should always be focused on that content. If you don't have anything to put on your web page, take some time and write a paragraph or two about a topic that interests you. Write about something you know or want to know.

Go ahead. I'll wait here until you are done.

Now that you have some content, add a title and take a look at your content from the perspective of a news paper. Every news paper is filled with articles that are broken up into paragraphs. Each article has a heading and sometimes a sub-heading. Some even have bold or italics words inside the paragraphs.

This view of formatting content is the heart of HTML.

The HTML Source

Take a moment and peek at the source code for this page. Most web browsers show the source code for the web page when you press Ctrl-U. Keep that window open and switch back here to continue reading so we can do a little guided exploring.

Rule Number 1: Tags

The first thing you should notice is a lot of things between angle brackets (also known as less-than "<" and greater-than ">" signs). Anything between angle brackets is called a tag.

Rule Number 2: Open and Close

Scroll down the page source and take a closer look at the tags. Notice that most tags come in pairs. For example the paragrph open "<p>" tag appears at the start of every paragraph and has a matching close "</p>" tag at the end. While the concept of putting something at the start and end of text may seem different to English writers, Latin languages like Spanish have a very long history of using matching punctuation both at the beginning and ending of questions and exclaimations.

In the newer, stricter HTML every HTML tag must be opened and closed.

Rule Number 3: The Single Tag

HTML started out with the simple goal of formatting text. The header and paragraph model with text between tag pairs works very well until there is a need for content that is more than just text. What happens when you want to show a picture?

Showing a picture in HTML requires a tag that tells the web browser where to go get the picture file and maybe even some information like the size and name of that picture. Adding a picture to your web page is done with a single image tag for each picture you want to include.

Here is where we run into a common point of confusion even among experienced professionals. The image tag stands alone without a close tag. If rule number 2 is true, how can a single stand-alone tag both open and close?

The answer is to end the tag with a slash mark right before the ending angle bracket "/>" so the single tag serves both as the open and close version of itself. This is only important if you care about creating strictly standards complaint web pages. The older HTML standards simply allowed all of the stand-alone tags to open and never close. Most web browsers gracefully ignore this, but it technically is still a problem which means it is a bad habit to learn.

Rule Number 4: Formatting, color and style

The last of the major rules cuts to the heart of some very deeply held feelings showing the philosophical background of the web page designer. Should the formatting, color and style be included inside the HTML or outside in a separate file? Many old school web designers feel more comfortable mixing content and formatting in the same page. Unfortunately, these are also the people likely to have created graphical web page editors. Mixing content and formatting works when the job just needs to get done no matter the cost, but it adds overhead and makes more work for anyone performing maintenance on the content.

As a general rule, news paper content does not have a large number of fonts, does not have colored text on colored backgrounds and does not have a lot of text overlapping images. The very first web page was a lot like the black and white pages of a news paper.

This kind of web page is still the easiest to maintain and the most compatible with every web browser on every operating system platform for every user, but it looks plain and unattractive to anyone accustomed to slick magazines. In fact the whole question of formatting, color and style comes directly from the magazine way of thinking about content as something to format.

The original HTML specification was designed for packaging text in a way that could communicate the structure of the text (e.g. headings, paragraphs, etc.) along with the content. On purpose it was designed to allow the same content to look appropriately different on every display medium (screen, print, audio, etc.) based solely on the need of the recipient.

Things changed somewhere in the years since that first version of HTML was made public. Today many web page designers mistakenly want absolute control over the size, formatting, style and color of the whole web page no matter where or how it is shown. Some even go so far as to abandon HTML for other technologies, like Flash, with the ability to hard code the formatting even if it is not compatible with the display method on the receiving end.

Just imagine what life would be like reading a web page if you could not see clearly and the web designer explicitly forced the font to a very tiny size with a low contrast color? As the baby boomer generation grows older, this will be an important point to consider for all web pages.

Keeping the style separate from the content allows the designer or end user to change the style if needed without changing the content. This is a very good thing.

How to get started

Get comfortable using the Ctrl-U command to view the page source for every web page you like. Copy the parts you like and paste them into your own web page to see how they work. Don't worry if this looks ugly at first. The goal should be to learn how the different parts work and fit together.

1. Get the HTML Validator for Firefox and see what it finds in your page as you build it.
2. Online HTML Tag Reference is a very good place to start learning about different HTML tags, their parameters and how to use them.
3. Online CSS Reference is the most helpful when you start creating or editing the style of your web site.

Have some fun.

First published 2007-07-18. The last major review or update of this information was on 2010-10-21. Your feedback using the form below helps us correct errors and omissions on this page.