Basic HTML Tags

Most modern Blog Platforms come very well fitted out with formatting tools to help you to make your posts look and feel just the way you want them to. The way I describe blogging these days to people unsure whether they have what it takes is that if they have the ability to send emails and format word processing documents – then they have most of the basic skills to get a blog post ready to publish (ie filling in fields and basic formatting skills by highlighting text and – hitting buttons to format it).

Of course the easy formatting that we enjoy today with most platforms was not always the way.

As I mentioned last week in a post – I still remember 2 years ago when I started blogging having to ask a more experienced blogger how to make a word bold in my post. Back then it was helpful (and with some platforms essential) to know some basic html tags to get your formatting right.

In fact I still use a lot of these tags today out of habit and think they are useful to know even with all the tools at hand.

What are html tags?

I’m not going to pretend to be an expert on this topic but speaking as someone who picked it up as he went along – a tag is a bit of code that web designers/bloggers put into their site to tell their brower how to display what those tags contain.

I like to think of tags as bookends, they have a start to signal the begining of a certain format and an ending to signal the end of the formatting. These bookends/tags are generally put in the angled brackets (<>). The end one’s usually have a slash (/) in them which differentiates them from the opening ones and signals to your browser that it’s the end. So they’ll usually have this basic format – < > </ >. Hopefully you’ll pick it up as you see them outlined below – the way I learned them was by seeing how others used them and then by imitating what I saw on my own blog.

Here are some of the more common tags and what they mean (keep in mind it’s not my strong area – feel free to add your own HTML tips in comments.

(note: depending upon your blog’s platform and more specifically the CSS template set up that you have, some of these tags will take on different appearances from blog to blog).

Basic Formatting Tags

– <b>bold</b>
– <strong>strong</strong> (usually bold)
– <u>underlined</ul>
– <i>italics</i>
– <em>emphasis</em> (usually italics)
– <strike>strike through</strike>
– <center>This centers text on the page</center>
– <tt>teletype text</tt> (typewriter text)
– <blockquotes>blockquotes</blockquotes> (how this looks will depend on your CSS template but it usually indents your paragraph)

There is a whole debate on the difference between <b> and <strong> tags and between <i> and <em> tags. If you want to see some of the arguements you might like to check out this old WMW thread. There are plenty of other explanations and discussions on the topic going around – but all you’ll probably need to know is that the results are generally the same if you use <b> and <strong> and are similarly the same if you use <i> and <em>. Purists are probably going to kill me for this, but I’m more interested in the results than working out all the reasoning behind it!

Links

– Basic Link <a href=”url”>link title</a> (where ‘url’ is the page you want to link to and ‘link title’ is the word/s that you want the link to say.
– Email Link <a href=”mailto:EMAIL”></a> (where ‘EMAIL’ is the email address you want to be a link).

Heading Tags (vary according to CSS)

– <h1>An important heading</h1>
– <h2>A slightly less important heading</h2>
– <h3>A less important heading again</h3>
– <h6>The smallest heading</h6>

Font Tags

– Font Size – <font size=”x”>text to change</font> – change ‘x’ value to get different sizes. 1 is small and 7 is big.
– Colors – <font color=”#FF0000″>I’m red!</font> (get color codes here)
Font type – <font face=”Arial”>Hello there</font>

update: Thanks to those in comments below who have left advice about ‘font tags’ and how people would be better advised to use ‘span tags’ (told you this wasn’t my strong point). Here are a few sites that might help with using span tags:

HTML 4.0: SPAN Tag
HTML Span Tag
The Span and div Tags
html tutorials – span tags

Image Tags

– Basic Image tag – <img src=”url”> (where url = the url of the image you want to show)
– Image with sizing <img src=”url” width=”200″ height=”150″>
– Align image left – <img src=”name” align=left> (substitute ‘left’ with ‘right’ to align it right)
– Alt Tags – <img src=”url” alt=”short description of image”> (an alt tag tells the reader what they are missing if the image doesn’t load in their browser.
– Image as a link – <a href=”link url”><img src=”url”></a> (where ‘link url’ is the url of the page you want the image to link to and ‘url’ is the image location).
– Image with border – <img border=”1″ src=”url”> (the larger the number in the border “” the thicker the border)
– Space Around Image <img src=”url” hspace=10 vspace=10> (hspace is the horizontal space and vspace is the verticle space. The numbers are the amount of pixels sounding the image)

Putting it all together might look something like:

– <a href=”img url”> <img border=”1″ src=”url” width=”65″ height=”38″ align=left hspace=10 vspace=10></a> (ie this is an image that is a link that has a border 1 pixel wide, that is 65 pixels wide and 38 pixels high, that aligns left on the page and is surrounded by 10 pixels both horizontally and vertically).

Unordered Lists (usually bullet point type lists)

<ul>
<li>the first list item</li>
<li>the second list item</li>
<li>the third list item</li>
</ul>

Ordered Lists (usually numbered lists)

<ol>
<li>the first list item</li>
<li>the second list item</li>
<li>the third list item</li>
</ol>

A more comprehensive list of tags can be found at Webmonkey

I also just found this excellent HTML Tutorial at Forty Internet which makes my efforts above look pretty basic. Enjoy.