WordPress: To WYSIWYG or Not to WYSIWYG?

Wordpress: To WYSIWYG or Not to WYSIWYG? explains some basic HTML tags that can be used in the Text editor of a Wordpress post or page and why it is better to use HTML than to rely on the Visual (WYSIWYG) editor option.

Whenever you create a new post or page in WordPress you have the option of using the Visual editor or the Text editor.

Visual and Text tabs

The Visual editor is a WYSIWYG (pronounced WIZ-ee-wig) editor. WYSIWYG stands for What-You-See-Is-What-You-Get, only in WordPress, what you see in the WYSIWYG editor and what you see when you hit that big old Publish button, are very often two different things. The Visual editor is also prone to popping in extra code that serves no purpose other than cause confusion and frustraton in my opinion. For these reasons, I never use the Visual editor and instead use HTML code in the Text editor.

Using HTML to format a blog post or page is actually quite simple and today I thought I’d give you a crash course in some of the basic HTML tags that are used to format posts and pages in WordPress.

  • Opening and closing tags: There are a few exceptions but practically every HTML tag needs an opening tag and a closing tag. Opening tags look like this: < > and closing tags look like </ >. The opening and closing tags enclose the text that they are formatting. So for example, a heading opening tag will go directly in front of text that is designated to be a heading and the heading closing tag will go directly after the text designated to be a heading as you will see in the examples below.
  • Headings: There are six heading tags. Opening tags look like this: <h1> and closing tags look like </h1>. The exact size of the headings is determined by your theme in the CSS (Cascading Style Sheet). Some themes allow you to make changes to the CSS but we’re just newbies at this, right? So, we’ll worry about that another time.
     
    So here’s what the HTML will look like for the six different headings:

    Heading HTML

    And, here’s what the actual headings look like:

    Heading Visual

  • Bold and Italics: There are a couple of options with this. You can use <b> or <strong> to make the font bold, and you can use <i> or <em> to make the font italicised.
     
    This is what HTML looks like for bold and strong:

    Bold and strong html

    This is what the actual font looks like for bold and strong:

    bold and strong visual

    This is what HTML looks like for italics and emphasized text:

    Italics and emphasized

    This is what the actual font looks like for italics and emphasized text:

    Italics and emphasized visual

    Whether you use <b> or <strong> to make the font bold, or <i> or <em> to make the font italicised is a matter of choice. I have clients who use both. I tend to use <strong> and <em>.

  • Lists: There are primarily two kinds of lists – ordered and unordered. Opening tags for an ordered list look like this: <ol> and closing tags look like </ol>.
     

    • Ordered Lists

      This is what the HTML will look like for an ordered list:

      Order list HTML

      And, here’s what the actual ordered list looks like:

      Ordered List Visual

      Order lists can also be alphabetical, use Roman numerals, etc. To learn more about these options, click here.

    • Unordered Lists

      Opening tags for an unordered list look like this: <ul> and closing tags look like </ul>.

      This is what the HTML will look like for an unordered list:

      Unordered list HTML

      And, here’s what the actual unordered list looks like:

      Unordered list Visual

    You may not believe me, but you can go a very long way with formatting blog posts or pages knowing only that much HTML. Next time, I’ll explain hyperlinking, paragraphs and images.

    If you have any questions, please leave them in the comments.

    Photo credit: Pixabay

1 thought on “WordPress: To WYSIWYG or Not to WYSIWYG?”

Leave a Reply

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