How To Use The HubPages HTML Editor In Your Text Capsules

Sometimes when entering your text in the HubPages Text Capsule, you might want to fine-tune its appearance. While the built-in toolbar has all the same options that can be found on the HTML editor, there may be times when those toolbar buttons just don't work exactly the way you want them too! For instance, I've had trouble getting the "blockquote" button to work from the toolbar, so I used the HMTL editor to set the places where I wanted the quotation to begin and end.

The following HTML tags are allowed in the HTML editor found in the text capsule:

• <a> - anchor tag, used for links
• <blockquote> - used for indenting material quoted from another source
• <br> - line break
• <strong> - bold text
• <em> - italic text
• <u> - underlined text
• <p> - paragraph break
• <pre> - preformatted, fixed width text
• <sup> - superscipt text
• <sub> - subscript text
• <h2> - large headline text (same font used for the Capsule Subtitle)
• <h3> - medium headline text
• <h4> - small headline text
• <ol> - ordered list, with numbers
• <ul> - unordered (bulleted) list
• <li> - list item

How To Access the HTML Editor In The Text Capsule

While editing text, just click the "HTML" button at the far left of the toolbar:

This launches the HTML Editor in a separate window:

At the top of the editor is the list of allowed tags - notice that you can't use all the tags that a standard HTML editor allows! You'll also see the "Clean Up HTML" button. I like to click this before I begin - it applies the HTML line breaks and makes the text easier to read. You can also click this before exiting the editor to make sure that your HTML tags are properly coded - any invalid tags will be removed.

What Do The Different Tags Do?

These are all of the HTML Tags are allowed, with an example for each one:

<a> This is the anchor tag, used for links. For example,

<a href="http://hubpages.com/@www">HupPages</a>

will create this hyperlink to the Hubpages homepage: HubPages

<blockquote> This tag created indented text for use when quoting material from another source. For example,

<blockquote>"Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.

Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this."</blockquote>

will create this block of text:

"Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.

Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this."

<br> Inserts a line break in the text - the same result as pressing Enter in the text editor. This tag id not paired with an end tag like most others, and the HTML Editor will modify any <br> tags you enter with a built-in end tag, resulting in <br />

<strong> Creates bold-faced text. For example,

This text is in <strong>bold-face</strong>

results in: This text is in bold-face

<em> Works the same as the <strong> tags to create italic text. So,

This text is in <em>italics</em>

results in: This text is in italics

<u> Again like the last two, but for underlined text. So,

This text is in <u>underlined</u>

results in: This text is in underlined

<p> Creates a paragraph break. This is different from the <br> tag in two ways; first it does have a paired end tag, and second it creates a bit of extra space before and after the block of text between the start and end tags. Inside the HTML Editor, this paragraph is coded like so:

<p>
<p> Creates a paragraph break. This is different from the <br> tag in two ways; first it does have a paired end tag, and second it creates a bit of extra space before and after the block of text between the start and end tags. Inside the HTML Editor, this paragraph is coded like so:
</p>

<pre> Creates preformatted, fixed width text. Text inside the <pre> tag

is fixed width and preserves    spaces    and
line
breaks
within the text

<sup> This tag creates superscipted text. For example,

This text is ^{superscripted} from the other text

results in: This text is ^{superscripted} from the other text

<sub> Same as the <sup> tag except the text is subscripted. For example,

This text is _subscripted from the other text

results in: This text is _subscripted from the other text

<h2> Is used for large headline text.

This is text with the <h2> tag

<h3> Medium headline text.

This is text with the <h3> tag

<h4> Small headline text.

This is text with the <h4> tag

<ol> Creates an ordered, or numbered, list. It in used in conjunction with the <li> tag below.

<ul> Creates and unordered bulletted list and also requires the <li> tag>.

<li> Creates the list items within an <ol> or <ul> tag set. For example:

<ol>
<li> List item 1</li>
<li> List item 2</li>
<li> List item 3</li>
</ol>

results in

1. List item 1
2. List item 2
3. List item 3

and

<ul>
<li> List item</li>
<li> List item</li>
<li> List item</li>
</ul>

results in

• List item
• List item
• List item

After you've finished entering your HTML code, you can cancel the changes by clicking the "Discard Changes" button. If you're satisfied with your work, click the "Update to Editor" button:

A pop-up window will appear:

Click OK to return back to the text editor and check out your results!

So I hoped you've learned a thing or two about using the HTML Editor in the Text Capsule! I've found that it comes in handy when I can't get the text in the capsule to look the way I want it to using the toolbar buttons. And, if you're a big geek like me, sometimes you just want to tag your HTML the old-fashioned way!

Did you enjoy this hub? If so please leave a comment. Otherwise I feel like I'm talking to myself when I publish these hubs!