HTML for Facebook

HTML Codes for Use in Facebook Notes

By Jennifer Kyrnin, Facebook gives you the opportunity to add notes to your profile page. But many people don't realize that you can also format those notes with HTML. While not every HTML tag is available in a Facebook note, there are a lot that can help you dress up your notes and make them stand out from the crowd.

Facebook Notes Have WYSIWYG

The Facebook Notes editor is WYSIWYG what you see is what you get. And with that editor you can write your notes and add some features without worrying about the HTML. But if you have an HTML editor you can write your notes outside of Facebook and then just paste them in. Once you preview your note in Facebook, most of the HTML tags will disappear, but your formatting decisions will remain. Image tags will stay as tags, so you can edit them more easily.

Format Your Facebook Note Text with These HTML Tags

Facebook notes lets you format your text in several ways:

Bold text Use the <b> </b> tag around text to make it bold. Write:
<b>this text is bold</b>

Italic text Use the <i> </i> tag around text to make it italic. Write:
<i>this text is italic</i>

Underline text Use the <u> </u> tag around text to make it underlined. Write:
<u>this text is underlined</u>

Strike out text Use the <s> </s> tag around text to put a line through it (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 it smaller than the surrounding text. Write:
<small>this text is small</small>

By using these text formatting options, you can add emphasis or de-emphasize text in your note.

Links and Special Characters

Facebook lets you add links to your notes just like you would in HTML. Plus, you can add any HTML character codes you need in order to get special characters into your notes. To add a link, type:
<a href="URL">this text is a link</a>

And replace the word URL with the URL where you want the link to go when clicked. For special characters, simply type in the numeric or friendly code into the notes box. For example: To get type &aacute; To get type &ntilde; Some useful codes include: &ndash; and &mdash; to write en- and em-dashes ( and ), &trade;, &copy;, and &reg; to write trademark, copyright mark, and registered symbols (, , and ). The entire list of codes is found here: HTML Codes Special Characters

Headlines in Facebook Notes

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

<h1> </h1> <h2> </h2>

<h3> </h3>

Enclose the text you want to be your 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. Don't use them to make your text bold or larger. Instead use the tags listed above to make them bold and big.

Lists on Facebook
Lists are very popular on Facebook, but many people just write the numbers or bullets manually rather than letting the HTML do the job for you. You can use both bulleted and numbered lists in Facebook notes. For a numbered (ordered) list, write:
<ol> <li>list <li>list <li>list <li>list </ol> item item item item 1</li> 2</li> 3</li> 4</li>

For a bulleted (unordered) list, write:

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

You Can Also Include Images in your 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. This will let you upload a photo or choose one from your existing albums. When you do it this way, youll 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. But I don't like adding images to the Facebook notes this way because you can't move the image around easily in the document. Instead, I use HTML to add images to notes:

1. In another window, I open my Facebook albums and surf to the image I want to use 2. I then right-click on that image and choose Copy image location 3. In the Notes editing window, I add the code for an image just like I would in a normal web page:
<img src="URL" alt="alt text">

4. I replace the URL with the image location I copied in step 2 and the alt text with the appropriate alt text 5. Then, below the image tag, I add a caption using the Facebook codes:
<div class="caption">My caption here</div>

Replacing My caption here with the caption for the photo The HTML looks like this:
<img src="http://sphotos.ak.fbcdn.net/hphotos-aksnc3/hs402.snc3/24399_382491027993_551662993_4894434_7302405_n.jpg" alt="suni"> <div class="caption">Shasta</div>

As long as youre pointing to an image already on Facebook, your image will show up without a problem. And then if you want to move it to other places in your note, you just highlight the image and caption tag and move it to a different place.