A basic understanding of HTML can help you get more out of your WordPress.com site. This article explains how.
WordPress.com provides you with a Text editor, so that you can see the HTML markup of each of your posts and pages. Switching over to the Text editor gives you some additional editing options, and can help clarify why your posts look the way they do.
What is HTML?
HTML, or Hyptertext 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.
Note: There are many types of HTML tags, but not all tags are supported here at WordPress.com. You can read more about which tags are permitted in our Code support document.
How can I view my HTML?
To get started, go to your blog’s dashboard and edit any post or page — try this first with a post you already wrote, so you can see what the HTML looks like. Click on the HTML tab above the editing area (next to the Visual tab):
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,
>. 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:
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!
Adding a link
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:
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.
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>
<em>italic text here</em>
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.
Call to Action Button
Check our How to Make a Call-to-Action Button guide to learn how to add buttons to your site.
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.