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.

airplane-spoon-baby

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

hhhh

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=”https://uhurunetwork.com/wp-content/uploads/2013/07/airplane-spoon-baby.jpeg” 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=”http://www.themostamazingwebsiteontheinternet.com/”>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.

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

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:

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

  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=”http://fresnosocialmedia.com”> … </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.

Sales Email Deliverability Guide: How To Avoid Email Spam Filters

I was plugging away with my sales outreach and not giving it much thought when I started to have issues with email deliverability. The following steps are exactly what we used to solve the problem, and you can use them to ensure that more of your emails end up in the inbox of your intended recipients, too.

Categories: Sales Read Article

How to Write a Blog Post for Complex or Technical Industries

When you have a company blog, keeping up with your content can be a pretty time-consuming feat. Consistently developing useful content becomes even more challenging when you’re producing content for technical industries, which brings us to the main point of this article, how to write a blog post for complex or technical industries.

Categories: Inbound Marketing Read Article

How Our Agency Uses Scrum for Agile Marketing

Learn how we use Agile marketing. We’re twice as fast, have more predictable outcomes, and it gives our agency—and our clients—a competitive advantage with Scrum.

Categories: Marketing Read Article