Advanced HTML

If you have some basic familiarity and understanding of HTML, you can edit the HTML of your Page or Post to add or modify the existing HTML code.

💡

The WordPress Block Editor contains blocks for some of the more popular custom HTML features such as the Quote block, Columns Block and Table Block. The steps outlined below are for sites using the Classic Editor, or those who prefer editing in HTML.

This resource is for using HTML to make small changes to the formatting of individual posts and pages. If you would like to make changes to your theme, like the font style or color of specific elements, you will need the additional features provided by the WordPress.com Premium plan or higher.

In this guide

1. Preformatted Text
2. Extra Line Breaks
3. Columns
4. Tables
5. Collapsible Content (accordion effect)
6. Other resources

Preformatted Text

💡

The Block Editor has a Preformatted block that you can add, instead of writing HTML.

For some types of blog posts (in particular poetry), you might want more control over your line breaks and indentation than the Visual editor typically offers.

To force the editor to preserve your indents and spacing, you would use the <pre> tag.

For example, take the following poem:

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!

To achieve this formatting effect, you’d use the following code:

<pre>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!</pre>

In the HTML tab for the Classic Editor you can also apply the <pre> tag by using the dropdown style menu in the Visual editor, and choosing “Pre.”

Extra Line Breaks

💡

The Block editor includes a Spacer block that can be used to add more space around different blocks.

The HTML tab in the Classic Editor leaves one blank line between each paragraph by default. If you attempt to add additional line breaks using the “enter” or “return” key, those spaces will be stripped out when you publish.

To add extra space between paragraphs you can use the Visual tab – but switching between HTML and Visual again later can strip those spaces.

An alternative is to use a bit of inline CSS to accomplish this. Wrap your paragraph in the following code:

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

This tells the editor to leave 14 pixels of space above your paragraph. You can increase the number for more space or decrease it for less. You can also use “padding-bottom” rather than “padding-top” to add extra space below a paragraph instead of above it.

Columns

💡

If you are using our Block Editor, please use the Columns Block to format columns instead. These steps will not work.

You can use the div tag along with the style attribute to create columns in an individual post or page.

For example, to split your content in two columns, you would use the following code:

<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>
<div style="clear:both;"> </div>

The results will look something like this:

Your content for your column #1 Your content for your column #1 Your content for your column #1

Your content for your column #2 Your content for your column #2 Your content for your column #2

 

You can play with the values for width and padding to tweak your columns. This allows you to adjust the spacing between them, create columns of different widths, and make sure more columns fit your post or page in case you add them.

For example, for three columns, you would use the following code:

<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>
<div style="clear:both;"> </div>

Note how we changed the width attribute to 30% to make sure we could fit another column.

Tables

If you are using our Block Editor, please sure the Table Block to format columns instead. These steps will not work.

Copying and pasting tables from other applications (such as Microsoft Word) into your post or page doesn’t work. However, you can create HTML tables right in the HTML editor.

To do this, try some HTML similar to the following:

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

This will create a table that looks like this:

Number of tables

1

2

You can expand that for as many rows and columns as you need for your table.

You could also use a third-party service to generate HTML tables for you, which you can then paste into your HTML editor, such as this Table Generator website.

Tables are best for displaying tabular data, like a list of names, dates or numbers. Tables are not recommended for creating a columnar page layout. We recommend using columns for that instead.

Collapsible Content (accordion effect)

Setting up an accordion element requires the script tag, which isn’t allowed at WordPress.com. Instead, the <details> element can be used.

Here’s an example of how to use the <details> element:

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

The ul and li tags are not required for accordion styles to work. In this example, they are used to create a list within the accordion.

And here’s what the above will look like:

What can you use WordPress.com for?

• To blog!
• To showcase my professional work.
• To create an online presence for my business.

Other resources

If you’d like to get fancier with HTML, there are many online tutorials and resources that can help. Here are a few:

• Learn HTML, Mozilla Developer Network
• HTML Dog HTML Tutorials 
• Learn to Code HTML and CSS
• Codecademy
• HTML5 Doctor: Element Index

If you think you’ve bungled some HTML and you’re not sure how to fix it, check out our HTML Troubleshooting guide.