This article is your one stop shop for WordPress blog post or page HTML tag needs. Below is the list of the 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 posts and pages.
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.
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 do I get to the HTML editor 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.
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:
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 is the more popular option while Pastacode is the one that works for those who use Page Builders.