!-- (HTML comment) | !DOCTYPE | a | abbr | acronym | address | applet | area | b | base | basefont | bdo | big | blockquote | body | br | button | caption | center | cite | code | col | colgroup | dd | del | dfn | dir | div | dl | dt | em | fieldset | font | form | frame | frameset | h1 | h2 | h3 | h4 | h5 | h6 | head | hr | html | i | iframe | img | input | ins | isindex | kbd | label | legend | li | link | map | menu | meta | noframes | noscript | object | ol | optgroup | option | p | param | pre | q | s | samp | script | select | small | span | strike | strong | style | sub | sup | table | tbody | td | textarea | tfoot | th | thead | title | tr | tt | u | ul | var

Text Level Tags do not insert breaks before and after themselves, but instead can be inserted inline and flow with the text. Text Level Tags mark content to affect appearance and/or denote lexical importance, meaning, function, or role. There are 43 Text Level Tags in five sub-groups:

  1. Text Markup Tags
    1. b. Bold style text.
    2. big. /FP. Large style text.
    3. i. Italic style text.
    4. s. XX/FP. LD. Strike-through style text.
    5. small.  /FP. Small style text.
    6. strike. XX. LD. Strike-through style text.
    7. tt. /FP. Teletype, mono-spaced, or typewriter style text.
    8. u. XX. LD. Underlined style text.
  2. Phrase Markup Tags
    1. abbr. /FP. Abbreviation.
    2. acronym. /FP.
    3. cite. Citation.
    4. code. Computer code fragment.
    5. del. /FP. Deleted text.
    6. dfn. Instance definition.
    7. em. Emphasis.
    8. ins. /FP. Inserted text.
    9. kbd. Text to be entered by user at keyboard.
    10. samp. Sample program output, scripts, etc.
    11. strong. Strong emphasis.
    12. var. Instance of a variable or program argument.
  3. Special Markup Tags
    1. a. anchor.
    2. applet. XX. LD. Java applet.
    3. basefont. /FF. EE. XX. LD. Base font size.
    4. bdo. I18N BiDi override.
    5. br. /FF. EE. Forced line break.
    6. font. XX. LD. Local change to font.
    7. iframe. LD. Inline sub-window.
    8. img. /FF. EE. Embedded image.
    9. noscript. Alternate content container for non script-based rendering.
    10. object. Generic embedded object.
    11. param. /FF. EE. Parameter, i.e. named property values.
    12. q. Short inline quotation.
    13. script. Script statements. SL & TL!
    14. span. Generic language/style container.
    15. sub. Subscript.
    16. sup. Superscript.
  4. Client-side Image Map Tags
    1. area. /FF. EE. Client-side image map area.
    2. map. Client-side image map.
  5. Form Control Text Tags
    1. button. Push button.
    2. input. /FF. EE. Form control.
    3. label. Form field label text.
    4. select. Option selector.
    5. textarea. Multi-line text field.

Text Markup Tags

The Text Markup Tags affect appearance of text. There are 8 tags in the Text Markup Tags sub-group of the Text Level Tags group.

b

Bold style text.

<b>Bold words </b>indeed!

Bold words indeed!

big

/FP. Large style text.

<big>Big words </big>too!

Big words too!

i

Italic style text.

What does <i>ki</i> mean?

What does ki mean?

s

XX/FP. LD. Strike-through style text. Use <del> instead.

Scratch the <s>last words</s>.

Scratch the last words.

CSS replacement: text-decoration: line-through.

small

/FP. Small style text.

I'm getting <small>smaller</small>.

I'm getting smaller.

strike

XX. LD. Strike-through style text. Use <del> instead.

Scratch the <strike>last words</strike>.

Scratch the last words.

CSS replacement: text-decoration: line-through.

tt

/FP. Teletype, mono-spaced, or typewriter style text.

Give me some <tt>type</tt>.

Give me some type.

u

XX. LD. Underlined style text. Looks too much like a hyperlink.

Don't use <u>underline</u>!

Don't use underline!

Phrase Markup Tags

Phrase Markup Tags denote lexical importance. Visually some appear similar to some Text Markup Tags. There are 12 tags in the Phrase Markup Tags sub-group of the Text Level Tags group.

abbr

/FP. Abbreviation. Used so audio browsers will give a standard pronunciation of an abbreviation instead of saying it.

<p>A, B, C, <abbr title="etcetera">etc.</abbr></p>

A, B, C, etc.

acronym

/FP. Used so audio browsers will spell out acronym instead of saying it. Hovering over an acronym will also show the title as a tooltip.

The <acronym title="Central Intelligence Agency">CIA</acronym>.

The CIA.

cite

Citation. Names the source of citation. While blockquote is block level, cite is text level.

To err is human, to not, animal. <cite>Robert Frost</cite>

To err is human, to not, animal. Robert Frost

code

Computer code fragment.

Use this: <code>If x = 1 Then y = 3</code>

Use this: If x = 1 Then y = 3

del

/FP. Deleted text.

Where no <del>man</del> one has gone before.

Where no man one has gone before.

dfn

Instance definition.

<dfn>Pi is the circumference divided by the diameter.</dfn>

Pi is the circumference divided by the diameter.

em

Emphasis.

Emphasize <em>this</em>!

Emphasize this!

ins

/FP. Inserted text.

Where no <del>man</del> <ins>one</ins> has gone before.

Where no man one has gone before.

kbd

Text to be entered by user at keyboard.

Then type this next: <kbd>del *.*<kbd>

Then type this next: del *.*

samp

Sample program output, scripts, etc.

I keep getting this: <samp>A:\ is not accessible. The drive is not ready.</samp>

I keep getting this: A:\ is not accessible. The drive is not ready.

strong

Strong emphasis.

Emphasis <strong>this even more</strong>!

Emphasize this even more!

var

Instance of a variable or program argument.

If the sun were a black hole, then <var>r</var> would be 2 miles.

If the sun were a black hole, then r would be 2 miles.

Special Markup Tags

There are 16 tags in the Special Markup Tags sub-group of the Text Level Tags group.

a

anchor. An anchor can serve either or both of these functions:

  1. Use the HREF attribute to enclose a hyperlink and defines what it points to.
  2. Use the NAME/ID attribute to defines a "bookmark" on a page that other hyperlinks can point to. An <a> tag cannot be nested.

The NAME attribute specifies the current anchor as a potential bookmark target of other links. The NAME attribute must be unique on the document. The ID attribute may be used instead.

The HREF attribute specifies the target of the current anchor. The target is usually an absolute URL (eg http:\\yadayada) or a relative URL (dogs/nice.htm). The URL may also point to a specific bookmark on the page with the syntax of URL#bookmark. The bookmark is usually an <a> tag with its NAME attribute specified, but in IE any tag with its ID attribute can be a target.

The TARGET attribute names the frame where a document will be opened. See more about TARGET at Tag Features.

Visit the <a href="index.htm">home page of this directory</a>.

Visit the home page of this directory.


Clicking
<a href="#THERE">HERE</a> takes you to 
<a name="HERE">HERE</a>, but HERE could really be any place on any page.

Clicking HERE takes you to THERE, but THERE could really be any place on any page.


<a href="javascript:myFunction()">This link calls a JavaScript function.</a>

This link calls a JavaScript function.


Send e-mail to
<a href="mailto:a@b.com?cc=y@z.com&amp;bcc=1@2.com&amp;subject=test&amp;body=world">
  a@b.com
</a>
with cc as y@z.com</a>,
bcc as 1@2.com,
subject as hello, and
body as world.

Send e-mail to a@b.com with cc as y@z.com, bcc as 1@2.com, subject as hello, and body as world.


The link below would open a page completely removed from any current frameset(s). See also the TARGET attribute in Tag Features.

<a href="anypage.htm" target="_top">Outa here!</a>

<a href="javascript:void(0)">Click here to do nothing</a>

Click here to do nothing

applet

XX. LD. Java applet. Use <object> instead.

An applet could run here:
<applet code="myapp.class" width="100" height="100">
</applet>.

basefont

/FF. EE. XX. LD. Base font size. Use CSS instead.

<p><basefont size="2">I won't do this one.</p>

bdo

I18N BiDi override. Bi-directional language override. Changes the direction the text is read.

<bdo dir="rtl">Hello Bizzaro.</bdo>

Hello Bizzaro.

br

/FF. EE. Forced line break.

The CLEAR attribute specifies how the following text flows around floating objects. The possible values are: none (the default), left, right, and all. All the values for the CLEAR attribute (except for "none") start the following text after the corresponding floating object (usually an image). This attribute is deprecated in favor of CSS breaks (eg { clear: left }).

This is above, <br />while this is below.

This is above,
while this is below.

font

XX. LD. Local change to font. Use CSS instead.

<font face="Comic Sans MS, Comic Sans">Comic Sans</font>, 
<font color="#990000">Maroon</font>, 
and <font size="6">Size 6</font>.

Comic Sans, Maroon, and  Size 6.

iframe

LD. Inline sub-window. Creates an inline frame. NN4 doesn't support <iframe> but you can fake it with its own tag of <ilayer>.

The SCROLLING attribute can be set to auto (the default), yes, or no, to determine whether scroll bars are present.

The FRAMEBORDER attribute is an integer indicating the width in pixels of a border around the <iframe>.

The WIDTH and HEIGHT attributes can set the width and height of the inline frame.

<p>This sticks a frame inline,
   Frame1:  <iframe src="EGPage1.htm" scrolling="yes"></iframe>
   Frame2:  <iframe src="EGPage2.htm" scrolling="no" height="35"></iframe>
   Frame3:  <iframe src="EGPage3.htm" frameborder="1">You don't support frames,
                you'll have to <a href="EGPage3.htm">click here.</a>
            </iframe>

This sticks a frame inline, Frame1: Frame2: Frame3:

img

/FF. EE. Embedded image.

For additional comments about <img> attributes and examples, see EG Images.

<p>Here is the GH logo: 
<img border="0"
     src="../../images/logos/GHLogo.gif"
     alt="Shows this line if images are disabled."
     width="34"
     height="61">.
</p>

Here is the GH logo: Shows this line if images are disabled..

noscript

Alternate content container for non script-based rendering. Creates inline content for browsers that don't accept script.

If script is enabled then the next sentence is "ON",
otherwise the next sentence is "OFF". 
<script language="JavaScript">
<!-- 
   document.write ("ON.")
// -->
</script>
<noscript> OFF. </noscript> </p>

If script is enabled then the next sentence will say "ON", otherwise the next sentence will say "OFF".

object

Generic embedded object. Can be nested to a large degree.

<object title="Singing Cat" classid="Singing.py">
   <object data="Singing.mpeg" type="application/mpeg">
      <object src="Singing.gif">
         [My Singing Cat]
      </object>
   </object>
</object>

param

/FF. EE. Parameter, i.e. named property values. <parameter> is used to initialize an <object> or < applet>.

An applet could run here:
<applet code="myapp.class" width="100" height="100">
   <param name="name" value"Fred">
   <param name="age" value="39">
</applet>.

To err is human, to not, animal.

q

Short inline quotation.

<p>He said: 
<q cite="http://www.yahoo.com">
To err is human, to not, animal.
</q></p>

He said: To err is human, to not, animal.

script

Script statements. SL & TL! The <script> tag can also create scripts in the <head>, so <script> can also be grouped with Structural Tags, sub-group Header Tags.

Client-side script that can be executed by the browser inline. Contrast this with placing the <script> in the header for document-scope scripts.

Script is usually placed in SGML comments so it is ignored by no-script using browsers. Note also that different scripting languages can be used including JavaScript and VBScript.

<p>A message box would show when this page loads. 
<script><!--
    alert("Ignore this test message box.");
/ --></script>
<noscript>Sorry, you don't support scripts.</noscript>
</p>

You can place the above code and test it yourself, but I have not actualized it here because it is annoying to have that message box pop up each time I visit this page. 

span

Generic language/style container. Marks a section of a document. <span> is text level tag and flows inline with text, whereas <div> is a block level tag and inserts breaks before and after itself.

<p>Breaks will form around the division
<div class="Great Books">
    <span class="Title">The Hobbit</span> by
    <span class="Author">J.R.R. Tolkien</span>.
</div> but not around the spans.</p>

Breaks will form around the division

The Hobbit by J.R.R. Tolkien.
but not around the spans.

sub

Subscript.

x with a subscript of y = x of y = x<sub>y</sub>.

x with a subscript of y = x of y = xy.

The CSS equivalent is vertical-align: sub.

sup

Superscript.

8 = 2 cubed = 2<sup>3</sup>.

8 = 2 cubed = 23.

The CSS equivalent is vertical-align: super.

Client-side Image Map Tags

There are 2 tags in the Client-side Image Map Tags sub-group of the Text Level Tags group.

area

/FF. EE. Client-side image map area. Marks an area inside of an image that can be used as a hyperlink anchor. The area is aka a "hot spot" <area> tags are enclosed by a <map> tag. See the example given at the <map> tag.

The ALT attribute give a brief description of the target of the given hots pot. This is especially important here so non-visual browsers can access the image map as well.

The ACCESSKEY attribute applies.

The HREF attribute specifies a target.

The NOHREF attribute indicates that there is not target.

The SHAPE attribute specifies a shape of the hot spot. The possible values are default, rect, circle, poly. "default" is the entire image and is a pretty useless value.

The COORDS attribute specifies the position and shape of the hot spot, with a comma-separated list of values that are pixels (in reference to the top left corner except for the radius). Here are the parameters :

map

Client-side image map. Encloses <area> tags to make an image map out of any image.

<map name="FPMap0">
    <area href="TagsTextLevel.htm"
          shape="rect"
          coords="5, 3, 28, 19" />
    <area nohref
          shape="circle"
          coords="15, 33, 8">
    <area href="TagsTextLevel.htm"
          shape="polygon"
          coords="5, 43, 26, 43, 12, 56, 12, 57" />
</map>
<img border="0"
     src="../../images/logos/GHLogo.gif"
     usemap="#FPMap0" width="34" height="61" alt="map test" />

map test

Form Control Text Tags

Form Control Text Tags create an interface for users to enter data and select options. See also the <fieldset>, <form>, <legend>, <optgroup>, and <option> tags grouped with Block Level Tags, sub-group Form Tags. There are 5 tags in the Form Control Text Tags sub-group of the Text Level Tags group. See also EG Handling Forms.

button

Push button. The <button> tag cannot contain the <input>, <select>, <textarea>, <label>, <button>, <form>, <fieldset>, <iframe>, or <isindex> tags. Like buttons created with the <input> tag, but with richer functionality.

The TYPE attribute can be button, submit, or reset.

The VALUE attribute is the value submitted by a control.

The ACCESSKEY attribute applies. 

The NAME, DISABLED and TABINDEX attributes apply.

<button type="button" value="Hey" name="butHey">
<img src="../../images/logos/GHLogo.gif" alt="image for button" >
</button>

input

/FF. EE. Form control. Can be a number of different input controls.

The TYPE attribute indicates the type of control to make. This are ten possible values for the TYPE attribute: text (the default), password, checkbox, radio, submit, image, reset, button, hidden, or file.

The VALUE attribute specifies the control's initial value. The VALUE attribute is optional unless the TYPE attribute is "radio" or "checkbox".

The SIZE attribute is either the control's width in pixels, or (if the TYPE attribute is "text" or "password") in the number of characters.

The MAXLENGTH attribute is the maximum number of characters that can be entered when the TYPE attribute is "text" or "password".

The CHECKED attribute specifies that the form control is selected. The CHECKED attribute is only applicable when the TYPE attribute is "radio" or "checkbox".

The READONLY attribute sets the control as read only if the TYPE attribute is "text" or "password".

The ACCESSKEY attribute applies. 

The DISABLED and TABINDEX attributes apply. The NAME attribute also applies and is required unless the TYPE attribute is submit or reset.

<form>
    Text (the default):<input type="text" name="txt1"> /<br />
    Password (hides entered text):<input type="password" name="pwd1" /><br />
    Checkbox (any combination of on/off):<br />
        <input type="checkbox" name="chk1" value="Apple" />Apple
        <input type="checkbox" name="chk1" value="Orange" />Orange<br />
    Radio (Only one radio in a group radios with the same NAME can be checked):<br />
        <input type="radio" name="sex" value="M" />Male<br />
        <input type="radio" name="sex" value="F" checked>Female<br />
    Submit:<input type="submit" value="Submit Me" /><br />
    Image (SRC and ALT should be specified. Used as a submit button.):
        <input type="image" src="../../images/logos/GHLogo.gif" name="gh1" alt="GH" /><br />
    Reset:<input type="reset"><br />
    Button (VALUE shows on the button):<input type="button" name="but1" value="My Button" /><br />
    Hidden (submitted but hidden):<input type="hidden" name="hid1" /><br />
    File:<input type="file" name="fil1">
</form>
Text (the default):
Password (hides entered text):
Checkbox (any combination of on/off):
Apple Orange
Radio (Only one radio in a group radios with the same NAME can be checked):
Male
Female
Submit:
Image (SRC and ALT should be specified. Used as a submit button.):
Reset:
Button (VALUE shows on the button):
Hidden (submitted but hidden):
File:

label

Form field label text. The <label> names the form control it is associated with either explicitly (by using the attribute FOR="ControlID") or implicitly (by enclosing a single form control). The button controls have implicit labels and do not need a <label> tag. The <label> tag cannot contain other <label> tags. The former allows tighter control over the layout. Most web developers avoid <label> for greater control of the display.

The ACCESSKEY attribute applies.

<label for="txtForLabel">For Label:</label>
<input type="text" name="txtForLabel" id="txtForLabel"><br />
<label>For Label Too:
    <input type="text" name="txtForLabelToo">
</label>


select

Option selector. Creates a menu of items to choose from. The <select> tag encloses at least one <option> tags for each item on the menu.

The SIZE attribute specifies the number of rows the menu usually displays. If SIZE="1" (the default), then it is a drop-down list unless MULTIPLE is set.

The MULTIPLE attribute allows multiple selections. The default is non-multiple.

The NAME, DISABLED, and TABINDEX attributes apply.

<select size="2" name="MySelect" multiple="multiple" >
    <option selected>Moe</option>
    <option>Larry</option>
    <option>Curly</option>
</select>

If the content of you <select> is extra wide, most browsers do not provide horizontal scrollbars to handle the overflow. One trick to is to place the select in a div to handle the horizontal overflow. EG:

<div style="height:200px;overflow:auto;width:90%;">
   <select size="5" style="height:180px;"> ...

textarea

Multi-line text field.

The ROWS attribute specifies the number of visible rows.

The COLS attribute specifies the number of characters wide visible.

The READONLY attribute indicates the text is read-only.

The ACCESSKEY attribute applies.

The NAME, DISABLED and TABINDEX attributes apply.

<textarea rows="2" cols="20" name="MyTEXTAREA">
This is the initial value of the textarea.
</textarea>

Page Modified: (Hand noted: ) (Auto noted: )