HTML cheat sheet for bloggers
No time to learn HTML? Simply copy, paste and edit... and voila!
Last updated June 27, 2014
This is best viewed on tablets in landscape view, so go on... turn it sideways!
Rate this post

INSTRUCTIONS: 1) Find the HTML you’re after. 2) Highlight it with your mouse. 3) CTRL+C/Command+C will copy the text from this page. 4) CTRL+V/Command+V will paste it into your blog post’s HTML editor, sidebar, newsletter or more. 5) Edit it to show what you need! (PS: Some of the HTML’s styled with a li’l inline CSS. Use sparingly! If you want fonts a different colour, for example, it’s better to edit your theme’s CSS.)

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!

Aligned heading*

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

Font size*

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

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.

Strong text

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

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.

Trademark symbol

Use either the number or name to show an HTML entity, though the browser support for numbers is better. Here’s both for a ™.

Highlighted text*

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

HTML comment

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

Anchored text (part 1/2)

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.

An A-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.


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.

Ordered (numbered) list

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

Insert image

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

Linked image, new window

Hyperlinked images can be used in your sidebars. For example: Buttons, badges, advertisements and more.

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 w/ headings

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

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.

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!

Font colour*

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

Small text

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


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

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.

Registered trademark

Use the ® symbol to indicate that your blog’s logo or tagline is a registered trademark (so long as it is a registered trademark, of course!).

A non-breaking space

Want an extra space between words? Don’t just push space, add a non-breaking space. Tip: Don’t use this to create columns.

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.

Anchored text (part 2/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 monthly list

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

Mail-to w/ subject

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

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.

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.

Aligned image within text

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

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 w/ border

Give your table a border by adding border=”1″ to the first line. Adjust the number to suit (increased number = increased thickness).

A heading

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

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.

Font family*

Want to make some words a different font? Use this, replacing the font name with another web-friendly font.

Emphasised text

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


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

Copyright symbol

Some characters are reserved in HTML. To dispaly them, entities must be used. Here is the entity number and name for ©.

Heart symbol

You’ve no doubt seen this symbol on the internet before! The heart symbol just shares so much love, doesn’t it? ♥ ♥ ♥

Text area box

To create an HTML text area box (a little bit like the boxes on this page, but not quite as fancy…), use this and edit as needed.

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.

Anchor 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 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.

Mail-to w/ subject + body

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

Definition list

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

Insert linked image

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

Grab this button!

Use this to make it easy for readers to place your 125×125 pixel button on their blog. Can also be used as an ad.

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 w/ specified width

Make your table a specified width. Add in width=”400″ to the first line. Edit the number to suit you.

Disclosure: This page is monetised with affiliate links in accordance with the site's disclosure and terms of use policies. Comments and ratings are those of visitors, and do not necessarily reflect the opinions of the owners of this site.

*Disclosure: This website is independently owned, operated and monetised with (but not limited to) ads and affiliate links. Your viewing and use of this site is conditional upon your agreement and compliance with the terms of use. Designed by Bree using Headway Themes.
Copyright © 2009 - 2014