Writing & Editing

Advanced HTML

A more in-depth look at HTML and your WordPress.com site, continuing on from Beginning HTML

If you have some basic familiarity and understanding of HTML, you can use your Text editor to add some HTML that overrides the Visual editor’s default formatting. Here are some suggestions.

Note: This resource is for using HTML to make simple changes to the formatting of individual posts and pages. If you would like to make blanket changes to your theme, such as changing the font style or color, you will need the Custom Design feature, included with the WordPress.com Premium and WordPress.com Business plans.

Preformatted text

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, try using the we 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>

You can also apply the <pre> tag by using the dropdown style menu in the Visual editor, and choosing “Pre.”

↑ Table of Contents ↑

Extra line breaks

The Visual 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 force the editor to keep those spaces, you can add the following code in the Text editor:

&nbsp;

You’d want to add that as many times as you want blank lines, so if you want three blank lines between two paragraphs, you’d add the following in your Text editor:

&nbsp;
&nbsp;
&nbsp;

This is HTML for a non-breaking space. But a word of warning! If, after adding those spaces, you click back to the Visual editor before publishing or updating your post, those spaces will be stripped out again.

If you have trouble getting those spaces to stay, you can also use a bit of inline CSS to add extra line breaks.

To do 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.

This looks a bit more complicated than the non-breaking space code discussed above, but it gives you more flexibility and control.

↑ Table of Contents ↑

Columns

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>

This will create 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:30%;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:30%;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:30%;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.

↑ Table of Contents ↑

Tables

Copying and pasting tables from other applications (such as Microsoft Word) into your post or page doesn’t work. However, you can create simple HTML tables right in the Text 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.

If that’s too complex, you can also embed tables directly from programs like Excel or Google Docs using Scribd.

You could also use a third-party service to generate HTML tables for you, which you can then paste into your Text editor. Windows Live Writer is one program that will do this.

↑ Table of Contents ↑

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:

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

 

Not quite what you're looking for?

Get Help