HTML Examples

This page contains HTML examples - examples of basic HTML elements that you can use for your own website.


There are so many HTML examples here that I've separated them into types. To view more of each type, simply click on the relevant link (next to the example).

Example of...	Code	Example	More
Text:	<!-- HTML examples by Quackit.com --><br /> <p><span style="font-size:10px;">Small font</span><br /> <span style="font-size:18px;">Large font</span><br /> <span style="font-size:12px;color:orange;">Colored font</span><br /> <span style="font-size:12px;font-weight:bold;">Bold font</span><br /> <span style="font-size:12px;font-style:italic;">Italic font</span> and more...</p><br /> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p><br />	Small font Large font Colored font Bold font Italic font and more...	More Text Examples...
Links:	<!-- HTML examples by Quackit.com --><br /> <p><a href="http://www.quackit.com/html/tutorial/html_links.cfm">Example Link</a></p><br />	Example Link	More Link Examples...
Lists:	<!-- HTML examples by Quackit.com --><br /> <ol><br /> <li>HTML Tutorial</li><br /> <li>HTML Codes</li><br /> <li>HTML Examples</li><br /> <li>and much more!</li><br /> </ol><br /> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p><br />	HTML Examples HTML Tutorial HTML Codes and much more!	More List Examples...
Images:	<!-- HTML examples by Quackit.com --><br /> <a href="http://www.quackit.com/travel/new_zealand/milford_sound"><img src="/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" /></a><br /> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p><br />		More Image Examples...
Tables:	<!-- HTML examples by Quackit.com --><br /> <table border="1" cellpadding="5" cellspacing="5" width="100%" style="background-color:#F8DF99;"><br /> <tr><br /> <td colspan="2">Table cell 1</td><br /> </tr><br /> <tr><br /> <td width="20%">Table cell 2</td><td>Table cell 3</td><br /> </tr><br /> </table><br /> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p><br />	Table cell 1 Table cell 2 Table cell 3	More Table Examples...
Forms:	<!-- HTML examples by Quackit.com --><br /> <form action="/html/tags/html_form_tag_action.cfm"><br /> <textarea cols="10" rows="5">Type something</textarea><br /><br /> <input type="submit" value="Send Away!" /><br /> </form><br /> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com">Quackit Tutorials</a></p><br />	Type something	More Form Examples...
Frames:			More Frames Examples...
JavaScript Examples:	<!-- HTML examples by Quackit.com --><br /> <script type="text/javascript"><br /> <!--<br /> // Pre load images for rollover<br /> if (document.images) {<br /> smile = new Image<br /> nosmile = new Image<br /> <br /> smile.src = "http://www.quackit.com/pix/smile.gif"<br /> nosmile.src = "http://www.quackit.com/pix/nosmile.gif"<br /> }<br /> <br /> <br /> function swapImage(thisImage,newImage) {<br /> if (document.images) {<br /> document[thisImage].src = eval(newImage + ".src")<br /> }<br /> }<br /> --><br /> </script><br /> <a href="http://www.quackit.com/javascript/image_rollovers.cfm"<br /> onMouseOver="swapImage('jack','smile')"<br /> onMouseOut="swapImage('jack','nosmile')"><br /> <img src="http://www.quackit.com/pix/nosmile.gif"<br /> width="100"<br /> height="100"<br /> border="0"<br /> alt="Picture of Jack" <br /> name="jack"><br /> </a><br />	(Hover over me!)	More JavaScript Examples...