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.
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
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:
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:
- First item
- Second item
Here is the HTML to create this bulleted list.
To change the bullets to numbers, just use the ol tag instead of the ul tag:
- First item
- Second item
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=”http://abc.net.au”>ABC Website</a>
And this is how the link looks on the page: ABC Website
Change the href=”http://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).
Other WooCommerce Extensions by OM4
- Improving Sales with Live Chat and Online Credit Card Payments
- WooCommerce Geolocation and WP Engine
- Boost Your WooCommerce Store’s Conversion Rate
- Integrating WooCommerce with the Cloud using Zapier
- How To Speed Up Your WooCommerce Order Processing
- A Designer’s Guide To WooCommerce
- Error Free Order Processing in Your WooCommerce Store
- Should Your WooCommerce Store Have a Blog?
- Offline Credit Card Payments in WooCommerce
- Preventing Errors In WooCommerce Order Fulfilment
- Using the WooCommerce Australia Post Shipping Plugin
- Automate your WooCommerce Store with Zapier
Enter your details below to receive our latest WooCommerce articles via email.
It's a great way for WooCommerce store owners and WooCommerce developers to stay informed about everything WooCommerce related!