HTML is something nearly everyone has heard about, but it can sound a bit intimidating until you figure out the (surprisingly simple) basics of how it works.
This post will let you peek under the hood of what this “HTML thing” is and see how it applies to your blog.
What’s the Problem?
Almost every time you run into a blog problem that involves formatting, plugins, embedding things, or other normal tasks it always seems to come back to understanding HTML.
However, for those of us who don’t live in The Matrix, this can get pretty irritating.
Fortunately, you can learn 80% of what you need to know about HTML (at least for the purposes of blogging) in about 20 minutes. If you’re reading this article, that 20 minutes starts now.
By the end of this article, you’ll fully understand everything in this code example:
<html>
<head>
<title>My Awesome Blog</title>
</head>
<body>
<h1>Blog Title</h1>
<h2>Here's a Level Two Header</h2>
<p>Here's a paragraph that explains a <strong>bulleted list</strong>:</p>
<ul>
<li>Item one</li>
<li>And another bullet</li>
<li>Look, here's a third one!</li>
</ul>
<h2>Here's Another Level Two Header</h2>
<p>Here's a paragraph with a <a href="https://www.donelikeamother.com">link</a> to our homepage.</p>
</body>
</html>And know that it will be rendered (aka interpreted by the computer) to look like this:
Why This Sucks
Okay, so let’s all take a moment and appreciate that the code showed above looks annoyingly complex for something that isn’t even that pretty to look at.
However, think of HTML as the beams of your house. You don’t buy a house thinking “wow, these 2x4s look absolutely stunning!”. You would be a total psychopath. However, without that framework you would never get to the squishy carpets, the yummy paint colors, and the gorgeous designs that make what is basically into a wood box into a home.
It’s the same with a blog. You’re in it for the content and the pretty colors, but you have to understand enough of the HTML (the framework) so you know how to implement things.
This post isn’t meant to turn you into a coder, but it should make HTML code a lot less scary when you inevitably have to interact with it in your work as a blogger.
How to Handle It
So here we go. Let’s demystify HTML one step at a time.
What is HTML in simple language?
HTML is short for “Hypertext Markup Language”, which is really just a fancy way of saying that it’s a language computers can understand (and more importantly obey).
Internet Vocabulary: HTML
“Hypertext Markup Language”: the language computers can understand that is used to make websites
There are many different programming languages, but HTML is the one in which most websites are written.
Basically, when someone writes a website (called “coding”) they type in HTML using just the keyboard keys to create plain text. No fancy colors, borders, or graphics. Everything is described using the HTML programming language.
When they’re done coding the website, they publish it to the internet where any other computer hooked up to the majestic webbernet can access that HTML document. (Your readers’ computers, for example.)
When someone accesses your web page, their computer (specifically their web browser) then translates the HTML into the pretty text, colors, graphics, and other magic that we see whenever we browse the internet.
How does HTML work?
An HTML document uses pairs of what are called “tags” to sandwich pieces of information.
Internet Vocabulary: HTML Tags
The little markers (starting with < and ending with >) that show the type of information being conveyed in any piece of HTML.
These tags work kind of like parentheses. Anything between the “opening tag” and the “closing tag” are treated as part of that element.
An opening tag is simply a word smushed between a greater than sign and a less than sign.
An opening tag looks like this:
<tag>A closing tag is just an opening tag with a slash before the label.
A closing tag looks like this:
</tag>(Note: They don’t actually use the word “tag”, that’s just an example. We’ll go over what tags are used in the next section.)
Tags almost always come in pairs, with one opening tag and its corresponding closing tag. Anything between the opening and closing tag gets interpreted with whatever properties are associated with that tag.
For example, a <p> tag stands for “paragraph”. That means that anything within the <p></p> tags is considered part of that paragraph. So this:
<p>Here is a paragraph.</p>Would be interpreted (by your web browser) as a paragraph that says:
Anything included in the head goes here.
The entire group of an opening tag, its contents, and the corresponding closing tag is called an HTML element.
How is HTML Structured?
Every HTML document begins with an opening <html> tag and ends with a closing </html> tag. This tells the interpreting web browser that everything between those tags is written in the HTML programming language.
Inside the HTML tags, every HTML document is comprised of the same two basic sections: a head and a body.
The Head (<head>)
This is where all the information about the webpage goes.
The information in the head isn’t printed on the page anywhere the end-user (your reader) can see it, but it includes a lot of information that determines what the website ends up looking like.
Here are just some of the important things that go into the head of a webpage:
- The page title, as is written on the top of the page tab in your browser (inside
<title>tags) - Links to other documents (such as stylesheets or javascript) that your webpage needs to render properly
- Meta descriptions, page-level keywords, and author information
- Device information necessary for your site to show up properly on mobile devices and tablets
- Information that your site needs to populate
- Snippets of external code that make certain plugins run (like the code you use to install Pinterest plugins)
Overall, you don’t need to understand everything that goes in the head, especially if you’re using a platform like Squarespace or WordPress that does most of the heavy lifting for you.
You should know what it is because from time to time you will need to install plugins, widgets, or other goodies that tell you to put code into the head of your HTML document in order to function properly.
Free HTML Cheatsheet for Bloggers
Coding may not be your thing but bloggers need to use HTML here and there. Use this cheatsheet to save yourself from Googling every time you need to remember how to create a hyperlink.
The Body (<body>)
The body begins with the opening <body> tag (which comes right after the closing </head> tag) and ends at the closing </body> tag (which comes right before the closing </html> tag that signifies the end of your document).
Everything you see on a webpage, from the text you read and the images you see, to the animations, forms, or fancy web tools, is written between the two body tags.
The body section is “where the magic happens” and contains a variety of different HTML tags, each with a different purpose and usage.
What are HTML tags and how do they work?
So now that you know all about how HTML tags work, you can appreciate a whole variety of different tags and their functions.
You can see a full(er**) list of tags in the free HTML cheatsheet at the end of this post, but I’ll give you the most common ones here.
**I say “fuller” not “full” because there are an astounding, unnecessary, and evergrowing list of possible HTML tags out there. However, most blog posts only use the same common ones and you can always google it if you run into anything weird you haven’t seen before.
Tags Paragraph Tags (<p>)
As mentioned above, <p> tags stand for “paragraph” and inside each tag pair is the contents of one single paragraph:
Newbie Mistake to Avoid: Some HTML novices improperly use forced line breaks (demarcated by
<br>) to create new lines for new paragraphs, but this can get you into trouble later when you start using CSS to style your website. You always want to create a new paragraph using<p>tags and save<br>tags for intentionally breaking a line mid-paragraph, but in a specific spot.
Even if that last paragraph sounded like Greek, for now just get in the habit of using a new set of paragraph tags for each and every paragraph. If you’re using a text editor like WordPress, you can type a few paragraphs then flip over to the code view and see how it does this automatically.
(For instance, this section on paragraphs has four pairs of paragraph tags, each housing one of the four paragraphs in the section.)
Link Tags (<a>)
These tags are incredibly useful to bloggers because they create links to other websites (such as links to other of your own blog posts or affiliate links).
Everything between the opening tag and the closing tag is transformed into a link to another webpage.
If the content is text, it usually turns blue and gets underlined. If it’s an image, the cursor usually changes into a pointer when you mouse over the image to show that it’s a link.
Bonus Points: If you’re wondering how the code knows what website it should link to, each <a> tag comes with what’s called an “href attribute” that provides this information. We cover attributes in this deep dive on HTML attributes, but for now, it ends up looking like this:
<a href="https://www.donelikeamother.com/">This links to our homepage.</a>This means that you don’t want the website to which you’re linking to get an SEO boost because you link to it.
Heading Tags (<h1> to <h6>)
These are header tags and are some of the most important for bloggers to understand.
Basically, anything inside a <h1> pair is formatted as a header 1, and so on through the numbers up to header 6.
Important Note: These are used instead of paragraph tags and should never be used inside a paragraph tag. It’s one or the other and cannot be both.
Headers are visually necessary because they break up the way a post looks and make it easier and more interesting to read. (Think how horrible this article would be to read without the headers…just one long wall of text. Horrible.)
Headers are also necessary for search engine optimization (SEO). You will get penalized in the search engine rankings if you have more than one <h1> tag on a single page or if your headers don’t follow a logical order.
For a typical blog page, this means that your <h1> tags contain the title of your post, while subject headings within a post or article get marked by headings 2 (<h2>) through 6 (<h6>).
Style Tags (<strong> and <em>)
As you start formatting your posts, you will begin to notice these two a lot.
Anything between the opening and closing <strong> tags will end up bold.
Anything between the opening and closing <em> tags will end up italicized.
Unlike heading tags, these may be freely used within paragraph tags or heading tags, as long as you remember to include both opening and closing tags.
(If you forget the closing tag the rest of the page from that point on will end up bolded or italicized. Yikes.)
Span and Div Tags (<span> and <div>)
These tags are a little trickier because they have no effect until you add attributes to them. (Again, attributes are covered in-depth in a separate post, but we’ll give you the basics here.)
First, a <span> tag can only contain a selection of inline text while a <div> tag can hold pretty much anything it likes.
Internet Vocabulary: Inline versus Block
Anything referred to “inline” is stuff that comes one after another, left-to-right on the page…just likes words in a line of text. On the other hand, things that are displayed as a “block” automatically go below whatever came before them, even if there’s technically enough room on them to the right of the preceeding object.
Just in their raw form, <span> and <div> tags won’t change anything. For instance, the following two lines will be rendered exactly the same way:
<div>Stuff goes here.</div>
<span>Stuff goes here.</span>However, once you start to add attributes to them, they can do a crazy variety of things. For example, the span in this example will turn the word “here” bright red when the HTML is rendered (aka translated) by the browser:
<p>Stuff goes <span style="color: red">here</span>.</p>Will end up looking like this:
Stuff goes here.
Div tags are incredibly versatile and merit their own post entirely. They can create columns, colored boxes, groups of objects, and a limitless number of other crazy cool features that you take for granted on most websites you visit.
For now, all you really need to know is that both <span> and <div> tags are used for formatting purposes and that they need to come in pairs (aka an opening tag always needs a closing tag or they get lonely and wreak havoc).
Non-Paired HTML Tags
So far every type of HTML tag we’ve looked at comes in a pair: one opening tag and its corresponding closing tag.
I wish all HTML was like this, but there are some tags that do not require a closing tag.
It’s important to know which is which because many, many issues come from failing to close a tag that needs closing.
Image Tags (<img>)
These are image tags and they are used to insert an image into your webpage (gasp).
An image tag uses a source attribute (again, discussed in detail in a separate post) to tell the browser where to get the image.
If you’re using an image from another website, it will look something like this:
<img src="https://www.imagesite.com/mypicture.jpg">You probably won’t need to create these, especially if you’re using a web builder like LeadPages, WordPress, or SquareSpace, but it’s important that you learn to recognize them when you see them.
Line Break Tags (<br>)
As discussed above, these break tags are used to force text to go to the next line.
They can be incredibly useful for making sure text flows properly and words don’t get stranded on a line by themselves, but break tags should never be used to create blank space or to create new paragraphs.
Semantic HTML Tags
Semantic HTML tags are useful, but completely optional.
These tags use “plain English” words as tags to create sections that are easier for human coders to read, but they will make absolutely no difference in the way the webpage ends up using.
For example, the following two lines would end up looking the exact same way to your readers:
<div>Stuff goes here.</div>
<section>Stuff goes here.</section>The only difference is that the one with the semantic footer tag is a bit easier for the coder to remember what is going on.
Other semantic HTML tags include:
- Main
- Header
- Article
- Figure
- Footer
Not-So-Fun Note: Header tags (<header>) are easily confused with head tags (<head>) and heading tags (<h1>, <h2>, etc.).
- Head tags (
<head>) go outside the body of the HTML document. - Heading tags (
<h1>,<h2>, etc.)mark your text headings - Header tags (
<header>) are the semantic ones that are just for the ease of the coder but have no function by themselves.
Thanks, internet.
Grouped HTML Tags
While some HTML tags (like paragraph tags or heading tags) function by themselves, other tags come in groups and must be used in certain ways.
There are many of these, but the most common examples are for lists and tables.
In HTML there are two different types of lists:
<ol> stands for ordered list and will be a numbered list.
<ul> stands for unordered list and will be a bulleted list.
Both ordered and unordered lists have opening and closing tags.
They also function in the same way. The opening tag (either ordered or unordered) signifies the start of a list, but won’t create a list all by itself. Each individual list item within any type of list has to be enclosed in a list item tag.
Individual list items are represented with <li></li> tags.
So, to create a bulleted list, your code would look like this:
<ul>
<li>First Bullet</li>
<li>Second Bullet</li>
<li>Third Bullet</li>
</ul>To create a numbered list, all you would have to do is change the <ul> to an <ol>.
Similar, to lists, to create a table takes a series of HTML tags to create a table.
I won’t go over this in-depth in this post, but it’s easily googlable if you need to create one.
As I’ve stated in other sections, you probably won’t ever need to create one of these bad boys from scratch, but if you understand the basics you should be able to recognize what’s going on when you see it.
Free HTML Cheatsheet for Bloggers
Coding may not be your thing but bloggers need to use HTML here and there. Use this cheatsheet to save yourself from Googling every time you need to remember how to create a hyperlink.
Skimmer’s Guide
With these few building blocks, you should be able to understand the basic structure of any web page you see.
Just to summarize, I’ll end with a very bare-bones structure of what each of your blog entries will most likely look like.
Now, if you take a look at the code example we showed at the beginning of the post, it doesn’t actually look all that scary:
<html>
<head>
<title>My Awesome Blog</title>
</head>
<body>
<h1>Blog Title</h1>
<p>Here's an intro paragraph.</p>
<h2>Here's a Level Two Header</h2>
<p>Here's a paragraph that explains a <strong>bulleted list</strong>:</p>
<ul>
<li>Item one</li>
<li>And another bullet</li>
<li>Look, here's a third one!</li>
</ul>
<h2>Here's Another Level Two Header</h2>
<p>Here's a paragraph with a <a href="https://www.donelikeamother.com">link</a> to our homepage.</p>
</body>
</html>So that’s all for HTML basics!
If you have any questions feel free to leave a comment and I’ll do my best to answer ASAP!
And don’t forget to download your free HTML cheatsheet below. It has a quick and easy guide to all this and more.
Your ally in the war against messy-looking blogs,
Liz Bayardelle, PhD
Liz is the mom of three human(ish) kids, three furkids, three businesses, and eight blogs. She also has a PhD in Business Psychology, several published books on parenting psychology, and a serious Chick-fil-a addiction. Hobbies include color coding anything that will hold still, reading textbooks for fun, swearing at her herd of dustbunnies, and nodding off mid-sentence at the dinner table.