Skip to content

Wineries: Launch your wine club and grow recurring revenue

Learn More
Tectalic

Articles

HTML for WordPress Users, Part 1: Basic HTML

This is a three-part series:

Starting out with HTML

This article is for WordPress users who want to go a bit beyond the basics and use a little HTML to format their pages and posts.

Most of the time you’ll edit content with WordPress’s visual block editor, and that’s all you need. But knowing a few HTML tags opens up more options — and occasionally it’s the quickest way to get exactly the result you want.

Getting to the code view

The visual editor hides the HTML from you. When you select text and press Bold, you see bold text — but behind the scenes WordPress wraps your words in HTML tags.

To see or write HTML in the WordPress block editor you have two options:

  • Add a Custom HTML block and type your HTML straight into it, or
  • Open the options menu (the three dots, top right) and switch to the Code editor to see the HTML for the whole page.

(If your site still uses the older Classic editor, click the Text tab, next to Visual.)

How HTML tags work

Let’s start with an example. Say you want a few words in bold. In HTML you use the strong tag:

A website is a <strong>great</strong> way to communicate!

which appears as:

A website is a great way to communicate!

HTML uses tags wrapped in angle brackets. You open a tag — <strong> — and then close it by repeating it with a slash — </strong>. Everything between the two tags is affected.

Simple formatting tags

Bold — the strong tag:

<strong>Bolded text</strong>

Italics — the em (emphasis) tag:

<em>Italicised text</em>

Headings — h2 through h6. Your theme’s stylesheet controls how they look:

<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>
<h4>Level 4 Heading</h4>

Tip: keep to a single h1 per page (your theme usually creates it from the page title), and use h2–h6 for headings within your content. That keeps the structure clear for readers and search engines.

Blockquote — the blockquote tag, for quotations:

<blockquote>It was a fantastic book!</blockquote>

which appears as:

It was a fantastic book!

Bulleted and numbered lists

A bulleted list is an unordered list (ul); a numbered list is an ordered list (ol). Each item uses an li tag.

An unordered list:

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>
  • First item
  • Second item

Swap ul for ol to get numbers:

<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>
  1. First item
  2. Second item

A link has two parts: the address it points to, and the anchor text shown on the page:

<a href="https://abc.net.au">ABC Website</a>

Change the href to the address (URL) you want, and change the text between > and </a> to whatever you’d like the reader to see. The anchor can be text or an image — see Part 2 for turning an image into a link.

Next: Part 2 — Images and Tables.

Back to Articles