WordPress powers a huge slice of the web, and plenty of Australian small businesses, tradies, and side hustlers run their entire online presence on it. While the platform handles a lot of heavy lifting through themes and plugins, knowing a bit of HTML gives you real control over how your pages look and behave. This article walks you through the foundational markup you will see again and again, so you can stop guessing what a tag does and start editing with confidence.
You do not need a computer science degree to grasp the basics. A handful of tags cover most of what you will do day to day, from formatting paragraphs to dropping in images and links. Once you understand how these pieces fit together, you will find the Custom HTML block, the code editor, and even theme files far less intimidating. We will keep things practical and stick to examples that mirror the kind of edits you would actually make on a typical WordPress site.
WordPress stores your content in a database and rebuilds pages on the fly using PHP, but the final output sent to a visitor's browser is plain HTML. That means every heading, paragraph, image, and link you see online is wrapped in markup. If something looks off in your post and the block editor cannot help, you almost always end up peeking at the underlying code.
For Australian creators, this knowledge is especially handy when you are working with a local developer in Brisbane or Melbourne and need to describe a layout issue. Instead of saying the text looks weird, you can point to a specific div or class. If you are bootstrapping a site solo, the same skill saves you the cost of a small fix every time something minor breaks.
Search engines also read your markup. Clean, semantic HTML helps Google understand what your content is about, which matters when you are competing for clicks in Sydney or Perth. Skipping heading levels or stuffing everything into generic tags sends the wrong signals, so a few minutes of HTML literacy pays off in both user experience and visibility.
HTML works through tags, which are keywords wrapped in angle brackets. Most tags come in pairs: an opening tag such as <p> and a closing tag such as </p>. Whatever sits between them is the content the tag affects. A few tags, known as void elements, do not need a closing tag. The line break <br> and the image tag <img> are the most common examples you will meet.
Think of tags as containers. <strong> tells the browser that the text inside should be emphasised with bold weight, while <em> signals emphasis that is typically rendered as italics. Both are useful, and they carry different meanings to assistive technology. Choosing the right one is a small habit that makes your site more accessible, which is a plus if you ever deal with Australian accessibility guidelines or government clients.
Attributes are extra bits of information you add to a tag to control its behaviour. An <a> tag, for example, needs an href attribute to know where to send a visitor when they click. An <img> tag uses src to point at the file location and alt to describe the image for screen readers and search engines. Getting comfortable with attributes is the real breakthrough moment, because almost every practical HTML edit you make involves tweaking one of them.
The default WordPress editor, often called Gutenberg, lets you build pages using blocks. Most blocks have a toolbar with formatting buttons, and for the tricky bits there is always an "Edit as HTML" option hidden behind a three-dot menu. Click that and you will see the raw markup for that single block, which is a brilliant way to learn by inspection.
There is also a global code editor you can toggle on from the top right of the post screen. It shows every block as its underlying HTML in one continuous view. If you have just migrated from the classic editor or are following an older tutorial, this view feels familiar and is often the easiest place to paste in snippets you have copied from a support forum or a beginner-friendly WordPress setup guide.
When you are working on the road, say on a train from Parramatta to the CBD or at a coworking space in Adelaide, the code editor becomes even more useful. A patchy NBN connection at home might mean you do your drafting offline in a notes app, then paste the clean HTML into WordPress later. Knowing where to switch between visual and code views keeps that workflow smooth.
Headings are the backbone of a well-structured post. WordPress treats <h1> as the page title, so you normally start with <h2> for the main sections. Within each section, <h3> marks subsections, and you can go deeper with <h4> and beyond. Skipping a level, jumping from <h2> straight to <h4>, is something to avoid because it breaks the logical outline of your page.
Paragraphs sit inside <p> tags. WordPress adds these automatically, so you rarely type them yourself, but knowing they exist helps when you need to wrap a single sentence in a custom class. For inline formatting, you will reach for <strong> and <em> more than <b> and <i>, because the semantic versions tell browsers and screen readers what the styling means rather than just how it looks.
Line breaks are useful inside addresses, poetry, or song lyrics, but resist the urge to use them for spacing between paragraphs. That is what margin and padding in your stylesheet handle, and using extra <br> tags only creates headaches when you later switch themes. A quick rule: one <p> per paragraph, one <br> only when a line must end mid-paragraph, and headings used in order from <h2> down.
Links are built with the <a> tag. The href attribute holds the destination, and the visible text, the anchor, sits between the opening and closing tags. Aim for descriptive anchors like "download the October marketing checklist" rather than generic "click here". Search engines and screen reader users both benefit from anchors that explain where the link leads.
Images use the <img> tag with src for the file path and alt for a short description. Alt text is not optional in any meaningful sense. It is what gets read aloud to someone using a screen reader, and it is what shows up if the image fails to load on a phone with a patchy signal in regional Western Australia. WordPress fills in alt text from the image title or caption, but it is worth checking the result yourself.
Lists are simple once you know the structure. An unordered list starts with <ul> and contains a series of <li> items. Use it for bullet points where the order does not matter, such as a list of services your plumbing business offers across greater Melbourne. An ordered list uses <ol> and matters when sequence is important, like the steps in a recipe or the stages of a renovation project.
The most frequent error beginners make is mismatched tags. If you open a <div> but forget to close it, everything below that point can render strangely or disappear entirely. The WordPress code editor does not highlight these problems, so train yourself to count opening and closing tags, or paste your code into a free online validator that points out the offending line.
Another classic slip is using straight quotes inside attributes instead of curly ones, which can happen if you copy text from a Word document. Always type the quote marks directly in the editor. If your <a href="https://example.com"> suddenly stops working, the first thing to check is whether those quotes have been turned into smart quotes by an overeager text processor.
Finally, remember that HTML is forgiving but not magic. A forgotten slash, a typo in a tag name, or an extra space in an attribute can all break a layout. Keep a scratch post where you can experiment with snippets, save changes incrementally, and use the built-in revision tool to roll back if something goes wrong. Australian hosts such as VentraIP, Panthur, and Netregistry all run WordPress smoothly, and most include daily backups, so even a messy experiment is recoverable.
| Tag | Purpose | Typical use |
|---|---|---|
<h2> to <h4> |
Section and subsection headings | <h2>Our services</h2> |
<p> |
Block of paragraph text | <p>We service greater Sydney.</p> |
<a> |
Hyperlink to another page or resource | <a href="...">Read more</a> |
<img> |
Inline image with descriptive alt text | <img src="logo.png" alt="Logo"> |
<ul> and <ol> |
Bulleted and numbered lists | <ul><li>Item one</li></ul> |
<strong> and <em> |
Important and emphasised inline text | <strong>Note:</strong> closed early |