<div>...</div>

A div (division) is a block level element that can contain any number of any sort of element, including other divs. The topic divisions on this page have a background color of white.

<p>...</p>

A paragraph element.
Paragraphs, like headings and other blocks,
contain text nodes, line breaks,
and inline elements

<blockquote>...</blockquote>

A blockquote element.
In use, this should be
a long quote or citation,
though it can contain most of the other elements.

<address>...<address>

An address is a block level element.
mailto: links are common in address elements.

<pre>...<pre>

	A pre element is block level 	
	and can contain inline content,
	but it is best for displaying
	wh  it  e- spa  ce and 	
	line 
	break 
	preserved text.
	

<h1>heading 1 </h1>

<h2>heading 2 </h2>

<h3>heading 3 </h3>

<h4>heading 4 </h4>

<h5>heading 5 </h5>

<h6>heading 6 </h6>

li and dd elements can contain most block and inline elements, including other lists...

<ol> Ordered list </ol>

1. <li> Ordered list item </li>

2. list item
3. list item
4. list item
5. list item

<ul> Unordered list </ul>

• <li> Unordered list item </li>

• list item
• list item
• list item
• list item

<dl> Definition List </dl>

<dt>Definition term </dt>

<dd> Definition detail <dd>

term

definition

<span>...</span>

A span is an inline element that can contain any number of inline elements.

These inline elements contain text nodes

An em element in a paragraph. (<em>...</em>)

A strong element in a paragraph. (<strong>...</strong>)

A word_{sub element} in a paragraph. (_...)

A word^{sup element} in a paragraph. (^...)

An abbr element (eg, USA) in a paragraph. (<abbr>...</abbr>)

A kbd element in a paragraph. (<kbd>...</kbd>)

A samp element in a paragraph. (<samp>...</samp>)

A code element in a paragraph. (<code>...</code>)

A var element in a paragraph. (<var>...</var>)

A quote element in a paragraph. (<q>...</q>)
(There are no quotation marks in the source, or displayed by IE6.)

These two elements are odd ducks- they are more like formatting directions than elements. They do not contain anything and have no end tags. Each one separates its containing element into two parts, before and after itself.

<br > line
break

<hr > horizontal line

---

<table>...</table>

Structural groups of table elements:

One caption, before any content

<caption>

No more than one thead and one tfoot element per table, both defined,if they exist, before any tbody section.

<thead><tr><th></th><th></th></tr></thead>
<tfoot><tr><td></td><td></td></tr></tfoot>

Any number of tbody's, each with any number of rows and colums made of either <td> or <th> cells.

<tbody>
<tr><th></th><th></th><th></th><th></th></tr>
<tr><td></td><td></td><td></td><td></td></tr>
</tbody>
</table>

Table header cells (<th>) usually fill the first row and/ or the first column of a table, but they can be placed anywhere an ordinary cell (<td>) can be.

 

Table structures are based on horizontal (row) relations- cols and colgroups can represent their members for calculations and some display effects, but the priority is cell, row, tbody, (or thead or tfoot), table.

<caption>table caption </caption>

table header cell	table header cell
table footer cell	table footer cell
table header cell (th in tr)	table cell (td in tr)
table header cell	table cell
table header cell	table cell
table header cell	table cell
table header cell	table cell

 

<a>...</a> links and anchors

A hyperlink is an <a> element with a 'href' attribute

An <a> element cannot contain another <a> element, but it can "wrap" around most other content

An anchor just needs an id.

Any element with an id can be the target of a link

<img>

The image tag imports its content from an url with the 'src' attribute

An image is an inline element.

<iframe>...</iframe>

An iframe (inline frame) is in the css cascade of its containing page,
but the document inside the iframe has its own css heirarchy.

<object>...</object>

The object element can be used for images, remote html, and other media or programable data.

<form>>...</form>

fieldsets, legends and labels make a form easier to organize and use.

<fieldset>...</fieldset>
<legend>...</legend>
<label>...</label>

Each label may contain one input element

<input>

The input element has no end tag or html content

The legend element should be the first child of its fieldset.

A fieldset is a bit like a div for grouping form controls.

input type=" image" file input:

The input element describes itself in its attributes, and has no end tag.

The 'type' attribute determines if the input will be a textbox, password, checkbox, radio, image, hidden, file, submit, reset, or button. A hidden input has no diplay or user function, but will upload its value (from a script or the html source) with the rest of the form.

Input button types

A checkbox group submits any number of values in an array

checkbox 1:maybe checkbox 2: checkbox 3:

A radio group sends only one value to the server

radio 1 radio 2 radio 3 radio 4

text input group

text input: password:

Other Control Elements

Not only <input> elements are form controls

Text Area

<select>...</select>
<optgroup>optgroups contain options</optgroup>
<option>options have values and text content</option>

Drop down Menu Select element Option 2 Option 3 Option 4 Option 5 Option 6 Option 7 Option 8

<button>...</button>

The button element (not input type="button") can contain html markup, but not a link or iframe. Button Element

<canvas></canvas>