previous   next attributes   contents   attributes   Alphabeticaly index HTML5 , HTML5 wiki

Elements

grouped by catagories 

Click HERE for ELEMENTS Arranged Alpahbeticaly

forms, tables, lists, headings

HTML document root element
HEAD
TITLE
META   information about the document keywords, refresh... ( </meta> forbidden )
BODY document body
bgcolor=linen
    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

 
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  checkbox  radio 
submit  reset 
file  hidden *(it's hidden) image  button 
Web Forms 2.0:
As of 12/14/08 only opera renders all these special , safari does range. Nobody validates them.
datetime†  date†  month†  week† 
time†  number†  range†  min, max and step attributes email  url 
BUTTON <button>push button</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();"
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
VAR instance of a variable or program argumentS
CITE citation
STRONG strong
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
STRIKE, s       D L strike-through
U       D L 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

 

 

 

 

 

 

 

  OL

 

 

 

 

 

 

 

  OL

Ordered list

Last line of previous text† Put tag at end of heading line(<ol> is here)

  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
  3. default 3
list-style: decimal | decimal-leading-zero |
upper-roman | lower-| upper-alpha lower- |
lower-greek
none | inherit

inside | outside | inherit

url("http://png.com/e.png")

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

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

    line with <ol style=list-style-type:upper-roman;>
  1. first li
  2. second li
  3. third li
  4. forth
      <ol ...upper-alpha;
    1. li
        <ol ...lower-roman;
      1. eye
      2. eye eye
    2. li
  5. fifth
line with /ol (blank line auto inserted above) after last LI before final /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>first li (disc)
    • <ul><li>next level (circle)
      • <ul><li>deeper (square)
        • <ul><li> even deeper
      • </ul><li>back to deeper
    • </ul><li>same level
  • </ul><li>second li
</ul>line with          (style=margin-bottom:1em line auto inserted before /ul) after LAST LI
LI css styles
DD
<dl>definition list
<dt>definition term
<dd>DDdefinition 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

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=color:red><col style=color:blue>
     <colgroup style=color:green><col><col>
<tr><td> no color <td> specified<td>xxx <td>yyy
<tr><td> on TD    <td> tags    <td>zzzz <td>qqqq
<tr style=background-color:pink>
    <td> on TD    <td> tags    <td>zzzz <td>qqqq
<tr><td> on TD    <td> tags    <td>zzzz <td>qqqq
no color specified xxxyyy
on TD tags zzzzqqqq
on TD tags zzzzqqqq
on TD tags 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
TD Data cell
colspan= rowspan=
TFOOT multiple occurances allowed.

W3 links: previous   next   contents   attributes   index