As a freelance writer or blogger, you’ll often be asked to submit your articles in HTML. If you don’t know HTML, this may send a cold shiver up your spine. However, that needn’t be the case.
The truth is that HTML is a very simple language. There’s no reason to be intimidated by the prospect of having to write up a post using HTML markup, and adding this skill will mean you can take on new opportunities that were previously out of reach.
In this post, I’ll first explain what HTML is, how to create an HTML document, and how it works. Then, I’ll introduce you to 12 common HTML elements that every blogger and freelancer writer should know.
Before you know it, you’ll be ready to start slinging code yourself.
What is HTML?
HTML, or HyperText Markup Language, is a computer language that was created for use in web pages. The purpose of the language is to tell a browser the meaning of every bit of content on a web page.
Right now, you’re reading text that has been identified to the browser as paragraph text. In addition, the italicized word in that last sentence was marked in HTML as requiring additional emphasis, which is why the browser has rendered it in italics.
Are you getting the idea? Every bit of content on a webpage – text, headings, images, menus, links, everything – is assigned a certain meaning by HTML.
How to Create an HTML Document
To create an HTML document and write HTML, you’ll need a plain text editor. Don’t use a standard word processing program like Microsoft Word or a Google Docs document which can cause major formatting headaches. Instead, use a plain text editor such as Atom, or my personal favorite Sublime Text. If you’d rather avoid installing an application on your computer, you can also use Drive Notepad, which is a web-based text editor that will save documents to Google Drive.
Once you have a text editor set up, create a new document and save it. However, when you save it, end the file with .html like this: example-file.html.
Now, your text editor will recognize that you’re writing HTML and turn on something called syntax highlighting that will help you avoid code errors. In addition, by saving the document as an HTML document you’ll be able to open it with your web browser to see how your browser will render your code.
How Does HTML Work?
The easiest way to think of HTML is to think of two components: content and tags.
- Content is the text, image, or link you want to show up on the webpage.
- Tags are the bits of HTML you use to identify the content to the browser.
Let’s look at a fictional example:
Now obviously, tag isn’t actually HTML. However, it serves to illustrate the basic way that HTML works. In most cases, HTML tags surround the content you want to display on the web page (though we’ll cover a few exceptions to the statement as we go along).
The tag tells the browser the meaning of the content. The browser doesn’t actually show, or render, the tag, it renders the content. But the browser does use the tag to know what kind of content it is rendering.
That might still sound a bit nebulous, but keep going. I think the very first actual HTML tag we cover will really clear things up for you.
The paragraph tag is used to identify standard body text. So, if a browser were to encounter the line of HTML code in the heading above it would simply render the following:
As you can see, the
<p> tags aren’t shown. They just tell the browser “the bit of text sandwiched between us is everyday paragraph text.”
So, let’s say you wanted to make two paragraphs of text. You would do that like this:
<p>This is my first paragraph of text.</p>
<p>This is my second paragraph of text.</p>
When you rendered that bit of code in a browser, you’d see this:
This is my second paragraph of text.
I should mention at this point that you could just as well type the paragraph on a single line and get the exact same result:
<p>This is my first paragraph of text.</p><p>This is my second paragraph of text.</p>
The browser would see each set of
<p> tags and break that text out into two separate paragraphs.
This illustrates an important point: HTML doesn’t care about any line breaks you add outside of tags. Whether you add one line break, no line breaks, or 100 line breaks between the first and second paragraphs, the browser will render them all the exact same way.
As an aside, that last statement isn’t true if you’re writing in the text version of the WordPress post editor. However, that’s because of some features built into WordPress and not a feature of HTML. In general, HTML itself doesn’t care about line breaks.
Your text would be awfully boring without headings. Headings provide a welcome visual break and transition point in an article. In addition, headings and subheadings add structure to a document. For this reason, HTML includes six levels of headings. Here they all are:
<h1>This is a First Level Heading</h1>
<h2>This is a Second Level Heading</h2>
<h3>This is a Third Level Heading</h3>
<h4>This is a Fourth Level Heading</h4>
<h5>This is a Fifth Level Heading</h5>
<h6>This is a Sixth Level Heading</h6>
Now, let’s see how they all look when rendered by the browser:
This is a First Level Heading
This is a Second Level Heading
This is a Third Level Heading
This is a Fourth Level Heading
This is a Fifth Level Heading
This is a Sixth Level Heading
It’s really important that you understand the heading-subheading nature of the HTML heading elements. So, let’s look at that topic briefly.
First, every article or blog post should have only one first-level heading (
<h1>). In most cases, this is the article title. So every subheading should be an
<h2> or lower-level heading.
Second, you should use subheadings to add logical structure to your article. For example, if you have a section, marked by a second-level heading, that includes three nested subheadings, all three of those subheadings should be third-level headings.
Because proper use of subheadings is so important, let’s look at what a typical heading layout might look like for a standard blog post.
<h1>Blog Post Title</h1> <p>Some paragraph text.</p> <h2>Topic A Subheading</h2> <p>Some paragraph text.</p> <h3>Topic A Step 1 Subheading</h3> <p>Some paragraph text.</p> <h3>Topic A Step 2 Subheading</h3> <p>Some paragraph text.</p> <h3>Topic A Step 3 Subheading</h3> <p>Some paragraph text.</p> <h2>Topic B Subheading</h2> <p>Some paragraph text.</p> <h2>Conclusion</h2> <p>Some paragraph text.</p>
So that’s sort of long, but take a minute to look it over and make note of a few things:
- There’s only one first-level heading (
- The three subheadings that have to do with Topic A are all third-level headings (
- Once we’re done talking about Topic A we jump back to a second level heading (
Can you see how the use of headings enhances the logical structure to the document? The title is the most important heading and is marked as such by the
<h1>. After that, all subheadings of equal importance are presented using
<h2> tags. Finally, any subheadings within an
<h2> section use
Most blogs posts only include a single
<h1> and a few
<h3> elements (although, there’s nothing inherently wrong with a post that never goes any deeper than an
<h2>). In a very long article, it isn’t unusual to use
<h4> tags. However, using
<h6> tags is pretty unusual and may indicate that you need to rethink an overly complex document structure.
What you probably think of as links are actually called anchor elements in HTML. To create a link, or anchor, we use the
<a> tag, like this:
<a>This is a link!</a>
If we render that link, here’s what we get:
Go ahead and try to click that link. Notice how nothing happens? That’s because we haven’t told the browser the URL we’d like that anchor element to load when clicked. In order to tell the browser the URL we want to link to we have to use something called an attribute.
Think of an attribute as a characteristic. When we add an attribute to an HTML element we’re further defining something about that element. In general, as a writer, you don’t need to know too much about attributes, but the anchor element is one exception to that generalization.
The first attribute of the anchor element that you need to know how to use is called the
href attribute. It is used to tell the browser the URL that you want to link your anchor element with. It looks like this:
<a href="http://example.com">This is a link!</a>
href attribute does is link the anchor text to the URL http://example.com. Now, when we render the anchor element and click the link, we’ll be sent to that URL. Give it a try:
Great! We now have a functional link. However, it was kind of a hassle to have to click Back to get back to this article, right? Well, we can avoid that by telling the browser to open the link in a new browser window.
To do that, we need to use the
target attribute, like this:
<a href="http://example.com" target="_blank">This is a link!</a>
Now, try giving the link a click and see what happens:
Many websites and blogs like to set all internal links — those that link to other parts of the same website — to open in the same browser window, but all external links — those that link to different websites — to open in a new browser window. This helps keep visitors around on the original site for longer. Although, to be honest, setting any links to open in a new browser window will annoy a certain percentage of internet users.
Sometimes, while writing, you’ll want to emphasize a certain word. In order to do that, just wrap the text you wish to emphasize in
<em> tags, like this:
<h1>The Eighth Word in this Heading is <em>Really</em> Important</h1>
When we render that bit of code in the browser, this is what we get:
The Eighth Word in this Heading is Really Important
<em> tag is useful and gets a healthy amount of use. However, it’s important to limit the use of the tag to the times when you actually need it. Apply emphasis to a word in every sentence and two things will happen: you’ll annoy your readers and the tag will lose its effectiveness.
Sometimes, italicizing a word for added emphasis isn’t enough. Sometimes, when you have something really critical to say, making the text bold will help to get your readers’ attention. In that case, the
<strong> tag is the tag you’re looking for.
Another common, and proper, application of the
<strong> tag is as part of a definition, like this:
<p>The <strong>strong</strong> tag adds a strong emphasis to the selected text and browsers generally render the selected text using a bold font.</p>
Let’s bring that up in the browser so we can see how it looks:
In this case, the use of the
<strong> tag indicates that the word in bold is the subject of the definition that follows.
All of the tags we’ve looked at so far include both an opening tag (
<tag>) and a closing tag (
</tag>). However, some tags are called self-closing and do not require a closing tag. This is generally the case when the tag in question doesn’t surround any content.
That might sound confusing, but let’s forge ahead and things will clear themselves up.
The image tag,
<img> is a self-closing tag that requires the use of two attributes:
alt. Let’s see the tag in action, and then we’ll explain how it works.
<img src="https://jonpenland.com/path/to/image-file.jpg" alt="A picture of Jon Penland.">
So here’s what’s going on.
- We start with the
imgtag, which just tells the browser that this bit of content is an image.
src, or source, attribute gives the browser a URL where the image file is located — in this case, I’ve fictionalized the URL so that you can see what’s going on.
- We provide a bit of
alt, or alternative, text which will be used if either the image cannot be found or the visitor viewing the page is using a screen reader.
Let’s render that image to see how it looks:
So the image is displayed and the
alt text is not. However, if the link to the image breaks, here’s what you’ll see instead:
Some clients may ask that you add a more tag after the first few paragraphs of a post. What they’re asking you to do is to insert an HTML comment into your document that looks like this:
<p>A paragraph of text before the more tag.</p> <!--more--> <p>A paragraph of text after the more tag.</p>
Let’s see how that comment looks when we render it in the browser:
A paragraph of text after the more tag.
Wait! What happened? Exactly what was supposed to happen.
An HTML comment is only visible when you view the HTML source code of the web page. When you render the HTML in a browser, the comment is omitted.
So, why would a website want you to add a
<!--more--> tag? Because more tags are often used to determine how much text to use as an excerpt of the post.
Creating more tags isn’t the only purpose of HTML comments. They’re useful for adding clarifying notes to your HTML markup as well. For example, if you’re writing a post that includes lots of screenshots you could add HTML comments to indicate where each screenshot should be added to the post, like this:
<h3>Topic B Step 3</h3> <!--insert step-3.jpg here--> <p>Some paragraph text.</p>
Lists are a mainstay of the blogging world. They are tremendously useful for presenting bits of related information in a way that breaks up the monotony of paragraph after paragraph of text.
There are two common types of lists available in HTML:
- Ordered lists, and
- Unordered lists.
Ordered lists are created with the
<ol> tag and are used for lists that must be presented in a certain order, such as the steps you would take to change the brakes on a 1969 Camaro. Ordered lists are numbered.
Unordered lists are created with the
<ul> tag and are used for lists that do not need to be presented in a certain order, such as 23 reasons why the 1969 Camaro was the greatest Camaro every built. Unordered lists are bulleted.
Whether your list is ordered or unordered, each item on the list is wrapped in
<li>, or list item, tags.
Let’s look at an example of each type of list so that you can see how list syntax works:
<p>This is an ordered list.</p> <ol> <li>The steps of</li> <li>An ordered lists</li> <li>Must be presented in a specific order.</li> </ol> <p>And this is an unordered list.</p> <ul> <li>Red</li> <li>Blue</li> <li>Green</li> </ul>
As you can see, the ordered list contains list items that wouldn’t make any sense if rearranged. They need to be presented in a specific order. The second list, on the other hand, contains three items that could be presented in any order without affecting the meaning of the list.
Let’s see how each list looks when rendered by the browser:
- The steps of
- An ordered lists
- Must be presented in a specific order.
And this is an unordered list.
<br> tag is used to create a hard line break in a line of text. For instance:
<p>This paragraph looks like it should have line breaks, but what does your browser think?</p> <p>This paragraph doesn't look<br>like it should have line<br>breaks, but what does<br>your browser think?</p>
How will your browser render each of those paragraphs? Do you think you know? Let’s find out.
This paragraph doesn’t look
like it should have line
breaks, but what does
your browser think?
<br> tag is particularly useful for bits of content that include hard line breaks, such as physical addresses.
The horizontal rule tag,
<hr>, is one should know about but never use unless you’re writing for your own blog or with the prior approval of your client.
The horizontal rule is designed to indicate a change in the current line of reasoning in a post. Think of it as the transition between one scene and the next in a play or movie. The horizontal rule indicates “we’re done with that topic and moving on to a new topic.”
<p>We've been talking about Topic A. Now we're done.</p> <hr> <p>Topic B is great! I could talk about topic B all day long!</p>
While that’s all well and good, the problem is that the horizontal rule is displayed visually on a webpage. Like so:
Topic B is great! I could talk about topic B all day long!
Most blogs just don’t use horizontal rules, which is why you must never add one to an article without prior approval from the editor. Most blogs would rather that you just use a new heading to indicate a change in topic.
Extra Credit: The class and id Attributes
Do you remember when we talked about attributes while covering the image and anchor (link) elements? Well, there are two additional attributes you may be called upon to use from time to time:
Both of these attributes add an identifier to an HTML element which can be used in a variety of ways. As a writer, there are two common scenarios where you may be asked to add these attributes:
- You may be asked to add a
classattribute to certain elements so that they will be styled in a unique fashion.
- You may be asked to add an
idattribute to certain elements so that links directly to those items can be created.
Let’s look at an example of a class and id so that you can see them in action.
<h1 id="topic-a">Topic A is Amazing!</h1> <p>Some paragraph text.</p> <p>This text contains a <a class="internal-link" href="#topic-a">link</a>.</p>
You won’t see either when we render the code. Take a look:
Topic A is Amazing!
Some paragraph text.
This text contains a link.
Here’s what going on in that bit of code. First, we added an id attribute to the heading. Next, in the second paragraph, we added a link with a class attribute. In addition, the
href in the link is
#topic-a. This bit of syntax means that the link will point to the element with the attribute
The class, in this case, could be used to style that link differently from the rest of the links on the webpage. That way, visitors could learn to recognize links that link to other sections of the same documents versus those that link to external webpages.
While it certainly isn’t the norm, it also isn’t unheard of for some blogs and websites to add ids to every heading so that users can link directly to any heading in the document. For example, if we wanted to link directly to an element with the id of
topic-a on this webpage, we would format our link like this:
<a href="https://jonpenland.com/basic-html-for-bloggers/#topic-a">This link goes right to Topic A</a>
We could use that link on any webpage and it would bring us right to the element with the id of
topic-a on this webpage.
There’s one additional detail you need to know about ids and classes.
- Ids are unique, and can only be used once per webpage.
- Classes, on the other hand, are not unique and may be used on any number of elements.
That shouldn’t be hard to remember. Just think of ids and classes in human terms and you should keep them straight. Your personal id, such as a driver’s license, is unique just to you, but when you attend a class you expect lots of other students to be on the roster — that class is certainly not unique to just you!
As a writer, you’ll find that many blogs and websites expect you to deliver your writing using HTML markup. If you don’t know HTML, this can be cause for alarm. However, learning basic HTML really isn’t difficult — and really, the basics is all that you need as a freelance writer.
In this article, I’ve introduced a dozen of the most common HTML tags for bloggers and writers. Grow familiar with them and you’ll be able to deliver clean HTML that will delight and impress your customers.
If you liked this article and would like more blogging know-how goodness in your life, there’s an email list I think you should join.
What tag did I leave off this list that you’d like to know more about? Let me know in the comments section below!