All you need to know about HTML for WordPress users – Part 1

I personally believe that everyone who wants to run a website or a blog should learn basic HTML. The first reaction to that statement usually is, “But I don’t know anything about coding or websites”. Then the negative beliefs take their own course and carry on like, “Coding is hard, I don’t have time or brain to learn HTML, that’s not something for me and why should I bother learning HTML when I can do it with WYSIWYG editor…”. It goes on and on and puts you off.

Actually, there is a very good reason why you should learn basics of HTML. Nobody asks you to learn everything. Just a little bit, only what you need to get by, right?

You don’t need to learn everything. Even the basic understanding of HTML will improve the quality of your posts.

Why are there two editors in your WordPress install?

When you add a new post or page in WordPress, your content goes to the largest box with lots of buttons at the top. On the right hand side you can see two tabs – Visual / Text. You can switch between the two. The Visual one is enabled by default and lots of people never even notice the other one. The truth is, you don’t need the visual editor at all but it’s there to make people comfortable.

Visual and Text Editor in WordPress

What does Visual editor do?

WYSIWYG or visual editor does its best to show you what your post might look like when you click publish. You type something, then press one of the buttons like B for bold and the editor adds HTML markup for you. Simple, right?

In fact, it’s not that straightforward. Firstly, the visual editor basically guesses what markup to add. It doesn’t allow any advanced formatting and it doesn’t always guess right. Secondly, the formatting you see on the screen when you type might be different to the final result, depending on your WordPress theme. And thirdly, HTML tags are not there just to change the look, they have semantic meaning (they tell the browser and search engines what kind of text it is and how important it is.).

What about the Text editor?

If you switch to the text editor, you will see your text content plus most of the HTML markup the visual editor added for you. You won’t see all of it because WordPress adds line breaks and paragraph tags automatically, very often where you don’t want them.

Text editor doesn’t look fancy and it’s not as pleasing to our eye but colourful and fancy doesn’t necessarily mean easy and useful.

10 reasons why you should disable the Visual Editor in WordPress

What? Disable the Visual Editor? You must be joking! Well, no. Not really. There are a few very good reasons for doing that.

  1. Using Visual Editor doesn’t help you understand how web works.
  2. You don’t know what kind of HTML code the buttons add when you press them.
  3. You are limited to formatting that WYSIVYG editor offers.
  4. Visual Editor strips lots of advanced formatting if you hand code it via Text editor and all your effort is wasted.
  5. You are more focused on what your content look like instead of the content itself.
  6. Visual editor might add unnecessary or empty tags.
  7. You might be tempted to add lots of inline code – for example to change the size or colour of the text by clicking the buttons in Visual editor. I will explain why it’s wrong later.
  8. The code you added through Visual Editor is sometimes difficult to remove without actually switching to Text editor.
  9. When you copy and paste text from another website or an email, you might accidentally copy lots of formatting with it. Either the texts look very different or they look like complete gibberish.
  10. Despite the rapid technological progress, using semantically correct mark-up requires using a human brain. The Visual editor can guess but can’t evaluate your text content for you.

Come on, be brave. Switch that visual editor off. It won’t hurt. Failing everything you can always switch it back on.

How to disable the visual Editor in WordPress

Disabling the visual editor is easy and done per user basis. Here is what you do.

Log into your WordPress site. In the Admin area go to Users -> Your Profile -> Personal Options. The very first item is Visual Editor. Tick the box saying Disable the visual editor when writing, scroll down and click the button Update Profile.

How to Disable Visual Editor in WordPress

If you now try to edit any post or page, you will only see the text editor. Don’t panic just yet, please.

How to disable wpautop filter using a plugin

What on earth is wpautop? wpautop is a WordPress function that creates paragraphs automatically for you (wp for WordPress, auto for automatic, p for paragraphs). Makes sense?

WordPress tries to be helpful. When you press Enter once, it will add a line break. When you press Enter twice, it will create a paragraph. The trouble is, you might not always want to do that. So let’s make WordPress text editor behave like it should – to ignore white space.

Luckily for us, there is a helpful plugin called Toggle wpautop by Linchpin.

Toggle wpautop WordPress plugin

In the WordPress Admin area go to Plugins -> Add New and search for Toggle wpautop. The plugin should come up as the first option. Click on Install Now button and when the install is done click on Activate.

Go to your WordPress Settings -> Writing and scroll down the page. Under Toggle wpautop section tick the box Auto Enable and click the button Save Changes.

How to disable wpautop on all new posts

Now we’re ready to dive into HTML basics.

What is HTML?

HTML stands for HyperText Markup Language. HTML is not programming. It’s a markup. Markup tells the web browser (Internet Explorer, Mozilla, Chrome, Safari), “Hey browser, this is a heading, this is a paragraph, please make this word bold, will you?” And the browser will, to the best of its abilities.

The best way to learn is by doing. I recommend that you have a text of your next WordPress post ready in a text document so that you can apply what you learn straight away.

Let’s get acquainted with HTML elements

Here is an example of a HTML element:

<p>Hi! I am a paragraph.</p>

You can see a start tag <p> right before the paragraph and an end tag </p> right after the paragraph. All tags consist of a pair of angle brackets and a tag name in between. End tag has a slash before the tag name.

Start tag, element content and end tag are together called HTML element.

HTML element

Ok, your go. Please, always follow this rule. You will save yourself lots of time and frustration.

Write your text first, then start adding the HTML markup and images.

Here we go. First, copy and paste the text of your new post into WordPress text editor. You are basically looking at an outline.

Now enter <p> tag before the first word of every paragraph and </p> at the end of each paragraph like this:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus blandit tellus ac pretium blandit. Nullam ultricies tempor sem et ultrices.</p>

<p>Praesent erat lorem, iaculis sit amet consectetur ac, efficitur sit amet neque. Nulla diam tellus, rutrum ut massa nec, laoreet auctor tellus.</p>

Heading

<p>Nunc lectus magna, tincidunt et faucibus in, egestas sit amet nulla. Mauris orci ex, porttitor id orci eu, tempus placerat sapien.</p>

Heading
Subheading

<p>Aliquam in nibh consequat, feugiat sem quis, semper dolor. Sed venenatis hendrerit mollis. Praesent suscipit odio nulla.</p>

More HTML elements

Now that we have all paragraphs done, let’s have a look at headings.

<h1>Hi! I'm a level 1 heading.</h1>
<h2>Hi! I'm a level 2 heading.</h2>
<h3>Hi! I'm a level 3 heading.</h3>
<h4>Hi! I'm a level 4 heading.</h4>
<h5>Hi! I'm a level 5 heading.</h5>
<h6>Hi! I'm a level 6 heading.</h6>

There are six levels of headings <h1>,<h2>, <h3>, <h4>, <h5>, <h6> you can use. The level is expressed by the number. Heading 1 is the most important, heading 6 is the least important.

In fact, you shouldn’t use level 1 headings in your blog post at all because there should be only one <h1> on each page – that’s already taken by your post title.

Most likely you will be using <h2> for your headings and <h3> for your subheadings.

Your go again! Add the appropriate heading tags to your WordPress post. Remember to add the closing tags with slash as well as start tags!

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus blandit tellus ac pretium blandit. Nullam ultricies tempor sem et ultrices.</p>

<p>Praesent erat lorem, iaculis sit amet consectetur ac, efficitur sit amet neque. Nulla diam tellus, rutrum ut massa nec, laoreet auctor tellus.</p>

<h2>Heading</h2>

<p>Nunc lectus magna, tincidunt et faucibus in, egestas sit amet nulla. Mauris orci ex, porttitor id orci eu, tempus placerat sapien.</p>

<h2>Heading</h2>
<h3>Subheading</h3>

<p>Aliquam in nibh consequat, feugiat sem quis, semper dolor. Sed venenatis hendrerit mollis. Praesent suscipit odio nulla.</p>

Nesting HTML Elements

What do Russian dolls have in common with HTML

HTML elements are like Russian doll. They can be nested inside each other or wrapped around each other like this:

<tag1><tag2><tag3></tag3></tag2></tag1>

Each nested tag goes completely inside the previous tag, think of Russian dolls.

Here is a real world example of a paragraph with some words enclosed in other HMTL tags.

<p>Hi! I am a paragraph. I want some words in me to be more <mark><strong>important and highlighted</strong></mark> and some have <em>stress emphasis</em> please.</p>

How to highlight text with HTML tags

It’s time to have a closer look at some text level HTML tags. We want to help our readers to understand text better by putting emphesis or stress on some words or parts of the text. Most people generally apply the same rules they would use in a text editor like MS Word or Open Office – more important words would be bold, notes and quotes would be italics. This is not the way to go in HTML!

HTML tags have a semantic meaning! They tell the browser and search engines what kind of text is it, not what it looks like!

This is where using the WordPress visual editor gets confusing. Let’s say you have a word that is more important than other text. You decide to make it bold by pressing B button. One would logically assume that it will insert <b></b> tag for you but no. It inserts <strong><strong> tag. The same goes for i button. It doesn’t insert <i></i> but <em></em>. The reason is that <strong><strong> and <em></em> tags are usually more appropriate than <b></b> and <i></i> tags but not always. It depends on the text and your intention. It’s up to you to get the message across correctly.

It’s in your best interest to get the right message across. Use the appropriate HTML tags to achieve that!

How to use <strong></strong> tag

Use <strong></strong> tag when a word or a part of text is more:

  • important than other text
  • serious – like warnings or cautions
  • urgent – what to do first before something else

<strong></strong> element doesn’t change meaning of the sentence.

Do not use <strong></strong> tag just to make the text look bold! Always ask youself, “Is it important, serious or urgent?”

There is a big difference between <em></em> and <i></i>

The <em></em> element represents stress emphasis of its contents.

Let’s have a look at an example:

  • I have a new iPhone. – it’s an iPhone, not a Windows phone or Android
  • I have a new iPhone. – my phone’s new, not second-hand
  • I have a new iPhone. – I already have it, don’t need another one
  • I have a new iPhone. – I have a new phone, not my brother or my Mum

See, the meaning or the sentence changes depending where you place the <em></em> tag.

On the other hand, the <i></i> element should be used for:

  • alternate voice or mood – like self-talk, dreams
  • taxonomic designation – like names of plants or animals
  • technical terms
  • idiomatic phrases from another languages
  • transliterations
  • thoughts

Please, don’t use neither <strong></strong> nor <i></i> for quotes! There is a designated tag for that purpose. Bear in mind that the formatting depends on your WordPress theme. All three <strong></strong>, <i></i> and <q></q> might look exactly the same to the reader – like italicized text. But they have a different semantic meaning.

Let’s use a highlighter!

HTML let’s you use a highlighter. Just wrap the text you want to highlight into <mark></mark>.

You should use <mark></mark> tag to highlight parts of text for reference purposes or some text that has been added, not because something is more important (in that case use <strong></strong> instead).

What about a <b></b> tag?

If the words and phrases are not more important than other text or not an alternate voice or mood but you still want to make them stand out a bit, <b></b> tag is a good choice.

<b></b> is useful to highlight:

  • key words
  • product names
  • actionable words
  • marking up the lede (or lead) sentence or paragraph

Carefully inspect your blog post and use the appropriate text level tags <strong></strong>, <em></em>, <i></i>, <mark></mark> and <b></b> so that they correctly express the semantic meaning.

Is <strong></strong> element always bold and <em></em> in italics?

The answer is not necessarily. It depends on your WordPress theme styles. But chances are that <strong></strong> elements will be bold and <em></em> in italics because people are so used to it. <em></em> can for example be in a different colour instead of italicized.

Here is an example of some text level HTML elements formatting in default WordPress themes:

Example of formatting some text level HTML elements in default WordPress themes

Can I change formatting of HTML elements?

If you don’t like formatting of HTML elements in your WordPress theme, you can change it providing you are running a self-hosted WordPress install (not WordPress.com) and you have access to the server (like FTP).

The easiest way to change some styles is to create a child theme to your current WordPress theme.

Conclusion

Learning HTML is worth your time and it’s not difficult if you take it one step at a time. Finally remember, “perfect practice makes perfect” so apply what you learnt on a daily basis.

So far, we only scratched the surface. There’s much more! In Part 2 we will dive deeper into text level tags, we will learn to create lists and how to use quotes correctly.

[signature]

Leave a Reply

Your e-mail address will not be published. Required fields are marked *