Elements

grouped by catagories 

Click HERE for ELEMENTS Arranged Alpahbeticaly

forms, tables, lists, headings

<!DOCTYPE html>
HTML document root element
HEAD
TITLE
META   information about the document keywords, refresh... ( </meta> forbidden )
BODY document body
bgcolor=linen
    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
A
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.
Use non-break-hyphen &#x2011;
instead of -
P begin <p>

new-paragraph

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

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

 attributes


type=
  • text 
  • password 
  • checkboxcheckbox shown with no spaces anywhere.

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

  • submit  reset 
  • file  (10/10/12 firefox,ie display includes full path and default size too small, safari only filesname)

  • hidden→ it's hidden between the arrows, if it shows perhaps it's not within a form!)

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

  • button  (See BUTTON element)
    Web Forms 2.0:
    As of 12/14/08 only opera renders all these special , safari does range. Nobody validates them.
  • datetime 
  • date  (May present calendar)
  • month 
  • week 
  • time 
  • number 
  • range 
  • min, max and step attributes email 
  • url 

BUTTON code is:
<button>push <big style=font-size:400%>button</big></button>
OUTPUT
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>
    <OPTGROUP label=fish>
     <OPTION value=fgtrout>trout
     <OPTION value=fgsalmon>salmon
    </OPTGROUP>
    <OPTGROUP label=mammals>
     <OPTION value=mgdog>dog
     <OPTION value=mgcat>cat
    </OPTGROUP>
</SELECT>
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
Headings
H1, H2, H3, H4, H5, H6

h1

h2

h3

h4

h5
h6
la di da di da …

h4

… da di da di la

  style=margin-top:0px;
removes the top margin before heading

h4 margin-top:0px

 style=margin:0px;
removes the margins at the top and bottom

h4 margin:0px

la di da di da…
ADDRESS
contact information
Phrase and Font style elements
EM emphasis
I italic intended to stand out
CITE citation
VAR instance of a variable or program arguments
STRONG strong ; convey importance
B bold
CODE computer code fragment
SAMP sample program output, scripts, etc. (see style.css )
TT teletype or monospaced
KBD text to be entered by the user
ABBR abbreviated form (ex: AZ)
ACRONYM ACRONYMs Are letters
BIG normal notbig big bigger normal
SMALL normal small normal ;disclaimers, caveats, legal restrictions, copyrights, attribution, or satisfying licensing requirements.
STRIKE, s strike-through
U underlined
DFN instance definition
HR horizontal rule
Deprecated size= ; align=left|center|right ; noshade ; width=
IMG   best way to float and include caption:
(see style.css)
<table class=img><tr><td align=center>
caption <br>
<img src=   width=   height=   alt=" 
       
" >
</table>
floating multiple IMGs
use same color for border as background makes border appear as margin
border=20
style=border-color:lightCyan;
border-style:solid
APPLET Java applet
MAP client-side image map
AREA client-side image map area
 
OBJECT generic embedded object
PARAM named property value
Quotations
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</q>,
(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
<pre>preformatted text. This line is on the same line as the <pre>
notice switch to monospace font
  1           1
  22          22
 3  3        3  3
4   4 4     4   4 4
</pre>
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 {font-family:sans-serif}</style>
      or
<tt style=font-family:sans-serif> tt <tt> in the middle
 <pre>this is pre with  tt  in the middle


SUB subscriptlow
SUP superscripthigh notice that an astrix* is already rendered high
Lists
OL
www.w3.org/TR/html5/
 grouping-content.html
  #the-li-element
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
list-style:
  1. default : decimal
    1. upper-roman
      1. upper-alpha
        1. lower-roman
          1. lower-alpha
            1. decimal
              1. decimal-leading-zero
                1. lower-greek
none | inherit

xx

  1. inside
  2. inside too
xx
  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
</ol>
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
    <ul> beginning of list (indented but no symbol)          (note style type changes automaticlly (not opera! as of 3/5/11 11.01))
  • <li style=color:navy>first li (disc)
      <ul style=color:blue>
    • <li>next level (circle)
      • <ul><li>deeper (square)
        • <ul><li> even deeper (still square as above)
      • </ul><li>back to deeper
    • </ul><li>next level (back) (circle)
  • </ul><li>first li
</ul>line with          (style=margin-bottom:1em line auto inserted before /ul) after LAST LI
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.
DD
<dl>definition list
<dt>definition term
<dd>definition description
DL
DT
 
DIR see ul L
o
o
s
e

D
T
D
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

L
o
o
s
e

D
T
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>asdf
<tr><td>another row
<tbody style=color:blue>
<tr><td>after a nother body tag
</table>


caption
asdf
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.