The original copy & paste HTML cheat sheet

A paragraph

HTML tags are letters or words surrounded by angle brackets. A paragraph has a “start” tag and an “end” tag. Think: wax on, wax off!

<p>Your paragraph here.</p>

Aligned paragraph*

If you don’t want your paragraph centred, as in the example below, replace “center” with left, right or justify. This is inline CSS.

<p style="text-align: center;"> Your paragraph here.</p>

A heading

Define headings from <h1> to <h6>. The more important the heading, the smaller the number. Use <h3> to <h6> in posts.

<h3>Your heading here</h3>

Aligned heading*

If you don/t want your heading centered, as in the example below, replace “center” with left or right. Tip: “center” is in US spelling!

<h3 style="text-align: center;">Your heading here</h3>

A break

Used if you want to start a new line without using a paragraph. Note: It only needs one tag, and the forward slash has moved!

Your word or sentence here.<br />

A horizontal line

Use this HTML to place a horizontal line within your post (used to separate content). It can be prettied-up with CSS later.

<hr />

Font size*

Want to make some words a different size? Use this, replacing the percentage (you may also use px or em). Use inline CSS sparingly!

<span style="font-size: 150%;">Your text here</span>

Font colour*

Want to make some words a different colour? Use this, replacing the six-character hexadecimal value with one of your choice.

<span style="color: #FFD1C2;">Your text here</span>

Font family*

Want to make some words a different font? Replace the font name with another web-friendly font. Use this inline CSS sparingly!

<span style="font-family: georgia, serif;">Your text here</span>

Block quote

To make it known that a piece of text is a quotation, use a <blockquote> tag to emphasise the fact to your blog’s readers.

<blockquote>Put quote here</blockquote>

Small text

Useful if you want to make a few words or one sentence appear slightly smaller, such as a disclaimer or copyright notice.

<small>Your text here</small>

Emphasised text

To make a certain word or phrase stand out or appear important, make it emphasised. Most browsers render as italic.

<em>Your emphasised text here</em>

Strong text

To make a word or phrase stand out or appear important, make it strong. Most browsers render “strong” text as “bold”.

<em>Your strong text here</em>

Subscript

To make certain letters or words appear _{smaller and lower} (as in a footnote or endnote), use subscripted text.

<sub>Your strong text here</sub>

Superscript

To make certain letters or words appear ^{smaller and higher} (as in a footnote or endnote), use superscripted text.

<sup>Your strong text here</sup>

Deleted text

Show that you’ve deleted some text or words in a document by using the <del> tag. It will often appear as a strikethrough.

<del>Your text here</del>

Inserted text

Show that you’ve added inserted some text into a document by using the <ins> tag. Use it with <del> to put it into context.

<del>Your deleted text here</del><ins>Your inserted text here</ins>

Highlighted text

To make a word appear as though it has been highlighted, give it a background colour of your choice. Colour options here.

<span style="background-color: #FFD1C2;">Your text here</span>

Text area box

To create an HTML text area box (which is kind of similar to the boxes used on this page), use this and edit as needed.

<textarea>Your text here.</textarea>

HTML comment

Comments can be used to make “behind the scenes” notes within a post. E.g.: “Quoted edited with correct statistic”.

<!––The comment or note you want to make goes here––>

Hyperlinked text

Use this HTML to link a word, or words, in your post or within your sidebar or newsletter to another post, page, or website.

<a href="http://urlgoeshere.com/">Your text goes here here</a>

Linked text, new window

If you want a hyperlinked image or piece of text to open up in a new window, add target=”_blank” to the HTML.

<<a href="http://urlgoeshere.com/" target="_blank" rel="noopener noreferrer">Your text goes here here</a>

Anchored text (part 1)

For a link that takes you to another part of the same page, this is placed where you want to end up. Eg: at the top of your page.

<a name="top"></a>

Anchored text (part 2)

Visitors click this to be taken to the place where part 1 was put. Eg: Back To Top. The name (in part 1) and href values must match.

<a href="#top">Back to top</a>

Anchored to another page

To link to a part of another page (Eg: “See FAQ #4”) place part 1 on the other page. Text after # must match pt 1 name value.

<a href="http://yoururllhere.com/pagenamehere#faq4">See frequently asked question number 4</a>

Ordered (numbered) list

Use this HTML to place items into a numbered list. Add in more items by adding <li> before and </li> after.

<dl>
<dt>blogger</dt>
<dd>free, easy-to-use platform</dd>
<dt>wordpress</dt>
<dd>highly customisable, lots of plugins available</dd>
</dl>

Unordered (bulleted) list

Use this HTML to place items into a bulleted list. Add in more items by adding <li> before and </li> after each item in the list..

<ul>
<li>Chanel</li>
<li>Dior</li>
<li>Lagerfeld</li>
<li>Givenchy</li>
<li>Gaultier</li>
<li>Darling. names, names, names</li>
</ul>

Definition list

A definition list is a list of items with a description of each one. For example: Blogging platform: Platform qualities.

<dl>
<dt>blogger</dt>
<dd>free, easy-to-use platform</dd>
<dt>wordpress</dt>
<dd>highly customisable, lots of plugins available</dd>
</dl>

An A to Z list

This is just like what was used to create the blogging glossary! Each letter is clickable, and there are “back to top” links.

<a name="top"></a>
<p>Your introduction goes here.</p>
<p style="text-align: center;"><a href="#a">A</a> | <a href="#b">B</a> | <a href="#c">C</a> | <a href="#d">D</a> | <a href="#e">E</a> | <a href="#f">F</a> | <a href="#g">G</a> | <a href="#h">H</a> | <a href="#i">I</a> | <a href="#j">J</a> | <a href="#k">K</a> | <a href="#l">L</a> | <a href="#m">M</a> | <a href="#n">N</a> | <a href="#o">O</a> | <a href="#p">P</a> | <a href="#q">Q</a> | <a href="#r">R</a> | <a href="#s">S</a> | <a href="#t">T</a> | <a href="#u">U</a> | <a href="#v">V</a> | <a href="#w">W</a> | <a href="#x">X</a> | <a href="#y">Y</a> | <a href="#z">Z</a></p>
<h3><a name="a"></a>A</h3>
<ul>
<li>Your first point goes here</li>
<li>Add more items to your list by adding <li> before and </li> after</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="b"></a>B</h3>
<ul>
<li>Your first point goes here</li>
<li>Add more items to your list by adding <li> before and </li> after</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="c"></a>C</h3>
<ul>
<li>Your first point goes here</li>
<li>Add more items to your list by adding <li> before and </li> after</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="d"></a>D</h3>
<ul>
<li>Your first point goes here</li>
<li>Add more items to your list by adding <li> before and </li> after</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="e"></a>E</h3>
<ul>
<li>Your first point goes here</li>
<li>Add more items to your list by adding <li> before and </li> after</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="f"></a>F</h3>
<ul>
<li>Your first point goes here</li>
<li>Add more items to your list by adding <li> before and </li> after</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="g"></a>G</h3>
<ul>
<li>Your first point goes here</li>
<li>Add more items to your list by adding <li> before and </li> after</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="h"></a>H</h3>
<ul>
<li>Your first point goes here</li>
<li>Add more items to your list by adding <li> before and </li> after</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="i"></a>I</h3>
<ul>
<li>Your first point goes here</li>
<li>Add more items to your list by adding <li> before and </li> after</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="j"></a>J</h3>
<ul>
<li>Your first point goes here</li>
<li>Add more items to your list by adding <li> before and </li> after</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="k"></a>K</h3>
<ul>
<li>Your first point goes here</li>
<li>Add more items to your list by adding <li> before and </li> after</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="l"></a>L</h3>
<ul>
<li>Your first point goes here</li>
<li>Add more items to your list by adding <li> before and </li> after</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="m"></a>M</h3>
<ul>
<li>Your first point goes here</li>
<li>Add more items to your list by adding <li> before and </li> after</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="n"></a>N</h3>
<ul>
<li>Your first point goes here</li>
<li>Add more items to your list by adding <li> before and </li> after</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="o"></a>O</h3>
<ul>
<li>Your first point goes here</li>
<li>Add more items to your list by adding <li> before and </li> after</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="p"></a>P</h3>
<ul>
<li>Your first point goes here</li>
<li>Add more items to your list by adding <li> before and </li> after</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="q"></a>Q</h3>
<ul>
<li>Your first point goes here</li>
<li>Add more items to your list by adding <li> before and </li> after</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="r"></a>R</h3>
<ul>
<li>Your first point goes here</li>
<li>Add more items to your list by adding <li> before and </li> after</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="s"></a>S</h3>
<ul>
<li>Your first point goes here</li>
<li>Add more items to your list by adding <li> before and </li> after</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="t"></a>T</h3>
<ul>
<li>Your first point goes here</li>
<li>Add more items to your list by adding <li> before and </li> after</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="u"></a>U</h3>
<ul>
<li>Your first point goes here</li>
<li>Add more items to your list by adding <li> before and </li> after</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="v"></a>V</h3>
<ul>
<li>Your first point goes here</li>
<li>Add more items to your list by adding <li> before and </li> after</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="w"></a>W</h3>
<ul>
<li>Your first point goes here</li>
<li>Add more items to your list by adding <li> before and </li> after</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="x"></a>X</h3>
<ul>
<li>Your first point goes here</li>
<li>Add more items to your list by adding <li> before and </li> after</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="y"></a>Y</h3>
<ul>
<li>Your first point goes here</li>
<li>Add more items to your list by adding <li> before and </li> after</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="z"></a>Z</h3>
<ul>
<li>Your first point goes here</li>
<li>Add more items to your list by adding <li> before and </li> after</li>
<li><a href="#top">Back to top</a></li>
</ul>
<p>

A monthly list

This can be used to create a monthly calendar. Includes a clickable list users can use to “jump” to the month they’re after.

<a name="top"></a>Your introduction goes here.</p>
<p style="text-align: center;"><a href="#jan">January</a> | <a href="#feb">February</a> | <a href="#mar">March</a> | <a href="#apr">April</a> | <a href="#may">May</a> | <a href="#jun">June</a> | <a href="#jul">July</a> | <a href="#aug">August</a> | <a href="#sep">September</a> | <a href="#oct">October</a> | <a href="#nov">November</a> | <a href="#dec">December</a></p>
<h3><a name="jan"></a>January</h3>
<ul>
<li>Your first point goes here</li>
<li>You can add as many points as you like</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="feb"></a>February</h3>
<ul>
<li>Your first point goes here</li>
<li>You can add as many points as you like</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="mar"></a>March</h3>
<ul>
<li>Your first point goes here</li>
<li>You can add as many points as you like</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="apr"></a>April</h3>
<ul>
<li>Your first point goes here</li>
<li>You can add as many points as you like</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="may"></a>May</h3>
<ul>
<li>Your first point goes here</li>
<li>You can add as many points as you like</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="jun"></a>June</h3>
<ul>
<li>Your first point goes here</li>
<li>You can add as many points as you like</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="jul"></a>July</h3>
<ul>
<li>Your first point goes here</li>
<li>You can add as many points as you like</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="aug"></a>August</h3>
<ul>
<li>Your first point goes here</li>
<li>You can add as many points as you like</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="sep"></a>September</h3>
<ul>
<li>Your first point goes here</li>
<li>You can add as many points as you like</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="oct"></a>October</h3>
<ul>
<li>Your first point goes here</li>
<li>You can add as many points as you like</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="nov"></a>November</h3>
<ul>
<li>Your first point goes here</li>
<li>You can add as many points as you like</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="dec"></a>December</h3>
<ul>
<li>Your first point goes here</li>
<li>You can add as many points as you like</li>
<li><a href="#top">Back to top</a></li>
</ul>

A schedule/contents list

Use the following to create a clickable schedule or program for your visitors! For example: A Monday-to-Friday to-do list.

<a name="top"></a>Your introduction goes here.</p>
<p style="text-align: center;"><a href="#sun">Sunday</a> | <a href="#mon">Monday</a> | <a href="#tue">Tuesday</a> | <a href="#wed">Wednesday</a> | <a href="#thurs">Thursday</a> | <a href="#fri">Friday</a> | <a href="#sat">Saturday</a></p>
<h3><a name="sun"></a>Sunday</h3>
<ul>
<li>Your first point goes here</li>
<li>You can add as many points as you like</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="mon"></a>Monday</h3>
<ul>
<li>Your first point goes here</li>
<li>You can add as many points as you like</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="tue"></a>Tuesday</h3>
<ul>
<li>Your first point goes here</li>
<li>You can add as many points as you like</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="wed"></a>Wednesday</h3>
<ul>
<li>Your first point goes here</li>
<li>You can add as many points as you like</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="thurs"></a>Thursday</h3>
<ul>
<li>Your first point goes here</li>
<li>You can add as many points as you like</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="fri"></a>Friday</h3>
<ul>
<li>Your first point goes here</li>
<li>You can add as many points as you like</li>
<li><a href="#top">Back to top</a></li>
</ul>
<h3><a name="sat"></a>Saturday</h3>
<ul>
<li>Your first point goes here</li>
<li>You can add as many points as you like</li>
<li><a href="#top">Back to top</a></li>
</ul>

Mail to

While it’s probably better to use a contact form over a Mail-To link (as it helps prevent spam!), this is how you’d do it.

<a href="mailto:name@domainname.com">e-mail us</a>

Mail to with subject

To include a subject title in your mail-to link, use the following. Use %20 where the spaces between words should occur.

<a href="mailto:name@domainname.com?subject=your%20subject%20here">e-mail us</a>

Mail to with subject & body

To include text within an e-mail. It’s useful to gather info (Eg: “Your phone number:”). Use %0A to create paragraphs.

<a href="mailto:name@domainname.com?subject=your%20subject%20here&body=your%20phone%20number:%0ayour%20twitter%20handle:">e-mail us</a>

Insert image

Edit image URL, width and height in pixels. “Alt” describes the image (good for SEO!), “title” displays when hovered over.

<img title="title text" src="https://yourdomainnamehere.com/imagenamehere.gif" alt="alt text" width="100" height="150" />

Insert floating image

Want your image to the left or right of a paragraph? Use this and edit the align=”right” with align=”left” if required.

<img title="title text" src="https://yourimageurlhere.com/image.gif" alt="alt text" width="100" height="150" align="right" />

Insert linked image

Hyperlinked images can be used with posts and sidebars. For example: Buttons (see below!), badges, ads and more.

<a href="http://yoururlhere.com/"><img src="https://yourimageurlhere.com/foldername/imagename.gif" alt="alt text" width="100" height="150" /></a>

Linked image, new window

Hyperlinked images can be used with posts and sidebars. This HTML will open up your hyperlinked image in a new window.

<a href="http://yoururlhere.com/" target="_blank" rel="noopener noreferrer" rel="noopener"><img title="title text" src="https://yourimageurlhere.com/foldername/imagename.gif" alt="alt text" width="100" height="150" /></a>

Aligned image within text

By default, an image placed with text will align with the bottom. Alternatively you can choose “top” or “middle”.

<img title="title text" src="https://yourimageurlhere.com/image.gif" alt="alt text" width="100" height="150" align="top" />

Table 2×2

For the easiest way to add a 2×2 table to your blog, copy and paste this HTML into your post’s HTML editor.

<table>
<tbody>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</tbody>
</table>

Table 3×3

For the easiest way to add a 3×3 table to your blog, copy and paste this HTML into your post’s HTML editor.

<table>
<tbody>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
</tr>
<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
<td>row 3, cell 3</td>
</tr>
</tbody>
</table>

Table 4×4

For the easiest way to add a 4×4 table to your blog, copy and paste this HTML into your post’s HTML editor.

<table>
<tbody>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
<td>row 1, cell 4</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
<td>row 2, cell 4</td>
</tr>
<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
<td>row 3, cell 3</td>
<td>row 3, cell 4</td>
</tr>
<tr>
<td>row 4, cell 1</td>
<td>row 4, cell 2</td>
<td>row 4, cell 3</td>
<td>row 4, cell 4</td>
</tr>
</tbody>
</table>

Table 5×5

For the easiest way to add a 4×4 table to your blog, copy and paste this HTML into your post’s HTML editor.

<table>
<tbody>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
<td>row 1, cell 4</td>
<td>row 1, cell 5</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
<td>row 2, cell 4</td>
<td>row 2, cell 5</td>
</tr>
<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
<td>row 3, cell 3</td>
<td>row 3, cell 4</td>
<td>row 3, cell 5</td>
</tr>
<tr>
<td>row 4, cell 1</td>
<td>row 4, cell 2</td>
<td>row 4, cell 3</td>
<td>row 4, cell 4</td>
<td>row 4, cell 5</td>
</tr>
<tr>
<td>row 5, cell 1</td>
<td>row 5, cell 2</td>
<td>row 5, cell 3</td>
<td>row 5, cell 4</td>
<td>row 5, cell 5</td>
</tr>
</tbody>
</table>

Table 3×2

For the easiest way to add a 3×2 table to your blog, copy and paste this HTML into your post’s HTML editor.

<table>
<tbody>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
</tr>
</tbody>
</table>

Table 4×2

For the easiest way to add a 4×2 table to your blog, copy and paste this HTML into your post’s HTML editor.

<table>
<tbody>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
<td>row 1, cell 4</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
<td>row 2, cell 4</td>
</tr>
</tbody>
</table>

Table with headings

To give your table columns headings and make things clearer, add <th> and </th> tags to the start of HTML (one tag per column).

<table>
<thead>
<tr>
<th>heading 1</th>
<th>heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</tbody>
</table>

Table with border

HTML tags are letters or words surrounded by angle brackets. A paragraph has a “start” tag and an “end” tag. Think: wax on, wax off!

<table border="1">
<tbody>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</tbody>
</table>

Table with specified width

HTML tags are letters or words surrounded by angle brackets. A paragraph has a “start” tag and an “end” tag. Think: wax on, wax off!

<table width="400">
<tbody>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</tbody>
</table>

Copyright symbol ©

© or ©

Trademark symbol ™

™ or ™

Registered trademark ®

® or ®

Heart symbol ♥

♥ or ♥

Spades symbol ♠

♠ or ♠

Diamonds symbol ♦

♦ or ♦

Clubs symbol ♣

♣ or ♣

Up arrow ↑

↑ or ↑

Right arrow →

→ or →

Down arrow ↓

↓ or ↓

Left arrow ←

← or ←

Double left arrow «

« or «

Double right arrow »

» or »

Euro sign €

€ or €

Cent sign ¢

¢ or ¢

Pound sign £

£ or £

Yen sign ¥

¥ or ¥

A non-breaking space

  or  

An ampersand &

& or &

Less than symbol <

< or <

Greater than symbol >

> or >

Quotation mark “

" or &quot:

Bullet •

• or •

Em dash —

— or —

En dash –

– or –

Horizontal ellipsis …

… or …

Degree sign °

° or °

Devision sign ÷

÷ or ÷

Minus sign −

− or −

Multiplication sign ×

× or ×

Half symbol ½

½ or ½

Quarter symbol ¼

¼ or ¼

Three-quarter symbol ¾

¾ or ¾

Superscript 1 ¹

¹ or ¹

Superscript 2 ²

² or ²

Superscript 3 ³

³ or ³