How to Format a Post

You can format comments and posts on your WordPress Blog using some simple HTML tags. Basic HTML is very easy to learn even if you don’t know the first thing about programming or code. This post only reviews a limited set of HTML tags, but they should be sufficient for most usage. Try these out and soon you’ll be a proficient HTML’er in no time at all!

Emphasize Text

Wrap your text in either <strong> and </strong> or <em> and </em> to place emphasis. For example:

Bold Text
<strong>Bold Text</strong>

Italicized Text
<em>Italicized Text</em>

Links

Linking is one of the most essential things you’ll want to do. It’s easy too! Just wrap up the text you want to link with <a href=”link”> and </a>. So for example if you want to link to the very awesome Imagine Technologies site then you’d write:

Read This Blog
<a href=”https://imagineteknolgies.wpmudev.host”>Read This Blog</a>

Images

If you want to show an image you first need to have somewhere to store it. Happily there are a lot of places you can place images for free. Try these places:

• Flickr – Free Image Hosting from Yahoo!
• MediaFire – Free File Hosting
• PhotoBucket – Free Image and Video Hosting
• RapidShare – Free File Hosting for Pretty Much Anything

Once you have a URL for the image then you write <img src=”URL”>. For example there is an image of the Themeforest Marketplace logos up at http://envato.s3.amazonaws.com/wiki/sites.png, so to show them just write:

<img src=”http://envato.s3.amazonaws.com/wiki/sites.png”>

Quoting Someone

If you want to quote someone simply wrap the code in <blockquote> and </blockquote>. This is especially useful on the forums. If you click “Reply” it will automatically put these in for you.

Listing Stuff

You can make two types of lists, either an unordered one (points) or an ordered one (numbered). Both types of lists begin and end with a list tag, either <ul> … </ul> or <ol> … </ol>. In between you wrap each item in the list with list item tags, like this <li> …</li>. For example:

Unordered List
<ul>
<li>List Item</li>
<li>List Item</li>
</ul>

• List Item
• List Item

Ordered List
<ol>
<li>List Item</li>
<li>List Item</li>
</ol>

1. List Item
2. List Item

You can also put lists into lists, or change the type of list numbering or bullet types. Learn about list options here.

Headings

Sometimes you want to add a bit of structure to your text with some headings. We only support two types of headings – h3 and h4. The larger ones won’t display because we save their use for the main site, Google doesn’t like it if you have too many h1’s and h2’s, and we don’t want to be penalized. But don’t worry h3 and h4 look awesome! Here are some examples:

Big Heading

<h3>Big Heading</h3>

Smaller Heading

<h4>Smaller Heading</h4>

Code

You can display code in one of two ways. If you just have a few words of code then wrap the text in <code> and </code>. If you have a large block then you should put it on a new line and wrap it in <pre> and </pre> like this:

<code>Small Piece of Code</code>

<pre>
  blockquote
    border-left: 1px solid
    border-color= !div_border
    padding-left: 20px
    margin-bottom: 10px
    font-style: italic
    font-family: Arial, sans-serif
    color: #777777
  code, pre
    font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace
    color: #333333
</pre>

Line Breaks

You can add a line break with a very simple tag <br /> (which stands for Break!)

More HTML and CSS

You can do a lot of cool stuff with HTML and CSS. Not everything is allowed on the marketplaces just because we don’t want to break the main page layout, but it’s still worth learning it all anyway!

W3Schools has lots of beginner tutorials on HTML and CSS

Nettuts+ is the place to go for advanced tutorials on web development

SmashingMagazine is an awesome blog to read if you love web design