Basic HTML – HTML for Bloggers

HTML can be confusing. Just look at this

<a script={@kdf£") 14px^> <link>¤&// px</img>

That’s not HTML – but if it makes as much sense to you as actual HTML, this post is for you!

When it comes to coding, there’s actually multiple different languages. And like english and danish, they have different grammar (and makes you want to bang your head against the wall because it doesn’t make any sense). No, it really isn’t that bad once you get a hang of the basics.

The main advantage of knowing some html is, that you have complete control of how your posts looks, and it gives you more freedom when it comes to tweaking the layout of your blog.

Basic HTML - HTML for Beginner Bloggers

For a blogger, there’s 4 relevant coding languages[1]

  • HTML: Hyper Text Markup Language. If you imagine building a website is like building a house, HTML would be the walls and basic furniture – it sets the structure.


<ol><li>HTML can identified by all the <strong>less than</strong> and <em>greater than</em> signs</li><ol>

Turns into this:

  1. HTML can identified by all the less than and greater than signs
  • CSS: Cascading Style Sheet[2]. Continuing the beautiful metaphor above, in a house CSS is decorations, the wall paper and everything else that makes the house pretty. One a website, it’s sets the font, the colors, the placement and size of different elements. There’s some overlap between what HTML and CSS can do.

CSS can look like the red text, going undercover in HTML.

<a href="" style="color:red;">best blog ever</a>

Or it can be in a stylesheet before the HTML, looking like this

#class-name { color:red; font-family: "Times New Roman";}

  • Javascript: More complicated, but it can do cool interactive stuff. As a blogger, it’s unlikely you’ll have to write out javascript, but you might add elements of it – Like instagram widgets or pop ups[3]. In the house, it would be like letting a crazy badger and a baby loose. (I didn’t really think the metaphor through. It made more sense before)
  • PHP: Hypertext Preprocessor. If you’re a self hosted wordpress user, you can benefit from knowing it. But it’s a real pain in the butt, so there’s that.
Basic HTML - HTML for Beginner Bloggers


Let’s start by learning some basic HTML. You can use this when writing a post in HTML mode, and most comment sections allow some basic html too. Some of the widgets in my sidebar are also build with HTML.

In html, you have opening tags, like this <html> and closing tags </html>. They always come in pairs, except when they don’t. Why are there always stupid exceptions when it comes to grammar!

Quick note: The red text is the part you need to replace with your own when using this tutorial. You can just copy paste the text into your HTML-editor.


<a href="http://" title="text shows when hovering over link" target="_blank">this is the text that will show up</a>

Target="_blank" will make the link open in a new tab. You can leave out the title="" and target="" if you like


<strong>This text is bold</strong>

<em>This text is in italics</em>

<strong><em>This text is bold AND in italics</em></strong>

<del>There's a line striking through this text</del>

<big>This text is big</big>

<small>This text is small</small>

<ul><li>This is the first point on a bulleted list</li><li>This is the second</li></ul>

<ol><li>This is number 1 on a numbered list.</li><li>This is number 2</li></ol<

<blockquote>Insert deep and relatable quote here</blockquote>

<h1>The biggest header. Subheader could be h2, then h3, then h4 which is just uneccessary</h1>

<code>This text is in another font so it looks like it's code</code>

If you want to actually write code, like I’m doing, you have to do a little work around, so the computer doesn’t get confused. An easy way is to write the HTML in ‘Normal mode’, then go to ‘HTML mode’ and the <code></code> tags around the text.

Other tags you can use: (Click link to learn more. Notice links’ title showing up when you hover over them)
<br>, <p><u>, <mark>, <hr><sub>, <sup>, <abbr>, <!-- comment -->


This is something I use in almost every post, as inserting images via HTML gives me complete control of how they’re placed and look, something the editor doesn’t always do well.

Basic HTML for beginner bloggers

I’ll use the code for the above image to describe how it works.

<a href="" target="_blank"><img title="Feeling hungry?" src="" alt="healthy banana muffins" width="400" height="400" /></a>

This image links to the post with the recipe, but you can insert an image without the <a …></a> and just the <img> – Notice how it doesn’t have a closing tag.

  • title=””. The text that shows up when you hover over the image.
  • src=””. The direct link to the image. Usually ends with .png, .jpg, .bmp or .gif
  • alt=””. Alternative text that shows up if the image for some reason doesn’t load. This is also how browsers and search engines like Google know what your image shows.
  • width=”” and height=””. Lets you resize the image. If you don’t insert write something, it will keep the original size. You can choose to only write the width=”” and it will keep the right proportions (this is helpful if it’s not a square image, so you don’t need to calculate the right height)

There’s obviously much more to coding, and I will follow up with another guide (requests are welcome). But I’ll let you take a break from looking at my blog and my bad jokes for now.

Bonus tip: On any website you can right click and select “Inspect” or “View page source” to see the page or elements’ coding.

I hope you found this helpful! If you have any questions, don’t hesitate to ask!

Gif that says lots of love, Anne xx

[1] My only qualifications for writing this is completing codeacademy’s courses and this testimonial “Anne is world’s best at coding” – Anne. Completely unbiased. (+ I have years of experience and enjoy playing around with coding)

[2] I had to use google to find out what this stands for, and it said Central Superior Services conducted by the Pakistan Government. Not what I planned to talk about in this post, but I will surely get back to it soon…

[3] Pop ups are annoying. Don’t do that.

Since you made it to the end, you may as well follow me on Instagram – but their algorithm is a bit of a mystery, so you can sign up to the newsletter to not miss out on the best posts! ✨

Basic HTML - HTML for BloggersBasic HTML - HTML for Bloggers
Join the Conversation


Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. This is an amazing post! I know most of the things you just mentioned (but not the image code) and HTML still looks confusing to me even though I can still do some things with it! HTML is a headache to some many people but it can do wonders to our blogs! This is a really useful post 🙂

  2. Very informative post! I had html and coding classes for few years in school, so I know the basics and it isn’t as confusing for me as it is for others, but there are still so many things I am struggling with when it comes to coding. I still can not figure out why I can not put a hover ‘pin it’ button on my blogs images. It’s a real pain in a certain area :/

    -Leta | The Nerdy Me

    1. says: Anne

      Thank you Leta! In my experience, when the code just refuses to work, the only solutions is to sacrifice your first born to Satan or something like that, because figuring out where it went wrong will take forever 😀

  3. says: Justine

    I have some experience with HTML but there were still a few things in this post that I didn’t know before.

    Hahaha “insert deep and meaningful quote here” … Loved that.

    The bonus tip was especially helpful! I always wondered what “inspect element” meant!

    Thanks for sharing 🙂

  4. I love the look and layout of your blog, so easy to read and clear. Now I know why 🙂 HTML makes me want to run the other way, this was a great post, and I am sharing it-but I hang on to my previous running away thoughts. hehe!

  5. says: Anonymous

    I was wondering if you can tell me how you made your logo. I cant figure it out for the life of me.
    BTW loved this post super useful and so simple to understand!.

    1. says: Anne

      Hi! I just want to make sure I know which logo you’re talking about, my banner/header on the top of the page or my button (the drawing of me) 🙂

  6. says: Fed

    Thanks for posting this 🙂 I’ve had so much trouble just trying to figure out how to increase the font size of my blog posts. Still amazed at how difficult it is. I’ve watched YouTube guides on how to do it and it still doesn’t work (as the WordPress app has been updated since).

    1. says: Anne

      No problem, I’m glad you liked it! It doesn’t get easier with wordpress, because there’s so much code they don’t allow in your post, so you can’t always do it the easy way 🙂