One of the most important things to remember about HTML is that it’s a markup language. Think of it as the structure or foundation of a web page if you will. You want to keep any styling to the CSS to keep things from getting bloated or messy.

That being said, there are some HTML elements you can use that can style your text such as the strong and em elements. Example :

<p>The YMCA is hosting a halloween party next week. <strong>Note: Guests must wear a costume!</strong></p>

As you can see, the text between the <strong> and </strong> tags is bold and therefore implies importance. Now, the em element :

<p>My favorite movie of all time is Martin Scorcese's <em>The Departed</em>.</p>

As you can see from this example, the text between the <em> and </em> tags is emphasized in italics. Because it’s a movie title, I wanted it to look different from the rest of the text. * Remember the <p> and </p> tags that are also listed in the above examples? We talked about them a few weeks ago if you need a refresher!

With that said, go ahead and give these tags ( <strong> and <em> ) a try in your posts and web pages. If you’d like to learn more about them, click here.

GUEST COLUMNIST / DENNISE SAXTON
Dennise Saxton is a designer, web developer & blogger who is a tailored thought organizer. She disects and develops easy to understand tutorials for the HTML Lessons column.

Images – for bloggers, are one of, if not the most important part of what we do. We deal with images on the web on a daily basis so it’s important to know how they work with HTML.

In HTML, images are referenced by the img tag. Images are technically not part of your HTML code which is why the img tag has to include two attributes: src and alt. The src attribute is how you reference the image – “src”, source – get it? This tells the browser where the image you’re trying to reference is.

The “alt” attribute or alternate text, replaces the image with text in case the image cannot be seen. This is very useful for those who surf the web with a screen reader such as the visually impaired.

Let’s see the img tag in action, shall we? The area you can change is in light grey.

<img src="http://www.picture.jpg" alt="picture of red flowers" />

Let’s imagine that you’re trying to include an image of red flowers on your page, the above code would display that image. You can choose whatever text you want for the alt attribute, I always try to make sure I’m as descriptive yet concise as possible.

* You may notice that the img tag is different because it’s not between <> and </>, it’s one of the rare tags that doesn’t need both tags, just < / > will do.

BONUS TIP Although not mandatory, the size attribute is extremely useful. You can define the width and height of your image within the img tag. Doing so will help the browser load your image faster and when it comes to the web, faster is always good. For example :

<img src="http://www.picture.jpg" alt="picture of red flowers" width="400" height="350" />

The areas you can change are in light grey! To learn more about the img tag, click here.

GUEST COLUMNIST / DENNISE SAXTON
Dennise Saxton is a designer, web developer & blogger who is a tailored thought organizer. She disects and develops easy to understand tutorials for the HTML Lessons column.

Luckily, most blogging platforms like wordpress and blogger format our blog posts as we type them. Meaning, if I hit enter twice, a paragraph will be made. Similarly, if I hit enter just once, my text will simply jump to the next line. Well guess what, these simple tasks are powered by HTML!! What I’m about to go over is hands down one of the most basic HTML codes you’ll learn, but we’ve gotta cover our bases, right??

Like I said before, most blogging platforms handle the paragraph and line break code FOR you, behind the scenes. However, I can guarantee you that there will be times when you want to manually set these things just in case things aren’t formatting correctly. In wordpress, you would do this within the “HTML” tab in your post editor.

So first up, let’s talk about the line break. Let’s say that I have two sentences that I want to appear on two separate lines. To do this, I would put the following code into play :

This is line one.<br />
And this is line two.

As you can see, I added the simple <br /> tag in dark grey above so that my two sentences will appear on two lines. The next code is a paragraph tag! Let’s say you have two paragraphs in your post and you want them to be separated by space. All you have to do is simply start your paragraph with <p> and end it with </p>. See my example below :

<p>This is my first paragraph. I can use this space to say whatever I want because this is a tutorial.</p>

<p>This is my second paragraph. When you paste this code into your post, the two paragraphs will be separate. Easy, huh!?</p>

Now that’s not to bad, is it?? I promise you, HTML isn’t as scary as it seems. Simple things like this will almost become like a second language! Tune in next week for more on how to code images!

Thanks for all the great feedback on this new column, by the way! I know Dennise and myself are excited to give you all a little insight into HTML and how it works. Our plan is to take turns every other week sharing simple tutorials so that if you follow along – you’ll have a great base knowledge before you know it! Who knows … maybe the coder within will pop out. Cheesy? Yeah. But who cares!

The a tag, or hyperlink is essentially what the web is all about. Linking one document to another is what makes the world wide web go round and is what laid the groundwork for HTML to be written. That’s all great and dandy you say, but what does it mean for bloggers? So glad you asked!

As a blogger you spend half your time linking text and images to others’ work, your social networking sites, other blogs, etc. For example :

<a href="http://www.tenacious-dee.com">Dennise</a> and <a href="http://blog.imbreannarose.com">Bre</a> love working with HTML!

As you can see, the names Dennise and Bre are in between <a> and </a> tags ( in dark grey ) and are linked to two different sites. When you click on a name, you are taken to each site respectively.

You can also link pictures by surrounding the picture with the <a> and </a> tags. In the first example below, you’ll see just an image HTML code. In the second example, you’ll see that same image HTML code surrounded with a link code, as shown in dark grey.

<img src="http://www.YourImageHere.jpg">
<a href="http://www.YourLinkHere.com">
<img src="http://www.YourImageHere.jpg"></a>

BONUS TIP
Do you notice an annoying border around the images on your posts? When you click on your images do they lead nowhere except the same picture? If you don’t have a specific site or page to link your images to, then you need to remove the <a> and </a> tags from your images. Take this wordpress example ( in the HTML tab on your post editor ) :

<a href="http://tenaciousdeedotcom.files.wordpress.com/2012/09/example.jpg"><img src="http://tenaciousdeedotcom.files.wordpress.com/2012/09/example.jpg" alt="" width="580" height="386" /></a>

The hyperlink is in dark grey in this example, and if you’ll notice, all it’s doing is linking back to the image itself. I see no need for this hyperlink so I’m gonna remove it by erasing the code in dark grey from above. Here is what the new code looks like :

<img src="http://tenaciousdeedotcom.files.wordpress.com/2012/09/example.jpg" alt="" width="580" height="386" />

When I publish my post, the image will have no annoying border and won’t link to anything and that’s just the way I like it. Click here to learn more about the a tag and what it can do.

GUEST COLUMNIST / DENNISE SAXTON
Dennise Saxton is a designer, web developer & blogger who is a tailored thought organizer. She disects and develops easy to understand tutorials for the HTML Lessons column.

Welcome to the first edition of HTML Lessons, where Bre and I will showcase some really simple web development practices that you can use on your blog or site.

Up first, the span tag. In its simplest form, you can use the span tag to change a block of text from the rest of the text. The span tag alone won’t change anything, but paired with a little CSS styling, ( you’ve heard the term CSS — Cascading Style Sheets thrown around, here’s your chance to use it! ) you can do some pretty neat things on your blog posts or site. Here’s an example:

I love the color <span style="color:orange;">orange</span>, every time I see anything in <span style="color:orange;">orange</span>, I wanna buy it!

RESULT → I love the color orange, every time I see anything in orange, I wanna buy it!

Let’s get a little fancy and add some font styling now:

I love the color <span style="color:orange; font-weight:bold;">orange</span>, every time I see anything in <span style="color:orange;">orange</span>, I wanna buy it!

RESULT → I love the color orange, every time I see anything in orange, I wanna buy it!

If you’ll notice, anything between <span> and </span> is orange and in the second example, anything in between <span> and </span> is orange and bold. Pretty neat, huh? You can use that to change font styles, weights and many more things but to keep it simple, we’ll wrap it up here. Go on, give it a shot! Remember if you wanna use any HTML in your blog posts, switch to the HTML editor (in WordPress, it’s the html tab rather than the visual).

If you want to dive in and learn more about the span tag, click here.

GUEST COLUMNIST / DENNISE SAXTON
Dennise Saxton is a designer, web developer & blogger who is a tailored thought organizer. She disects and develops easy to understand tutorials for the HTML Lessons column.