Every blog platform out there does a good job of hiding HTML from you if you don’t want to use it.
However, it’s really important, especially if you use WordPress, to understand some basic HTML so you can make changes to your site when you want to.
Wait, you don’t know what HTML is? Well, let me school you a bit.
What Is HTML?
HTML stands for Hypertext Markup Language. I know, it’s a terrible name, but it makes sense when you know how it works. HTML is what is rendered by the browser whenever you look at a page.
How does it look? For the most part, it is pretty simple. For example, this paragraph is written like this in HTML:
Not too bad right? The paragraph itself is wrapped in the paragraph element or <p> tag.
Why It Is Important to Learn HTML
I don’t think you need to try and become a professional web developer, but I do advise every blogger to learn some basic HTML. Why? Because it gives you a lot more flexibility when you need to make customizations to things.
- Building a landing page in LeadPages? Tweak it the way you want with HTML.
- Downloaded a theme and you need to make an adjustment the theme doesn’t allow? Jump into the HTML and make the tweak you need.
- That email not coming out exactly the way you want? Make the HTML jump through rings of fire.
For Thrive/Strive I used to have my wife and brother use the text editor in WordPress over the visual editor. Why? Because it ensures our HTML isn’t filled with unnecessary markup.
What do I mean by this? Well, if you remember the paragraph example I showed you before and thought it was pretty simple, then check this one out:
You now might be thinking that the first code I showed you is a tiny bit more complicated than the one above because it had two HTML elements while this one only has one. The problem with the one above is that it doesn’t represent a paragraph. <br> represents a line break and sometimes the fancy online text editors will use those instead of paragraph tags.
Okay, so what? Well, if you have a specific style for your paragraphs then that means it won’t get applied to them. You lose control over the design of your blog post when the correct HTML markup isn’t being used.
Overall, knowing some HTML gives you a lot more control over the things you want to do. Convinced you need to learn some on your own now? Excellent! Let’s go over some basic HTML.
An Easy Guide to HTML
First and foremost whenever you want HTML to apply to something on your page you must wrap it in HTML tags. We’ve already seen the paragraph tag so let’s look at some of the other more used tags.
Headings
Headings are really simple. They go from <h1> to <h6>. h1 is the largest and most important element on your page, while h6 will be the smallest heading you can find on a page. On my post pages I make the title of a post a h1 and the main headings within the post h2s. If there is a subheading it gets the h3 element.
The code itself looks exactly like the paragraph code above.
That’s it. Now you know how to do paragraphs and headings and for a lot of people that is all the HTML they need to know, but there are still a couple more elements that I think you should know.
Links
You are always going to create links. You will want to link to your own blog posts all of the time and it’s good SEO practice to link out to other valuable content as well. So how do you create a link? In HTML terms, you are going to create what is called the anchor tag.
Here is some sample code:
Do you see the link? It’s this part of the code:
<a href="https://obstacle.co">Obstacle.co</a>
The anchor tag uses the <a> element to represent links. You’ll also notice that it needs a HTML attribute to actually work. The HTML attribute in this case is href. Every time you use an attribute, its value must be wrapped in single or double quotes.
The code above lets the browser know that this is a link and it should send people to https://obstacle.co with the text Obstacle.co.
Pretty nifty, eh?
Unordered and Ordered Lists
Who doesn’t like lists? If you raised your hand you should kindly escort yourself out of here because we don’t take kindly to list-hating people.
In HTML, there are two main types of lists: ordered and unordered. Ordered lists have numbers and unordered lists use bullets. Let’s create some code that includes ordered and unordered lists:
Notice that the list items (<li>) are wrapped inside of the list elements (<ul> and <ol>). For ordered lists you do not have to worry about putting in the numbers because the browser will take care of that for you.
Bold and Italics
Sometimes you really want your text to stand out so you might use either bold or italic styling. Accomplishing this in HTML is pretty easy. Check it out:
Bold uses the <strong> element and italics require the <em> element.
Images
Every web page should have images because everyone loves images. But how do you include them on your site?
The two examples above use the exact same code, but the values within the src attribute are different. The first example shows you how to include an image outside of your site, while the second one shows the code you can use for images on your site. If you are having any doubts just use the first example.
A Lot More HTML to Learn
As you can see, picking HTML is not that hard. There are a lot more HTML tags for you to learn, but for the most part, these are the majority of tags you will use in your blog postings. If you’re curious to learn more, there are a ton of free resources online that will teach you HTML.
If you’re ever having problems with the HTML on your site and are looking for some help, just shoot me a message and let’s see if we can figure things out.
