In today’s tutorial, I’ll show you how to edit HTML code inside of a WordPress post. This tutorial has been updated for Gutenberg. Read on to learn how!

Tutorial on how to editor HTML in WordPress.

What is HTML?

Hypertext Markup Language, or HTML, is a scripting language that all websites are written in.

A web browser processes the HTML code and displays it to you in a human-readable format.

All websites are written in HTML. It is one of the three core languages of the web, along with CSS and JavaScript.

WordPress powers 30% of the websites on the World Wide Web, and therefore also outputs HTML.

Screenshot of an IDE that can edit HTML code inside of WordPress.

In fact, if you’ve ever written a WordPress blog post in the original editor or even the new Gutenberg editor, then you will be writing inside of HTML code tags.

Why Would I Want to Edit HTML in WordPress?

Just because WordPress allows you to edit HTML code, it doesn’t mean that you should.

In fact, I’d go as far as to say that 99% of WordPress users will not ever need to edit raw HTML code.

Why would you want to? There’s various reasons:

  • Add a custom-styled HTML section to a blog post.
  • To fix a problem with an outdated plugin.
  • To override a specific style in your current WordPress theme.

The last being probably the most common reason someone would want to edit HTML in a WordPress post.

How Can I Edit HTML in WordPress? (Gutenberg)

Since WordPress v5.0 and the addition of the new Gutenberg editor, it is much easier and flexible to edit HTML inside of WordPress.

This is going to be very meta, but I’m going to show you how to edit HTML inside of the new Gutenberg editor as I write this tutorial!

Start by signing in to your WordPress admin dashboard.

Click on Posts in the left hand menu, and then Add New.

The new post page will load, along with the new Gutenberg editor.

It should look something like this (although mine has text in it, yours will be empty!)

Screenshot of a new Gutenberg post with HTML inside of it in WordPress

Add an HTML Block to a Gutenberg Post

There are two ways to add HTML to a new Gutenberg post:

  • Click the plus button in the top-left-hand corner to add a new block and search for ‘HTML’.
  • Click into the body of a Gutenberg document and press the ‘/’ button on your keyboard, and then type HTML.

Either of those ways work. Both will get you the same result, which is to add a new empty HTML block into your Gutenberg document.

Screenshot of adding a new HTML block to Gutenberg editor

The HTML block is called Custom HTML.

Next, hit the return/enter key on your keyboard to add the Custom HTML block to your new Gutenberg post.

The block will start off in edit mode, and you can start adding HTML!

Why don’t you try adding the following HTML into the block?

Sample HTML Code
<h3> This is a heading 3 </h3>

Adding this into the HTML block will look like this:

Screenshot of new Gutenberg editor in WordPress to Edit HTML code.

You can preview what that HTML code will look like to your readers by clicking the Preview tab along the top of the block.

Screenshot of previewing HTML in the Gutenberg WordPress editor

🚀 Follow My Journey from 0 to 100,000 Monthly Pageviews!

Starting with this brand-new blog, I'm sharing everything I do to get from 0 pageviews to 100,000 monthly pageviews, every step of the way.
Zero spam, just great content. Unsubscribe at any time.

💬 Leave a comment

Your email address will not be published. Required fields are marked *

We will never share your email with anyone else.