Basics of HTML
Introduction
This is a practical guide to some advanced, but still not terribly 
complicated, HTML features. With these instructions, you can create Web pages with only a word processor (and occasionally some readily available free- or shareware). Of course, you can use an editor to actually write the HTML for you. But this guide is intended not only to make it possible for you to construct HTML documents (web pages) from scratch, should the need arise, but also to help you interpret HTML language both in your own and others' pages.
If you need to start at the very beginning, read the material under the "Very basic" tab.
This guide covers many topics in a somewhat superficial manner. For more details on the art and science of web page creation and development, please consult the links provided here. There are also links to specific articles, web portals, and other useful resources dealing with particular subjects, scattered throughout the guide .
Terms
There are some important terms—HTML "grammar," if you will—that are used in this guide:
- element
- attribute
- value
They refer to basic HTML tags and the supplemental commands added to them which instruct the browser to display content in certain ways. You'll need to know these terms to understand many of my explanations.
As an example, in the expression <body bgcolor="yellow"> the element is body, the attribute is bgcolor and its value is yellow. The allowable attributes, and the allowable values that may follow each element, can be found in lists of these elements, or in HTML specification lists. (The official listings are at W3Schools.)
Punctuation
Quotes were not always needed around the values for some attributes, and so web browsers will usually display your pages correctly without them. Current web standards, however, require quotes for all values (even numbers and percents), so it's best to enclose attributes within quotes in all cases, and I have tried to remember to do so in all of my examples.
Also, current standards require all tags to be closed (in the past some were exempt from this requirement). Closing simply means that you need to enclose content within tags whenever possible. For example, paragraphs follow this format: <p>paragraph</p>, headings this: <h1>heading</h1>, etc.
For tags that don't logically have an "end point," like images <img> and horizontal rules <hr>, you just add a backslash to the tag to close it off:
<img src="image.jpg" />
<hr />
Graphics Credits
The little icons on this page came from Realm Graphics, and I found the HTML code, and computer graphics from Clker.com, both nice free graphics sites.
Why learn HTML?
With HTML editors as cheaply and easily available as they are today, why learn HTML at all? I have some philosophical reasons for you, and some practical ones.
First, the philosophical. It's very satisfying, I think, to create something as professional-looking (even snazzy) as a web page from such simple stuff as the HTML coding tags. But beyond this, HTML editors are like language translation programs. If you were involved in delicate diplomatic negotiations, would you want to trust one of these programs to translate your words correctly? Your web page vision is no less deserving of clear expression.
Now, some practical reasons.
- You may need to make changes to your pages at a strange computer where your editor is not available
- You may need to alter the appearance of your page after your editor has done strange, unexplainable things to it
- You might want to copy an element from an existing web page; knowing HTML you can find that element among all the rest of the coding that doesn't interest you. (In Firefox and Chrome, you can just type <CTRL> U and see the code.)
- To edit pages remotely through your web hosting service, you may only have access to the "raw" HTML of the pages
- Even if you are not the person in your office or organization who is actually creating web pages, familiarity with HTML capabilities and quirks will help you to understand what is possible and what's not in the medium, and will help you to work more efficiently with your friendly local webmaster.
Then and now
Web standards have been and still are evolving. You are likely to run into older HTML when you start looking at the source code for web pages. In many cases, the non-standard language will still display the content properly. But sometimes it doesn't. Plus, it's just the right thing to do to comply with current standards.
I have tried to make all my web pages compliant with the current standards, and have tried even harder to be sure that I give you information in this guide that is in line with them. When an "old style" tag is in common use, I will note it for you, so that you'll know what it is when you see it in a page's HTML source.
It's a good idea to familiarize yourself with the standards and rules set out in tutorials and reference materials at W3Schools.
A Note on Styles
Throughout this guide, I'll show how to achieve various effects via inline styles. Although this is the easiest way to display these kinds of effects (such as colored text, background colors and images) and the easiest to explain, inline styles are the least effective way to use styles in web page design.
For general styles information, and how to construct style sheets to apply to an entire document or set of documents, see the Styles tabs above.
Last updated:
