HTML Cheat Sheet

Use this HTML cheat sheet to quickly find the code you need. All you need to do is copy (from this cheat sheet) and paste into your website's code. If need be, you can change the values to suit your particular situation.

Text

Code

Result

<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> <div class="more-info">More info: <a href="/html/tags/html_h1_tag.cfm"><code>&lt;h1&gt;</code></a>, <a href="/html/tags/html_h2_tag.cfm"><code>&lt;h2&gt;</code></a>, <a href="/html/tags/html_h3_tag.cfm"><code>&lt;h4&gt;</code></a>, <a href="/html/tags/html_h4_tag.cfm"><code>&lt;h4&gt;</code></a>, <a href="/html/tags/html_h5_tag.cfm"><code>&lt;h5&gt;</code></a>, and <a href="/html/tags/html_h6_tag.cfm"><code>&lt;h6&gt;</code></a>.</div>

Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 More info: <h1>, <h2>, <h4>, <h4>, <h5>, and <h6>.

Code	Result
<p>Normal paragraph text.</p> <div class="more-info">More info: <a href="/html/tags/html_p_tag.cfm">HTML <code>&lt;p&gt;</code> tag</a></div>	Normal paragraph text. More info: HTML <p> tag

Code	Result
I feel a line break coming... <br /> ...up. <div class="more-info">More info: <a href="/html/tags/html_br_tag.cfm"><code>&lt;br&gt;</code></a></div>	I feel a line break coming... ...up. More info: <br>

Code	Result
<b>Bold text.</b> <div class="more-info">More info: <a href="/html/tags/html_b_tag.cfm"><code>&lt;b&gt;</code></a></div>	Bold text. More info: <b>

Code	Result
<i>Italic text.</i> <div class="more-info">More info: <a href="/html/tags/html_i_tag.cfm"><code>&lt;i&gt;</code></a></div>	Italic text. More info: <i>

Code

Result

<p style="color:#B22222">Color text and <span style="color:limegreen;">another color</span>, and now back to the same. Oh, and here's a <span style="background-color:PaleGreen;">different background color</span> just in case you need it!</p> <div class="more-info">More info: <a href="/html/codes/color/">HTML Color</a>, <a href="/css/properties/css_color.cfm">CSS <code>color</code> Property</a>, <a href="/css/properties/css_background-color.cfm">CSS <code>background-color</code> Property</a>, <a href="/html/codes/html_text_color_code.cfm">Text Color</a>, <a href="/css/css_color_codes.cfm">CSS Color Codes</a>.</div>

Color text and another color, and now back to the same. Oh, and here's a different background color just in case you need it! More info: HTML Color, CSS color Property, CSS background-color Property, Text Color, CSS Color Codes.

Code

Result

<p style="font-size:18pt">Text size using points.</p><p style="font-size:18px">Text size using pixels.</p><p style="font-size:larger">Text size using relative sizes.</p> <div class="more-info">More info: <a href="/html/codes/html_font_size_code.cfm">Font Size Code</a>, <a href="/html/codes/text/">HTML Text</a>, <a href="/css/properties/css_font-size.cfm">CSS <code>font-size</code> Property</a>.</div>

Text size using points. Text size using pixels. Text size using relative sizes. More info: Font Size Code, HTML Text, CSS font-size Property.

Code	Result
<p style="font-family:Georgia, Garamond, Serif;">Preferred serif font.</p> <div class="more-info">More info: <a href="/css/properties/css_font-family.cfm">CSS <code>font-family</code></a>, <a href="/html/html_font_code.cfm">Font Code</a>.</div>	Preferred serif font. More info: CSS font-family, Font Code.

Code	Result
<pre style="color:black">Preformatted text displays just as you type it... ...line breaks, spaces... ...and all! </pre> <div class="more-info">More info: <a href="/html/tags/html_pre_tag.cfm"><code>&lt;pre&gt;</code></a></div>	Preformatted text displays just as you type it... ...line breaks, spaces... ...and all! More info: <pre>

Code	Result
<tt>Teletype text - sometimes referred to as typewriter text.</tt> <div class="more-info">More info: <a href="/html/tags/html_tt_tag.cfm"><code>&lt;tt&gt;</code></a></div>	Teletype text - sometimes referred to as typewriter text. More info: <tt>

Code	Result
<cite>Citation text.</cite> <div class="more-info">More info: <a href="/html/tags/html_cite_tag.cfm"><code>&lt;cite&gt;</code></a></div>	Citation text. More info: <cite>

Code	Result
<em>Emphasized text.</em> <div class="more-info">More info: <a href="/html/tags/html_em_tag.cfm"><code>&lt;em&gt;</code></a></div>	Emphasized text. More info: <em>

Code	Result
<code style="color:black">Code text.</code> <div class="more-info">More info: <a href="/html/tags/html_code_tag.cfm"><code>&lt;code&gt;</code></a></div>	Code text. More info: <code>

Code	Result
<big>Big text.</big> <div class="more-info">More info: <a href="/html/tags/html_big_tag.cfm"><code>&lt;big&gt;</code></a></div>	Big text. More info: <big>

Code	Result
<small>Small text.</small> <div class="more-info">More info: <a href="/html/tags/html_small_tag.cfm"><code>&lt;small&gt;</code></a></div>	Small text. More info: <small>

Code	Result
<p>Here's a blockquote:</p> <blockquote>Contents should not be swallowed. This is due to the enormous amount of harmful chemicals that has gone into this burger.</blockquote> <p>That was a blockquote.</p> <div class="more-info">More info: <a href="/html/tags/html_blockquote_tag.cfm"><code>&lt;blockquote&gt;</code></a></div>	Here's a blockquote: Contents should not be swallowed. This is due to the enormous amount of harmful chemicals that has gone into this burger. That was a blockquote. More info: <blockquote>

Code	Result
<del>Delete this text.</del> <div class="more-info">More info: <a href="/html/tags/html_del_tag.cfm"><code>&lt;del&gt;</code></a></div>	Delete this text. More info: <del>

Code	Result
<ins>Insert this text.</ins> <div class="more-info">More info: <a href="/html/tags/html_ins_tag.cfm"><code>&lt;ins&gt;</code></a></div>	Insert this text. More info: <ins>

Code	Result
<kbd>Keyboard text - text to be entered by the user.</kbd> <div class="more-info">More info: <a href="/html/tags/html_kbd_tag.cfm"><code>&lt;kbd&gt;</code></a></div>	Keyboard text - text to be entered by the user. More info: <kbd>

Code	Result
<q>Quotation text.</q> <div class="more-info">More info: <a href="/html/tags/html_q_tag.cfm"><code>&lt;q&gt;</code></a></div>	Quotation text. More info: <q>

Code	Result
<samp>Sample text (output from a computer program).</samp> <div class="more-info">More info: <a href="/html/tags/html_samp_tag.cfm"><code>&lt;samp&gt;</code></a></div>	Sample text (output from a computer program). More info: <samp>

Code	Result
<var>Variable text.</var> <div class="more-info">More info: <a href="/html/tags/html_var_tag.cfm"><code>&lt;var&gt;</code></a></div>	Variable text. More info: <var>

Code	Result
<dfn>Definition.</dfn>: To define the meaning of a word, phrase or term. <div class="more-info">More info: <a href="/html/tags/html_dfn_tag.cfm"><code>&lt;dfn&gt;</code></a></div>	Definition.: To define the meaning of a word, phrase or term. More info: <dfn>

Images

Code	Result
<p>Basic image:</p> <img src="/pix/milford_sound/milford_sound_t.jpg" style="max-width:100%;" alt="Milford Sound in New Zealand" /> <div class="more-info">More info: <a href="/html/tags/html_img_tag.cfm"><code>&lt;img&gt;</code></a>.</div>	Basic image: More info: <img>.

Code	Result
<p>Image with border:</p> <img src="/pix/milford_sound/milford_sound_t.jpg" style="max-width:95%;border:5px solid black;" alt="Milford Sound in New Zealand" /> <div class="more-info">More info: <a href="/html/codes/html_image_borders.cfm">Image Borders</a>, <a href="/css/properties/css_border.cfm">CSS <code>border</code> Property</a>.</div>	Image with border: More info: Image Borders, CSS border Property.

Code

Result

<p>Linked image:</p> <a href="http://www.quackit.com/travel/new_zealand/milford_sound"><img src="/pix/milford_sound/milford_sound_t.jpg" style="max-width:100%;" alt="Milford Sound in New Zealand" /></a> <div class="more-info">More info: <a href="/html/codes/html_image_link_code.cfm">Image Link Code</a>, <a href="/html/tutorial/html_image_maps.cfm">Image Maps</a>, <a href="/html/tags/html_a_tag.cfm"><code>&lt;a&gt;</code></a>.</div>

Linked image: More info: Image Link Code, Image Maps, <a>.

Code	Result
<p>Linked image with no borders:</p> <a href="http://www.quackit.com/travel/new_zealand/milford_sound"><img src="/pix/milford_sound/milford_sound_t.jpg" style="max-width:100%;" alt="Milford Sound in New Zealand" border="0" /></a> <div class="more-info">More info: <a href="/html/codes/html_image_link_code.cfm">Image Link Code</a>.</div>	Linked image with no borders: More info: Image Link Code.

Tables

Code

Result

<style type="text/css"> table.example1 {background-color:transparent;border-collapse:collapse;} table.example1 td {border:1px solid black;padding:5px;width:50%;} </style> <table class="example1"> <tr> <td>Table cell 1</td><td>Table cell 2</td> </tr> </table> <div class="more-info">More info: <a href="/html/tags/html_table_tag.cfm"><code>&lt;table&gt;</code></a>, <a href="/html/codes/tables/">HTML Tables</a>, <a href="/html/html_table_generator.cfm">Table Generator</a>.</div>

Table cell 1 Table cell 2 More info: <table>, HTML Tables, Table Generator.

Code

Result

<style type="text/css"> table.example2 {background-color:transparent;border-collapse:collapse;width:100%;} table.example2 th, table.example2 td {text-align:center;border:1px solid black;padding:5px;} table.example2 th {background-color:AntiqueWhite;} table.example2 td:first-child {width:20%;} </style> <table class="example2"> <tr> <th>Table header</th><th>Table header</th> </tr> <tr> <td>Table cell 1</td><td>Table cell 2</td> </tr> </table> <div class="more-info">More info: <a href="/html/tags/html_th_tag.cfm"><code>&lt;th&gt;</code></a>, <a href="/html/html_table_tutorial.cfm">HTML Table Tutorial</a>, <a href="/html/html_table_generator.cfm">Table Generator</a>.</div>

Table header Table header Table cell 1 Table cell 2 More info: <th>, HTML Table Tutorial, Table Generator.

Code

Result

<style type="text/css"> table.example3 {background-color:transparent;border-collapse:collapse;width:100%;} table.example3 th, table.example3 td {text-align:center;border:1px solid black;padding:5px;} table.example3 th {background-color:AntiqueWhite;} table.example3 td:first-child {width:20%;} </style> <table class="example3"> <tr> <th colspan="2">Table header</th> </tr> <tr> <td width="20%">Table cell 1</td><td>Table cell 2</td> </tr> </table> <div class="more-info">More info: <a href="/html/codes/tables/">HTML Tables</a>, <a href="/html/codes/tables/html_table_border.cfm">Table Borders</a>, <a href="/html/codes/tables/html_table_color.cfm">Table Color</a>.</div>

Table header Table cell 1 Table cell 2 More info: HTML Tables, Table Borders, Table Color.

Code

Result

<style type="text/css"> table.example4 {background-color:transparent;border-collapse:collapse;width:100%;} table.example4 th, table.example4 td {text-align:center;border:1px solid black;padding:5px;} table.example4 th {background-color:AntiqueWhite;} table.example4 th:first-child {width:20%;} </style> <table class="example4"> <tr> <th rowspan="2">Table header</th><td>Table cell 1 </tr> <tr> <td>Table cell 2</td> </tr> </table> <div class="more-info">More info: <a href="/html/html_table_tutorial.cfm">HTML Table Tutorial</a>, <a href="/html/html_table_generator.cfm">Table Generator</a>.</div>

Table header Table cell 1 Table cell 2 More info: HTML Table Tutorial, Table Generator.

Code

Result

<style type="text/css"> table.example5 {background-color:GreenYellow;border:1px dotted black;width:100%;} table.example5 th, table.example5 td {text-align:center;border:0;padding:5px;background-color:transparent;} table.example5 th {background-color:LimeGreen;color:white;} table.example5 th:first-child {width:20%;} </style> <table class="example5"> <tr> <th rowspan="2">Table header</th><td>Table cell 1 </tr> <tr> <td>Table cell 2</td> </tr> </table> <div class="more-info">More info: <a href="/html/codes/tables/html_table_background.cfm">Table Backgrounds</a>, <a href="/html/codes/tables/html_table_background_color.cfm">Table Background Color</a>.</div>

Table header Table cell 1 Table cell 2 More info: Table Backgrounds, Table Background Color.

Forms

Code	Result
<input type="text" size="20" value="Type something..." /> <div class="more-info">More info: <a href="/html/tags/html_input_tag.cfm"><code>&lt;input&gt;</code></a>.</div>	More info: <input>.

Code	Result
<textarea cols="10" rows="5">Type something</textarea> <div class="more-info">More info: <a href="/html/tags/html_textarea_tag.cfm"><code>&lt;textarea&gt;</code></a>.</div>	Type something More info: <textarea>.

Code	Result
<input type="radio" name="cheat_sheet_example" value="Option1" /> Option 1 <input type="radio" name="cheat_sheet_example" value="Option2" /> Option 2 <div class="more-info">More info: <a href="/html/tags/html_input_tag.cfm"><code>&lt;input&gt;</code></a>.</div>	Option 1 Option 2 More info: <input>.

Code	Result
<input type="checkbox" name="cheat_sheet_example" value="Option1" /> Option 1 <input type="checkbox" name="cheat_sheet_example" value="Option2" /> Option 2 <div class="more-info">More info: <a href="/html/tags/html_input_tag.cfm"><code>&lt;input&gt;</code></a>.</div>	Option 1 Option 2 More info: <input>.

Code	Result
<select name="cheat_sheet_example"><option value="Option1">Option 1<option value="Option2">Option 2<option value="Option3">Option 3</select> <div class="more-info">More info: <a href="/html/tags/html_select_tag.cfm"><code>&lt;select&gt;</code></a>.</div>	Option 1Option 2Option 3 More info: <select>.

Code	Result
<input type="submit" value="Send Away!" /> <div class="more-info">More info: <a href="/html/tags/html_input_tag.cfm"><code>&lt;input&gt;</code></a>.</div>	More info: <input>.

Code	Result
<button>Send Away!</button> <div class="more-info">More info: <a href="/html/tags/html_button_tag.cfm"><code>&lt;button&gt;</code></a>.</div>	Send Away! More info: <button>.

Code	Result
<textarea onclick="this.focus();this.select()">&lt;input type="image" src="/pix/smile.gif" /&gt; </textarea> <div class="more-info">More info: <a href="/html/tags/html_textarea_tag.cfm"><code>&lt;textarea&gt;</code></a>, <a href="/html/codes/html_text_box_code.cfm">Textbox Code</a>, <a href="/html/html_generators/html_text_box_generator.cfm">Textbox Generator</a>.</div>	<input type="image" src="/pix/smile.gif" /> More info: <textarea>, Textbox Code, Textbox Generator.

Code	Result
<ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> <div class="more-info">More info: <a href="/html/tags/html_ol_tag.cfm"><code>&lt;ol&gt;</code></a>, <a href="/html/tags/html_li_tag.cfm"><code>&lt;li&gt;</code></a>, <a href="/html/codes/list/">HTML Lists</a>.</div>	List item 1 List item 2 List item 3 More info: <ol>, <li>, HTML Lists.

Code	Result
<ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <div class="more-info">More info: <a href="/html/tags/html_ul_tag.cfm"><code>&lt;ul&gt;</code></a>, <a href="/html/tags/html_li_tag.cfm"><code>&lt;li&gt;</code></a>, <a href="/html/codes/list/">HTML Lists</a>.</div>	List item 1 List item 2 List item 3 More info: <ul>, <li>, HTML Lists.

Code	Result
<dl> <dt>Term 1</dt> <dd>Definition of term 1</dd> <dt>Term 2</dt> <dd>Definition of term 2</dd> </dl> <div class="more-info">More info: <a href="/html/tags/html_dl_tag.cfm"><code>&lt;dl&gt;</code></a>, <a href="/html/tags/html_dt_tag.cfm"><code>&lt;dt&gt;</code></a>, <a href="/html/tags/html_dd_tag.cfm"><code>&lt;dd&gt;</code></a>, <a href="/html/codes/list/">HTML Lists</a>.</div>	Term 1 Definition of term 1 Term 2 Definition of term 2 More info: <dl>, <dt>, <dd>, HTML Lists.

Inline Frames

Code	Result
<iframe src="/html/templates/frames/related.html" width="150" height="110" scrolling="auto" frameborder="1"> <!--This bit is only viewed by browsers that don't support inline frames --> Your browser doesn't support inline frames. </iframe> <div class="more-info">More info: <a href="/html/tags/html_iframe_tag.cfm"><code>&lt;iframe&gt;</code></a>.</div>	More info: <iframe>.

Frames

Code

Result

<p><a href="/html/tags/frame_example_frameset.html" target="_blank">View the result</a></p> <p>The frameset page:</p><textarea onclick="this.focus();this.select()" rows="4">&lt;html&gt; &lt;head&gt; &lt;title&gt;Frameset page&lt;title&gt; &lt;/head&gt; &lt;frameset cols = "25%, *"&gt; &lt;noframes&gt; &lt;body&gt;Your browser doesn't support frames. Therefore, this is the noframe version of the site.&lt;/body&gt; &lt;/noframes&gt; &lt;frame src ="/html/tags/frame_example_left.html" /&gt; &lt;frame src ="/html/tags/frame_example_right.html" /&gt; &lt;/frameset&gt; &lt;/html&gt; </textarea> <p>The left frame <small>frame_example_left.html</small>:</p> <textarea onclick="this.focus();this.select()" rows="4">&lt;html&gt; &lt;html&gt; &lt;body style="background-color:green"&gt; &lt;p&gt;This is the left frame (frame_example_left.html).&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </textarea> <p>The right frame <small>frame_example_right.html</small>:</p> <textarea onclick="this.focus();this.select()" rows="4">&lt;html&gt; &lt;html&gt; &lt;body style="background-color:yellow"&gt; &lt;p&gt;This is the right frame (frame_example_right.html).&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </textarea> <div class="more-info">More info: <a href="/html/tags/html_frame_tag.cfm"><code>&lt;frame&gt;</code></a>, <a href="/html/tags/html_frameset_tag.cfm"><code>&lt;frameset&gt;</code></a>, <a href="/html/tags/html_noframes_tag.cfm"><code>&lt;noframes&gt;</code></a>, <a href="/html/codes/html_frames_code.cfm">Frames Code</a>, <a href="/html/templates/">Frames Templates</a>, <a href="/html/disadvantages_of_html_frames.cfm">Disadvantages of Frames</a>.</div>

View the result The frameset page: <html> <head> <title>Frameset page<title> </head> <frameset cols = "25%, *"> <noframes> <body>Your browser doesn't support frames. Therefore, this is the noframe version of the site.</body> </noframes> <frame src ="/html/tags/frame_example_left.html" /> <frame src ="/html/tags/frame_example_right.html" /> </frameset> </html> The left frame frame_example_left.html: <html> <html> <body style="background-color:green"> <p>This is the left frame (frame_example_left.html).</p> </body> </html> The right frame frame_example_right.html: <html> <html> <body style="background-color:yellow"> <p>This is the right frame (frame_example_right.html).</p> </body> </html> More info: <frame>, <frameset>, <noframes>, Frames Code, Frames Templates, Disadvantages of Frames.

Enjoy this page?

2. Link to this page (copy/paste into your own website or blog):
   <a href="http://www.quackit.com/html/html_cheat_sheet.cfm">HTML Cheat Sheet</a> from Quackit.com
3. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!