grouped by catagories 

Click HERE for ELEMENTS Arranged Alpahbeticaly

forms, tables, lists, headings

<!DOCTYPE html>
HTML document root element
META   information about the document keywords, refresh... ( </meta> forbidden )
BODY document body
    Intrinsic Events like: onload="ooo.mm(aaa);" onunload="ooo.mmm(aa) ;"
mouse key …
use style sheets not: background=uri
SECTION represents a generic document or application section, a thematic grouping of content, typically with a header, possibly with a footer. Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis.
A Web site's home page could be split into sections for an introduction, news items, contact information
target=_blank  new, unnamed window
target=_self  same frame
target=_parent  the immediate FRAMESET parent
target=_top  the full, original window (cancels frames)
BASE URI for relative links. in HEAD section ex:
base href=http://www.w3.org/TR
once a base is included in the document, there is no way to reference a fragment in the document ie:
<base href=http://originalDocument>
<a href=#myfootnote>local</a> won't work
BR forced <br>
line <br>
break       (empty permitted)
NOBR inhibit line break. Causes table cells width to expand rather than wrap text into mutiple lines
Deprecated using style=white-space:nowrap; as suggested cause tables to splash over the end of the window!
Use non‑break‑hyphen &#x2011; N.B. copy/paste into a text document results in x'E2 80 91'
instead of - ( x'2D' )
WBR Permit a line break at this location WITHIN a <NOBR>. Useful in anticipating window size/resize which would other-wise cause text to become unviewable or wrap at an undesirable place. Shrink this window to see it in action.
P begin <p>


<progress id=loadProgress value=50 max=100>not shown5</progress>

  var progressBar = document.getElementById('loadProgress');
  function updateProgress(newValue) {
    progressBar.value = newValue;
    progressBar.getElementsByTagName('span')[0].textContent = newValue;
<meter [min=0 low=30 optimal=50 high=60 max=100] value=50> not shownxxx</meter>
font       D Lchange font
basefont   F E D L base font size
form interactive form
method=post name=daForm enctype="multipart/form-data"
action="posting.cgi" >


Safari resets on reload, firefox retains values!
type=tel  name=phone pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" title='nnn-nnn-nnnn' value=nnn-nnn-nnnn"
type=text name=country pattern="[A-Za-z]{3}" title='ccc'"
type=text name=state pattern="[A-Za-z]{2}" title='ss'"
Allow lowercase and convert it for ease of entry)
type=text name=email pattern="[A_Za-z0-9._%+-]+@[A_Za-z0-9.-]+\.[A_Za-z]{2,}$"

RFC 822's requirement that domain names, e-mail addresses etc be treated in a case-insensitive manner (Section 3.4.7).

Firefox will report the title, Safari doesn't so... always provide an example adjacent to the field!!


  • text 
  • password  Characters types are shown as *.
  • checkboxcheckbox shown with no spaces anywhere.

  • radioname=radioname=radio shown with no spaces anywhere. Same name= only one is selectable

  • submit  reset  Clears checkbox, radio file. text MAYBE !?! unchanged!
  • file  Labled as Choose file in Safari, Browse in Firefox, Displays "No file selected".
    Clicking invokes file manager to select file.(10/10/12 display includes full path and default size too small, safari only filesname)
    After sselecting shows the name of the file. Safari long filename format 13characters...13characters
  • hidden→ it's hidden between the arrows, if it shows perhaps it's not within a form!)

  • image← default image shown(12/02/19 Submit in safari, "Submit Query" in firefox )

  • button  (See BUTTON element)
    Web Forms 2.0:
    As of 12/2/19 only opera renders all these special , safari does range. Nobody validates them.
  • datetime 1995-12-31T23:59:59.99Z
  • date 1995-12-31 (May present calendar)
  • month 1995-12
  • week 2005-W52
  • time size=6 min="11:00" max="21:00" step="900"
    Firefox prefills box with --:-- --, adds x on first key, requires AM or PM. If PM returns time entered + 12 !
    If outside of min / max pop up shows
    Please select a valid value. THe two nearest valid values are hh:mm and hh:mm
    Please select a value no [eariler|later] than hh:mm (stupidly shown in 24 hour time!

    Safari allows anything but doesn't size the box.

  • number 42, 0042.000, 42e0, 4.2e1, or 420e-1, NOT +0, .42e2
    Requires a number.
  • tel aaa-xxx-ssss Include example format
  • range min, max and step attributes defaults: step=1, min=0, max=100, and value the min value.

    Doesn't display choosen value use onChange="rangeResult.value=this.value" to display it in an input type=text
    <tr><td><input type=range onChange="rangeResult.value=this.value">
    <tr><td align=center><input id=rangeResult size=4 >
  • email 
  • url  safari wants http[s]://
  • color  displays color chooser, returns #xxxxxx

BUTTON code is:
<button>push <big style=font-size:400%>button</big></button>
Label Focus on label flows to control, that is, click on checkbox or text
implcit <label>            <input type=checkbox id=wind >calm</label>     
explicit (for=) <label for=windbut><input type=checkbox id=windbut>windy</label> 

Use <nobr> to prevent control and label from being split NOT <label>

TextArea multi-line text field
<textarea name=t1 id=tx1 rows=5 cols=70 disabled readonly bgcolor=yellow(no)>
[ blah blah ] </textarea>

disabled supresses scrolling arrows and does not send
FIELDSET form control group
LEGEND for fieldset legend block item i.e. forces break
SELECT Option selector start
multiple size=n onchange="submit();" Safari does not use font-size:xxx 8/4/14
OPTION selectable choice ( end tag is optional)
OPTGROUP SIZE=r number of visable rows

MULTIPLE selections are permitted

 <SELECT name=animal onchange="alert(animal.value);">
    <OPTGROUP label=birds>
     <OPTION value=bgrobin>robin
     <OPTION value=bgbluejay>bluejay
     <OPTION value=bgcatbird>catbird
    <OPTGROUP label=fish>
     <OPTION value=fgtrout>trout
     <OPTION value=fgsalmon>salmon
    <OPTGROUP label=mammals>
     <OPTION value=mgdog>dog
     <OPTION value=mgcat>cat
ISINDEX   F E D single line prompt
all this generaded by one tag!
mt D Framset DTD
FrameSet rows=170,* pixels, percentages, or relative lengths
cols=* pixels, percentages, or relative lengths (window subdivision
Frame src=
marginwidth = , marginheight=
frameborder = 1|0 ,
scrolling = auto|yes|no , noresize (subwindow
NoFrames alternate content container for
non frame-based rendering
IFrame Loose DTD inline subwindow
H1, H2, H3, H4, H5, H6,





la di da di da …


… da di da di la

removes the top margin before heading

h4 margin-top:0px

removes the margins at the top and bottom or not!

h4 margin:0px

la di da di da…

<h3 align=right> 9780786</h3>

<h4> 08780765</h3>

<hgroup align=center style=color:blue>

<h3> 9780786</h3>

<h4> 08780765</h4>

<p>other stuff

<p>otherr tuff

<h4> 08788880765</h3>


<p> alright already

contact information
Phrase and Font style elements
EM          <em>emphasis </em>
<em><em>emphasis with more stress emphasis with 3 times more stress (I dont see the difference)
I italic intended to stand out
This author frerquently styles the italic element with a pale color and not slanted to use with [, |, ] when used to indicate optional or a choice.
VARinstance of a variable or program arguments
STRONG strong ; convey importance
B BringAttention to.
CODE computer code fragment 0l
SAMP sample program output, scripts, etc. (see style.css )
TT teletype or monospaced
KBD text to be entered by the user 0l
ABBR abbreviated form (ex: AZ)
BIG normal notbig big bigger normal
SMALL normal small normal ;disclaimers, caveats, legal restrictions, copyrights, attribution, or satisfying licensing requirements.
STRIKE, s strike-through <s> is not appropriate when indicating document edits; use <DEL>
U underlined
DFN instance definition
HR horizontal rule
Deprecated size= ; align=left|center|right ; noshade ; width=
IMG   HTML5 introduced

figure caption
can be multiple lines

<figure> <img src=xxx>
A figure caption can include <br>
and other html code <figCaption><figure>

to float and include caption:
(see style.css)

<table class=img><tr><td align=center>
caption <br>
<img src=   width=   height=   alt=" 
" >
floating multiple IMGs
use same color for border as background makes border appear as margin
APPLET Java applet
MAP client-side image map
AREA client-side image map area
OBJECT generic embedded object
PARAM named property value
BLOCKQUOTE la di la di la…
use BLOCKQUOTE for a long quotation since it causes a left and a right indentation!
… al id al id
Q Short inline <q>quotation within a <q>quote</q>!</q> : Short inline quotation within a quote!
q.qsample { quotes: """ , """ , "<" , ">"}   
.french-quote { quotes: "«" "»"; }   /* guillemets »  &raquo; */
.dumb-quote { quotes: "(" ")"; }
.az-quote   { quotes: "A" "Z"; } 
q { quotes: """ """ "'" "'";

.french-quote { quotes: "«" "»"; }    content: open-quote| close-quote| no-open-quote| and no-close-quote }.
q::before { content: open-quote; }
q::after  { content: close-quote; }

Short inline <q class=french-quote>quotation within a <q>quote</q>!</q> : Short inline quotation within a quote!
Short inline <q class=dumb-quote>quotation within a <q>quote</q>!</q> : Short inline quotation within a quote!
Short inline <q class=az-quote>quotation within a <q>quote</q>!</q> : Short inline quotation within a quote! zero 0,l
Copy/Paste may not produce the expected result.

(does nothing in ie, Opera inserts " )

BDO I18N BiDi Over-ride
Marking document changes
Too bad browsers dont evaluate the DateTime to decide to del or ins the text.
See also style {visibility: hidden}
INS DateTime=YYYY-MM-DDThh:mm:ssTZD text<ins DateTime=2003-01-31T00:00:01-05:00 >already inserted
text<ins DateTime=2013-12-31T00:00:01-05:00 >to be inserted
DEL text<del DateTime=2003-01-31T00:00:01-05:00 >already deleted
text<del DateTime=2013-12-31T00:00:01-05:00 >to be deleted
<pre>preformatted text. This line is on the same line as the <pre>
notice switch to monospace font
  0           0
  1           1
  22          22
 3  3        3  3
4   4 4     4   4 4
using <code>, <samp>, <tt>, <kbd> will put mono space text in proportional spaced block
To put proportional text in a <pre> block use:
<style>tt zero 0,l {font-family:sans-serif}</style>
<tt style=font-family:sans-serif> tt zero 0,l <tt> in the middle
 <pre>this is pre with  tt zero 0,l  in the middle

SUB subscriptlow
SUP superscripthigh notice that an astrix* is already rendered high
Ordered list

Last line of previous text. Put tag at end of heading line.(<ol> is at the end of this line.)

  1. default (blank line above this caused by <ol> aparently only at level 0)
  2. default 2 and new OL heading
    1. default 2.1 no blank line above this. Level 1 to level 2 transition
    2. default 2.2 notice no change in list-style i.e. parent list was decimal as is this list
  3. default 3
  1. default : decimal
    1. upper-roman
      1. upper-alpha use value=nn example value=25 gets Y, Z, AA
        1. lower-roman
          1. lower-alpha
            1. decimal
              1. decimal-leading-zero
                1. lower-greek
none | inherit


  1. inside
  2. inside too
  1. outside
  2. outside too
xx inside | outside | inherit

    <ol start=-1
  1. should be -1
  2. should be 0
  3. <ol value=4
  4. should be V
  5. <ol value=2
  6. should be III

OL.alpha   LI { list-style:lower-alpha }  
OL.alpha > LI { list-style:lower-alpha }
   LI child of OL  

ol Outline as taught in grade school:
    line with <ol style=list-style:upper-roman;>
  1. first li
  2. second li
  3. third li
  4. forth li
      <ol list-style:upper-alpha;>
    1. li should be A
        <ol list-style:lower-roman;>
      1. eye
      2. eye eye      next line is : </ol>
    2. li should be B      next line is : </ol>
  5. fifth
This line begins with </ol> (blank line auto inserted above)

ol <ol style=list-style:upper-alpha>
  1. <li value=17>How can OrderedList be used for question / answer entries?
  2. <li value=1 >This works
UL Unordered list before          ( style=margin-top:1em;margin-left:15;padding:10 default? )
                  margin-left less than 15 truncates symbol
                  Seems margins top and bottom are only at hightest level

type=circle | disc | square

    <ul> beginning of list (indented but no symbol)          (note style type changes automaticlly
  • <li style=color:navy>first level li (disc)
  • <li> next line
      <ul style=color:blue>
    • <li>next level (circle)
    • <li>same level (circle)
      • <li>deeper (square)
      • <li>same deeper (square again)
        <ul style=color:brown>
        • <li> even deeper (still square as above)
        • <li> at same level
          <ul type=circle style=color:orange;font-family:serif>
          • <li> even deeperer
          • <li> even deeperer ; same color
        • <li> even deeper (square as above)
      • <li>back to deeper
      • <li>still at deeper
    • <li>next level (back) (circle)
  • <li>first level
line with          (style=margin-bottom:1em line auto inserted before /ul) after LAST LI <br>
another line

LI css styles. list-style: outside|outside Handling of overflow after first line.
    <ul style=list-style:inside>
  • <li>
  • this is an example of a line that overflows the width.
    <ul style=list-style:outside>
  • <li>
  • this is an example of a line that overflows the width.
<dl>definition list
<dt>definition term
<dd>definition description
DIR see ul L

xxx <dir> list L1</dir> <dir> list L1</dir> <dir><dir> list L1</dir></dir> <dir><dir> list L1</dir></dir> <dir><dir><dir> list L1</dir> <dir> list L1</dir> <dir> list
MENUsee ul D


<menu>menu</menu><menu> list</menu>
End Tag mt D
LINK F E conveys relationship (to search engins)
rel=fwd | index | next | prev ... rev=reverse,
only allowed in <head>
not used by ie (?) ( Did you want ServerSideIncludes )
SCRIPT script statements
NOSCRIPT alternate content container for
non script-based rendering
Grouping elements
CENTER       D >L shorthand for DIV align=center
DIV generic BLOCK language/style container
SPAN generic INLINE language/style container
STYLE type=text/css Required
TABLE element
TABLE cellpadding=npx cellspacing=npx border=n
COLGROUP column group. must immediately follow <table>
COL useful for defining (a few) style attributes on a column.
Can't recall where I saw this but only a few attributes are usable,
excluding text-align, color

Must immediately follow <table> or <colgroup>
STYLE or Attributes on <TR> override col style
(don't use colspan=n, use colgroup)

<table border=1>
<col style=background-color:aqua>
<col style=background-color:red>
     <colgroup style=color:green><col><col>
<tr><td> no color <td> specified<td>on <td>TD
<tr><td> 0000    <td> tags    <td>zzzz <td>qqqq
<tr style=background-color:pink>
    <td> TR has bgcolor     <td> 1234    <td>zzzz <td>qqqq
<tr><td> on TD    <td> tags    <td>zzzz <td>qqqq

no color specified onTD
0000 tags zzzzqqqq
TR has bgcolor 1234 zzzzqqqq
1111 5555 zzzzqqqq
CAPTION appears outside the table
valign=top | bottom | align= center | left | right
TBODY used to group rows.
multiple occurances allowed.

<table border=1>
<caption align=left valign=bottom>caption
<tbody style=color:red>
<tr><td>another row
<tbody style=color:blue>
<tr><td>after a nother body tag

another row
after a nother body tag
THEAD multiple occurances allowed.
TH Heading cell
TH for different style. defaults to bold.
Notice also default align=center not affected by TD style
TR row
<tr bgcolor=red><td> stuff<td>another col
<tr style=background-color:red<td> <td>
TD Data cell
colspan= rowspan=
TFOOT multiple occurances allowed.