A Basic Guide To HTML For WordPress Beginners

A Guide To HTML Content Formatting In WordPress

Tutorial Contents

A Basic Guide To HTML Formatting For WordPress UsersThe world wide web, your website, your web pages, and even your web content are built and driven by code.

HTML is one of the main “code” languages used in WordPress to format content in your web pages and blog posts.

Fortunately, if you are a WordPress user, you don’t need to learn how to program code or build pages with HTML to compose and format content on your blog or website.

WordPress has easy-to-use editors like the Classic Editor and Block Editor that let you create and format content using clickable menu buttons and drag and drop, and unique features like plugins, themes, and widgets that let you manage your website without having to touch code.

If you plan to do anything online other than browse the web, however, you will probably need something done on your website or content at some point that will require having some knowledge of code.

Having a basic knowledge and practical understanding of HTML can be a useful and handy skill to have when composing, editing, or formatting content on your WordPress site. It can also save you time and money, especially with minor content edits and corrections.

In this tutorial, we will cover some of the basic HTML tags used to format content in WordPress posts and pages.

Working with code on a laptop.
You don’t need to become a coder. Having a basic understanding of how to format content in WordPress with HTML, however, can be useful.

Formatting Content In WordPress Using HTML Tags

As mentioned above, if you plan to run or manage a website, having some knowledge and familiarity with HTML can be useful when creating, editing, or formatting content for posts and pages on your site. and can help you save time and money.

For example:

  • You would like to edit certain elements in your content, (e.g. insert formatted text, a text link, a clickable image, etc.). If you know basic HTML, you can do this very quickly and easily without resorting to professionals and avoid incurring unnecessary costs or delays.
  • You outsource your content writing to a freelance writer and receive files containing text formatted with HTML code. Knowing basic HTML can help you better proof your content and assess or review the quality of the work before you sign off.
  • You outsource your content writing to a freelance writer and receive plain text files. Knowing basic HTML can help you add formatting to your content quickly and inexpensively.
  • Someone creates content for your site. You spot a couple of text formatting errors, like a sentence that should or should not have been made bold, a missing hyperlink, or a link pointing to an incorrect URL, etc. With a little knowledge of HTML, you can quickly fix these without having to ask, pay, or wait for a webmaster, web designer, or someone else to do it for you.
  • You want to discuss a project, custom work, or changes on your site with a web developer. Having basic knowledge and understanding of HTML can help you communicate your technical requirements more confidently and effectively. Being knowledgeable when presenting or discussing your ideas can also help you negotiate better with service providers.

What Is HTML?

HTML is an acronym for HyperText Markup Language.

According to Wikipedia’s definition of HTML…

HTML is the main markup language for creating web pages and other information that can be displayed in a web browser.

HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <table>), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags, known as empty elements, are unpaired, for example <img>. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments and other types of text-based content.

The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags but uses the tags to interpret the content of the page.

HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. It can embed scripts written in languages such as JavaScript which affect the behavior of HTML web pages.

Source: Wikipedia, HTML

info

Important: Like everything else on the web, HTML is also subject to regular changes, and sometimes these changes will affect WordPress.

Presently, the latest version of HTML standards is version 5 (also called HTML5).

This version has introduced several new “tags” to help sites keep up with the latest advances in web applications and browser technologies.

As some of the markup tags used in older and even recent versions of WordPress get phased out, you can expect WordPress to continue updating its software to ensure compatibility with industry-wide coding and HTML standards.

HTML5 logo.
HTML5

How To Use HTML Tags To Format Content In WordPress

With the Classic Editor, WordPress gives you the choice of adding content using a built-in rich Visual Editor (also called a WYSIWYG editor, which stands for What You See Is What You Get) and a Text Editor that allows you to work directly with HTML code and other script languages (e.g. JavaScript).

This lets you work with your content using the Visual Editor to format text using menu buttons…

WordPress Classic Editor - Visual Tab
WordPress Classic Editor – Visual Tab

And with the HTML code used by those menu buttons to format your content…

WordPress Classic Editor - Text Tab
WordPress Classic Editor – Text (HTML) Tab

info

To learn how to add content to your posts and pages, see the following tutorials:

HTML Tags Allowed In WordPress Content

For security reasons and to ensure that posted data content cannot be used to exploit sites, WordPress limits certain types of content that users can save to its database and filters out potentially harmful and/or invalid HTML by default.

It also prevents potentially harmful content from displaying on your site when it is already in the database.

WordPress employs different methods to do this depending on:

  • Whether users are posting content on a free hosted site (WordPress.com) or a self-hosted site (WordPress.org)
  • The type of content being saved (e.g. a post or a comment)
  • Whether the content is being posted by a trusted user or an unknown and unregistered user.

This filtering process allows users like site administrators and editors to use a larger set of HTML tags in their posts, pages, and comments, whereas other users can employ the same set of HTML tags in their post content, but a smaller set in their comments.

Any HTML that is not allowed is stripped out. This includes tags like <iframe>, <script>, and <style>

Additionally, any HTML that is not well-formatted is encoded, so that it displays as the HTML source, and it is not actually parsed as HTML.

For example,

a href="http://somewebsite.com" target="_blank" rel="noopener">This is a poorly-formatted hyperlink.

Having said this, however, WordPress still allows you to use an extensive set of HTML tags.

Here are some of the most used HTML tags in WordPress:

Commonly used HTML formatting tags in WordPress.
Some of the more commonly used HTML formatting tags in WordPress.

Here are some of the practical ways to format your content using a few of the HTML tags listed in the table above:

Practical examples of HTML formatting used in WordPress.
Some practical examples of using HTML to format content in WordPress.

HTML Cheat Sheet For WordPress Users

The tags below can be used in HTML code to apply various formatting, styling, or functionality to your content within a webpage, and are commonly used in WordPress websites to enhance the visual appearance and functionality of the site:

Strong or Bold Text

This tag is used to define text that should be displayed in a strong or bold font. It is used to indicate that the text within this tag is of particular importance or significance.

Example:

This is a bold text

Code:

<strong>This is a bold text</strong>

Emphasized or Italicized Text

This tag is used to define text that should be displayed in an emphasized or italicized font. It is used to indicate that the text within this tag has some level of importance or should be emphasized.

Example:

This is an italicized text

Code:

<em>This is an italicized text</em>

Underlined Text

This tag is used to define text that should be displayed with an underline. It is often used to indicate that the text within this tag is a link or needs special attention.

Example:

This is an underlined text

Code:

<u>This is an underlined text</u>

Strikethrough Text

This tag is used to define text that should be displayed with a line through it, indicating that the text is no longer valid or relevant. It is often used to strike out text that has been deleted or deprecated.

Example:

This is a strikethrough text

Code:

<s>This is a strikethrough text</s>

Heading Tags

Heading tags are used to define headings or titles on a webpage. They range from h1 (highest) to h6 (lowest), with h1 being the most important.

Example:

This is a Heading 1

This is a Heading 2

This is a Heading 3

This is a Heading 4

This is a Heading 5
This is a Heading 6

Code:

<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<h4>This is a Heading 4</h4>
<h5>This is a Heading 5</h5>
<h6>This is a Heading 6</h6>

Paragraph Tag

The paragraph tag is used to define paragraphs on a webpage.

Example:

This is a paragraph.

Code:

<p>This is a paragraph.</p>

Blockquote

This tag is used to define a block-level quote or citation. It is often used to display a longer quote or citation in a visually distinct and indented manner.

Example:

This is a blockquote

Code:

<blockquote>This is a blockquote</blockquote>

Anchor Tag

The anchor tag is used to create links to other webpages.

Example:

This is a link

Code:

<a href="https://example.com">This is a link</a>

List Tags

List tags are used to create ordered (numbered) and unordered (bulleted) lists.

Example of Ordered List

  1. Item 1
  2. Item 2
  3. Item 3

Code:

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Example of Unordered List

  • Item 1
  • Item 2
  • Item 3

Code:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Table Tag

The table tag is used to create tables with rows and columns.

Example:

Header 1 Header 2
Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

Code:

<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

Image Tag

The image tag is used to display images on a webpage.

Example:

An example image

Code:

<img src="image.png" alt="An example image">

Video

This tag is used to embed video content within an HTML document. It supports various video formats and provides controls for playing, pausing, and adjusting the video playback.

Example:

Code:

<video src="video.mp4" width="640" height="360" controls></video>

Audio

This tag is used to embed audio content within an HTML document. It supports various audio formats and provides controls for playing, pausing, and adjusting the audio playback.

Example:

Code:

<audio src="audio.mp3" controls></audio>

Line Break

Use this snippet to create a line break within a paragraph.

Example:

This sentence

has a line break.

Code:

<br>

Horizontal Line

This HTML tag adds a horizontal line to separate content.


Code:

<hr>

Inline Code

This tag is used to define inline code or computer code snippets. It is often used to display code examples, programming commands, or other types of computer code.

Example:

This is a code snippet

Code:

<code>This is a code snippet</code>

Preformatted Text

This tag is used to define preformatted text, which preserves spaces, line breaks, and other formatting characters exactly as they appear in the HTML code. It is often used to display code blocks or text that requires a specific formatting, such as ASCII art.

Example

This is a preformatted text

Code:

<pre>This is a preformatted text</pre>

Superscript Text

This tag is used to define superscript text, which is displayed above the baseline of the normal text. It is often used to denote footnotes, references, or mathematical exponents.

Example:

This is superscript

Code:

This is <sup>superscript</sup>

Subscript Text

This tag is used to define subscript text, which is displayed below the baseline of the normal text. It is often used for chemical formulas, mathematical equations, or annotations.

Example:

This is subscript

Code:

This is <sub>subscript</sub>

Form Tags

Form tags are used to create input forms on a webpage.

Example of a Form

Code:

<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>

Div Tag

The div tag is used to group elements together and apply styles using CSS.

Example:

This is a paragraph inside a div.

  • Item 1
  • Item 2

Code:

<div>
<p>This is a paragraph inside a div.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>

Span Tag

The span tag is used to apply styles to a specific part of a text or inline element.

Example:

This is a red text.

Code:

<p>This is a <span style="color: red;">red</span> text.</p>

Comment Tag

The comment tag is used to add comments in the HTML code, which are not visible on the webpage.

<!-- This is a comment -->

Abbreviation or Acronym

This tag is used to define an abbreviation or acronym. It is often used to provide a short explanation or definition of an abbreviation or acronym, which can be displayed as a tooltip when the user hovers over the text. (Hover over the example below to view the expanded acronym in the tooltip)

Example:

HTML

Code:

<abbr title="Hypertext Markup Language">HTML</abbr>

Inline Frame

This tag is used to embed another HTML document or web page within the current HTML document. It is often used to display external content, such as maps, videos, or social media feeds, within a webpage.

Example:

Code:

<iframe src="https://example.com/embed" width="600" height="400"></iframe>

Details

This tag is used to create a disclosure widget that can be used to hide or reveal additional content. It is often used to create collapsible sections or expandable menus.

Example:

Click to expand

This is a details element that can be expanded or collapsed

Code:

<details>
<summary>Click to expand</summary>
<p>This is a details element that can be expanded or collapsed</p>
</details>

Progress

This tag is used to create a progress bar that indicates the completion status of a task. It is often used to show the progress of file uploads, form submissions, or other processes.

Example:

Code:

<progress value="50" max="100"></progress>

Marked Text

This tag is used to highlight or mark text within an HTML document. It is often used to draw attention to specific words or phrases.

Example:
This is a highlighted text

Code:

<mark>This is a highlighted text</mark>

Time

This tag is used to define a machine-readable date or time. It can be used to represent dates, times, or both, and can be formatted in various ways.

Example:

April 13, 2023

Code:

<time datetime="2023-04-13">April 13, 2023</time>

Meter

This tag is used to create a graphical representation of a measurement or value within a known range. It is often used to display progress bars, gauges, or other visual representations of data.

Example:
75%

Code:

<meter value="75" min="0" max="100">75%</meter>

Figure Caption

This tag is used to provide a caption or description for a <figure> element, which is used to group and represent content, such as images or charts, that is referenced in the main content of a webpage.

Example:

This is a caption for a figure

Code:

<figcaption>This is a caption for a figure</figcaption>

Figure

This tag is used to group and represent content, such as images, charts, or videos, that is referenced in the main content of a webpage. It is often used in conjunction with the <figcaption> tag to provide a caption or description for the content.

Example:

An example image
This is a caption for an image

Code:

<figure>
<img src="image.jpg" alt="An example image">
<figcaption>This is a caption for an image</figcaption>
</figure>

tip

As explained earlier, this tutorial covers only some of the basic HTML tags that are used to format WordPress content. If you are interested in learning more about using HTML, then check out these tutorials: Free HTML Tutorials

The WordPress Text (HTML) Editor Explained

The Text tab in the WordPress Classic Editor lets you add (type, insert or paste in) and edit directly with HTML code and other script languages (e.g. JavaScript) when inputting content into posts and pages.

By default, the Text (HTML) editor also comes with a standard set of menu buttons that help make it easier to insert the right HTML formatting tags into your text.

WordPress Classic Editor - Text tab menu buttons.
WordPress Classic Editor – Text tab menu buttons.

Below is a brief description of what each of the Text Editor menu buttons do with their corresponding HTML tag:

  1. b: <strong></strong> Use this HTML tag for strong emphasis of text (i.e. make your selected text bold.)
  2. i : <em></em> Use this button to italicize text your highlighted text.
  3. hyperlink: <a href="http://example.com"></a> Clicking this button lets you add a hyperlink to your selected text.
  4. b-quote – <blockquote></blockquote> Click this button to turn your selected text into a quote or citation.
  5. del: <del></del> Use this button to indicate that the selected text has been deleted. Most web browsers will display deleted content as strikethrough text.
  6. ins: <ins></ins> Use this button to indicate that the selected text has been inserted. Most web browsers will display inserted content as underlined text.
  7. img: src="http://www.yourdomain.com/img/image.jpg" alt="image description" /> Click this button to insert an image into your post or page and add an “alt” tag to the image. An alt tag adds a text description of your image in case the image doesn’t display or render on your reader’s web browser and improves your content’s accessibility (e.g. it can be read aloud by some web browsers to help visually impaired users). Note: You can also use the “Add Media” button (15) to insert images into your content.
  8. ul: <ul></ul>  Click this button to turn selected text into an unordered list. Unordered lists normally display as bulleted item lists. Note: This tag needs to be used with the <li> tag (see below) for bullet lists to work and display your list correctly.
  9. ol: <ol></ol>  Click this button to turn selected content into a numbered list. Items in an ordered list are normally numbered (like this list). Note: Like bullet lists, use this tag with the <li> tag (see below) to display numbered lists correctly.
  10. li: <li></li> Select this button to turn your selected text into a list item. (This tag should be used in conjunction with the ul or ol tag).
  11. code: <code></code> Use this button to highlight your selected text as code. If you don’t use these tags when displaying code, WordPress will convert your tags into its actual code and you may get errors like broken or missing text). Note: The content enclosed within the <code> tags normally will display using a preformatted text style, such as a monospaced font. (See the “Tips” section below for more details).
  12. more: <!--more--> Insert this tag to break your post content into “teaser” and main content sections. For example, if you add content to your post and insert this tag after the second paragraph, your post will only display the first two paragraphs on your blog page with a hyperlink (e.g. continue reading…). Your visitors will then need to click on this link to view the rest of your post.
  13. Close Tags –  This button closes any HTML tags left open in your content. Note: proof your content after using this function to make sure that all tags have formatted correctly.
  14. Distraction-Free Writing Mode – Click this button to work in “distraction-free” writing mode (see screenshot below). You can toggle between the Visual Editor and Text Editor modes, insert media and hyperlinks, and update your content while in “distraction-free” mode. Click the button again to return to normal editor display mode.
  15. Add Media button – Click this button to insert media into your content (e.g. images, videos, audio files). This button displays in both the Visual and Text editors.
WordPress - Distraction-free writing mode.
Distraction-free writing mode.

With distraction-free writing mode [#14] everything but your editor fades away, removing all distractions and leaving only the content you’re working on showing on your screen.

Useful Tips About Using HTML Formatting In WordPress

Using HTML Content Editors

If you plan to use HTML extensively and go beyond knowing the basics and simple text formatting tags, there are several free (or low-cost) HTML editor software tools available to help you get started.

HTML5-Editor

HTML5-Editor
HTML5-Editor is a free online content composer.

HTML5-Editor is a free online HTML content editor. It lets you type text directly into the editor or paste it in from a Word Doc, PDF, Excel, etc. and it generates the HTML code for your content as you type.

Quick HTML Tutorial #1: How To Add HTML-Formatted Content To The “About Yourself” Section Of Your User Profile

WordPress has areas that allow rich text content formatted with HTML to be added, like sidebar widgets and the “About Yourself” section of your User Profile.

However, these areas don’t provide a content editor like the Posts and Pages Visual editor.

To use HTML-formatted content in these sections, you will either need to compose the content using an external HTML editor like the one described above or use the tip provide below to create HTML-formatted text and then paste it into those areas.

WordPress Classic Editor - Visual tab
WordPress Classic Editor – Visual tab

Let’s go through an example, so you can see how to easily do this using the Classic Editor and Visual tab formatting menu buttons.

Normally, when a post is published in WordPress, a link to the post author is displayed somewhere at the bottom or at the top of the post.

Post Author link.
Post Author link.

Clicking on the author link takes your visitor to the Author Archives section, where they can learn more about the author and browse other posts and articles they have published.

Author page and bio.
Author page and bio.

Note that there is no formatting (e.g. bold text, hyperlinks, etc.) in the above author bio example.

This is because, in this example, no HTML formatting has been added to the author profile section, which is located in the User Profile screen.

About the user - Biographical Info section.
The Biographical Info section has no HTML editor.

Notice too, however, that there is no HTML editor in the Biographical Info box section.

You will need to paste content with HTML formatting tags to display these in your author’s bio.

Let’s show you how to easily do this without having to learn HTML.

First, create a new post, then type or paste your author bio information in the Visual tab.

Next, format your content using the menu buttons. You can add hyperlinks to other websites, social media pages, internal pages (e.g. product or services pages, newsletter subscription page, etc.), and simple text formatting to enhance your author’s profile description like bold and italics.

Example of content formatted using the Visual tab.
Type and format your text in the Visual tab.

Switch to the Text Editor tab, then select and copy all the content to your clipboard.

Copying selected content in the Text tab.
Select and copy the content with HTML formatting to your clipboard.

With the content copied to your clipboard, go to your user profile section by selecting Users > Your Profile from the main navigation menu on your dashboard.

Users - Your Profile
Users – Your Profile

Scroll down to the About Yourself section and paste the content from your clipboard into the Biographical Info text area.

Paste content with HTML into the Biographical Info area.
Paste the content from your clipboard into the Author bio box area.

Remember to click the Update User button to save your changes.

Update User button
Remember to update your settings.

Preview your author bio post page to confirm your changes.

HTML formatted author bio.
Your author bio now contains HTML formatting.

Congratulations…now you know how to create an author description for your posts and format it using basic HTML without having to learn code!

To learn more about editing your user profile settings, see this tutorial: How To Edit Your WordPress User Profile

Quick HTML Tutorial #2 – How To Add Jump Links To Posts And Pages

Jump links (also known as anchor links, or bookmark links) are hyperlinks that allow users to navigate to different sections of content without leaving a post or page.

Jump links are especially useful for creating a dynamic table of contents on long documents.

Follow the simple tutorial below to learn how to create jump links in your content.


Simple HTML Tutorial – Creating Jump Links

Here’s everything we’re going to cover in this section. Click on the link to be taken to that specific section:

Creating A List Of Linked Sections

The first step is to create an index of your sections. To do this, type each section title on a separate line, then highlight your list and click the unordered list menu button to create a bullet-point list of items.

Create an index list.
1. Create an index list.

Next, make the items on your list bold, then select and highlight your list items, and switch to the text tab.

Format list.
2. Format the list and switch to the Text tab.

Adding Tags To Section Titles

In the text editor, add the following tags around your section title, inside the <strong> tags:

<strong><a href=”#enter-text-here”>Section Title</a></strong>

Replace #enter-text-here for each item on your list with a unique name.

Adding tags to section titles.
3. Add tags to section titles.

Now, go through each of the section titles in your content where you want users to jump to when they click on the link, and add the following inside the heading tag (this example uses h3 headings – change the headings to whatever you like, e.g. h1, h2, etc.):

<h3 id=”enter-text-here”>Heading 1</h3>

Now, make sure that the text you type into enter-text-here corresponds to and matches the unique name added in each section title in your index list.

Add a unique name to each jump link.
4. Add a unique name to each jump link.

Testing Your Jump Links

The last step is to test your jump links and make sure all the links work.

Save and preview your post and click on each of your jump links.

Test your jump links.
5. Test your jump links.

Also, see this tutorial for adding jump links using the WordPress Block Editor’s Advanced Properties.


HTML Plugins For WordPress

You can enhance the functionality of your WordPress Editor using different WordPress plugins.

Here are some examples:

WordPress HTML

WordPress HTML plugin.
WordPress HTML plugin.

WordPress HTML lets you add custom HTML to the post and page body and head sections.

Add HTML to the body and head sections of your WordPress site.
Add HTML to the body and head sections of your WordPress site. (image sourced from plugin website).

Pasting HTML directly into your WordPress editor can break elements and corrupt the HTML.

By pasting the HTML code into the code in the plugin’s custom fields dialogue boxes, you can output the right HTML-formatted content to your post or page.

Raw HTML

Raw HTML WordPress plugin.
Raw HTML WordPress plugin.

Raw HTML lets you disable automatic formatting like smart quotes and automatic paragraph creation and use raw HTML/JS/CSS code in your posts without WordPress messing it up.

With this plugin installed, you can wrap any section of your post in [raw]...[/raw] tags to prevent WordPress from converting new lines to HTML paragraphs, replacing apostrophes with typographic quotes, and so on.

This is useful if you want to insert a CSS block or JavaScript into your post content.

Display code in your posts and pages without breaking WordPress.
Display code in your posts and pages without breaking WordPress. (image sourced from plugin website).

Troubleshooting HTML Tag Errors

Tip #1: Text Formatting Displays Incorrectly

If your text formatting displays incorrectly after publishing your posts or pages, make sure that you have entered your HTML-formatted text correctly in the Text tab, not in the Visual tab.

For example, if you enter the following text in the Visual Editor…

HTML-formatted text entered in the Visual tab.
HTML-formatted text entered in the Visual tab.

This is what your text will look like when you publish your post…

Content formatted incorrectly.
HTML tags show when content has been formatted incorrectly.

You can see what is causing the problem if you switch over to the Text Tab…

Broken HTML formatting in the Text tab.
Broken HTML formatting in the Text tab.

As you can see in the screenshot above, WordPress has converted the symbols < and > into their HTML code equivalents (called ASCII characters).

So:

  • < (open-angled bracket) = &lt;
  • > (closed-angled bracket) = &gt;

To preserve the symbols < and > intact and ensure that your text will format correctly, you need to paste your code directly into the Text tab, not the Visual tab.

Paste HTML content into the Text tab.
Paste HTML content into the Text tab.

Now…when you publish your post, you will find that your text has been formatted correctly.

Post content with HTML-formatted content.
Paste content with HTML in the Text tab.

Tip #2: Disable The Visual Editor

By default, and for security reasons, WordPress does not allow some HTML tags to be used (e.g. codes such as embed, iframe, form, input, object, textarea, and others).

If you experience any issues when adding commonly used HTML tags that are allowed by WordPress to be used in your content, try disabling the visual editor in your user profile section.

Disable the visual editor when writing.
Disable the visual editor when writing if you experience problems.

After disabling the visual editor and updating your settings, go back to your post or page and reinsert the content with the problematic HTML tags, then republish your post.

If the above suggestion fixes the issue, go back to your User Profile screen, reactivate the Visual Editor, and see if the HTML code is still working fine with the visual editor restored.

tip

Note: If the above suggestion does not fix the issue and you continue to experience problems adding HTML code to your content, you may need to look at other options, like:

  • Getting help from an experienced WordPress support service provider.
  • Searching the WordPress Support Forum or WordPress troubleshooting resources for possible causes and solutions.
  • Reinstalling your WordPress application (i.e. performing a clean site installation)
  • Contacting your web hosting company for help or assistance.

HTML – FAQs

Here are frequently asked questions about using HTML in WordPress:

Can I use HTML in WordPress?

Yes, you can use HTML in WordPress. You can add HTML code directly into WordPress posts, pages, widgets, and theme files.

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

To add HTML code to a WordPress post or page, switch to the Text Editor mode instead of the Visual Editor or use the Code block. Then, you can directly input your HTML code.

Is it safe to use HTML in WordPress?

Generally, using HTML in WordPress is safe as long as you’re cautious and avoid inserting malicious code. Ensure that you trust the source of the HTML code you’re adding.

How can I create an FAQ drop-down menu using HTML in WordPress?

You can create an FAQ drop-down menu using HTML by adding HTML code for dropdown elements and utilizing CSS or JavaScript to make them functional. Alternatively, you can use WordPress plugins specifically designed for creating FAQ sections.

Congratulations! Now you know how to format and style your content in WordPress using basic HTML.

HTML formatting
Format your content in WordPress using HTML.

***

Example images, video, and audio sourced from Pixabay.com

Updated: July 5th, 2024

Terms Of Use | Privacy Policy

Scroll to Top