Home
Independent
Web Tech
HTML

HTML Tutorial

HTML GUIDE in Downloadable Zipped PDF Form
  1. Introduction

    Structure

  2. HTML Document Structure
  3. The Header Section
  4. The Body Section
  5. Using Frames
  6. Element Categories
  7. Element Containment

    Layout Mechanisms

  8. Headers and Paragraphs
  9. Lists
  10. Tables

    Formatting

  11. Common Attributes
  12. Block Formatting, pre, blockquote
  13. Line Formatting, break, HR
  14. Text Formatting
  15. Extra Formatting (SPAN and DIV)
  16. Special Characters
  17. Setting Document Style
  18. CSS Properties

    More

  19. Embedding Graphics
  20. Playing Sound
  21. Anchors and Links
  22. Forms
  23. Embedding Script
  24. Applets
  25. XHTML

    Appendices

  26. A List of Tags
  27. Terms
  28. Recommended Reading
  29. Credits

HTML
Web Tech
Independent
Home

HTML Structure

HTML uses tags that are encased in brackets like the following:

< >

HTML documents consist of elements which are constructed with tags. For instance, a paragraph is considered to be an html element constructed with the tags <P> and </P>. The <P> tag begins the paragraph element and the </P> tag ends the element. The following is a paragraph element.

<p>
This is a sample paragraph element. Any text in a paragraph goes here.
</p>

Not all tags have a tag for ending the element such as the line break, <br> tag. The HTML document is begun with the <html> tag and ended with the </html> tag. Elements of an HTML document include the HEAD, BODY, paragraphs, lists, tables, and more. Elements may be embedded within each other. Also some elements have attributes embedded in the tag that define characteristics of the element such as the placing of text, size of text, source of an image, and other characteristics depending on the element. These attributes are listed in this document when the element is discussed in detail.

An HTML document is structured with two main elements:

  1. HEAD
  2. BODY

An Example HTML File

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <meta name="GENERATOR" content="Arachnophilia 3.9">
   <meta name="description" content="Comprehensive Documentation and information about HTML.">
   <meta name="keywords" content="HTML, tags, commands">
   <title>The CTDP HTML Guide</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!-- Background white, links blue (unvisited), navy (visited), red (active) -->
</head>

<body>
<center><h1>HTML Document Structure</h1></center>
<p>
This is a sample HTML file.
</p>
</body>
</html>
GlobalSpec - The Engineering Search Engine


Comments begin with <! and end with the > bracket. The tags "HTML", "BODY", and all others may be in capital or small letters, however the new XHTML standard requires small letters so small letters are recommended.

In the above file, there is a header and a body. Normally you can copy this file and use it as a template to build your new file while being sure to make some modifications. You can edit HTML using a standard editor, but it is easier to use an HTML editor like Arachnophilia since it displays the tags with different colors than the text is displayed in. Also note the LINK element above which specifies a style sheet to be used. This is a file with a name "style.css". This is a text file that may be created with a text editor but must be saved in plain text format. See the section called "Setting Document Style" for more information about style sheets.

The center tag used above is depreciated. It is best to use style sheets to center headers and other items. This is covered in more detail later.