Hey—want some one-on-one help getting this set up? Book a 20-minute consultation and we can work through it via video chat!
Blogging requires a lot of skills. You need to be able to write well, and you need to have at least some sort of expertise in your topic. But once you get into it, you realize that you also need photography skills, design skills, marketing skills, and coding skills. These can all be really intimidating!
To take some of the intimidation out of blogging, we’re going to go through some HTML basics for bloggers. If you have no prior web design experience, it’s time you learn to code!
What is HTML?
First of all, what is HTML? It stands for Hyper Text Mark-up Language, and it’s the code that basically all websites are written in. It’s what determines (to some extent) the style and location of different pieces of content on your website.
The good news is, HTML is pretty simple, so it’s a great place to begin when you want to learn to code.
Understanding the Formula
Before you learn any of the actual codes included in HTML, you need to understand the formula of how the commands themselves are made up.
All HTML command codes are typed within triangular brackets, < and >. Most commands have two copies of the same code: one at the beginning with <command> and one at the end with </command>. They / at the end of the line of code tells the website to end that command, so text after it will not be included.
The end tag will always be the same word as the beginning tag, and if there are multiple words in the beginning tag, only the first word will be included after the slash.
For example, if you want to bold a line of text, you’d type <b> at the beginning of the phrase you want to bold and </b> at the end of it. This would cause any text in between the two to be bolded.
For the most part, the command will be pretty similar to what you’re trying to make the text do, which means if you’re writing it out manually, the commands are easy to remember! This makes it way simpler to learn to code with HTML.
Popular Commands You Should Know When You Learn to Code
Now that you understand the basic idea of how HTML works, let’s learn the commands themselves! Remember, most of these will need two versions of the command: a beginning and an end. But others will only need one.
Bold
There are technically two ways to bold text. Both require a beginning and an end tag. The first is <b>text you want bold</b> and the second is <strong>the text you want bold</strong>. In the first option, “b” stands for “bold.” (I told you HTML is easy!)
If you’re typing by hand, <b></b> is obviously going to be the more obvious choice. But there’s a pretty good reason you’d want to use <strong></strong>, depending on what you’re making bold.
<strong></strong> tells web crawlers (like search engines) that the text between the tags is important. <b></b>, on the other hand, just makes the text visually appear bold — it doesn’t mean that the text is important. So if you just want the text to appear bold, use <b></b>, and if you want to bold a piece of text and want search engines to know that it’s important, use <strong></strong>.
Italic
Similarly, there are two primary ways to italicize text in HTML, and they both require a beginning and an end tag. The first is <i>text you want italicized</i> and the second is <em>the text you want italicized</em>. In this case “i” stands for “italics” and “em” stands for “emphasis.”
Just like with b/strong, <em></em> tells search engines that you placed an emphasis on the word or phrase between the tags, while <i></i> does not.
Underline
With underline, there’s only one primary command you’ll want to use, and it goes along nicely with bold and italic! To underline text, simply use <u> at the beginning and </u> at the end. Of course, “u” stands for “underline.”
Center Alignment
If you want to center align text, simply put <center> at the beginning of the line of text and </center> at the end. keep in mind that you can’t have two text alignments on a single line of text, so this command shouldn’t go in the middle of a sentence or line of text.
Paragraphs
Depending on where you’re placing your code, you might need to tell it to create individual paragraphs. This isn’t required on WordPress, as it will create paragraphs for you, but other coding platforms will require it.
To start a paragraph, use the tag <p> (which stands for “paragraph”), and to end it, use the tag </p>.
If a platform requires paragraph tags but you forget to include them, it’s going to combine all of your paragraphs into one big lump of text. It’s annoying to put them back in, so be careful and double-check if you need it!
Links
Links are a little bit more complicated, but you’ll use the command so often that you’ll quickly memorize it!
The text for a link is <a href=”URL YOU WANT TO LINK TO”>text you want to turn into a link</a>.
You’ll notice that the end tag only has the “a” in it, not “a href,” because the end tag only needs the first word that comes before a space.
The quotes are important in the opening link tag; it won’t work if the quotes are missing.
For most links, you’ll want to include the full URL, including “http://”. If you’re linking to your own site, you can also start with a slash and leave your domain name out.
For example, if I want to link to my blog landing page, I can do <a href=”/blog/”>visit my blog</a> and my website will automatically fill in my domain name before the slash. This is nice if you’re hand-coding your webpage or blog post and don’t want to type in your full domain name every time.
There are more pieces of code that you can put inside the triangular brackets of the opening tag that will do things like open the link in a new window. But since this a beginner post, we’ll save those for another day!
Line Breaks
Line breaks only require one tag. When you want to make your text go down a single line, use the tag <br> between those lines. For this tag, “br” stands for “break.”
You can do this within a paragraph as well, depending on how you need to format your text. If you have double spaces between paragraphs, for example (which is how my blog is set up), you’d use <br> if you want a single space between two lines of text.
Images
And finally, bloggers need to place images into their blog posts! To do this, you only need a single tag: <img src=”URL OF IMAGE”>. The first part stands for “image,” and the second part stands for “source.”
This code is pretty similar to links. First, you want to make sure you include the double quotation marks on either side of the URL. And second, there are additional pieces of code you can include within the brackets to change things like the image size, the border, etc., but we’ll get to those another day.
For images, make sure the URL of the image ends with .jpg, .png, or another image file extension, otherwise the image won’t show up!
Oh, and keep in mind that you can use the <img> tag just like a piece of text! So if you want to turn an image into a link, you’d do <a href=”URL OF LINK”><img src=”URL OF IMAGE”></a>.
How to Practice
The best way to learn a language is to use it, right? Coding languages are the same!
The best way to practice so you can learn to code? When you’re writing a blog post in WordPress, go to the Text editor instead of the Visual editor and try to code the whole blog post from scratch. You’ll probably be pretty rusty at first, but I promise it will get easier!
As a blogger, it’s important to expand your skill set on many different online platforms. You’ll be able to do a lot more with your blog once you learn to code! Hopefully these HTML basics will get you started.
