HTML for Facebook

HTML Codes for Use in Facebook Notes

Social Networking Sites May Be Monitored By Security Services
Dan Kitwood / Staff/Getty Images News/Getty Images

The Facebook Notes feature offers a handful of formatting options, but people who want to do more in Notes can use HTML. While not every HTML tag is functional in a Facebook Note, many are. They can dress up your Notes and make them stand out from the crowd.

Facebook Notes Are WYSIWYG

The Facebook Notes editor is WYSIWYG—What You See Is What You Get. With that editor, you can write your Notes and add some features without worrying about HTML.

But Notes supports most HTML codes. If you have an HTML editor, you can write your notes outside of Facebook and then just paste them in.

When you preview a Note in Facebook, most of the HTML tags disappear, but the formatting decisions remain. Image tags stay as tags, so you can edit them easily.

Facebook-Friendly Note HTML Tags

Facebook notes lets you format your text in several ways:

  • Bold text
    Use the <b> </b> tag around text to make the text bold. Write:
    <b>this text is bold</b>
  • Italic text
    Use the <i> </i> tag around text to make the text italic. Write:
    <i>this text is italic</i>
  • Underline text
    Use the <u> </u> tag around text to underline the text. Write:
    <u>this text is underlined</u>
  • Strike-out text
    Use the <s> </s> tag around text to put a straight line through the text (strikethrough). Write:
    <s>this text is crossed out</s>
  • Big text
    Use the <big> </big> tag around text to make it larger than the surrounding text. Write:
    <big>this text is big</big>
  • Small text
    Use the <small> </small> tag around text to make the text smaller than the surrounding text. Write:
    <small>this text is small</small>

Using these text formatting options, you can add emphasis or de-emphasize text in a Note.

HTML Links in Facebook Notes

Facebook Notes can contain links and any HTML character codes you need to get special characters just like any HTML document .

To add a link, type:

<a href="URL">this text is a link</a>

and replace “URL” with the URL where you want the link to go when clicked.

Headlines in Facebook Notes

Just as in regular web pages, headlines help organize Notes and make them easier to read. There are six levels of HTML headlines, but the most commonly used ones are:

  • <h1> </h1>
  • <h2> </h2>
  • <h3> </h3>

Enclose the text for the heading inside one of those tags:

<h1>This is a Level 1 Headline</h1>

You should use the headlines in order, by number. So an H1 headline comes first. H2 headlines are used just below H1, and H3 headlines are used below the H2s. 

Lists on Facebook

Lists are popular on Facebook, but many people just write the numbers or bullets manually rather than letting the HTML do the job . You can use HTML for both bulleted and numbered lists in Facebook notes.

For a numbered (ordered) list, write:

  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>

For a bulleted (unordered) list, write:

  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>

Images in Facebook Notes

Images add even more to your Notes, but there is a trick to adding them. They have to be on Facebook.

The easiest way to do this is to click on the “Add a photo” link on the Notes editing page to upload a photo or choose one from your existing albums. When you do it this way, you see the following HTML added to your Note:

<Photo 1>

If you don't want to worry about the HTML and have Facebook automatically create a link to your album with that photo in it, then this is a great way to go. However, if you add images to Facebook Notes this way, you can't move the images around easily in the document. Instead, use HTML to add images.

  1. In a window, open your Facebook albums and surf to the image you want to use.
  2. Right-click on the image and choose “Copy image location.”
  3. In the Notes editing window, add the code for an image just like you would on a normal web page:
    <img src="URL" alt="alt text">
  4. Replace the URL with the image location you copied and the alt text with the appropriate alt text.
  1. Below the image tag, add a caption using the Facebook codes:
    <div class="caption">My caption here</div>
    Replace “My caption here” with the caption for the photo.

As long as you point to an image already on Facebook, the image shows up without a problem. If you want to move it to another place in the Note, just highlight the image and caption tag and move it.