PDQ Library:  Basic HTML Code & Tags

HTML is a special language for Web documents (pages) that Web browsers use to display the document with proper headings, paragraphs, links (references to other pages), images, etc.

A tag is a basic HTML element of a Web document or "page" (tag variables are shown in italics). A tag called HTML surrounds the whole document. This surrounds two sub-sections, HEAD and BODY, which are required. Within the HEAD section, TITLE is required. Below is the minimum framework required to create a Web page.

<HEAD> ...contents of head section...
<TITLE> The page title goes here.</TITLE>
<BODY> ...visible information (text, images)... </BODY>

Type this into a simple text editor like Notepad, save it with a name that ends with ".htm". Open it in a web browser - and you have your first web page!

This is what a search robot expects to see. A common HTML problem is duplication of the tags - particularly the <BODY> and <HTML> tags. Once the search robot sees a closing </BODY> tag or closing </HTML> tag, it thinks it has come to the end of the page and will look no further. Check the source code for pages or check for errors using an HTML validator. The most popular service is found at http://validator.w3.org/.

Document Type Declaration

A DTD (Document Type Declaration) should be the first line of a Web document. To use the W3C HTML 4.0 Recommendation, start your document with the correct DTD as the first line. If you have mixed HTML 4 with older HTML styles, use this DTD:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

HEAD Section:

  • <HEAD> ... </HEAD>  surrounds tags that define information for the rest of the document.
  • <TITLE> title text </TITLE>  (required tag) The title text is displayed in the browser top bar - the only part of the HEAD section that is normally visible.
  • <META NAME="Meta-type" CONTENT="description"> provides information for the web page. Some META tags like DESCRIPTION, KEYWORDS and NEW are used by search services.

BODY Section:

  • <BODY> ... </BODY> -  surrounds the following tags and text that are displayed by the Web browser.
  • <H1>Heading #1</H1>, <H2>Heading #2</H2> ... <H6>Heading #6</H6> 
    Heading tags H1-H6 are generally used for major divisions of the page. The largest is H1 and smallest is H6. This saves you specifying text sizes. Your page will be displayed correctly in most browsers if you use H1 as the highest level of heading, H2 as the next highest, and so forth in order. You should not skip heading levels. i.e. H3 should not appear after an H1.
  • <P> Paragraph of text </P> - Paragraph tag identifies a block of text, which is separated by white space from the preceding element.
  • <A HREF="url">hot link text<A> - Hot links define the location (url) of the page to go to when that link (link text) is selected. URLs may be relative filenames or full HTTP addresses (e.g. http://www.manotick.net).
  • <IMG SRC="filename" WIDTH=www HEIGHT=hhh ALT="text"> - Inline images define the file location (file), size (WIDTH, HEIGHT), and, most important of all, the text (ALT) that is displayed in text-based browsers and browsers with graphics turned off.
  • <!-- comment --> -  Comment lines can be inserted between elements. The comment is not displayed in the browser.
  • <HR> - Horizontal rule displays a divider line between elements
  • <BR> - Line break creates white space between elements. (Note: no closing tag)
  • <PRE> text </PRE> - Preformatted text can be displayed without further formatting. Note that long lines will cause text to disappear off the right side of the screen. Convert these sections to HTML if possible.

There are many more HTML tags for things like tables, fonts, background colours, just to name a few. Refer to the HTML reference for online help and testing services.

TOP back