Markup Tags Summary

This section is intended to be used as a reference and study guide.

The Big Three

<HTML> and </HTML>
<HEAD> and </HEAD>
<BODY> and </BODY> 

<html>
   <head>
   (...head content...)
   </head>

   <body>
   (...body content...)
   </body>
</html>


What goes in the HEAD

<TITLE> and </TITLE>

To improve the effectiveness of keyword search engines, you should use two forms of the META tag:

<META NAME="keywords" CONTENT="Keywords and phrases, separated by commas, especially those that don't appear in the displayed text of the page, for example because they describe information that is presented graphically.">

<META NAME="description" CONTENT="A short description of the information presented by the page.">

There is a third form of the META tag that you may use, which causes an automatic bounce to another Web page, as outlined in the very last section of this Web page.


What goes in the BODY

Headers


Lists


Bulleted with Numbers

<OL>
<LI>Each list item is preceded by an <LI> tag.
<LI>The entire list is surrounded by <OL> and </OL>.
<LI>Paragraph breaks should be added between items if the text for 
the longest items in the list is likely to wrap.
</OL>


Bulleted with Graphic Characters

<UL>
<LI>Each list item is preceded by an <LI> tag.
<LI>The entire list is surrounded by <UL> and </UL>.
<LI>Paragraph breaks should be added between items if the text for 
the longest items in the list is likely to wrap.
</UL>


Unbulleted list

<DL>
<DT>Definition list
<DD>An HTML list structure that works well for a glossary 
and for the overall structure of a home page. 
<P>
<DT>Defined Term
<DD>The Defined Term is preceded by a <DT> tag and 
appears flush to the current left margin.
<P>
<DT>Defining Data
<DD>The Defining Data is preceded by a <DD> tag and 
appears indented one step from the current left margin. 
</DL>


Separators

<P>

<BR>

<HR ALIGN=center WIDTH=100% SIZE=2>


Images

<IMG SRC="../gifs/exclam.gif" ALT="!" WIDTH=17 HEIGHT=32 BORDER=0>


Character Formatting


The Anchor Tag

<A ...attributes... >

Most anchor tags will have exactly one of the two attributes, HREF or NAME. If you are tempted to have two nested consecutive anchor tags, one with each, instead combine them into the same tag. Some browsers do not correctly interpret nested consecutive anchor tags, and some browsers do not correctly interpret anchor tags that have no enclosed visible text.

The names must not contain space characters. Names are case-sensitive. Choose meaningful names that are short and consist of lower-case letters and numerals.

<A HREF="summary.html#target" NAME="target">Anchor example on HTML Summary Page</A>

<A HREF="mailto:acatec@www.ohiou.edu">acatec@www.ohiou.edu</A>


Special Characters

Use the ampersand character ("&"), followed by a specific text string, followed by a semicolon. You have to use this trick to display an ampersand character reliably. For example:

The characters between the ampersand and the semicolon are case-sensitive. Do not use the ampersand-pound sign-digits codes that you may see in other people's Web pages, such as "&#133;", because they are platform dependent and are likely to display differently on Windows than they do on Macintosh systems.


Block Quotes

<BLOCKQUOTE> and </BLOCKQUOTE> surround text that will be indented on both sides one step from the current margins. Some browsers will add a paragraph break's worth of white space above or below the block, so for uniformity you will probably want to include an explicit <P> both before and after the block quote section.

This is a blockquote section. It is separated from the text above by a <P> tag and the </BLOCKQUOTE> tag is immediately followed by the <HR> tag.


Tables

Tables should be used to present inherently tabular information.

The Four Basic Table Tags

There are four basic tags that are associated with tables:

  1. <TABLE> and </TABLE> surround the entire section of HTML that you want formatted as a table. Nested inside these tags you will find:

  2. <TR> and </TR> surrounding each individual table row. Nested inside these tags you will find:

  3. <TD> and </TD> surrounding the text for each cell within a row.

  4. <TH> and </TH> surround the text of each cell that functions as a table header. It is really equivalent to having a bold tag built into a <TD> tag.


The Basic Table:

This short section of HTML is annotated to emphasize the correct nesting of the various tags:


Attributes for the table tags


Image Maps

Imagemaps are either browser-specific or server-specific. The following example is based on the imagemap support currently provided by OAK and CSCWWW. This method should work with any graphical browser.

<A HREF=image.map><IMG BORDER=0 SRC=image.gif ISMAP ALT="Go to text menu."></A>


Dynamic Loading

For many browsers, you can use a form of the <META> tag to automatically specify the next page to load, and how long to wait before loading it. The body of the page should include a link to the same destination for browsers that don't support this form of dynamic loading.

This is useful when you re-organize a whole Web site and want people who follow old links to end up in the correct place.

In the <HEAD> of the page include this tag:

The "10" in the example specifies the number of seconds delay before reloading with the next URL. If you make that delay too short to allow time for the reader to click on their browser's "BACK" button, you will frustrate people who have followed your links and then want to backtrack to pages they were on previously.

Dick Piccard revised this file (http://www.ohiou.edu/pagemasters/class/summary.html) on August 17, 2000.

Please E-Mail comments or suggestions to "acatec@www.ohiou.edu".