A Guide To HTML Content Formatting In WordPress
The 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.
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
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.
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…
And with the HTML code used by those menu buttons to format your content…
To learn how to add content to your posts and pages, see the following tutorials:
- How To Create A New Post In WordPress – Part 1
- How To Create A New Post In WordPress – Part 2
- How To Edit and Delete Posts In WordPress – Part 1
- How To Edit and Delete Posts In WordPress – Part 2
- How To Use The WordPress Classic Editor
- How To Create A Page In WordPress
- How To Edit And Delete Pages In WordPress
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:
Here are some of the practical ways to format your content using a few of the HTML tags listed in the table above:
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:
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
- Item 1
- Item 2
- 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:
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:
Code:
<figure> <img src="image.jpg" alt="An example image"> <figcaption>This is a caption for an image</figcaption> </figure>
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.
Below is a brief description of what each of the Text Editor menu buttons do with their corresponding HTML tag:
- b:
<strong></strong>
Use this HTML tag for strong emphasis of text (i.e. make your selected text bold.) - i :
<em></em>
Use this button to italicize text your highlighted text. - hyperlink:
<a href="http://example.com"></a>
Clicking this button lets you add a hyperlink to your selected text. - b-quote –
<blockquote></blockquote>
Click this button to turn your selected text into a quote or citation. 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.- 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. - 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. - 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. - 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. - li:
<li></li>
Select this button to turn your selected text into a list item. (This tag should be used in conjunction with theul
orol
tag). - 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). - 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. - 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.
- 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.
- 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.
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 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.
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.
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.
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.
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.
Switch to the Text Editor tab, then select and copy all the content 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.
Scroll down to the About Yourself section and paste the content from your clipboard into the Biographical Info text area.
Remember to click the Update User button to save your changes.
Preview your author bio post page to confirm your changes.
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.
Next, make the items on your list bold, then select and highlight your list items, 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.
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.
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.
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 lets you add custom HTML to the post and page body and head sections.
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 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.
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…
This is what your text will look like when you publish your post…
You can see what is causing the problem if you switch over to 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) =<
>
(closed-angled bracket) =>
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.
Now…when you publish your post, you will find that your text has been formatted correctly.
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.
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.
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.
***
Example images, video, and audio sourced from Pixabay.com
Updated: July 5th, 2024