HTML Document Structure

HTML Constructs
Most Useful Tags
Basic Document Template
An overview of HTML elements

To Contents page for this book.. Go to my bookshelf

HTML Constructs

There are two main constructs in HTML - tags and entities. Tage are codes that are embedded in the document and separated from the regular text by 'less than' (<) and 'greater than' (>) symbols. For example, the text
<P>This is the beginning of a paragraph</P> makes the text 'This is the beginning of a paragraph' begin on a new paragraph. <P> and </P> are tags that direct the browser to start the text from a fresh paragraph. The tags themselves are obviously not displayed.

Tags are of two types : Container tag and Stand-alone tag. A tag is said to be a container tag if it is accompanied by a companion tag. The paragraph tag shown above <P> is a container tag since the text was enclosed between <P> and </P>. </P> is a companion tag. The effect of these tags are applied only to the text they contain. Another example of a container tag is <I> which is used to display the text in italics. It is accompanied by </I>. The first tag is called the opening tag and the end tag is called as the closing tag.

A Stand-alone tag does not have a closing tag and does not contain anything except their attributes. The most frequently used stand-alone tag is <IMG>. There is no </IMG> closing tag.

Attributes : Many tags - both container and stand-alone - have additional attributes or properties associated with them that give the browser additional instructions. For example, the tag
<BODY BGCOLOR=#FFFFF BACKGROUND="green_color.jpg"> has BGCOLOR and BACKGROUND as attributes. Refer to the quick reference for a complete list of tags and their attributes.

The tags and the attributes can be written either in upper case or lowercase. The browser does not treat them differently. HTML is not case-sensitive. Another thing that you must keep in mind is that HTML ignores more than one continuous blank space (extra white space) in a document. Graphic layout artists and other DTP professionals find this limitation annoying while designing their pages. To circumvent this, use the entity &nbsp instead of using the space character. For example, if you press the spacebar three times and leave three blanks in the document, the browser ignores the last two blanks and only one blank is displayed. However, if you type &nbsp;&nbsp;&nbsp; then the three blank characters are displayed by the browser. &nbsp is an entity for non-breaking space.

HTML Entities : These are special character sequences used to display certain special characters on the screen. Special characters are of two kinds : Reserved characters like '<', '>', '&' and Non-English characters (accented characters). An HTML entity always starts with an ampersand (&) character and ends with a semi-colon (;). The browser interprets what is in between the & and ; and displays the appropriate special character. For example, the entity &gt; will display a greater-than symbol '>' on the screen. Refer to the overview of HTML elements for a list of special-character entities.

Most Useful Tags

Although there are many tags in HTML, the ones that are more frequently used are listed below. If you know these tags, you will be able to create a nice-looking page without much sweat. These tags are : (Click on them to get more information)

  1. <HTML> identifies the document type
  2. <HEAD> encloses technical information about the document
  3. <TITLE> gives the document a name
  4. <BODY> contains the document content
  5. <H1> through <H6> defines headings in the document
  6. <P> for a new paragraph
  7. <UL> and <LI> define a list
  8. <A HREF="..."> sets up a hyperlink
  9. <IMG SRC="..."> inserts an image
  10. <PRE> defines pre-formatted text

Basic Document Template

A basic HTML document will have four elements to define it :

Using these four tags, you can create a template for your document :

<HTML>
<HEAD>
<TITLE>My Homepage</TITLE>
</HEAD>
<BODY>
<H1>Heading here</H1>
<HR>

Write the document contents here.

</BODY>
</HTML>

You can go on enhancing this template by adding different attributes to these tags and also adding additional tags. For example, you may change the default background color for the page by adding the attribute BGCOLOR to the BODY tag or add an image to your page by adding the <IMG> tag.

An overview of HTML elements

HTML Tags allowable in the Document Head
Tag Type Purpose
<BASE> Stand-alone Defines document baseline information
<HEAD> Container Denotes the start of the document head
<ISINDEX> Stand-alone Indicates that the document is a searchable index
<LINK> Stand-alone Establishes the linking relationships with other documents
<META> Stand-alone Supplies document meta information
<SCRIPT> Container Contains code for a client-side script
<STYLE> Container Supplies style sheet information
<TITLE> Container Gives the document a descriptive title

HTML Tags allowable in the document body
Tag Type Purpose
<A> Container Establishes an anchor
<ADDRESS> Container Denotes an address (postal or e-mail)
<APPLET> Container Embeds a Java Applet in a document
<AREA> Stand-alone Defines clickable regions in a client-side image map
<B> Container Produces bold-face text
<BIG> Container Renders text in large-font size
<BLOCKQUOTE> Container Denotes a quoted passage
<BODY> Container Denotes the start of document body
<BR> Stand-alone Inserts a line break
<CENTER> Container Centers the contained item on the page
<CITE> Container Indicates the name or title of a cited work
<CODE> Container Denotes a computer code
<DD> Container Denotes a term definition
<DIR> Container Initiates a directory listing
<DIV> Container Denotes the start of a document division (chapter, appendix, etc.)
<DL> Container Initiates a definition list
<DT> Container Denotes a term to be defined
<EM> Container Denotes text to be emphasized
<FONT> Container Modifies font characteristics (size and color)
<H1> thru <H6> Container Denotes Level-1 through Level-6 heading
<HR> Stand-alone Places a horizontal line (rule) on a page
<I> Container Produces italicized text
<IMG> Stand-alone Places an image on a page
<KBD> Container Denotes keyboard input
<LI> Stand-alone Denotes the start of a list item
<MAP> Container Contains definitions of clickable regions for a client-side image map
<MENU> Container Initiates a menu list
<OL> Container Initiates an ordered (numbered) list
<P> Container Denotes the start of a new paragraph
<PRE> Container Signifies text to be treated as pre-formatted
<SAMP> Container Denotes sample or literal text
<SMALL> Container Renders text on a smaller font
<STRIKE> Container Produces strike-through text
<STRONG> Container Denotes text to be strongly emphasized
<SUB> Container Renders text as subscript
<SUP> Container Rendes text as superscript
<TT> Container Renders text in fixed-width font (typewriter text)
<UL> Container Initiates an un-ordered (bulleted) list
<VAR> Container Denotes a variable name

HTML Tags Allowable in a Form
Tag Type Purpose
<FORM> Container Denotes the start of a form
<INPUT> Stand-alone Specifies a user input field
<OPTION> Stand-alone Defines a form menu option
<SELECT> Container Contains options in a form menu
<TEXTAREA> Container Establishes a window for multiline text input

HTML Tags Allowable in a Table
Tag Type Purpose
<CAPTION> Container Denotes a table caption
<TABLE> Container Denotes the start of the table
<TD> Container Signifies the start of a new table element
<TH> Container Signifies the start of a new table header
<TR> Container Signifies the start of a new table row

Reserved Character Entities
Character Entity
Ampersand(&) &amp;
Greater than sign (>) &gt;
Less than sign(<) &lt;
Non-breaking space &nbsp;
Quotation Marks( " ) &quot;
Copyright symbol( © ) &copy;
Regitered symbol( ® ) &reg;

To Contents page for this book.. Go to my bookshelf