22 Essential WordPress HTML Codes

by

This article is a one stop shop for your WordPress HTML codes. Below is the list of the WordPress HTML tags and codes that are most commonly used when creating new blog content.

Save the list and use it as your reference when composing your blog posts and pages.


22 Essential WordPress HTML Codes

What’s the difference between WordPress Visual and Text editors?

You have two editing options when composing a blog post or page in the WordPress editor. You can use the default “Visual” view or the “Text” mode.

There’s also the brand new WordPress Gutenberg content editor.

In the visual mode you can see your content as it is. The visual mode is called WYSIWYG which stands for exactly what the visual mode does: What You See Is What You Get.

You see your content the way your visitors will see it in their browsers and you have simple buttons to help you edit. Most people use this “Visual” post editor in WordPress when creating their content.

In the text mode you see the code and the HTML tags. This text mode allows you to add any HTML code to any of your blog posts or pages. The HTML based text editor looks more scary and is not so popular with the beginners.

But what if you know how to code or want a little bit more control over the layout and structure when creating your posts or pages? You should use the “Text” editor.

How to edit HTML in WordPress?

So how do you get to the HTML text editor? In your WordPress admin post or page writing section, click on the “Text” tab. It’s in the text editor that you add and edit all your HTML tags.

WordPress HTML text editor

How to add HTML code to a WordPress post or page?

You can simply write or paste any HTML code directly in your WordPress “Text” editor. Try it with any of the most commonly used tags from my list below. Copy it here on the site, paste it into the text editor and “preview” your post or page to see how your visitors will see it.

Sometimes it happens that the code gets stripped out when switching from text to visual modes. Be careful and check that this hasn’t happened to you. Or try and stick to the text editor only if you plan to write code to not encounter this problem.

For those comfortable with coding, you can even disable the “visual” editor. Go into “Users” in your WordPress navigation menu, click “Your Profile” and select “Disable the visual editor when writing”.

When you work with HTML you may also notice some gibberish characters sometimes. This can happen if you copy/paste from Microsoft Word into WordPress. One useful source when pasting HTML code from Word into the WordPress editor is Postable.

Copy/paste your HTML from Word (or another source) into the tool to get a WordPress friendly and clean version of the code that you can then insert into your content.

How do I display HTML codes on my blog posts as normal text?

How about if you wanted to insert and display HTML tags and other codes within your post for your visitors to view them as normal text? Kind of like I’m doing here in my article? You still use the text editor but you wrap your code like this:

<code><div class="header"></code> 

WordPress HTML syntax plugins for nicer display of code

There are some WordPress plugins that can help you with this process and also allow you to edit the layout and the way the code is presented on your blog for your visitors. I recommend the following two. SyntaxHighlighter Evolved is the more popular option while Pastacode is the one that works best for those who use Page Builders.

Most commonly used WordPress HTML codes and tags

Insert an image

<img src="Image-URL" alt="Description of the image">

Make the image clickable to a new destination

<a href="Destination-URL"><img alt="Description of the image" src="Image-URL" /></a>

Note that the anchor text is the visible part of your link. It is the word or phrase that your visitors will click on to get to the page you’re linking to.

<a href="Destination-URL">Anchor text</a>

For SEO purposes you might need to make some of your link nofollow. Here’s how:

<a href="Destination-URL" rel="nofollow">Anchor text</a>

<a href="Destination-URL" target="_blank">Anchor text</a>

These are called page jumps. Your visitors can click on a link and get moved somewhere further down or up the article. This is especially useful for those longer guides that you want to split into different chapters using table of contents.

First part of creating a page jump is to assign a section (or target) that you want to link to. Place this code to whichever section of your page you want to link to. Second part is to actually link to that assigned section from your intro or your table of contents.

<a id="Specific-section"></a>

<a href="#Specific-section">Anchor text</a>

This also works if you want to link to a specific section of your page from another article on your blog. You can insert a link to this target: https://yourblog.com/yourpost/#Specific-section.

This is also how those “back to the top” links work. Assign a section name to the top of your post and include a “go to the top” button at the bottom of your post linking to the top section.

Create prominent titles and subheadings

<h1>This is a heading H1</h1> 
<h2>This is a heading H2</h2> 
<h3>This is a heading H3</h3>

Insert a line break

<p>This is<br>a paragraph</br> with a line break</p>

Create a new paragraph

<p>This is the first paragraph</p> 
<p>This is the second paragraph</p>

Make a bullet point list

<ul> 
<li>list item with a bullet point</li>
<li>another item with a bullet point</li>
</ul>

Make a numbered list

<ol>
<li>list item with number 1</li>
<li>list item with number 2</li>
</ol>

Highlight text in a post with yellow (or any other color) background

<span style="background-color:yellow;">Your text</span>

Assign the number for an item in your numbered list

<ol start="7">
<li>List item number 7</li>
</ol>

Make a letters list

<ol type="A">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
<li>Item D</li>
</ol>

Make a Roman numbers list

<ol type="I">
<li>Item I</li>
<li>Item II</li>
<li>Item III</li>
<li>Item IV</li>
</ol>

Center your text

<center>to be centered</center>

Make your text bold

<strong>to be bold</strong>

Make your text italic

<em>to be italic</em>

Change the color of the text

<span style="color: #000000;">Your text</span>

Insert a blockquote

<blockquote>Your quote</blockquote>

Create a table

<table style="width:600px">
<tr>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
<td>Row 1 Column 3</td>
</tr>
<tr>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
<td>Row 2 Column 3</td>
</tr>
</table>