Know Your Code: HTML Cheat Sheet

html for bloggersYou don’t have to be technologically inclined to have a blog, but there is no question that a wee bit of html knowledge will help you on your way.  Whether its inserting an image in your sidebar or changing the appearance of your font, html is your friend.  Below we have a list of some of the most common (and useful) html snippets for you to copy and use on your own site.

Aligned Paragraph

Justify your paragraph to fit the style required. Replace “center” with “left” or “right” as required.

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

Anchored Text (Part 1)

To link to text on the same page (requires 2 pieces of code). Put part 1 where you want visitors to return on the page.

<a name=”top”></a>

Anchored Text (Part 2)

Part 2 links to part 1. They must have the same name and href

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

Deleted/Strikethrough Text

<del>Your text here</del>

Email

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

Email with Subject

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

Grab Button

Use for readers to grab a button for use on their own sites.  Also useful for sidebar adverts. Change “200” for your own pixel size requirements.

<div align=”center”><img title=”title text here” src=”http://imageurlhere.com/folder/name.jpg” alt=”alt text here” width=”200″ height=”200″ /><br />
Grab this.<br />
<textarea cols=”25″ rows=”5″><a href=”http://yoururlhere.com/”><img src=”http://imageurlhere.com/folder/name.jpg” alt=”alt text here” title=”title text here” width=”200″ height=”200″ /></a></textarea></div>

Headings

your headings will be defined by your theme – the smaller the number, the more important the header

<h3>Your heading here</h3>

Horizontal Line

Create a horizontal line to differentiate sections of your work

<hr />

Hyperlinked Text

<a href=”http://urlhere.com/”>Your text here</a>

Hyperlinked Text  in a New Window

<a href=”http://urlhere.com/” target=”_blank”>Your text here</a>

New Paragraph

Create a new paragraph

<p>Your paragraph here</p>