Created
April 8, 2011 15:41
-
-
Save mazuhl/910134 to your computer and use it in GitHub Desktop.
HTML 4.01 tag test
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.