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.

52 Digital Marketing Tips

We’ve been leading the digital marketing world for quite some time now and we’ve learned A LOT along the way. As such, we have created this powerful resource as a way of organizing and sharing our collective expertise so that we can help you, our digital marketer friend in need.

Categories: Marketing Read Article

Remote Work: Committing 100% to a Remote Team

Our company has evolved over the course of a decade in many ways. One of the biggest changes, however, has been our move from a traditional brick-and-mortar office environment to a 100 percent remote work setup. While this type of business model has brought changes in how we function, we’ve found that the benefits far outweigh any risks.

Categories: Business Strategy Read Article

How to Create an Editorial Style Guide [Step-by-Step Guide]

“An editorial style guide is a set of editorial rules that ensure brand consistency. For copywriters, content creators, editors, and digital marketers, an editorial style guide is an invaluable reference for optimizing content and polishing copy. These guidelines serve as a roadmap to the editing process and outline practices that ensure the quality of your company’s work.”

Categories: Marketing Read Article