This article is a one stop shop for your WordPress HTML codes. Here’s the list of WordPress HTML tags and codes most commonly used to create content. Save the list and use it as your reference when composing your WordPress blog posts and pages.
WordPress HTML in the Gutenberg editor
WordPress is one of the best blogging platforms. Millions of people and brands use it to create great looking sites.
This guide is valid both for the self-hosted and the hosted version of WordPress. See the difference between WordPress.com or WordPress.org.
WordPress 5.0 with the new Gutenberg editor released in December 2018 has dramatically improved and eased the way you work with HTML tags within your blog posts and pages.
How do you display HTML code in the Gutenberg edited posts? You simply add the “Code” block and type your code. It will show the code to your visitors.
How do you edit your Gutenberg posts using HTML? You simply click on “Edit as HTML” in the options menu of the particular block you’d like to edit.
You can also add the “Classic” block or the “Classic Editor” plugin to have the former WYSIWYG editor that I describe further down in this post.
Classic Editor: What’s the difference between Visual and Text?
You have two editing options when composing a blog post or page in the classic WordPress editor. You can use the default “Visual” view or the “Text” mode.
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 scarier 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 Classic Editor?
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.
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”.
Copy and paste between Google Docs, Microsoft Word and WordPress
WordPress 5.0 release has made it smooth and easy to copy any content from Google Docs or Microsoft Word and paste it into your WordPress posts and pages.
This was not always easy. When you work with HTML in the Classic Editor you may 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 like 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 a 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 when designing a blog.
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>Insert a link
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>Make the link nofollow
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>Make the link open in a new browser window
<a href="Destination-URL" target="_blank">Anchor text</a>Link to a specific section on a long page
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 the table of contents.
The 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. The 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>