Using The HTML Text Tab In WordPress

MarketingSalesFacebookInbound MarketingPerspectivesNews

Enter your name and email below to receive all our valuable blog posts straight to your inbox.

It is possible to run a very successful WordPress blog and never leave the visual tab, I work in the visual tab 95% of the time. It’s that 5% however, that is perhaps the most crucial for getting posts to look and behave exactly as I want them to.

In this post, I will hopefully help you get over your fear of the text tab in WordPress and feel confident enough to at least scan and tweak HTML. This is not a lesson in HTML, you should use Codecademy for that, but instead it is a motivational kick in the rear with some technical tips sprinkled in. You can do it, and here’s how.

HTML Tag Cheat Sheet At End Of Post

Here is an example of a simple post followed by what it looks like in HTML:

This is an important heading title

This is some paragraph text about the topic my important heading alluded to. I’m going to follow up this text with an image.


This text would look nice bold and this text should be italic and red. I don’t want this text. This text should link to something awesome!

“With great power comes great electricity bills.” – The Internet


And here is what that amazing post looks like in HTML:

<h2>This is an important heading title</h2>

This is some text about the topic my important heading alluded to. I’m going to follow up this text with an image.
<img class=”aligncenter size-full wp-image-4145″ alt=”airplane-spoon-baby” src=”” width=”367″ height=”408″ />

<strong>This text would look nice bold</strong> and <span style=”color: #ff0000;”><em>this text should be italic and red</em></span>. <del>I don’t want this text</del>. <a href=””>This text should link to something awesome!</a>

<blockquote>”With great power comes great electricity bills.” – The Internet</blockquote>

By looking at the HTML you can see that it’s not complicated, it’s just a lot of text. HTML elements such as <h2> surround text that we want to be formatted (styled) a certain way. To close the tag we include a /, like this </h2>. This tells the browser what elements are and it then looks to your site’s CSS to determine how to style it. CSS (Cascading Style Sheet) is outside the scope of this post but know that CSS can exist in it’s own file or inline with HTML. Notice style=”color: #ff0000;” in our <span> tag? That’s CSS.

What you should know about the HTML text tab in WordPress is that you can modify it and the changes will show in the visual editor. IMPORTANT: Visual editor will not look exactly like the true styled text available to your visitor. So we could change the color from #ff0000 (red) to #0011ff (blue). Here is a simple hexadecimal color picker if you’re interested.

The 5%

In the beginning of this post I mentioned I only use the HTML text tab 5% of the time. What am I doing in that time? I’m correcting code.

Sometimes when you copy and paste text with pre-existing formatting it can appear a bit wonky. What I do is look at the HTML and find where it is messing up. Does it have an unnecessary tag? Does it have conflicting styles declared? Sometimes <span></span> tags can appear with styling I did not want, so I delete them.

Here is an example:

  1. item 1
  2. item 2
  3. item 3 
  4. item 4

I don’t want these items to be small and yellow. Why are they yellow? Let’s look at the HTML.

<li><span style=”line-height: 1.714285714; font-size: 1rem;”>item 1</span></li>
<li><span style=”line-height: 1.714285714; font-size: 1rem;”>item 2</span></li>
<li><span style=”line-height: 1.714285714; font-size: 1rem;”>item 3 </span></li>
<li><span style=”line-height: 1.714285714; font-size: 1rem;”>item 4</span></li>

Ok, I see <ol> for ordered list and I see <li> for list item. Aha! Span tags with inline style! It should look like this:

<li>item 1</li>
<li>item 2</li>
<li>item 3 </li>
<li>item 4</li>

  1. item 1
  2. item 2
  3. item 3
  4. item 4

Perfect. This post was in no way an exhaustive lesson but hopefully you’re now at least curious about what the HTML text tab can offer. Try it out! Create a demo post and format it using all of the options at the top of your WordPress visual editor, then take a look at the HTML and try to read it to see what it’s doing.

If you’re finding that you’re having to constantly changing styles to make the text look better with your site you may want to think about revamping your site and modifying your style.css file for your theme.

HTML Tag Cheat List (Most Likely To Be Used In Your Posts)
<h?> … </h?>    Heading (?= 1 for largest to 6 for smallest, eg h1)
<p> … </p>    Paragraph of Text
<i> … </i>    Italic Text
<u> … </u>    Underline Text
<strike> … </strike>    Strikeout
<sup> … </sup>    Superscript – Smaller text placed below normal text
<sub> … </sub>    Subscript – Smaller text placed below normal text
<pre> … </pre>    Pre-formatted Text
<blockquote> … </blockquote>    Text Block Quote
<strong> … </strong>    Strong – Shown as Bold
<em> … </em>    Emphasis – Shown as Italics in most browsers
<a href=””> … </a>    Link text to a url
<img src=”url” alt=”text”/>    Basic Image – Tag Attributes: src=”url” URL or filename of image alt=”text” Alternate Text
<ol> … </ol>    Ordered List
<ul> … </ul>    Un-ordered List
<li> … </li>    List Item (within ordered or unordered)

Leave a Reply

Your email address will not be published. Required fields are marked *

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

Proven Ways to Improve Your Facebook Ad Performance

With almost 2.5 billion active users, Facebook advertisements are a surefire way to reach your target audience, no matter your industry focus. When it comes to creating a comprehensive marketing plan, it is essential that you are aware of and follow best practices for optimal Facebook ad performance.

Categories: Marketing Strategy Read Article

The Ultimate Guide to Creating a Healthcare Marketing Strategy

Too often, health tech companies fall prey to bad marketing advice, fly-by-the-seat-of-your-pants marketing tactics, and an overall lack of a healthcare marketing strategy. With small marketing teams, it’s hard to create enough content to funnel your customers through the buyer journey to a sales conversation. Content production takes time, energy, and the mental space to be creative. Fortunately, attracting your target audience can be simpler than you think, and it all starts with your healthcare marketing strategy.

Categories: Marketing Strategy, Medical Read Article

Optimizing Website Content: From SEO Strategy to Keyword Research

Before you begin keyword research, it is important to consider your search engine optimization (SEO) strategy. When you think about SEO strategically, it increases the opportunity for your content to get in front of your ideal buyer.

Categories: SEO Read Article