HTML H T M L   G u i d e
The Ultimate Reference Guide to Hypertext Markup Language
The HTML Writers Guild and the World Wide Web Consortium

1. Getting Started 2. HTML Tags 3. Minimal HTML Document 4. Page Options 5. Character Formatting
6. Lists 7. Hyperlink to URL 8. Including Images 9. Images, Sound & Animation 10. Client-Side Image Maps
11. Meta Tags 12. Tables 13. Forms 14. Frames 15. NOSCRIPT


Getting started with HTML documents
HTML documents are plain-text files that are created using a text editor; word processing software (e.g., Microsoft Word) can be used if the document is saved as "text only with line breaks".

This guide assumes that you:

  1. Have a general understanding of how Web servers and browsers work
  2. Have access to a Web server (unless the documents are produced for personal use on a local system)
  3. Have read my 'About' page, specifically the 'Compatible' section (it briefly explains the background of HTML).

Helpful Terms
World Wide Web, or W3 (according to the World Wide Web Consortium)
HTML: Hyper Text Mark-up Language
ASCII: American Standard Code for Information Interchange
Hypertext (hyperlink, link): Text or image within HTML linking to another document
Text Editor: SimpleText on a Macintosh operating system, Notepad on Microsoft Windows
Image Map: One image with hyperlinked quadrants (hot spots)
Element: Fundamental component of the structure of a text document
Tags: Used to denote various elements in the HTML document
URL: Uniform Resource Locator; the address to any Internet site that is part of the WWW (such as
Attribute: Additional information included inside the start tag

Back To Top


HTML tags consist of a left angle bracket (<), a tag name, followed by a right angle bracket (>); tags are usually paired to start and end the tag instructions; the end tag is identical to the start tag with a slash (/) preceding the text within the brackets; some elements may include additional instructions, called attributes, in the start tag to specify the position of the content.

Basic HTML Tags
This element tells the browser that the file contains HTML-coded information, also indicated by the .html or .htm file extension.

The head element identifies the first part of your HTML-coded document that contains the title.

The title element contains your document title and identifies the content in a global context; the title is not displayed within the text of the browser; but at the top of the browser window.
Note: The title is what is displayed on someone's bookmark list, so make your title description relatively short.

The body contains the content of your document that is to be displayed in the text of your browser.

Headings <H1></H1> through <H6></H6>
HTML has six levels of heading, from 1 to 6, with 1 being the most prominent level.
Note: The tags explained below are used within the body of your document.

Paragraphs <P>
Unlike documents in word processors, carriage returns in HTML documents are not important; word wrapping can occur at any point in your source file and multiple spaces are reduced to a single space by your browser; generally, word wrapping will occur after 72 characters.
Note: Paragraphs must be indicated with the <P> tag; a browser ignores any indentations or blank lines in the source text; without the <P> tag, the document becomes one large paragraph. Including an end tag </P> is optional.

Code Example and Browser Output

Preformatted Text <PRE></PRE>
This tag makes spaces, line breaks and tabs appear in the same location as the source file; this is useful for displaying program listings.
Note: The <PRE> tag can be used with the WIDTH attributel this specifies the maximum number of characters for a line.

Extended Quotations
Use the <BLOCKQUOTE></BLOCKQUOTE> tags to include long quotations in a separate block in your browser.

Horizontal Rules <HR>
This tag produces a horizontal line the width of the browser window, useful for separating sections of your document; the SIZE attribute specifies the line thickness in pixels; the WIDTH attribute specifies the line width as a percentage of screen width.
Note: There is also a COLOR attribute for horizontal rules, so that such a line can be a specified color of your choice. Also, no end tag is used with the <HR> tag.

Forced Line Breaks / Postal Addresses
Using the <P> tag for displaying short lines of text results in additional space between lines; using the <BR> tag causes a line break with no extra space; this is useful for displaying postal addresses.
Note: No end tag is used with the <BR> tag.

Code Example      Browser Output

Back To Top


Every HTML document should contain the basic HTML tags; the head contains the title and the body contains the text that is made up of paragraphs, lists, images and other elements; not every browser supports all tags; however, the brower ignores the tag if it is not supported.

Note: HTML is not case sensitive. <body> is equal to <BODY> or <BoDy> and it is industry standard practice to code HTML in either all caps or all in lower-case (personally I prefer all caps) so as to distinguish code elements from regular text embedded between it...also, (to make it easier on the eyes for not only yourself but possibly other programmers), you should place each tag on a separate line: This makes it easier to read but makes no difference to the browser (meaning while I do NOT recommend it, you could put all code and text in one big cluster or chain/string which makes editing painful on the eyes).

Required elements shown in this bare-bones example:

Code Example and Browser Output

Back To Top


Page options are included as attributes of the <BODY> tag.

Background image
The BACKGROUND attribute allows an image to be used as a background for your document.
Example: To include an image of stone for the background, enter:
<BODY BACKGROUND="stone.gif">

Note: Using a background image instead of a background color warrants a discussion on industry standard practice (albeit Mac or Windows OS), as some people are color blind or have difficulty distinguishing between particular colors. For that reason, most programmers are taught early on that the idea is to design so that as many users and visitors as possible use and visit your pages and programs, therefore, notice some of the most heavily visited sites on the Web: Google, Yahoo!, Facebook, Microsoft,,, and the list goes on...notice that they all use a white background color (not on image), and mostly stick to using black text (like pages in an actual book), with very few images (and those images are mostly inanimate), virtually no embedded background sound, and possibly a medium blue or medium red colored text for links (which are also in bold type and mostly likely underlined). This might be boring, but you must consider which color text goes with certain backgrounds, so that the text is not 'lost' in a way that cannot be seen. If you do decide to use a background image, I strongly suggest finding an appropriate (and by that I mean something that has to do with the theme, or subject content of your page) pattern, as all browsers tend to tile such images by repeating them left to right, top to bottom...if you want to display a picture, then embed it into the page, not on the page as wallpaper! Also, I find that humans were not meant to sit and stare at screens for most of their days, so a white background is too much on my eyes (after long periods), so you might consider a light to medium grey background color, or a teal background color...but then you must consider which colors of text can be seen against such backgrounds, such as yellow or gold. Personally, I have always been a huge fan of using black as a background color as it not only reduces glare, but is much easier on the eyes for extended periods and is much better for the user's screen as black is the color of the screen when the computer is turned off. In addition, I find that most colors (except for black text, obviously) stand out much better against a black background.

Background, Text & Hyperlink Colors
By default, browsers display text in black and hyperlinks in blue with a gray or white background; HTML allows you to change these elements.
BGCOLOR = Background
TEXT = Text displayed in the browser
LINK = Hyperlink, ALINK = Active Hyperlink, VLINK = Visited Hyperlink

Note: There are three different possible colors for hyperlinks: If a link (a.k.a. 'anchor') has not been visited yet by the user, then you set its color with the LINK attribute. If the user's mouse is hovering over a link (or in some cases, using the Tab keys to send the focus to the next hyperlink on the Web page), then it is considered an 'active link' (ALINK), therefore you could assign it a different but similar color to sort of 'highlight' (e.g., the hyperlink will return to its normal link color as per the LINK attribute once the user moves their mouse away from it or presses their Tab an example would be a hyperlink of text that reads, 'Click here for the next page' with a LINK color of purple and an active link color of magenta; likewise you could alternate between a red LINK and a pink ALINK, or even between BLUE and LIGHTBLUE, etc.). If the page that the link anchors to has already been visited (even if the user did not get there by clicking this hyperlink), then it is considered a 'visited link' and should therefore have an appropriate color...I suggest something darker than the colors for LINK and ALINK (perhaps three shades of blue between LINK, ALINK, and VLINK if those colors fit your theme...)

Example: For a black background, silver text, and white hyperlinks:
<BODY BGCOLOR="#000000" TEXT="#9690CC" LINK="#FFFFFF">

Note: The six digit number and letter combinations represent the amount of RGB (red, green, blue) color as hexadecimal values from 00 to FF; 000000 is black, FFFFFF is white; finding a specific color using these number and letter combinations can be cryptic...that is why I recommend looking up 'HTML hexadecimal color codes' in Yahoo! or Google, bookmark the page, or, you can type the name of a color between the quoation marks, such as "BLUE" or any other color name.

Back To Top


Physical Type Styles
<B>bold text</B>
<I>italic text</I>
<TT>fixed width font</TT>
<U>underline text</U>
The <FONT></FONT> tags are used with the FACE, SIZE, and COLOR attributes to determine the face (such as "arial"), the size (in points, PT), and color of text to be displayed in the browser.

Character Entities
Escape Sequences: used in escaping special characters and displaying other characters not available in the plain ASCII character set.
Three ASCII characters, (<), (>), and (&) have special meaning in HTML and cannot be used "as it" in text...even now, this text that you are reading is in an HTML document, so in order to view these 'special' characters, I have to type in special codes in order to make them appear for you but at the same time, make sure that your browser does not process it as HTML code.

An escape sequence must be used instead (and again, I suggest searching 'HTML character codes' in Google or Yahoo! and bookmark the page for future reference):
&lt; the escape sequence for < (which can also be done by typing &#60;)
&gt; the escape sequence for > (which can also be done by typing &#60;)
&amp; the escape sequence for &
&ouml; the escape sequence for ö
&ntilde; the escape sequence for ñ
&Egrave; the escape sequence for È

Code Example      Browser Output

Comments in Code
Most programming languages allow you to add remarks or comments, which is only visible to other programmers by viewing the source code. In fact, it is industry standard practice to at least (for proprietary reasons) insert comments that detail who wrote this and for what purpose or company/organization's behalf, as well as where and when this page was created and last modified.

To view the source code for any Web page, then go to File...View Source. If this is not currently visible in the browser, then right-click on the page and from the context menu, choose View Page Source. In a separate window will appear the code that makes up that Web page! Use this to your advantage: Equipped with the knowledge provided in this guide and the source code from any other page, you can easily determine where certain image and media files are located, or you can copy the code and paste it into a text editor for your own use! As per the founders of Microsoft and Apple, 'Good artists copy, great artists steal!' Why re-invent the wheel? Skilled programming is all about efficient use of time and eliminating redundancy--hence, copy and paste!

You can begin inserting comment tags anywhere between the opening <HTML> and closing </HTML> tags. Why? Not so much for other programmers' benefit, but for your own future understanding: Imagine spending a lot of time and energy creating a Web page, and several months later you are staring at its code wondering what particular elements of it even mean! Thus, comments are necessary to explain...below is an example:
<!-- This page was created by Neil Dusseault of Neil's Site Networks in Boerne, Texas.
This is the HTML page of my JavaScript site created in April, 2012 and last edited on April 3, 2016. -->

Note: So, obviously comments can extend to more than just one line...and they begin with <!-- and close with --> and the browser ignores everything in between, so that the user does not see this.

Back To Top


HTML supports unnumbered, numbered and definition lists:
Unnumbered lists

  • Start with the opening list <UL> tag
  • Enter the <LI> (list item) tag followed by the item to be listed
  • End the completed list with the </UL> tag
  • The TYPE = "shape" attribute in the <UL> tag can be used to specify a SQUARE or CIRCLE shaped bullet; the default solid disk shape is displayed if no shape is specified.

Note: No closing tag </LI> is required.

Numbered Lists / Ordered Lists
These look identical to an unnumbered list with the exception of the <OL></OL> tags.
START is an attribute of the ordered list tag that specifies the start value, with the default being 1 you could instead start at 36 or 100 etc.
TYPE is another attribute of the ordered list tag that specifies what type of numbering system (nomenclature), with values consisting of the default 1 to A, a, I, or i.
Note: The list items are tagged using the <LI> tag.

Definition Lists <DL></DL>
A definition list consists of alternating definition terms <DT> and definitions <DD>
Note: The <DT> and <DD> tags can contain multiple paragraphs <P> lists or other definition information. These do not require an and tag.

Nested Lists
Lists can contain sub-lists called nested lists; you can also have several paragraphs, each containing a nested list, in a single list item; elaborate nested lists are difficult to follow and should be avoided.

Code Example      Browser Example

Back To Top


Hypertext links: the areas (graphics or words) in an HTML document that cause another document to be loaded when a user clicks them.

The ability to link text and images to another document is a major capability of HTML.

When an HTML editor specifies text as a hyperlink, the color of the text will be changed to a bright blue; bright blue is the default hypertext color; to change the default color this line must be added to the HTML document after <HEAD>
<BODY LINK="#0080FF">

Linking to a Web page
<A HREF="">Welcome to Neil's Site!</A>

Linking to a specific page on a Web site
<A HREF="">HTML Guide</A>

Links between specific sections of different documents
Bookmarks are used to set a link from document A (documentA.html) to a specific section in another document (documentB.html).

  1. Insert the HTML for the link to the specified anchor in document A:
    <A HREF=""> link within document A</a>
  2. Insert the HTML for the specified anchor in document B:
    <A NAME="Compatible">Anchor text within document B</a>

Links between specific sections within the current document
This technique is the same as above with the exclusion of the filename:
<A HREF="#Compatible">link within current document</a>
<A NAME="Compatible">Anchor text for current document</a>
Note: Be sure to insert the <A NAME="anchor">anchor text</A> tag in the HTML document where the link is placed.

Links to Email
By including the Mailto attribute in a hyperlink you can make it easy for viewers to send Email to a specific person.
To include a Mailto enter:

<A HREF="">Neil Dusseault</A>

The following example shows how you can use the Mailto tag to not only anchor to an Email address, but also to include a carbon copy (cc) and even a pre-formatted subject as well as some automatic content to be included in the body of the Email (in case visitors just want to click and not type anything in order to respond).

To add a carbon copy, just add ?cc= after the Email address in the anchor followed by the Email address of the recipient of the carbon copy.

To add a pre-formatted subject, just add to the string already in place by typing &subject=

For each word in the subject, you continue by adding the first word followed by %20 (although you do not add %20 after the last word).

For some automated text to appear in the body of the Email, simply continue the string of text by adding &body= (and for each word after the first word, type %20 before it); and do not forget to end this string of text that is still an anchor by typing " at the end!

<A HREF="">Neil Dusseault</A>

Note: Most people today use webmail-based Email accounts, meaning they connect to a website and log-in to access Email (unless they are at work and/or they use actual Email clients such as Microsoft Outlook, which usually comes bundled with Microsoft Office and therefore is not free but the software is stored on your computer). This means that using the Mailto tag forces the user to click on the anchor which does not link to a website but instead opens the default Email server on the user's computer (which again, if you are a Windows user, would most likely be Microsoft Outlook), and this is probably not the preferred method of choice by the user. So as opposed to tying your name between the anchor tag and its end tag (or something like 'Click here to Email me'), you should instead type your actual Email address, so the visitor can at least copy & paste that text into their Email...more on formatting the subject and body contents when I discuss forms further on this page. In the meantime, I suggest having a hyperlink to each of the major webmail-based Email client/servers, such as Yahoo! Hotmail, and Google (gmail). This way, the user can log-in...

Links to Images
To let the user choose which images to load, rather than waiting for many full size images to load, small representations of images called 'thumbnails' are linked to the full size original.
Example source code:

<A HREF="path to original image">
<IMG SRC="path to thumbnail image">

<A HREF="">
<IMG SRC="">

Back To Top


Including Images <IMG SRC>
Most Web browsers can display images in the GIF (Graphical Interchange Format, example: image.gif) and JPEG (Joint Photographers Expert Group, example: image.jpg)
To include an image, enter:
< IMG SRC="imagename.extension">
Example: To include a company logo image, enter:
<IMG SRC="">
Note: There is no end tag for the IMG tag.

Size Attributes
To allow the browser to allocate the appropriate space for the image as it downloads the file, two other attributes in <IMG> tags should be included: WIDTH and HEIGHT
Example: To include a company logo image along with the image's dimensions, enter:

<IMG SRC="logo.jpg" WIDTH="115" HEIGHT="120">

Note: Image size can be found in a number of ways. First of all, it is always expressed as WIDTH x HEIGHT in terms of pixels. For example, find an image located on your computer and click it just once and allow the mouse pointer to hover over it...a caption should appear that tells you what type of image it is (e.g., JPEG, GIF, etc.), its dimensions (e.g., 115 x 120), and the size of the file (e.g., 25KB). Of course, Windows users can also see this information from the status bar when in Windows Explorer. Another way to determine the dimensions is to open an image software program (all versions of Windows include Paint, found by clicking Start...All Programs...Accessories) or Adobe Photoshop (this is not free). Such programs not only show basic info about the image (such as in the status bar in Paint), but allow you to resize the image for thumbnail purposes, or even to rotate it, flip it vertically/horizontally, stretch/shrink the image, add text to images, change their file type (e.g., formatting from .gif to .jpg). This is important because while all of the 5 major browsers support various image types, earlier versions of these same browsers (if viewed on an older computer, for example) do not support various file types. Therefore, I almost only ever use .gif or .jpg and not as much .bmp (Bitmap), .ico (Icon), and even more recent, .png (which is supposed to allow 'transparency' of background as well as adjust to any stretching/shrinking of dimensions so that the pixels do not display a distorted image), as compatibility between Mac and Windows users of various browsers (especially on use of mobile devices and older systems) seems to be an issue...Also, viewing an image directly on the Web (by typing in the location of it in the address bar) usually will tell you its dimensions in the title bar of the browser. Of course, you can right-click and from the context menu, choose 'Save Image As...' (or Copy) to obtain images on the Web for your personal use. But beware of copyrighted material! (Either the image will be protected so that right-clicking will be disabled in some way or there will be copyright info on that page). Obviously, you will need to know the full path (location) of an image before you use the IMG tag.

Alternate Text for Images
Because some browsers cannot display certain image types (or if you accidentally typed in the wrong URL of the image in the IMG tag), and some viewers choose to turn off image loading, HTML provides a means to inform readers of what graphic files are missing on the page; the ALT attribute allows specifying text that is to be displayed instead of the image; Microsoft's Internet Explorer browser displays ALT values as floating captions. Therefore, I do not recommend ever using the IMG tag without using the ALT attribute, so that the user can at least know what the image was about (in case the image does not load the value for the ALT attribute will instead be placed there as text).
Example: To include a company logo image along with the image's dimensions and alternate text, enter:

<IMG SRC="logo.gif" WIDTH="115" HEIGHT="120" ALT="Company Logo Image">

Aligning Images with Text

Neil Dusseault Default, the bottom of the image is aligned with the text

Neil Dusseault This text is centered on the image: <IMG SRC="" ALIGN=CENTER>

Neil Dusseault This text is aligned with the top of the image: <IMG SRC="logo.gif" ALIGN=TOP>

Note: Another attribute of the IMG tag is BORDER: In some cases, browsers will automatically place a thin border (like a frame) around your image. This may be especially undesirable for logos that are not square or rectangular in shape, or the default border color clashes with those of the image. Therefore, you can specifiy the thickness of the border, in pixels:
<IMG SRC="logo.gif" BORDER=0>
Also, notice how I coded the values for the BORDER attribute (as well as for the ALIGN attribute above): I did NOT use quotations around the values! Most browsers will accept this for the value of any attribute used in any tag, but it is not proper HTML and may not be supported in the future. Thus, I recommend using quotation marks. Just as HTML code is not case-sensitive, use of all attributes is not necessary, nor is the order in which you enter them. In addition, notice the value I entered for the SRC attribute in the IMG tag above: It is not a full address! This will only ever work if the Web page is located in the same directory or sub-directory as the source of the file; therefore it is only useful to shorten the code in such cases only. I do NOT recommend it!

Images without Text
To display an image with no associated text, make it a separate paragraph <P> and add the ALIGN attribute to position the image (LEFT, RIGHT, or CENTER).
<IMG SRC="logo.gif">

Back To Top


 Castro, E. (2000). HTML 4 for the world wide web (4th ed.). Berkeley, CA: Peachpit Press.