Basic HTML for Bloggers

For most modern bloggers HTML has gone the way of cursive handwriting – nice to know but not entirely necessary. With all of the great WYSIWYG (what you see is what you get) options in WordPress, Blogger, TypePad, and other popular content management platforms most bloggers have passed on learning one of the basic languages behind the way their site looks.
This post is for those bloggers, like me, who are geeky enough to insist on knowing the why behind everything and brave enough to click that code editor button in their blogging platform of choice.

First, what the heck is HTML?

HTML stands for Hyper Text Markup Language. It’s a language that tells your web browser how to present text. If you know basic HTML you can create hyperlinks, change text color and size, display images, and much more.
Much like a sentence in Spanish, English, German, or any other language HTML has a beginning and an end. All HTML “sentences” start with two angle brackets <> with a command in between them (such as <a href=>) and end with two angle brackets with a forward slash (such as </a>).
Think of the angle brackets with the forward slash as the period of your HTML sentence. You are telling the reader (your browser) that the particular sentence they are reading is complete.

When would I use HTML?

Creating a hyperlink:

<a href=http://www.yourlink.com>link text</a>

Linking to an email address:

<a href=mailto:youraddress@yours.com>you@youraddress.com</a>

A = Anchor
HREF = Hypertext reference
HTTP = Hypertext Transfer Protocol
WWW = World Wide Web
Displaying an image:

<img src=http://www.yourimage.com/yourimage.jpg>

IMG = Image
SRC = Source
Displaying an image that is a clickable link:

<a href=http://www.yourlink.com><img src=http://www.yourimage.com/yourimage.jpg border="0"></a>

Adding spaces between images:
Use hspace (horizontal space)

<img src=yourimage.jpg hspace="10">

or use

 

(non-breaking space – adds space without a line break)

<img src=yourimage.jpg>&nbsp;&nbsp;&nbsp;&nbsp;<img src=yourimage2.jpg>

Making an ordered (numbered) list:

<ol>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ol>

Changing the type of ordered list (Letters, numbers, or roman numerals):

<ol type="A">
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ol>

<ol type="a">
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ol>

<ol type="I">
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ol>

Starting your ordered list from a particular letter or number:

<ol start="4">
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ol>

Making an unordered (bulleted) list:

<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>

Creating a horizontal line:

<hr>

Changing the width of a horizontal line:

<hr width=80%>

Creating bold text:

<b>your text</b>

Creating italic text:

<i>your text</i>

Creating strikethrough text:

<strike>your text</strike>

Creating underlined text:

<u>your text</u>

Release yourself from the limitations of your visual editor and try some HTML today. Need to dig deeper? My favorite HTML learning site of all time is HTML Goodies.