HTML Tips for Bloggers: The Basics

Helloo, it’s finally time for me to make a non-bookish post.
I knew this was coming. After all, prior to book blogging, all I blogged about was coding and programming (more accurately, learning how to code and program).

As bloggers, I’m sure we all have been exposed to some HTML codes and other web languages, whether it was accidental when you click on HTML editor on wordpress (wth is that gibberish), someone gave you a code to copy paste on your blog (where am I supposed to put this), or you’re just curious. This post will cover the basics of using HTML and it’s intended for novice and people who never learned HTML before. I have to do this to cover the basics before we move on to more advanced tips in upcoming weeks.

Basically, this topic will be divided into three posts. The first, the one you’re currently reading, will cover HTML basics such as headings, inserting images, links, using line breaks, and other stuff you could actually do on visual editor. The second post will introduce CSS, which is a styling method for your blog (and yes it can be done on free wordpress blog albeit with limitation). The third is the more advanced one, where I will talk about how to create a mini table of contents, creating boxes with rounded corners, and some other cool stuff. I am by no means an expert, though, so feel free to correct me or give me suggestion. There’s bound to be a missing quote or semicolon in this post (oh, well).

Before we proceed, please note that I’m using wordpress. I didn’t actually test these codes on any other blogging platform, but if your blogging platform gives you access to HTML editor, these tips should work all the same. Enough with the intro, let’s get to it!

NOPE, WAIT.
FIRST THING FIRST
The first thing you want to do is change your editor from the default visual editor to text editor (aka HTML editor).

Take a deep breath, and click it. It’s fine, nothing’s going to break (hopefully). If you accidentally copy HTML codes into visual editor, it’ll look like gibberish when you preview the post. No worries, just cut those codes from visual editor and paste them into HTML editor.

Using Headings

Let’s start with the boring one.

Why use headings at all?

We have had enough of them when we wrote those essays and papers, so why should we use headings in fun things like blogging? Most of us bloggers prefer to use images as content dividers, for example to divide a review into multiple sections. It’s all well and good (and PRETTYY), but I still ask you to consider using headings. Why?

First one is searchability. Google-bot or any other search engine couldn’t read the text you put on your image, therefore, they don’t understand that your review is structured into three parts. All they saw is: TITLE – image – text – image – text – image – text. Even if you don’t care that much about SEO, you should consider making your content easier to find by people using search engine.

Second reason, arguably the one with increasing importance, is accessibility. Visually impaired people use screen readers to browse the web. The screen reader will attempt to let the user know that there’s an image in there, but it cannot read the text you’ve written on your image. It cannot tell the user that this next part is called “Characters” unless you give it a proper alt text (more on this later when we talk about images). I am sure that we all want to optimize our blog to be accessible to everyone, hence, we need to use the appropriate structure.

How do I create a heading?

On visual editor, you simply select the text and choose the dropdown button that says paragraph, then pick the appropriate heading.

On HTML editor, you put the tag between the heading tags, like this:

Note: Do not forget to close the tag (ie., the </h2> tag)

There are so many type of headings, which one to use?

There are six levels of headings, h1 to h6, in decreasing orders of importance. In my 6 years writing HTML codes, I never get to h5 and h6, and I only get to h4 very rarely.
For wordpress post, your post title is usually formatted automatically as h1. Therefore, I usually starts from h2 and for smaller subtitle, I use h3. You can use h4 if needed.

But, can I still use image?

YES, you absolutely can. In fact, many people have considered this and agree that you can use BOTH headings and images as divider. There are multiple tricks to accomplish this, but the easiest is to wrap your image between the heading tags and put the text in the alt attribute, like this:

We will talk more about this when we get to image, but the code above basically says “this is my subtitle that is written in the image.”

If you uploaded your image using visual editor or media library, simply put the text on the alt field.

[ Back to top ]

Inserting Images

How do I insert an image using HTML editor?

Inserting image is actually one of few things I prefer to do in visual editor because it’s so much easier to upload, select, and insert it that way. If you want to insert it using HTML editor, you need to upload it first using wordpress media library, get the image URL (when you select an image or edit an image, a box will pop up where you can find the URL), and paste it between the src attribute. Here’s the code:

Why is the code different with the one inserted by visual editor?

If you insert an image using visual editor, it will add a bunch of additional codes, some are useful, others not so much. It will usually look like this when you switch the HTML editor:

Let’s discuss the code.

1. aligncenter and size-full is basically telling the browser that the image should be positioned in the center and to insert the full size. If you only want to display a thumbnail, it’s a good idea to not insert a full size image with 2000 x 3000 px dimension to save your visitors’ some bandwith. Usually, you don’t need to worry about them because wordpress will handle them automatically when you upload the image.
2. wp-image-2024 is … as far as I know it doesn’t do anything specific, unless you specifically style it to do something. In other words, you can just leave it right now.
3. src is the URL of the image. We talked about it before.
4. alt stands for alternative text. We have encountered it when we discussed headings. Please consider to take some time to fill in the appropriate text here. I am as guilty as anyone when it comes to alt, barely take my time to double check it, but writing this post reminds me about the importance of alt. Put some text that could serve as replacement for your image. It really helps screen reader users, improve your site SEO, and it only takes us a few seconds, so why not?
5. width and height are quite self-explanatory. When you’re changing the size using HTML editor, make sure you only use one of them, otherwise you will change the image proportion. I usually use the width and delete the height.

If you want to read more about image settings, you could go to wordpress official website.

[ Back to top ]

Inserting Links

How to insert link?

Besides images, links are probably the most common type of HTML encountered by bloggers. Sometimes people will ask you to link back to their site and gives you this weird codes with “less than” and “more than” signs. Or perhaps you just want to link back to your twitter account on your sidebar and need to manually add the link.

Links can be created with the a tags. Copy the URL of your target page and paste it on the href attribute.

Note: do not forget the closing tag and the quotation marks. You can use either single or double quotes, but you have to be consistent (ie., if you open with single, close it with single, and vice versa).

Can I use image instead of text?

Sure. Instead of putting the text between the a tags, put the img and its source, something like this:

Can I make the link opened in another page?

Yes, just add target =”_blank” on the a tag.

I put links to my own posts and now they send me tons of self-pingbacks

You can either turn pingback off or you can remove your blog address from the link. For example, if your blog address is thisismyblogaddress.wordpress.com and your post URL is thisismyblogaddress.wordpress.com/2015/12/30/december-recap/, when posting links to your own post remove the first part.

Instead of doing this:

do this:

Please note that the shortened links will not work on wordpress reader. You can, however, turn off the option to allow wordpress reader to view your full post. Therefore, readers will be directed to your blog post where the links would work.

[ Back to top ]

Adding Divider/Horizontal Line

Using horizontal line is an easy way to divide your post into sections. I’m sure you have encountered them, or perhaps use them. It could be inserted easily using visual editor by choosing “Horizontal Rule” from the menu.

Inserting Horizontal Rule, or hr for short, is even easier in HTML editor. Just by typing this code:

there it is:

---

[ Back to top ]

Blockquote

Blockquote is another thing that could be inserted via visual editor. Just select the text and press that little quote button and voila!

How about ’em HTML editor?
It’s about as simple. Use this code:

The output:

Here’s a quote

A little wordy, but it works. As usual, do not forget to close the tag.

[ Back to top ]

About Line Breaks

The last topic I’m going to cover is line-breaks. If you typed your post in visual editor, then switch to HTML editor, you’ll likely to see a lot of this:

nbsp, non-breaking space, is used to add extra whitespace. Browser normally ignores extra whitespace, so if you type a paragraph on HTML editor then press return or enter key three times, wordpress will just ignores the extra whitespace and only gives you a single line-break. This is where nbsp came in. It forces browser to display the extra whitespace. It also works to indent some text, like this:

The output:
   Indented paragraph

I don’t usually use nbsp, but in case you encounter them in the wild, you would know why it’s there.

---

There you have it. Some basic tips on HTML element you can use in HTML editor. The second part, which is (hopefully) shorter, will be posted within the next two weeks. I’ll discuss text formatting using HTML and introduce a little bit of styling with CSS.

Let me know if my explanation confuses you (not surprising) or if you have any correction/suggestion/question. You can also hit me on twitter (link below), where we could discuss more of this topic. (Or we can talk about books or whatever)

See you next time!

---

Twitter | Follow my blog with Bloglovin

---

Windie
Twitter | Instagram | Follow my blog with Bloglovin