Elements

grouped by catagories 

Click HERE for ELEMENTS Arranged Alpahbeticaly

This document is rather old and outdated by HTML5, however, in most cases HTML5 is a superset of HTML4 and so, although incomplete from HTML5 stand point most of these more basic elements and atributes still apply.

Few global style attributes are used so as to show how the default renders.

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=URL
target=_blank  new, unnamed window
target=_self  same frame
target=_parent  the immediate FRAMESET parent
target=_top  the full, original window (cancels frames)
#fragment-id within the current page
#[{"num":27,"gen":0},{"name":"XYZ"},56.692,752.879,null]   section within PDF
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>

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


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!!

type=

  • 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
    or
    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
    pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
  • 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
    <table>
    <tr><td><input type=range onChange="rangeResult.value=this.value">
    <tr><td align=center><input id=rangeResult size=4 >
    </table>
    
  • 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>
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,
hgroup

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

<hgroup>

<p> alright already

ADDRESS
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. Example Yes|no Yes<i style=color:silver>|</i>no
CITEcitation
VARinstance of a variable or program arguments
STRONG strong ; convey importance
B BringAttention to.
CODE computer code fragment : x=8 <code>x=8</code>
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 ACRONYM Are letters NASDAQ
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 & FIGCAPTION

figure caption
can be multiple lines

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

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

<table class=img border=3 align=center width=30%><tr><td>
<img src=home.gif width=80   height=10   alt="wide home"  
title="W I D E   H O M E"> <caption>CAPTION<caption> 
</table>
wide home
CAPTION

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 within a <q>quote</q>!</q> : Short inline quotation within a quote!
<style>
q.qsample { quotes: """ , """ , "<" , ">"}   
.french-quote { quotes: "«" "»"; }   /* guillemets »  &raquo; */
.dumb-quote { quotes: "(" ")"; }
.az-quote   { quotes: "A" "Z"; } 
</style>
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
<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
</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 zero 0,l {font-family:sans-serif}</style>
      or
<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
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 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

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

type=circle | disc | square | none

    <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)
        <ul>
      • <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
          </ul>
        • <li> even deeper (square as above)
        </ul>
      • <li>back to deeper
      • <li>still at deeper
      </ul>
    • <li>next level (back) (circle)
    </ul>
  • <li>first level
line with          (style=margin-bottom:1em line auto inserted before /ul) after LAST LI <br>
another line

Horizontal list class="list-style-none d-flex flex-wrap col-12 col-lg-5 flex-justify-center flex-lg-justify-between mb-2 mb-lg-0"
  • item
  • another list item
  • yet another
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.