Markup Tags Summary

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

<HTML> and </HTML>
<HEAD> and </HEAD>
<BODY BGCOLOR="#FFFFFF"> and </BODY>

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

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, "Dynamic Loading."

What goes in the BODY

Headers

<H1> and </H1>

<H2> and </H2>

<H3> and </H3>

<H4> and </H4>

<H5> and </H5> tiny print - do not use!

<H6> and </H6> even tinier print - do not use!

Lists

Hanging Indents 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 item in the list is likely to wrap.
</OL>

Hanging Indents 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 item in the list is likely to wrap.
</UL>

Hanging Indents with Section Titles

<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.  This may also have 
Header tags or anchor tags with NAME attributes, or both. 
<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> -- Ensures a blank line; multiple <P> tags in sequence do not accumulate extra white space.
<BR> -- Equivalent to a "hard-return" in word processing; multiple <BR> tags in sequence do accumulate extra white space.
<HR ALIGN=center WIDTH=100% SIZE=2>

Images

Character Formatting

<STRONG>displays as "bold"</STRONG>, so do use for emphasis
<CITE>italics is hard to read on-screen</CITE>, so do not use for emphasis
<TT>displays with fixed-pitch font, usually Courier, and often one step smaller</TT>
<CENTER>displays the enclosed text and graphics with each line centered between the current left and right margins</CENTER>

The Anchor Tag

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:webteam@ohio.edu?subject=whatever subject you choose">webteam@ohio.edu</A>

When a subject specification is included (which we do suggest should usually be the case), the quotes around the HREF attribute value are required, and the HREF attribute value must contain no spaces until after the first character following the "?subject=" (i.e., after the "w" of "whatever" in the example above). The subject text may contain the slash character ("/") with no special coding required. Often the path and filename part of the URL of the page the link is on will be an appropriate subject.

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:

"<" will be displayed as "<".
">" will be displayed as ">".
"&" will be displayed as "&".
" " will be displayed as a non-breaking space.

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 "": either they are specifying a character that is standard, in which case you should simply type that character, or they are platform-dependent and will likely 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. They will provide you with the illusion of enhanced control over the way your pages look, but be aware that the on-screen layout will not match your intentions if a non-graphical browser is used, or if a graphical browser is used with the window-width or font-size set differently than you anticipated. All Macintosh text displays at 100% of the printed size, while all Windows text displays at 125% of the printed size, so you can be sure that there will be font variations among any general audience.

A technique that can be quite effective is to have the contents of each table data cell (see below) consist of a Definition List structure, perhaps with the Defined Term item being a header. This method is illustrated on the Academic Technology home page.

The Preformatted Workaround

The current version of Lynx has a very limited understanding of tables. Some experimentation may be needed to achieve HTML codes that work effectively in both Lynx and Netscape. One work-around is to use a block of text enclosed within the <PRE> and </PRE> tags, instead of using an HTML table. This "Pre-formatted" text is displayed without re-wrapping: all space characters and line breaks are preserved. The text is also forced into a fixed-pitch font for display (usually Courier), so that columns will line up predictably.

<PRE>
first   second   third
    1       2       3
    4       5       6
</PRE>

This is easier to use if you can tell your word processor to display that section of the code in a fixed-pitch font, such as Courier, so that you can get the columns to line up on the first try.

The Four Basic Table Tags

There are four basic tags that are associated with tables:

<TABLE> and </TABLE> surround the entire section of HTML that you want formatted as a table. Nested inside these tags you will find:
<TR> and </TR> surrounding each individual table row. Nested inside these tags you will find:
<TD> and </TD> surrounding the text for each cell within a row.
<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 <TABLE BORDER=10 WIDTH=100% CELLSPACING=5 CELLPADDING=10> Beware using the WIDTH attribute; whether you specify a percentage of the current margin width or an absolute number of pixels, there are combinations of platform and window width that will produce dysfunctional displays. <TR VALIGN="top"> <TD ALIGN="CENTER" VALIGN="top" WIDTH="30%" COLSPAN=3 ROWSPAN=2> Beware using the WIDTH attribute, for the reasons mentioned above.

Image Maps

Imagemaps are either browser-specific or server-specific. The following example is based on the imagemap support currently provided by Ohio University's OAK and CSCWWW servers. This method should work with any graphical browser, for pages on those servers.

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

The details are presented in the Pagemaster's How-to, Appendix III.

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 (e.g., from outdated pages, personal bookmarks, or search engines) 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.

Return to Learning HTML

Dick Piccard revised this file (http://www.ohiou.edu/pagemasters/class/summary.html) on September 5, 2006.

Please E-Mail comments or suggestions to "webteam@ohio.edu".