Whenever you create a new post or page in WordPress you have the option of using the Visual editor or the Text editor.
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:
And, here’s what the actual headings look like:
- 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:
This is what the actual font looks like for bold and strong:
This is what HTML looks like for italics and emphasized text:
This is what the actual font looks like for italics and emphasized text:
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:
And, here’s what the actual ordered list looks like:
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:
And, here’s what the actual unordered list looks like:
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
- Ordered Lists