How to Understand Basic HTML

How to Understand Basic HTML

You should understand basic HTML. Even if you create your posts in a visual editor (where everything looks like it would to your reader) sometimes you have to add a code in manually and you need to know some basic HTML. I don’t know why but some people get scared when it comes to HTML. I’ll try to make it easier to remember.

HTML is a language. It’s a computer language. I won’t bore you with what it stands for, I’m only going to tell you things that will help you understand some basic HTML commands. Just know that if you can understand basic HTML is a way you can communicate with your computer.

Understand Basic HTML

How to Understand Basic HTML

Text in purple is your main takeaways.

Adding Images

This is a code for adding an image into a blog post. I will then break it down so you understand WHY it looks like that and what will help you remember it.

Understanding Basic HTML Example

  1. Okay let’s start with the <. You will notice it ends in > as well. All HTML code must be between < and >. Why? To contain it so that the computer knows where it starts and ends. <HTML> okay?
  2. Next is img src which stands for image source. If you are adding a photo, you need to tell the computer where to get the photo from right? So we use img src.
  3. Next is =. You’ll see = a lot in the line above. = connects what is before and after it. Just like in math 2+2=4. So img src= what? A url to the image. Image Source=the image source!
  4. Actually it would be more accurate to say image source=”image source” because you’ll notice all the ‘answers’ are in quotations. Just another way to contain something.
  5. The long string of text that’s next is the actual location of an image on this blog. I uploaded the image and then copied the link it gave me and pasted it into the HTML. Don’t forget the end quote!

I could just use this and it would show the image:

Understanding Basic HTML ExampleBut I added some extra HTML to clarify a few things or add a few things.

  1. border=”0″ tells the computer that the image is to have NO border. I could change the 0 to a different number to make the border bigger.
  2. alt stands for alternative. What happens when a computer can’t show an image for some reason? It defaults to the alternative text that has been specified in the HTML. If you don’t specify anything then it won’t show anything except a blank space. Not good.
  3. alt”Biannual Blogathon Bash” means that if the image won’t show, the words Biannual Blogathon Bash will.  This is good for SEO as well (Search Engine Optimization)

RELATED POST: 5 SEO Tips to Make It Easier (to understand)

Finally everything is completed with the >

Adding a Link

Remember some of the rules from above because they still apply.

  1. All HTML must go between < and >
  2. ABC=”ABC” e.g. Img src=(the source of the image) or border=(number of the border)

This is the HTML for a link.

Understanding Basic HTML Example

  1. href stands for hyperlink reference. A hyperlink is the long version of the word link. So <a linkreference=”URL”>. That is too long so we use <a href=”URL”> right? Make sense? Make sure your link is between the quotations and contains the http:// part.
  2. So what is the </a> part? It just closes the link so that the computer knows you are done talking about links.
  3. Another rule in HTML is that when something is opened you must close it. So to bold for example a word I use <b>BOLD ME</b>. I opened the b for bold so I closed it with the / and then the same b. Italics is <i>ITALICS</i>. So when we do a link, we open <a href=”link”> so we close </a>

Just like with the images, we can add more to the link to give it more details or information.

  1. Understanding Basic HTML Examplemeans that the link will open in a new window instead of the one it’s already in. Target means where should the link open and _blank means open a blank, new window.
  2. If you make money or get products from a post, your link to that company is supposed to be a nofollow link. To do that, you add rel=”nofollow” into the link the same way.Understanding Basic HTML Example

RELATED POST: The Easiest Dofollow vs. Nofollow explanation

Adding an Image with a Link

Finally I want to show you how to make an image link to a URL.

Understanding Basic HTML ExampleYou’ll notice that the two codes are exactly the same as above basic ones but the image is between the <a href> code and the </a> code. The image must be in the middle so that the link applies to the image.

There is more HTML codes than that of course, but those are the two basic ones and the ones that you will encounter the most. Plus hey, you learned how to bold and italicize too!

That’s how to understand basic HTML.

Kathleen Garber-Bailey

Kathleen is a blogaholic and social media enthusiast living in Ontario, Canada. She is a SAHM of five and a Girl Guide leader in addition to her multiple online endeavours.

View more posts from this author

Join Our Community of Over 300

We'd love to have you join our community of bloggers from around the world!

Our Facebook group called Building Better Blogs has daily prompts, SEO and blogging tips, FREE feedback on your blog each week and a Thursday Topic Discussion.

4 thoughts on “How to Understand Basic HTML

Leave a Reply

Your email address will not be published. Required fields are marked *