How to Switch to HTML View in WordPress (Step-by-Step Guide)

Creating and managing a WordPress website today is easier than ever. Thanks to its user-friendly interface, drag-and-drop blocks, and live preview options, even beginners can build beautiful websites without touching a single line of code. However, there are times when you may want a little extra control, like adding tracking codes, fine-tuning layouts, or embedding custom scripts that the visual editor doesn’t support. That’s where learning how to switch to HTML view in WordPress becomes incredibly useful.

The HTML view in WordPress allows you to dive deeper into your page or post’s structure. It lets you directly edit the underlying code, giving you the freedom to customise your content exactly the way you want. Whether you’re fixing formatting issues, styling certain sections differently, or inserting snippets of code, the HTML view is your behind-the-scenes toolkit for precision editing.

In this step-by-step guide, we’ll show you exactly how to switch to HTML view in WordPress, both in the Gutenberg (Block) Editor and the Classic Editor. You’ll also discover helpful tips, real-world examples, and troubleshooting advice so you can edit HTML confidently and make your website look and perform better than ever.

What Is HTML View in WordPress?

Before we dive into the steps, let’s understand what “HTML view” really means.

HTML (HyperText Markup Language) is the backbone of every web page. It determines how text, images, videos, and other elements are displayed on a site. When you switch to HTML view in WordPress, you’re looking directly at the raw code that structures your content.

Here’s a simple example:

• Visual Editor View:

Hello, welcome to my blog!

• HTML View:

<p>Hello, welcome to my blog!</p>

As you can see, HTML view exposes all those tags (<p>, <h1>, <div>, etc.) that make your content look organised. It’s perfect when you want to add custom code, embed content from other platforms, or fix alignment and formatting problems.

Why Switch to HTML View in WordPress?

While the visual (or block-based) editors are great for day-to-day writing, switching to HTML view gives you unmatched flexibility. Here’s why it’s worth learning:

• Add Custom Code Easily
  Want to insert a YouTube embed code, Facebook Pixel, or newsletter form? The HTML view is the safest way to add such elements without WordPress altering them.
• Fix Formatting Glitches
  Sometimes, the visual editor adds unwanted spacing or breaks. HTML view allows you to see what’s really going on and correct it manually.
• Apply Custom Styling
  You can use inline CSS to style individual elements, for example, changing the colour of one specific word or adding a custom margin.
• Better Control Over Layout
  HTML view lets you fine-tune how your content appears, ensuring consistency across devices.
• Embed Scripts or Widgets
  Third-party tools like Mailchimp, Google Forms, or Eventbrite often provide embed codes that work best in HTML mode.

In short, switching to HTML view gives you the freedom and precision that every site owner or content creator craves.

How to Switch to HTML View in WordPress Gutenberg Editor

With the introduction of Gutenberg (also known as the Block Editor) in WordPress 5.0, editing became more modular and flexible. Instead of one large text area, Gutenberg uses “blocks” for each piece of content—paragraphs, headings, images, quotes, and so on. The good news is that Gutenberg allows you to switch individual blocks or the entire post/page into HTML view.

Let’s explore both options in detail.

1. Switching Individual Blocks to HTML View

If you want to modify just a small section—say, a paragraph or image caption—Gutenberg makes it easy to edit only that block in HTML mode.

Step-by-Step Instructions:

• Log in to your WordPress Dashboard.
  Go to yoursite.com/wp-admin and sign in.
• Navigate to Your Content.
  Click on Posts > All Posts or Pages > All Pages from the sidebar.
• Select the Post or Page.
  Click Edit on the content you want to modify.
• Choose the Block.
  Click on the specific block (text, image, or embed) you want to switch.
• Access Block Options.
  Click the three dots (⋮) in the toolbar above the block.
• Switch to HTML View.
  Select “Edit as HTML.”

Voilà! The block will now display its raw HTML code. You can freely add, edit, or remove HTML tags and scripts. When done, click the three dots again and choose “Edit visually” to return.

Example:

If you had a paragraph block that says:

Welcome to my website!

Switching to HTML view will show:

<p>Welcome to my website!</p>

You can then modify it like this:

<p><strong>Welcome</strong> to my <em>awesome</em> website!</p>

2. Switching the Entire Page to HTML View

Sometimes, you may want to see and edit all the HTML for your page in one go, especially if you’re adding tracking codes or custom CSS across multiple blocks.

Steps to Switch the Whole Page:

• Open your WordPress Dashboard.
• Go to Posts or Pages and click Edit on the one you need.
• Click the three dots in the top-right corner (beside the gear icon ).
• From the dropdown, choose “Code Editor.”
• You’ll now see your entire content in HTML form.

You can edit everything here: paragraphs, headings, embeds, etc. Once done, switch back by selecting “Visual Editor.”

Pro Tip:

When working on large posts, always save your draft before editing HTML. A small typo in a closing tag (</p>, </div>, etc.) can break your layout.

How to Switch to HTML View in the Classic Editor

Many WordPress users still prefer the Classic Editor, especially those who like the simplicity of the older layout. The Classic Editor has two main tabs at the top of the editing box: Visual and Text.

The Visual tab shows the formatted content, while the Text tab displays the underlying HTML. Switching between them is incredibly simple.

Step-by-Step Guide:

• Log in to your WordPress dashboard.
• Go to Posts > All Posts or Pages > All Pages.
• Click Edit under your desired post or page.
• At the top-right of the editor, click the Text tab.
• You’ll now see your content’s HTML view.

When you’re finished editing, switch back to the Visual tab to preview your changes.

Example:

Visual Tab:

Hello readers, welcome to my blog!

Text (HTML) Tab:

<p>Hello readers, welcome to my blog!</p>

The Classic Editor makes it easy to switch views on the fly, ideal for beginners who are just starting to explore code-level control.

Tips for Working Safely in HTML View

Editing in HTML view can feel intimidating at first, but it’s perfectly safe when you know what to watch out for. Here are some best practices:

• Don’t Delete Essential Tags
  Tags like <div>, <p>, <h1>, and <ul> define your layout. Accidentally removing or misplacing them can cause layout issues.
• Always Close Your Tags
  For example, <p>Hello without </p> can lead to broken designs. Every opening tag needs a matching closing tag.
• Preview Before Publishing
  Use the Preview button to see how your changes appear. This helps catch formatting errors early.
• Use Inline CSS Sparingly
  While you can style elements directly (like <p style=”color: red;”>), it’s better to use your theme’s stylesheet for consistency.
• Avoid Pasting Code from Untrusted Sources
  Only add scripts or HTML snippets from reliable sites. Malicious code can compromise your website’s security.
• Save Drafts Frequently
  WordPress autosaves your work, but it’s always safer to hit Save Draft before and after significant changes.
• Validate Your HTML
  Use tools like W3C Validator to ensure your code follows proper HTML standards.

Also Read:
Reasons to switch Content Management System WordPress

Real-World Examples of Using HTML View

So, when exactly should you switch to HTML view? Let’s go over some practical use cases.

1. Embedding YouTube Videos

While Gutenberg has a YouTube block, the platform sometimes provides an <iframe> code to paste. The HTML view is the right place for it.

Example:

<iframe width="560" height="315" src="https://www.youtube.com/embed/xyz123" frameborder="0" allowfullscreen></iframe>

2. Adding Google Analytics or Facebook Pixel

Tracking codes must be added in HTML view, typically in the <head> or <body> section (depending on your plugin setup).

3. Embedding Forms or Widgets

If you use Mailchimp, Google Forms, or Typeform, you’ll likely get an embed snippet like:

<iframe src="https://docs.google.com/forms/d/e/12345/viewform?embedded=true"></iframe>

This goes straight into HTML view.

4. Fixing Spacing and Alignment Issues

When the visual editor introduces unwanted spaces or breaks, inspect the HTML to find stray <br> or <p> tags and remove them manually.

5. Adding Custom Styles

You can style a specific paragraph like this:

<p style="color: #0073aa; font-weight: bold;">This is a custom-styled paragraph!</p>

6. Creating Tables Manually

While some blocks allow tables, hand-coding one gives more control:

<table>
  <tr><th>Plan</th><th>Price</th></tr>
  <tr><td>Basic</td><td>$10</td></tr>
  <tr><td>Pro</td><td>$25</td></tr>
</table>

Troubleshooting Common HTML View Problems

Even experienced users sometimes encounter issues when editing HTML in WordPress. Here’s how to handle them:

1. HTML Tags Disappearing

WordPress may remove <script> or <iframe> tags for security reasons.
Fix: Use a plugin like Code Snippets or Advanced Custom Fields to safely add scripts.

2. Code Not Displaying Correctly

A missing bracket or quote can break your layout.
Fix: Double-check your syntax or use an HTML validator.

3. Changes Not Saving

Switching rapidly between views can sometimes strip out code.
Fix: Make edits in one mode at a time and save frequently.

4. HTML Option Missing

If you can’t see the HTML or Code Editor option, your user role may not have the necessary permissions, or you’re using a page builder like Elementor.
Fix: Check your editor settings or install the Classic Editor plugin if needed.

5. Broken Layout After Editing

If something looks off, undo changes or restore a previous version. WordPress’s Revisions feature helps you recover earlier edits easily.

Bonus: When to Use Visual vs. HTML View

Knowing when to switch between the two modes saves time and ensures your content always looks its best.

Also Read:
How to Add a Download Button on WordPress

Final Thoughts: Why Mastering HTML View Makes You a Better WordPress User

Switching to HTML view in WordPress might seem like a small thing, but it can transform how you manage your site. Whether you’re tweaking a single paragraph or adding advanced functionality, understanding how to access and use HTML view puts you in full control.

You don’t have to be a developer to make the most of it. With a bit of practice, you’ll start to see how much flexibility HTML editing gives you, whether it’s embedding custom widgets, cleaning up formatting, or enhancing SEO with structured tags.

So, next time you’re building or editing a post, don’t hesitate to click that “Code Editor” or “Text” tab. It’s your gateway to turning your creative ideas into perfectly styled, precisely coded content.

In Conclusion

Whether you’re using the Gutenberg Block Editor or the Classic Editor, switching to HTML view is an essential skill every WordPress user should know. It’s your behind-the-scenes access to the real structure of your content, giving you the power to customise, refine, and perfect every detail.

By following the steps and best practices in this guide, you’ll gain confidence in working with HTML, ensuring your site not only looks great but also functions smoothly. Remember, the key is to make small, careful changes, preview often, and save regularly.

Interesting Reads:

What Is Better for SEO: HTML or WordPress?

10 Best HTML CSS Courses

Gutenberg or the Classic Editor: Which is Better and Can You Keep the Old Editor?