This is a 3 part article series:
HTML For WordPress Users Part 1: Starting Out with Basic HTML (this page)
HTML for WordPress Users Part 2: Images and Tables
HTML for WordPress Users Part 3: DIVs and CSS
Starting out with HTML
This article is for
WordPress users who want to go beyond the basics and start using a bit of HTML to spice up their web pages, blog posts.
And increasingly it is also useful for
Campaign Monitor users who want to do more with their newsletters.
Using WordPress, you can use the Visual Editor for basic posts, no problem at all. You can use the toolbar to format text, add links and images … lots of things. But at the top right of the editor field, you can switch to the
Text view and use standard HTML commands instead.
Understanding how to use the Text Editor and a few basic HTML commands will open up a lot more options for you. This article presents the basic HTML commands of most use to bloggers.
With WordPress (and Campaign Monitor newsletters) a little bit of HTML knowledge goes a long way …
Getting to the Text view
Most web pages are written using HTML. The heading above this line is created using an HTML command. Bolding
certain words means using HTML.
The WordPress Visual Editor hides the HTML commands from you. If you select some text and press the B button (to bold the text), you see the text in bold.
But in the background, WordPress has put some HTML tags around the words you asked to bold.
To use HTML while using the
WordPress Visual Editor to edit a page or post, just click on the Text tab (next to Visual) and you will see the HTML view of the page.
For
Campaign Monitor email newsletters, open the campaign (newsletter) newsletter for editing, click the Pencil icon to edit a part of your newsletter and then click the <>Source link at the top right of the editor. For
Aweber newsletters, open your Broadcast or Follow Up message for editing, and in the HTML Message editor click the Source button at the bottom of the editor.
Introduction to HTML
Let’s start with an example. You need to format a few words in your web page so they are displayed in bold type.
To display words in bold type, you need to use HTML, specifically the strong tag. Here is what you type:
A web site is a <strong>great</strong> way to communicate!
and here is how it appears in your web page:
A web site is a
great way to communicate!
HTML uses tags, surrounded by the angle brackets <strong>. First you open the tag – in the example above that is <strong>. And then you close the tag, by repeating the same tag but with a / in front – from the same example that is </strong>.
You can have any number of characters between the opening and closing tags.
Where you can use HTML
Would you like to use images as buttons to link to other pages? Include tables in your website? HTML lets you do these things.
In WordPress, the most common places you might want to use HTML tags are:
- In posts and pages
- In sidebar text widgets
Ok, so now you know about HTML tags, lets look at a few useful examples.
Simple HTML Formatting tags
Bold. Use the strong tag to bold text
<strong>Bolded text</strong>
Italics. Use the em tag to italicise (emphasise) text:
<em>Italicised (emphasised) text</em>
Underline. Use the underline tag to – you guessed it – underline text:
<u>Underlined text</u>
Underlining text of a page for emphasis can be useful, but on the web underlining is often used to indicate a link.
Headings. Use the h2, h3 and h4 tag to include headings. Headings will normally have rules in your WordPress theme stylesheet that determines how headings are displayed for your site.
The heading above is a Level 3 Heading:
<h1>Level 1 Heading</h1>
<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h6>Level 6 Heading</h6>
Note: to help keep things clear for search engines, it is usually a good idea to only have a single H1 tag on each page, and this will normally be created by your theme using the title of your page. So you should probably use h2 through h6 tags in the WordPress page editor.
Blockquote. Use the blockquote tag to format quotations, and format the way they appear in Site Design.
<blockquote>It was a fantastic book!</blockquote>
And here is how it looks:
It was a fantastic book!
Note in the Visual Editor, the indent button applies this tag.
Bullets and Numbered Lists
Bulleted =
unordered list
Numbered =
ordered list
To format a list directly using HTML, you need to know that each type of list uses either the
ul or
ol tag (unordered list or ordered list)
Then, each line item in the list uses the
li tag.
Here is a list with two bulleted items:
Here is the HTML to create this bulleted list.
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
To change the bullets to numbers, just use the ol tag instead of the ul tag:
- First item
- Second item
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Links
A link has two parts – the address being linked to and the anchor text that is shown on the page. So to write an HTML link, you need to put those to bits of information into an HTML tag.
Here is an HTML link to the ABC website: <a href=”https://abc.net.au”>ABC Website</a>
And this is how the link looks on the page:
ABC Website
Change the href=”https://abc.net.au” to whatever web address (URL) you want to link to.
Change the anchor (everything that appears between the > and </a>) to display whatever you want.
The anchor can be text or an image. This article shows an example of how to
create a clickable image (which is just a link with an image as the anchor).
Next:
Part 2: Images and Tables
