How to add advanced HTML by using HTML editor in Wordpress

HyperText Markup Language, which is also known as HTML, is a markup language used to create web pages. You can use it to add a link, format text, insert pictures, create Call to Action Button, and more. With some basic knowledge about HTML, you can surely insert some HTML that overrides the default formatting of Visual editor and format the text the way that you want using the HTML editor.

To help you take full advantage of HTML, here is an instructional writing on how to add advanced HTML by using HTML editor.

Please note that this instruction helps you to make simple changes to the formatting of only individual posts and pages. With the Custom Design feature, included with the WordPress.com Premium and WordPress.com Business plans, making blanket changes to your theme is possible in WordPress.

How to add advanced HTML by using HTML editor

Insert preformatted text

Using the <pre> tag, you can take control over the line breaks and indentation. This is necessary for some particular types of blog posts like poetry. You can force the Visual editor to preserve your indents and spacing instead of using the default formatting.

Below is an example:

AH, broken is the golden bowl!
     The spirit flown forever!
 Let the bell toll! — A saintly soul
     Glides down the Stygian river!
         And let the burial rite be read —
             The funeral song be sung —
         A dirge for the most lovely dead
             That ever died so young!
                 And, Guy De Vere,
                 Hast thou no tear?
                     Weep now or nevermore!
                 See, on yon drear
                And rigid bier,
                    Low lies thy love Lenore!

So as to achieve this formating effect, this is the code:

&amp;lt;pre&amp;gt;AH, broken is the golden bowl!
     The spirit flown forever!
 Let the bell toll! — A saintly soul
     Glides down the Stygian river!
         And let the burial rite be read —
             The funeral song be sung —
         A dirge for the most lovely dead
             That ever died so young!
                 And, Guy De Vere,
                 Hast thou no tear?
                     Weep now or nevermore!
                 See, on yon drear
                And rigid bier,
                    Low lies thy love Lenore!&amp;lt;/pre&amp;gt;

Add extra line breaks

According to the default setting, there is only one blank line between each paragraph. Therefore, the line breaks that you added using the “enter” or “return” key will be deleted when the post is published. In order to keep those spaces, you need to add this code in the HTML editor:

&nbsp;

If you want to add more than one line break, you can do it like this following example:

&nbsp;
&nbsp;
&nbsp;

Above is an instruction on how to add HTML for a non-breaking space. Please note that those spaces will be stripped out again if you click back to the Visual editor before you publish or update your post.

Inline CSS can also be used to add extra line breaks if you still struggle to keep the spaces. This might be more complicated but this method is more flexible and easy to control. To add extra line breaks using inline CSS, you only need to wrap the text in this code:

<p style="padding-top:14px;">Your paragraph of text here.</p>

You can use either padding-bottom to add space below the paragraph or padding-top to add space above the paragraph. You can also change the number 14 to control the space.

Create columns

Using the <div> tag along with the style attribute, you are able to create and add columns in an individual post or page.

This is an example of how to create two columns :

<div style="width:40%; padding:0 10px 0 0; float:left;">
Your content for your column #1
Your content for your column #1
Your content for your column #1
</div>
 
<div style="width:40%; padding:0 10px 0 0; float:right;">
Your content for your column #2
Your content for your column #2
Your content for your column #2
</div>
 
<hr style="clear:both; visibility: hidden;">

You can change the values for width and padding in order to adjust the spacing and make sure that columns fit your post or page.

If you want to add 3 columns, you can use the following code. In this example, the width attribute has been changed.

<div style="width:33.3%; padding:0 10px 0 0; float:left;">
Your content for your column #1
Your content for your column #1
Your content for your column #1
</div>
 
<div style="width:33.3%; padding:0 10px 0 0; float:left;">
Your content for your column #2
Your content for your column #2
Your content for your column #2
</div>
 
<div style="width:33.3%; padding:0 10px 0 0; float:right;">
Your content for your column #3
Your content for your column #3
Your content for your column #3
</div>
 
<hr style="clear:both; visibility:hidden;">

Insert tables

To solve the problem of copying and pasting tables, creating simple HTML tables right in the HTML editor is one solution.

Here is an example.

<table>
<tr>
<td>Number of tables</td>
<td>1</td>
<td>2</td>
</tr>
</table>

Another solution is using third-party service like Windows Live Writer and Table Generator website. They will help generate HTML tables, so the only thing you need to do is to paste the code into your HTML editor.

Create collapsible content

Although the <details> element is not supported on the Edge browser, you can use it to set up an accordion element, even if that effect is not allowed on WordPress.

This is an example of using the <details> element:

<details> 

   <summary>What can you use WordPress.com for?</summary> 
       - To blog! 
       - To showcase my professional work.
       - To create an online presence for my business. 
</details>

Conclusion

With these detailed guidelines on how to add advanced HTML by using HTML editor, we hope that it would make it easier to format the text and make your post beautiful.