Learning to start a blog comes with a steep learning curve that can usually be frustrating, overwhelming, or downright disappointing.
I know that we all have to start somewhere and there are many website owners and bloggers who don’t have a clue about basic HTML codes.
This post was created as a reference guide for those that are eager to learn.
Throughout the teachings on this website, I always recommend that you physically type the codes out instead of simply copying and pasting them.
Tip: if you get lost on this page, check out our HTML cheat sheet.
This cheat sheet is a quick reference for the most commonly used HTML codes, which allows you to save time when learning.
To get started, let’s start with some super basic HTML codes.
How to Bold Text
To bold text is one of the easiest and most commonly used HTML codes.
But did you know there are two ways to do this?
The first looks a little something like this:
<b>This is your text</b>
As always in HTML, we start the code <b> (“b” for bold), enter the text that you want displayed bold, and then close the code: </b>.
The second method is by using the <strong> code.
You’ve probably noticed that when switching from Visual mode to HTML mode in your blog editor, they use <strong> instead of <b>.
<strong> gives the text “strong” importance, usually also being displayed in bold.
The difference between the two, in simple terms, is that you can further style a <strong> tag by using CSS attributes.
We will get into CSS in a different post because I don’t want to start confusing you in a “basics” tutorial.
<strong>This is your text</strong>
Another reason for using <strong> instead of <b> is that even though they both produce bold text visually, web crawlers and bots see something totally different.
They see <b> as simply a stylistic feature.
There is no importance to the bold text, you just wanted it to appear bold.
That’s where the <strong> code takes importance.
A web crawler can see that the text is important, and we always want to make those crawlers happy, don’t we?
Yes – that is a key principle of SEO.
How to Italicize Text
Very similar to the above, there are also two ways to produce italicized text.
The first:
<i>This is your text</i>
“I” of course meaning “Italic”. Once again, <i> is more of a style than an actual emphasis of the text.
Both “b” and “i” are common in text editors like Microsoft Word as stylistic formatting options, but when we create websites we always need to be aware of what the bots can read behind the scenes of your web pages.
The alternate method is to use:
<em>This is your text</em>
“em” means to emphasize and will also produce italicized text.
Both <strong> and <em> are logical tags. The are used purposely if you want to add physical emphasis or importance to a word or phrase.
You should use them in these cases, and use <b> and <i> when you simply want to visually bold or italicize the text without telling web crawlers that those words or phrases are of utmost importance.
How to Create a Link
Sometimes you can’t always rely on your blog editor to automatically link your text with the click of a button, so it is always good to know how to form a link using HTML code.
<a href=”http://www.yoursite.com”>This is the text that will be linked</a>
The URL you want the visitor to be directed to always appears in quotations within the <a href> code.
HTML links are always wrapped in an <a href> element.
Always, whether it be a text or image link.
Make a mental note right now that <a href> means “link”.
With a lot of HTML, you will have your element, followed by the action.
In this case, the element is a link (<a href>) and the action is the destination (your URL).
Links should always start with http:// as that is their true URL.
If you forget this part and just start it with “www“, you’ll quickly realize that your link does not direct to your URL but rather tries to open that URL within the page you are on by adding it to the end of your current URL.
Opening the link in a new window
One other quick example I wanted to show was how to open your link in a new window/tab.
Sometimes you want to keep visitors on your website instead of directing them completely away from your content.
Here is what that code looks like:
<a href=”http://www.yoururl.com” target=”_blank”>This is the text that will be linked</a>
All I added here was a simple link target within the same link code.
Target means just that, where you would like to target your link to. See how the quotations separate each action?
They are still contained within the image link (<a href>) but now you’re telling it to do something extra. “_blank” is standard HTML talk for opening in a blank (aka NEW) window.
How To Insert An Image
Inserting an image is easy to do.
First, you’ll need to upload your image somewhere to produce a URL for that particular image.
You cannot just try to insert an image from your computer without uploading it somewhere on the web first.
The image needs to be on the internet.
You can use photo hosting sites, like Photobucket, if you need to, or simply upload the image to a directory on your web server.
You can also add an image from another website (although I highly recommend saving that image to your computer and then uploading it to your own web/image server as a courtesy).
Either way, an image you upload or an image already online will have a unique URL.
Online photo hosts usually provide you with a URL after you upload
Alternatively, you can right-click on an image and choose “Copy Link Location”, which will copy the URL of the image to your clipboard.
<img src=”http://www.yoursite.com/images/yourimage.jpg” alt=”image description”>
<img src> means “image source“. In other words, the source of your image.
Easy, right?
Just like the link element, your code is simply asking you where your image is located.
Enter the URL of your image in between quotations as shown above.
The required “alt” attribute specifies alternate text for your image, if your image cannot be displayed.
You can put whatever you like here that describes your image.
The img tag is a bit rare in that you don’t need to add a closing tag to the end like other codes.
<img src=”http://www.yoursite.com/images/yourimage.jpg” alt=”image description” width=”100″ height=”100″>
In the code above, I’ve added the width and height attributes.
Specifying the exact dimensions (in pixels) that you want your image to display at allows the browser to reserve the space needed to load the images.
Creating a Paragraph
The <p> tag is used when you want to create a paragraph.
The start of the paragraph should contain the <p> code, followed by the closing </p> tag at the end like so:
<p>This is a paragraph.</p>
<p>This is a new paragraph</p>
Adding paragraph tags will properly add that paragraph spacing for you between each paragraph.
Creating a Line Break
A line break is similar to a paragraph, but instead of creating a complete paragraph, you’re just starting a new line.
Think of this like a typewriter.
When you hit the end of a line on a typewriter, it creates a new line below the first.
Because of this, the visual difference between a paragraph and a line break is the amount of space between each line.
The <br> tag is used to create a line break.
It is an empty tag which means you don’t need to close it, much like the <img> tag above.
This is a new line<br>
See how the line spacing is different from the paragraph above?<br>
I’m simply creating a single line break!
You can combine line breaks like <br><br> to create a double line break.
You should use <br> to create line breaks, not to separate paragraphs.
How to Change Font Properties
In the “old” days, it was common to use the <font> tag to format text with code such as <font color=”#000000″>, however this code is now obsolete so I highly recommend not using it in any form.
We will cover font and text formatting through the CSS portion of these lessons.
Those are some of the common basic HTML codes that you should practice if you are eager to learn.
I will cover additional codes and more advanced tutorials in separate posts!
