HTML for Bloggers

I am often asked by friends about basic HTML so I thought I’d write up a simple guide to the very minimal amount of HTML you need for blogging.

Most blogging software automates some of this for via editors (Blogger, WordPress, etc.) but they’re all missing one thing or another and it’s a good idea to know the very basics about HTML anyway if you’re working with HTML content.

Basic Nesting

HTML works on nesting HTML-tags (example: <b>something that’s bold</b>). You always need a start tag and an end tag and they need to match up… just like parens: (something [blah {blah}] that). Some simple examples:

<b>bold</b> would create bold

nested tags

<b><i>bold and italic</i></b> would create bold and italic

note that it starts with bi and closes out the tags with ib

bad nested tags – this is how not to do it.

<b><i>bold and italic</b></i> would create random results depending on the browser viewing it.


Basic HTML Tags

Now that you understand nesting you can learn about tags. Below are some examples that will hopefully make this very simple:

tag action example
<b></b> bold <b>bold</b> creates bold
<strong></strong> bold <strong>bold</strong> creates bold – same as b – there are often many ways to do things in HTML
<i></i> italic <i>italic</i> creates italic
<b></b> + <i></i>
or
<strong></strong> + <i></i>
bold + italic <b><i>bold + italic</i><b> creates bold + italic
and
<i><b>italic + bold</b><i> creates the same effect italic + bold
and
<i><strong>italic + bold</strong><i> creates the same effect italic + bold
and, of course
<strong><i>bold + italic</i><strong> creates bold + italic
<small></small> small Makes the text smaller
<br> break tag Creates a line break:
This is an<br>example
would create
This is an
example
<blockquote></blockquote> block quote Creates a special formating for quotes.
Example:
Without blockquote
I am often asked by friends about basic HTML so I thought I’d write up a simple guide to the very minimal amount of HTML you need for blogging.
With blockquote

I am often asked by friends about basic HTML so I thought I’d write up a simple guide to the very minimal amount of HTML you need for blogging.


A bit more complex – intro to attributes and special tags

Now that you’ve got the very basics down let’s do something a bit more robust. First, though, you need to understand attributes. Some tags have one or more options… these are called attributes. For example, the <img> tag has an attribute to tell it where the image you’re try to display is.

img tag example

<img src=”http://mudabone.com/lastBanana.jpg”/> would output

This tells the web browser to display the image located at http://mudabone.com/lastBanana.jpg

link tag example

The link tag (called an anchor tag actually) also has several attributes. Let’s look at some examples:

To create a simple link we do something like: <a href=”http://suletzki.com”>a link to suletzki</a> which would look like: a link to suletzki. Note – the tag is a and it’s attribute href tells the browser where to go when the text a link to suletzki is clicked. Simple, no?

Another common anchor attribute is target. The target attribute tells the browser where to open the link. This is most frequently used to open a link in a new browser window. Example: <a href=”http://suletzki.com”tartget=”_blank” >a link to suletzki</a> would look the same a link to suletzki but would open in a new window (try it).


Putting it all together

One of the most common HTML tag sets I use on my blog is a centered image with a link that goes to a bigger image when clicked with a small font styled explanation. It looks like this:
<div align=”center”><a href=””><img src=””/></a><br><small></small></div>
Let’s look at the pieces one by one:

  • div: The div tag is a block element that you can think of like a paragraph. It tells the browser to start the div on a new line and put a new line at the end.
  • align: The div’s align attribute tells the browser to center the text in that paragraph. Other align values could be left or right or justify
  • a href=””: Is an anchor tag that we discussed above
  • img src=””: Is the source tag we discussed above
  • br: break tag – starts a new line
  • small: make the test small.

Here’s an example of a flickr image implementation of ths:

<div align="center"><a href="http://flickr.com/photos/wiseleyb/67146504/"><img src="http://static.flickr.com/27/67146504_5f52bc3c7a_m.jpg"/></a><br><small>Kat Kayaking</small></div>

Would produce


Kat Kayaking