HTML 4.01 tag test

html-4.01-tag-test.html

<h1>HTML tag test</h1>

<p>HTML 4.01 tags, examples and what they look like.</p>

<h2>Text tags</h2>

<p>Paragraph with text</p>
<p>Paragraph with <b>bold text</b></p>
<p>Paragraph with <strong>strong text</strong></p>
<p>Paragraph with <i>italic text</i></p>

<p>Paragraph with <em>emphasis text</em></p>
<p>Paragraph with <s>struck out text</s></p>
<p>Paragraph with <strike>struck out text</strike></p>
<p>Paragraph with <big>big text</big></p>
<p>Paragraph with <small>small text</small></p>

<h2>List tags</h2>

<ul>
	<li>Unordered list item 1</li>
	<li>Unordered list item 2</li>
	<li>Unordered list item 3</li>
</ul>

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

	<li>Ordered list item 2</li>
	<li>Ordered list item 3</li>
</ol>

<dl>
	<dt>Definition term 1</dt>
	<dd>Lorem ipsum dolor est</dd>
	<dd>Ipsum dolorium moreum blogum</dd>

	<dt>Definition term 2</dt>
	<dd>Lorem dolor ib estinum</dd>
	<dd>Dolorem lorem ipsum</dd>
</dl>

<h2>Semantic tags</h2>

<abbr title="Et cetera">Etc.</abbr><br />

<acronym title="Light Amplification by Stimulated Emission of Radiation">Laser</acronym><br />

<dfn title="HyperText Markup Language">HTML</dfn> stands for HyperText Markup Language<br />

<address>
    24 High Street<br />Anytown<br />P1 OXS
</address><br />

<code>Text in within code tag</code><br />

<tt>Text within teletype tag</tt><br />

<div>Text within logical diision tag</div><br />

<span>Text within span tag</span><br />

<del>Text within deleted text tag</del><br />

<ins>Text within inserted text tag</ins><br />

<em>Text within emphasis tag</em><br />

<strong>Text within strong tag</strong><br />

<hr />

<kbd>Text within keyboard tag</kbd><br />

<pre>Text within pre tag</pre><br />

<pre>
More text
  witin
    the pre tag
</pre><br />

<samp>Text within sample output tag</samp><br />

<sub>Text within subscript tag</sub><br />

<sup>Text within superscript tag</sup><br />

<var>Text within variable or user defined text tag</var><br />

<blockquote>Text within blockquote tag</blockquote><br />

<p>Text within short <q>inline quotation</q> tag</p><br />

<cite>Text within citation tag</cite>

<h2>Form tags</h2>

<form action="">
	<button>Button</button><br />
	Input <input type="" /><br />
	Input button <input type="button" value="Input[button]" /><br />

	Checkbox <input type="checkbox" /><br />
	File <input type="file" /><br />
	Hidden <input type="hidden" /><br />
	Image <input type="image" /><br />
	Password <input type="password" /><br />
	Radio <input type="radio" /><br />

	Reset <input type="reset" /><br />
	Submit <input type="submit" /><br />
	Text <input type="text" /><br />
	Select <select name="" id="">
		<option>Option 1</option>
		<option>Option 2</option>

	</select><br />
	Selct with optgroup <select name="" id="">
		<optgroup label="Optgroup 1">
			<option>Option 1</option>
			<option>Option 2</option>
		</optgroup>
		<optgroup label="Optgroup 2">

			<option>Option 3</option>
			<option>Option 4</option>
		</optgroup>
	</select><br />
	Textarea <textarea name="" id=""></textarea><br />
	<fieldset>
		<legend>Legend within fieldset</legend>

		<label for="">Field 1</label>
		<input type="text" /><br />
		<label for="">Field 2</label>
		<input type="text" />
	</fieldset>
</form>

<h2>Frame tags</h2>

<frameset cols="25%,75%">
	<frame src="something.html" frameborder="1" />
	<frame src="another.html" />
</frameset>
<iframe src="about:blank" frameborder="1"></iframe>

<h2>Table tags</h2>

<table>Table tag</table>
<tr>Table row tag</tr>
<th>Table header tag</th>

<td>Table data cell tag</td>
<tbody>Table body tag</tbody>
<thead>Table header tag</thead>
<tfoot>Table footer tag</tfoot>
<caption>Table caption</caption>
<col />
<colgroup>Table coloumn grouping</colgroup>

<h2>Object tags</h2>
<object data="" type=""></object>

<param name="" value="" />
<script type="text/javascript"></script>
<noscript></noscript>

<h2>Style tags</h2>
<style>Style tag</style>
<link rel="" href="" />

<h2>Meta tags</h2>
<meta>Meta tag</meta>

<h2>International tags</h2>
<bdo>Bi-directional algorithm</bdo>

<h2>Deprecated tags</h2>
<applet></applet><br />
<center>Text within center tag</center><br />
<dir>Text within directory list tag</dir><br />
<embed>Text within embed tag</embed><br />
<font>Text within font tag</font><br />
<isindex>Text within isindex tag</isindex><br />

<menu>Text within menu tag</menu><br />
<noembed>Text within noembed tag</noembed><br />
<u>Text within underline tag</u>

<h2>Real-world usage</h2>

<h3>Tables</h3>

<table>
	<thead>
		<tr>

			<th>Table heading 1</th>
			<th>Table heading 2</th>
			<th>Table heading 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>

			<td>Lorem</td>
			<td>Ipsum</td>
			<td>Dolor</td>
		</tr>
		<tr>
			<td>Moreum</td>
			<td>Blogum</td>

			<td>Sendum</td>
		</tr>
		<tr>
			<td>Needum</td>
			<td>Dolorm</td>
			<td>Colore</td>
		</tr>

	</tbody>
	<tfoot>
		<tr>
			<td>Footer 1</td>
			<td>Footer 2</td>
			<td>Footer 3</td>
		</tr>

	</tfoot>
</table>		

<br />

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>

  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>

    <td>$50</td>
  </tr>
</table>

<br />

<table border="1">
<tr>
  <td>
   <p>This is a paragraph</p>
   <p>This is another paragraph</p>

   <div>This is a div tag</div>
  </td>
  <td>This cell contains a table:
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>

   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>This cell contains a list
   <ul>

    <li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
   </ul>
   And another list
    <ol>
	    <li>apples</li>

	    <li>bananas</li>
	    <li>pineapples</li>
   </ol>
  </td>
  <td>HELLO</td>
</tr>
</table>

<br />

<table width="100%" border="1">
  <colgroup span="2" align="left"></colgroup>
  <colgroup align="right" style="color:#0000FF;"></colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>

  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

<br />

<img src="http://www.google.co.uk/images/logos/ps_logo2.png" /><br />
<a href="http://www.google.com/">Google</a><br />
<a href="http://www.google.com/"><img src="http://www.google.co.uk/images/logos/ps_logo2.png" /></a>

Paste this into your CMS/website and see how all the different items are styled. Helps you work out if someone has overridden a (sensible) default browser style.