The 42nd Estate

Lately, I’ve been helping a lot of people who are new to the blogging scene get theirs up and running and optimized. Since I found myself sharing a lot of the same blog tips with multiple parties, I’ve decided to publish some of it here to help others while saving me time. To that effect, here are ten basic HTML tags every blogger should know.

1. Text Links

This piece of code generates hyperlinks, the foundation of the internet.

<a href="http://www.adampieniazek.com/">Adam's Site</a>

Adam’s Site

The above piece of code is a normal link.

2. Nofollow links

An additional tag that’s good to know about is the nofollow tag. It is placed within a regular link and notifies Google and other search engines not to utilize the link for ranking purposes.

<a rel="nofollow" href="http://www.adampieniazek.com/">Adam's Site</a>

Adam’s Site

3. Headings

Headings help structure your blog post and make your copy scannable. They range from 1, the largest heading, down to 6, the smallest heading.

<h3>This size works best for use within your blog post</h3>
<h4>This size is good for subheadings</h4>

This size works best for use within your blog post

This size is good for subheadings

4. Ordered Lists

Ordered lists are numbered lists.

<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>

1. List item 1
2. List item 2
3. List item 3
5. Unordered lists

Unordered lists are bullet point lists.

<ul>
<li>Bullet point 1</li>
<li>Bullet point 2</li>
<li>Bullet point 3</li>
</ul>

• Bullet point 1
• Bullet point 2
• Bullet point 3
6. Strong a.k.a. bold

Making part of your text bold is a good way to draw readers’ attention to a particular phrase.

<strong>This sentence will be bold.</strong>

This sentence will be bold.

7. Italics/Emphasis

<em>This sentence will be italicized</em>

This sentence will be italicized

8. Blockquote

<blockquote>
Here is a block of text. When quoting more than one to two sentences, you should use blockquotes to seperate out the large quote from the regular flow of your text. It will make your copy much more readable and help readers scan your text quickly.
</blockquote>

Here is a block of text. When quoting more than one to two sentences, you should use blockquotes to seperate out the large quote from the regular flow of your text. It will make your copy much more readable and help readers scan your text quickly.

9. Image links

<img src="http://www.the42ndestate.com/images/adamp-125x125.png" />



That above piece of code simply places the image in your post. To make it a clickable link, simply surround it with the link tag.

<a href="http://www.adampieniazek.com"><img src="http://www.the42ndestate.com/images/adamp-125x125.png" /></a>



Now you can click that logo to head over to my personal blog, but wait! There’s one more tag for you to learn, well actually two but I’ve combined them.

10. Paragraphs and line breaks

<p>
<br />
<br />
<br />
<br />
</p>

Many bloggers use a content management system that automatically puts in these paragraph and line break tags, but sometimes the space just won’t stick. In those moments, use a paragraph tag to define the beginning and end of a paragraph and a line break when you just want a line break without defining a paragraph. Yes, the p stands for paragraph and the br for line break.

Sometimes, you’ll need to hack together some code like the one shown about to just get a simple clean line break to show up. This post was such an instance as no matter what I did the end of section 3 fell right on top of section 4 above. Finally, I put in the code above which forced a single line break to show.

Did you find this list useful? Let me know what other blogging tips you’d like to hear about in the comments below.

Tags: HTML, list

This entry was posted on Wednesday, April 15th, 2009 at 10:32 pm and is filed under Blogging Tips. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.