All bloggers should have some knowledge of how to use basic HTML in their blog posts. While you don’t need to be a professional coding guru thanks to powerful visual editors like Elementor, you should at least get a grasp on these 10 HTML codes so that you understand how to use them and what they do.
Fact: The WordPress Visual Editor (whether you’re using Classic or Gutenburg) isn’t providing you with the important information that search engines and Pinterest need. Therego, you aren’t setting yourself up for success in the way you think that you are.
This blog post aims to help you address that.
Headings
^ Yup. That right there is a heading. It’s a way for you to format and break up your blog posts so that they are easier to read. It looks better visually, and it just makes it easier for the reader to follow. You should be using headings to break up your content into manageable sections.
There are 6 size options and how they look may differ from theme to theme. But generally speaking, they range from largest to smallest – <h1> being the largest size, with <h6> being the smallest.
<h1>Heading</h1><h2>Heading</h2><h3>Heading</h3><h4>Heading</h4><h5>Heading</h5><h6>Heading</h6>
How to use Headings
These codes are more than just size options – they are actually for SEO (Search Engine Optimization) purposes. Generally speaking, you should use headings in order of importance. For example, your blog or page title is utilizing an <h1> tag, and you shouldn’t use it for anything else.
Also be sure to use these in order. Google places some importance on your headings because it helps it understand what’s going on in your blog post. Headings with an equal or higher rank should start a new section, while headings with a lower rank start new subsections that are part of that higher ranked section.
For example, in this section, “Headings” is utilizing the <h2> tag, while the subsection “How to use Headings” is using an <h3> tag.
Pro Tip:
Your use of headings can affect your SEO. If you’re new to formatting blog posts, I recommend learning how to write a blog post that ranks well in search. This ebook will guide you in using your headings better, and ultimately teaching you on page SEO for beginners.
Images
Your visual editor (especially on WordPress) is likely able to do most of the work for you, but I still think it’s a good idea to understand how to manually insert an image into a post, page, of widget. And thanks to this section, you’ll know how to code an image for yourself, as well as a couple of more advanced linking strategies that will come in handy when optimizing your images for SEO and Pinterest.
To start, let’s look at the image below (how cute was our wedding cake topper!?). At right, you’ll find the code that creates that image.
<img src= "Your Image URL">Keep in mind that this is super basic, and the absolute minimum when it comes to linking an image. There’s actually quite a bit more that you should consider when linking an image.
Alt Text
Alt text, also know as “alternative text”, “alt attributes”, or “alt descriptions” are used to describe the appearance and function of an image. It really serves 3 major purposes:
- It allows visually impaired users using screen readers better understand the on-page image through your description of it.
- If for some reason the file cannot load, it will display this text in place of it.
- It provides better context to search engines to help them index the image properly.
You’ll probably provide this information when you add media to your blog posts when using a visual editor, but it’s good to understand what that looks like and why you need it. Here’s an example of what that looks like using the same image from above.
<img src="Your Image URL" alt="Married couple seated behind wedding cake with Star Wars cake topper">
Notice that I described what was in the image to help paint a visual for the reader, including using some key words that would help Google understand what the image is about (thus increasing it’s understanding of what a blog post might be about).
Pinterest Description
It’s super frustrating when someone pins your image and doesn’t include any sort of description that will help Pinterest understand what the image is about, right? That’s actually something that you can set for yourself! Using the same example from above, here’s what the code looks like:
<img data-pin-description="This is the text that will appear when someone pins your image." src="Your Image URL" alt="Married couple seated behind wedding cake with Star Wars cake topper">
Disable Pinning
You’ve got all these images within your blog post, but they aren’t the ones you want people pinning. Case in point, this blog post isn’t about my wedding cake or its topper, so I don’t really want people pinning it from this blog post. It doesn’t serve me and my blog to allow for that.
Luckily, with a little bit of code, we can disable pinning for an image. When you do this, only the images you’ve allowed for will show up when someone uses the Pinterest browser extension. Here’s what that looks like:
<img data-pin-nopin="true" data-pin-description="This is the text that will appear when someone pins your image." src="Your Image URL" alt="Married couple seated behind wedding cake with Star Wars cake topper">
Pro Tip:
The more complex you get with your linking structure (and you should be), you’ll probably find it a heck of a lot easier to use a plugin like WPTasty, which provides you with a space for your Pin description and a checkbox to disable pinning per image.
It’s less than $30 for the year, which I think is totally worth it for the time and headache it can save you (not to mention how much better it is for optimizing your images for both SEO and Pinterest).
Hyperlinks
Learning how to write out a link for yourself and understanding how they work is something any blogger should know – especially if you find yourself in need of linking to content outside of your website. So let’s start first with a very basic link. I’ll be linking to my home page in this example.
Link: How to Blog with Purpose
How to make it: <a href="Your Website URL">How to Blog with Purpose</a>
Advanced Hyperlinking
There are going to be instances where you’ll need more advanced coding. These could be for telling the link to open in another tab, or for telling search engines not to follow the link.
Open a link in a new tab: <a href="Your Website URL" target="_blank">How to Blog with Purpose</a>
Did you know that the FTC requires your sponsored and affiliate links to include what’s called a “No Follow” tag? It prevents other websites from capitalizing further on those links. Not including a No Follow tag is sort of like giving the page found at that link a “vote” in favor of its content.
NoFollow Link: <a href="Your Website URL" rel="nofollow">How to Blog with Purpose</a>
Open in new tab + NoFollow: <a href="Your Website URL" target="_blank" rel="nofollow">How to Blog with Purpose</a>
Linking Images
Now that you know how to insert media and everything regarding optimizing your images for SEO and Pinterest, combined with your knowledge of how to create links… let’s link some images! I’ll be using the same example, and I’ll break it down.
Inserted image without link: <img src= "Your Image URL">
Insert image linked: <a href="Your Website URL"><img src="Your Image URL"></a>
Linked image with Alt Description: <a href="Your Website URL"><img src="Your Image URL"></a>
Linked image with Pin Description: <a href="Your Website URL"><img data-pin-description="This is the text that will appear when someone pins your image." src="Your Image URL"></a>
Linked image with Pin Disabled: <a href="Your Website URL"><img data-pin-nopin="true" src="Your Image URL"></a>
Linked image with Alt Description + Pin Description: <a href="Your Website URL"><img data-pin-description="This is the text that will appear when someone pins your image." src="Your Image URL" alt="Married couple seated behind wedding cake with Star Wars cake topper"></a>
Confused? I’ve got ya covered.
Lists
Everybody loves a good list, and they aren’t difficult to put together. There are 2 types of lists: Ordered, and Unordered. An ordered list is basically what it sounds like, utilizing numbers to create a sequential list. Unordered lists are made of bullet points instead.
Here’s what they look like, and their corresponding code:
- An
- Ordered
- List
<ol>
<li>An</li>
<li>Ordered</li>
<li>List</li>
<ol>- An
- Unordered
- List
<ul>
<li>An</li>
<li>Unordered</li>
<li>List</li>
<ul>See? Simple and effective. Note the difference between the two – <ol> for Ordered List, and <ul> for Unordered List.
Text Styling
Emphasis can be made in your sentences by using some text styling. It’s a bold way to make your words striking. These forms of basic text styling are commonly used, and they are a great way to change the voice in your blog posts.
- Bold:
<strong>Bold</strong> - Italics:
<em>Italics</em> Strike:<strike>Strike</strike>- Underlined:
<u>Underlined</u> Combo:<strong><em><strike><u>Combo</u></strike></em></strong>
But maybe you want to get more advanced by:
…changing the color of a few words:
<span style="color: #3a4dff">changing the color of a few words</span>
…changing the font family:
<span style="font-family: Georgia, serif"><strong>changing the font family</strong></span>
…size of your words:
<font size="5">size of your words</font>
Click Here to email Kimi: <a href="mailto:kimi@howtoblogwithpurpose.com">Click Here to email Kimi</a>
Table with Headings
Another fantastic formatting trick for your blog posts that can keep information organized is a Table with a Heading. It looks like this:
Heading 1 |
Heading 2 |
|---|---|
| Row 1, Cell 1 | Row 1, Cell 2 |
| Row 2, Cell 1 | Row 2, Cell 2 |
<table><thead><tr>
<th><h5>Heading 1</h5></th>
<th><h5>Heading 2</h5></th>
</tr></thead>
<tbody><tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td></tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr></tbody></table>Linked Buttons
Most themes will come with the option to add a button to your post or page. This button style will be preset within your theme.
Click This Button
<a href="Your Website URL" class="button">Click This Button</a>
Your turn…
How many of these HTML tricks did you know?
Don’t forget to Pin it!
If you enjoyed the content of this blog post and found it valuable, please save it to Pinterest so that other people can read it too!
CLICK HERE TO PIN IT
Leave a Reply