Hello there smartphone and tablet users! This HTML Cheat Sheet is best viewed on a desktop, so check it out next time you're sittin' at your laptop!
LoadingFave this

HTML cheat sheet for bloggers

Welcome! Here you'll find some of the more commonly used HTML and entities. Some of it's styled with a li'l inline CSS (marked with an * – it's only meant for occasional use!).
Rate this post

INSTRUCTIONS: 1) Find the HTML you’re after. 2) Click the “copy” icon (looks like two pages). 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!

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.

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.

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

Subscript

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. Starts with a clickable list users can use to “jump” to the month they’re after.

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.

Unordered (bulleted) list

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

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 with border

Give your table a border by adding border=”1″ to the first line. Increased number = increased thickness.

A heading

Headings are defined from <h1> to <h6>. The smaller the number, the more important the heading. Use <h2> 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 if you have the know-how.

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 this as italic.

Superscript

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 HTML and edit the content 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 the part 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 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.

Definition list

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

Insert hyperlinked 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 with specified width

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

- Have you seen... -
Lucious WordPress theme
Lucious is a Genesis child theme for WordPress brought to you by StudioPress. [more]
Kontactr
Kontactr is a contact-form service. Kontactr provides simple tools so you can em[more]
Isabelle WordPress Theme
Isabelle is a WordPress theme brought to you by BluChic. [more]
Slick Social Share Buttons
Slick Social Share Buttons is a WordPress plugin that can be used to add floatin[more]
Blog Society
Blog Society is a community for Australian lifestyle and design bloggers. It aim[more]
*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 and conditions.