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.

Inbound Marketing Strategy: The Foundation for Your Online & Lead Generation Success

“Once creating an inbound marketing strategy is no longer a new concept for you and your team, you’ll be able to confidently implement these tips. Your success begins today—just make the first move and start planning.”

Categories: Inbound Marketing Read Article

The Ultimate Guide to Client Onboarding

Looking at our numbers and the results of others’ onboarding processes, we’ve seen how crucial it is to make sure this is done right. Continue on to get Uhuru’s favorite tips, tricks, and best practices on how to implement a proper client onboarding process in order to build great relationships — and maintain them.

Categories: Business Strategy, Sales Read Article

Creating Custom HubSpot Email Templates [Step-by-Step Guide]

The majority of consumers won’t spend more than a few seconds looking at something in their inbox if it doesn’t have a certain appeal… They want it to look and feel great, they want to be inspired – what they don’t want is something that feels boring or looks like the company didn’t care to put in the proper effort.

In this handy guide, we’ll show you how to create and customize HubSpot email templates for optimal campaign performance.

Categories: HubSpot, Marketing Strategy Read Article