3 Text Level Tags
TAGS: Cyber Tech, HTML, Standards, TECH
!-- (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:
- Text Markup Tags
- Phrase Markup Tags
- abbr. /FP. Abbreviation.
- acronym. /FP.
- cite. Citation.
- code. Computer code fragment.
- del. /FP. Deleted text.
- dfn. Instance definition.
- em. Emphasis.
- ins. /FP. Inserted text.
- kbd. Text to be entered by user at keyboard.
- samp. Sample program output, scripts, etc.
- strong. Strong emphasis.
- var. Instance of a variable or program argument.
- Special Markup Tags
- a. anchor.
- applet. XX. LD. Java applet.
- basefont. /FF. EE. XX. LD. Base font size.
- bdo. I18N BiDi override.
- br. /FF. EE. Forced line break.
- font. XX. LD. Local change to font.
- iframe. LD. Inline sub-window.
- img. /FF. EE. Embedded image.
- noscript. Alternate content container for non script-based rendering.
- object. Generic embedded object.
- param. /FF. EE. Parameter, i.e. named property values.
- q. Short inline quotation.
- script. Script statements. SL & TL!
- span. Generic language/style container.
- sub. Subscript.
- sup. Superscript.
- Client-side Image Map Tags
- Form Control Text Tags
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.
The <acronym title="Central Intelligence Agency">CIA</acronym>.
The CIA.
cite
Citation. Names the source of citation.
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:
- Use the HREF attribute to enclose a hyperlink and defines what it points to.
- 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&bcc=1@2.com&subject=test&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>
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: 
.
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
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 can be pixels (eg 50) or percentage (eg 50%). Here are the parameters :
- When shape="rect": left-x, top-y, right-x, bottom-y.
- When shape="circle": center-x, center-y, radius.
- When shape="poly": x1, y1, x2, y2, ..., xN, yN. The first x and y coordinate pair and the last should be the same to close the polygon. When these coordinate values are not the same, user agents should infer an additional coordinate pair to close the polygon.
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" />
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>
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: 2006-05-26 16:20:05Z) (Auto noted: 2008-01-19 03:52:03Z)