TBS is undergoing a few changes... please pardon the dust settling!
HTML cheat sheet for bloggers
No time to learn HTML? This HTML for beginners page means you can simply copy, paste and edit... and voila!
Last updated September 19, 2014
Rate this post

INSTRUCTIONS: 1) Find the HTML you’re after. 2) Click the icon that looks like two pages to copy it. 3) CTRL+V/Command+V will paste it into your blog post’s HTML editor, sidebar, newsletter or more. 4) 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 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 heading

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

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!

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!

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 size*

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

Font colour*

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

Font family*

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

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.

Small text

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

Emphasised text

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

Strong text

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

Subscript

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

Superscript

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

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.

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.

Copyright symbol

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

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

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!).

Heart symbol

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

Highlighted text

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

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.

Text area box

To create an HTML text area box (just like the boxes used on this page!), use this and edit as needed.

HTML comment

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

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.

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.

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.

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.

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.

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

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

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.

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.

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.

Ordered (numbered) list

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

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

Definition list

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

Insert image

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

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.

Insert linked image

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

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.

Aligned image within text

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

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

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

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 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!

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. Home page photos by Stephanie Sterjovski. Designed by Bree using Headway Themes.
Copyright © 2009 - 2014
Rate this post
Get on the list

Blogging insider newsletter
Delivered to your inbox occasionally with news, special offers, discounts & more