Understand the behind every blog post.
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 is HTML in simple terms?
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).
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.
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:
A closing tag is just an opening tag with a slash before the label.
A closing tag looks like this:
(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:
Anything included in the head goes here.
<head>Anything included in the head goes here</head>
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)
- Meta descriptions, page-level keywords, and author information
- Device information necessary for your site to show up properly on mobile devices and tablets
- 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.
However, 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.
The Body (<body>)
The body begins with the opening <body> tag (which comes right after the closing tag) and ends at the closing </body> tag (which comes right before the closing 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 different HTML tags?
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.
As mentioned above, <p> tags stand for “paragraph” and inside each tag pair is the contents of one single paragraph.
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.
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.)
These tags are incredibly useful to bloggers because they are what creates 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 contents 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:
<h1> to <h6> Tags
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.
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.
For a typical blog page, this means that your <h1> tags contain the title of your post, while subject headings get marked by headings 2 through 6.
<strong> and <em> Tags
As you start formatting your posts, you will begin to notice these two.
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
These tags are a little trickier becuase they have no effect until you add attributes to them. (Again, attributes will be 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.
Just in their raw form, these 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:
Stuff goes here.
Stuff goes <span style="color: red">here</span>.
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.
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).
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 which 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.
These are image tags and (shock) are used to insert an image into your webpage.
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:
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.
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:
Not-So-Fun Note: Header tags are easily confused with head tags and heading tags. Head tags go outside the body of the HTML document, heading tags mark your text headings, and header tags are the semantic ones (which 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.
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.
If you go through it line by line, you’ll actually understand exactly what’s going on.
And here’s what that code would end up looking like after being rendered by a web browser:
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.
Save It For Later? Share It?
Free Printable HTML Cheatsheet
Get a quick reference guide for all things HTML.
Printable, readable, easy to understand, and completely free.