You don’t need to be a coding genius to rock your blog, but you should know basic HTML codes to take your blog to the next level. Super simple stuff. Nothing scary!
Thanks to powerful visual editors that are standard with most content management systems (like WordPress!), almost anyone can write and format their blog posts without the need for learning HTML or CSS. But sometimes things refuse to show up the way you want, and a good list with basic HTML codes will save you time and frustration.
So I put together some HTML codes that a blogger should know. Let’s dive right in to sort this out!
MY TOP LIST OF BASIC HTML CODES FOR BLOGGERS
I already told you that for SEO purpose you should break up your content in headings to show what you’re writing about.
And not just for SEO purpose, it looks better visually, it makes the content easy to follow. You definitely should be using headings and know how to use them correctly.
There are 6 size and it’s important to use headings in order of importance. Don’t use headings for the size of the text ! Never! It’s a bad practice!
HOW IT APPEARS
So, H1 is already taken by the title of your site, H2 is the title of your post or page , while headings in the content would use Headings 3-6.
Sure, you have the button ADD MEDIA for inserting images, but it’s much easier to edit it within html code.
Or maybe, in some cases, you need to manually enter an image.
HTML CODE FOR IMAGES LOOKS LIKE THIS:
<img src=”image URL here“ alt=”important for SEO-add your keyword “ width=” “ height=” “ />
You don’t have to add a width and height, only when needed.
Links are the most important part of being a successful blogger. And a good content…And a lot of other things 😀
You need to link to other posts, other pages, social media, other sites, affiliate links. Learning how to write out a link yourself and understanding how they work is like learning how to make your coffee.
Not hard at all, and very useful since you drink coffee 3 times in a day.
Standars Links – When you link through your site
1.Link opens in the same tab (when readers navigate through your site) :
<a href=”URL(the target address for the link)“ > text for the link(ex:view my portofolio) </a>
2.Link opens in a new tab (when you write down an article that has details in other articles and put reference to that articles, it’s a good practice to make that link to open in a new tab. The readers can see both articles. I personally hate to go back.) :
<a href=”URL” target=”_blank“ > text for the link </a>
Affiliate Links & Sponsored Posts
It’s require that your sponsored and affiliate links to include a “No Follow” tag. If not, Google will penalise you in terms of search rankings.
<a href=”URL” target=”_blank” rel=”nofollow“ > text for the link </a>
4.Linking an Image
Just put together 2 and 3.
This is very handy for homepage, a portfolio page, about page and widgets area.
<a href=”URL“ > <img src=”image URL here“ alt=” keyword “ /> </a>
These are so simple to make, and they are a nice formatting trick that makes everything easy to read in your blog posts.
There are two types of lists: Ordered (1, 2, 3) and Unordered (usually made of bullet points).
HOW IT APPEARS
<li>Swim in the ocean</li>
<li>Dance in the rain</li>
- Swim in the ocean
- See Paris
- Dance in the rain
I know…paragraph? Really? I show you this only because browsers automatically add some space (margin) before and after each paragraph.
In case you wonder why a text has more space between lines.
<p> I prefer the ocean when it’s gray. Or not really gray. A pale, in-between color. It reminds me of waiting for something good to happen.</p>
HOW IT APPEARS
I prefer the ocean when it’s gray. Or not really gray. A pale, in-between color. It reminds me of waiting for something good to happen.
<p> I prefer the ocean when it's gray. Or not really gray. </p>
<p> A pale, in-between color. It reminds me of waiting for something good to happen. </p>
I prefer the ocean when it’s gray. Or not really gray.
A pale, in-between color. It reminds me of waiting for something good to happen.
Some themes block browsers to add that space with CSS.
7.Email Address Link
You can make it easy for people to email you with just one click by turning your email address into a link like this one: Send me an email
If you want to write a poem, for example, instead of putting each line in a separate paragraph, use this little break code. One of these will start a new line, or you can use the code for the non-breaking space:
Life is short.<br />
Move to the beach <br />
and never look
HOW IT APPEARS
Life is short.
Move to the beach
and never look
You can see through my posts that I use a lot some kind of background color to highlight the parts of text that are crucial (this text is highlighted). Honestly, I like it very much, not only that the text becomes much easier to read, but it also adds a touch of color and charm.
VERY IMPORTANT!!! If you use the mark tag through your text , this doesn’t mean your text will be automatically pink and bold like mine. Depends on the style of your theme, usually is yellow. But you can change this very easy.
Now, your mark tag is ready to use
<mark>the text you want to highlight</mark>
Of course you can change the code for the color with something appropriate with your design.
And something very easy in the end…In HTML5, the <hr> tag defines a thematic break. So, if you want to split the context with a horizontal line to highlight that they are different subjects, use:
So, that’s it for now! I think, I cover the basic HTML codes a blogger should know. It wasn’t that hard, right?
You don’t have to memorize all this codes, just copy and past when needed and I assure you, you’re gonna wake up one morning, and you will write this codes without even thinking.
I’ve done my best to explain everything so it will be understandable to everyone, but if you have questions leave me a comment.