Writing & Editing

Beginning HTML

Table of Contents

Editing HTML in the Classic Editor

Note: The instructions from this guide are referring to the Classic Editor. If you are using the WordPress block editor, please see this guide.

↑ Table of Contents ↑

How can I view my HTML?

To get started, go to your site’s dashboard and edit any post or page — try this first with one you already wrote, so you can see what the HTML looks like. Click on the Text tab above the editing area (next to the Visual tab):

Switching to the Text tab in the Classic Editor

In the HTML editor, everything is text — a link is text, a quote is text, even an image is text. But there are two kinds of text here. Some of the text is the actual content of the post you wrote, and some is the HTML code.

It’s easy to tell the two apart: HTML code always starts and ends with angled brackets, < and >. Anything inside a pair of angled brackets is an HTML tag. Tags are predefined HTML commands that specify how your post will look and behave.

For example, to italicize a word, we use the <em> tag, which is short for emphasis.

To open a new tag, you simply type the tag you want to use just before the text you wish to change in some way: <em>. When you want to end that effect, you insert a closing tag, which is the same tag but with a slash: </em>.

Let’s try writing some simple HTML!

Be careful! The most important thing to remember about HTML is that for every opening tag, < >, you MUST have an equivalent closing tag, < />. If you forget to close a tag, your formatting can turn into a mess!

↑ Table of Contents ↑

To add a link, we use the <a> tag (the a is short for anchor).

Here is an example of an anchor tag:

<a href="http://www.wordpress.com">Start blogging on WordPress.com</a>


Here is what that anchor tag will look like on your site:

Start blogging on WordPress.com

Of course, you can also use the built-in WordPress editor to easily insert links. This does the exact same thing, only it creates the anchor tag for you.

Note: For security purposes, only the most common protocols are allowed. These are: http, https, ftp, ftps, mailto, news, irc, gopher, nntp, feed, telnet, mms, rtsp, svn, tel, fax, xmpp, webcal. All others are removed.

Formatting text

It’s easy to use HTML to make text bold, italic, underlined, or struck through.  Here are examples of how to make these changes to your text:

To make text bold:

<strong>bold text here</strong>

For italics:

<em>italic text here</em>

For underline:

<u>underlined text</u>

For strikethrough:


↑ Table of Contents ↑

Images in HTML

Image tags are used to embed images.  While using the Media Library is the recommended way of inserting images to your posts, you can also use HTML.  Here is an example of embedding an image using the <img> tag:

<img alt="Hero" src="http://en-support.files.wordpress.com/2014/03/hero.gif">


Here is that same <img> tag at work:


Say you have a post that’s full of images, and you want to move one from the top of the post to the bottom of the post, but you don’t want to cut it and reinsert it.

If you drag the image itself to another location in the post, you might accidentally leave behind the image’s caption, or some other bits of its HTML markup.

But if you switch to the HTML editor, you can easily identify the entire block of code that constitutes a given image. By cutting-and-pasting that entire code block to another area of the text editor, you avoid formatting woes.

What an image looks like in HTML

↑ Table of Contents ↑

Call to Action Button

Check our How to Make a Call-to-Action Button guide to learn how to add buttons to your site.

↑ Table of Contents ↑

Other Resources

Ready for more? Head on to our Advanced HTML guide to learn how to force multiple line breaks, create tables and more!

Formatting trouble? Check out the HTML Troubleshooting guide for help.

Pages: 1 2 View All

Not quite what you're looking for?

Get Help