Visual Versus Text Editor in WordPress

Visual Versus Text Editor in WordPress

WordPress is a powerful open source content management system that allows authors to post content via an editor that can toggle as either a visual or text editor. So when considering the visual versus text editor in WordPress, which should you choose? The visual editor makes authoring content possible for individuals with no knowledge of HTML, while the text editor gives authors with a basic knowledge of HTML much more control over the presentation of their content. Deciding which method of authoring content is best for you is determined by your comfort level of writing HTML.

Become a WordPress Authoring Ninja!

While the visual editor is definitely a good thing, if you want to have more control in the presentation of your content, then you should learn some basic HTML and use the text editor. Don’t be overwhelmed! The text editor contains quick tag buttons for most of the tags below. Take a few minutes to learn the following HTML tags and you will be coding posts like a rock star in no time. If you take the time to learn simple HTML tags, then deciding on the visual versus text editor in WordPress will be thing of the past because you will rock the text editor every time!

The Anatomy of an HTML Tag

HTML stands for "Hyper Text Markup Language". Put simply, HTML is what tells the browser how to display content. Content is wrapped in HTML tags consisting of the following basic components:

  • Angle Brackets
    Angle Brackets are less than and greater than characters "<" and ">". These tell the web browser that this is an HTML tag.
  • Name
    The name of a tag is abbreviated within the angle brackets. For instance, the abbreviation of "paragraph" is "p" and it appears directly after the less than "<" angle bracket. To open a tag, such as the paragraph tag, place the tag name abbreviation between the "<" and ">" angle brackets. The opening tag for a paragraph looks like this – "<p>".
  • Close "/" Tag
    The forward slash character, "/", is used to indicate that the tag has been closed. For example, "</p>" will close a paragraph tag.

An Example of Content Wrapped in Paragraph Tags
In order for content to render as a paragraph, place the content in-between the opening and closing paragraph tags – "<p>" and "</p>". Here’s an example of content wrapped in paragraph tags:

<p>The open tag to the left indicates the start of this paragraph. The close tag to the right indicates the end of the paragraph.</p>

Basic Tags

  • <br />
    Line Break Tag (this is a self closing tag, which means instead of an open "<>" and close "</> tag, it begins and ends in one tag.
  • <p></p>
    Paragraph Tag (WordPress can automatically create these if it determines a block of text to be a paragraph, but I encourage you to get in the habit of coding this tag to ensure consistency within the code as well as ensuring that text is wrapped in the appropriate tags.
  • <strong></strong>
    Bold Text Tag
  • <em></em>
    Italics Tag
  • <ul></ul>
    Unordered List Tag
  • <ol></ol>
    Ordered List Tag
  • <blockquote></blockquote>
    Blockquote Tag

HTML Examples

Using a Line Break Tag within a Paragraph Tag:

<p>Heading<br />
This text is all about the heading and how to use a "<br />" tag.</p>

This is how it outputs:

This text is all about the heading and how to use a "<br />" tag.

*Note: Do not use line break tags to form your paragraphs. It is important to distinguish a paragraph by wrapping the content in the appropriate paragraph "<p></p>" tags.

Using "<strong></strong>" and "<em></em>" Tags

<p><strong>Bold Text Heading</strong><br />
This example is all about <em>formatting text</em> using bold and italics tags.</p>

This is how it outputs:

Bold Text Heading
This example is all about formatting text using bold and italics tags.

Creating Lists:

There are two list types, unordered and ordered:

<ul></ul> – Unordered List Tag (non-numeric bullet list)

<ol></ol> – Ordered List Tag (numeric bullet list)

The list item tag is used within both "<ul></ul>" and "<ol></ol>"tags for each list item:

<li></li> – List Item

Example of how to code an unordered list:

<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>

This is how an unordered list outputs:

  • List item
  • List item
  • List item
  • List item
  • List item

Example of how to code an ordered list:

<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>

This is how an ordered list outputs:

  1. List item
  2. List item
  3. List item
  4. List item
  5. List item

Example of Blockquote Tags (used to cite content)

This is what cited content looks like when wrapped in blockquote tags "<blockquote></blockquote>".

I hope this article helped you make the decision to use the text editor when considering the visual versus text editor in WordPress. Gain control over your presentation and happy blogging!

For more info on WordPress authoring, HTML tags and how to use them within WordPress, visit