Home › Web Design › WordPress: A Minimalist Guide to HTML

WordPress: A Minimalist Guide to HTML

Knowing HTML has huge advantages — even if you use WordPress or another website platform. You'll encounter situations where WordPress just doesn't do what you want, and being able to make a quick HTML tweak yourself saves time and frustration. Here's the minimum you need to know.

Structure of HTML Tags

HTML tags usually come in pairs — an opening tag and a closing tag. The only difference is the forward slash in the closing tag:

<p>This is a paragraph.</p>
<h1>This is a heading.</h1>
<li>This is a list item.</li>

In the WordPress block editor, click any block, then click the three-dot menu and choose "Edit as HTML" to see and edit the raw HTML for that block.

Headings

There are six heading tags, H1 through H6. H1 is the largest; H6 the smallest. Use only one H1 per page. H2 and H3 work well for subheadings throughout your content:

<h1>Page Title</h1>
<h2>Subheading</h2>
<h3>Smaller subheading</h3>

Paragraphs

The paragraph tag organizes text and adds space above and below each block:

<p>Your paragraph content goes here.</p>

Text Formatting

<em>Italic text</em>
<strong>Bold text</strong>

Links

The anchor tag creates links. The href attribute tells the browser where to go when clicked. Adding target="_blank" opens the link in a new tab — good for external links:

<a href="https://onwardstudios.com">Visit Onward! Studios</a>

<a href="https://google.com" target="_blank">Visit Google</a>

Images

Always include the alt attribute — it describes the image for screen readers and search engines:

<img src="../images/team-photo.jpg" alt="The Onward Studios team at a workshop" />

Lists

Bulleted lists use <ul> (unordered list); numbered lists use <ol> (ordered list). Each item uses <li>:

<h3>Favorite Colors</h3>
<ul>
  <li>Yellow</li>
  <li>Periwinkle</li>
  <li>Purple</li>
</ul>

<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>

Tables

Some data is best presented in a table. The key tags: <table> wraps the whole table, <tr> wraps each row, <th> creates a header cell (bold, centered), and <td> creates a regular data cell:

<table border="1">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Row 1, Col 1</td>
    <td>Row 1, Col 2</td>
    <td>Row 1, Col 3</td>
  </tr>
  <tr>
    <td>Row 2, Col 1</td>
    <td>Row 2, Col 2</td>
    <td>Row 2, Col 3</td>
  </tr>
</table>

The border="1" attribute adds borders around the table cells. You can also control width and alignment: <table width="800">, <td align="center">, <td valign="top">. For modern CSS-based table styling, apply styles via your stylesheet instead of inline attributes.

Common Problems HTML Helps You Fix in WordPress

• Extra blank lines between paragraphs (often stray <br> tags)
• Links opening in the wrong tab (add or remove target="_blank")
• Missing alt text on images
• Wrong heading level (H1 used multiple times, or H4 used where H2 should be)
• Text formatted incorrectly (missing bold or italic tags)