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.

This:

<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="http://annesmiles.com" 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

BASIC HTML

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.

ADDING A LINK

<a href="http:// your-link.com" 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

BASIC FORMATTING

<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 -->

INSERTING IMAGES

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="http://annesmiles.com/banana-muffins/" target="_blank"><img title="Feeling hungry?" src="http://annesmiles.com/wp-content/uploads/2015/09/DSC_0062-Copy-1.jpg" 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!


[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 all the way to the end, you may as well follow on Instagram or Bloglovin' as it's the best way to keep up with everything I have going on
Follow

 
A guide to basic HTML for bloggers || Click through to read more, or repin to save for later!
A guide to basic HTML for bloggers || Click through to read more, or repin to save for later!
A guide to basic HTML for bloggers || Click through to read more, or repin to save for later!

LET'S CHAT!

25 Comments