Beginning HTML

A basic understanding of HTML can help you get more out of your WordPress.com site. This article explains how.

In this guide

1. What is HTML?
2. Add and Edit HTML
   1. In the WordPress Editor
   2. In a Widget
   3. In the Classic Editor
3. Some HTML Basics
4. Format Text With HTML
5. Add a Link with HTML
6. Insert an Image with HTML

What is HTML?

HTML, or Hypertext Markup Language, is the main language used to create web pages. With HTML you can use special tags like <a> to add links and <img> to add images.

Add and Edit HTML

In the WordPress Editor

The easiest way to add HTML to a page or post is to insert a Custom HTML block. With this block, you can add HTML and edit it in your content.

Alternatively, almost all of the blocks have the option to edit them as HTML:

1. Click on a specific block in your editor.
2. Click on the ellipses (three dots) at the top of the block.
3. Select Edit as HTML.
4. To switch back to the visual editor for the block, click the ellipses again, and click Edit visually.

A third option for accessing HTML is to view the entire page or post in the Code Editor. The Code Editor will load the entire page or post’s HTML. Access it with these steps:

1. Edit a page or post.
2. In the top right of the editor, click on the ellipses (three dots) menu.
3. Select Code Editor.
4. To switch back to the Visual Editor, click the ellipses again, and click the Visual Editor option.

In a Widget

You can add a Custom HTML block to any widget area your theme supports.

In the Classic Editor

In the classic editor, click on the Text tab above the editing area (next to the Visual tab):

Switching to the Text tab in the Classic Editor

Some HTML Basics

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. Here’s an example:

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<a href="http://www.wordpress.com/">This is linked text</a>

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

To open a new tag, 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>.

📌

Most HTML tags are supported on WordPress.com, but some tags require a plugin-enabled plan. Learn more.

Format Text With HTML

It’s possible 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:

<strike>strikethrough</strike>

Add a Link with HTML

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.

Insert an Image with HTML

Image tags are used to embed images. While using the Media Library is the recommended way of inserting images into 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.