How To Use The HubPages HTML Editor In Your Text Capsules

Using the Built in HTML Editor

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 <sup>superscripted</sup> 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 <sub>subscripted</sub> 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

Final Steps

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!


Conclusion

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!


More by this Author


Comments 26 comments

scarytaff profile image

scarytaff 6 years ago from South Wales

Thanks for the information. I thought html was banned from hubs.


Edweirdo profile image

Edweirdo 6 years ago from United States Author

Thanks for visiting - I was confused about HTML, too! That's why I published this hub.


wyanjen profile image

wyanjen 6 years ago from Wyandotte Michigan

I'm still lernin' myself. I'm a commercial typesetter and sometimes HTML formatting drives me crazy. I've been tempted more than once to set my text in a layout app like Quark and then convert it to a PDF and then convert it to a jpg, and place it as a photo.

That seems easier sometimes LOL

But then, what's the point of a key word.

Anyway, my question is: your example text is a different color than your main copy. How do you do that? From black text to gray text...

:)


mailxpress profile image

mailxpress 6 years ago from New York

Welcome to Hubpages.

Hubpages is a great place to learn and grow. I've learned so much here. I've been a member for 12 months ago. I appreciate your Hub. Great tips on HTML. Not to many people understand how to tweak their Hubs.

I joined RedGage today and came across one of your links and I saw you belong to Hubpages. Way to go, good luck and over time you will realize how you can supplement your income. The extra money comes in handy. Nice to meet you and best of luck.


tonymac04 profile image

tonymac04 6 years ago from South Africa

Now I have learnt something really useful and will try it out on my next Hub. I have often been very frustrated with the appearance of the text in my Hubs and this will help considerably.

Thanks so much!

Love and peace

Tony


Edweirdo profile image

Edweirdo 6 years ago from United States Author

@wyanjen - On my laptop it all looks like the same color! But the example text lines were created using the "blockquote" tag inside the text capsule HTML editor


bonny2010 profile image

bonny2010 6 years ago from outback queensland

Thanks for taking the time to help us all - Iam pretty ignorant when it comes to doing anything other than writing on a computer- have yet to get game enough to attempt allthse referral, links etc services -just wrote that to let you know how much I appreciate your hub - thank you


Edweirdo profile image

Edweirdo 6 years ago from United States Author

@bonny2010 - Thanks and good luck on Hub Pages :D


Money Glitch profile image

Money Glitch 6 years ago from Texas

Ooh, thanks so much! I'm not HTML savvy so I am happy to finally have some instructions for making minor changes to hubs. Definitely bookmarking this one for future reference.


Edweirdo profile image

Edweirdo 6 years ago from United States Author

@Money Glitch - Good luck with your HTML and thanks for bookmarking!


nadp profile image

nadp 6 years ago from WEST PALM BEACH, FLORIDA

Hi there. This is a great hub - I will refer back to it when I write my next hub. I might even ask you a question or two - I'm known as "the questioner" among people I know.

Thanks for the lesson!


Edweirdo profile image

Edweirdo 6 years ago from United States Author

Thanks nadp! I'll try to help if I can ;)


celticmelody 6 years ago from Chicago IL

Hi, Edweirdo. I'm brand spankin' new on HubPages and I found this Hub very helpful. I'll definitely be coming back to ask questions.


joe-on-the-net profile image

joe-on-the-net 6 years ago

Thanks for the information about html in this hub which clearly explains all the options available.


vinividivici profile image

vinividivici 6 years ago

Would you say, please, why HP admin did limit the usages of HTML?


Edweirdo profile image

Edweirdo 6 years ago from United States Author

@vinividivici - My best guess was that HP wants to limit the possibility of mis-use of HTML. If users had full access to HTML on HubPages the site would be overrun with pop-up windows and flashing marquees and other annoying, spam-like behavior...

But that's just my best guess!

As far as I'm concerned, the limits allow us enough flexibility to get the work done! I would like to be able to embed links in images, though ;)


vinividivici profile image

vinividivici 6 years ago

I think you are right, Ed.


forlan profile image

forlan 6 years ago

Very good lens. Thanks ed. Unfortunately, we cannot change the text or we can put widget and pictures. I hope hubpages allow us to put widget and pictures in HTML capsule.


WoodsmensPost profile image

WoodsmensPost 6 years ago from Arizona

Thanks Edweirdo for writing another useful hub. I have bookmarked a few of your hubs in the past for future reference and will be bookmarking this one as well.


Alison Graham profile image

Alison Graham 6 years ago from UK

This is really helpful, thank you so much, bookmarked for reference!


Carrie Foreword profile image

Carrie Foreword 5 years ago from Leicestershire, England, UK

Useful. Bookmarked for future reference. Thanks.


T.T. profile image

T.T. 5 years ago

This is really useful but I do not understand how to implement tags for example kontera tags. The instructions are something similar to this: "Copy and paste the tag into your site's HTML source code. Be sure to paste the tag right before the closing HTML tag on all your site's pages."

Please help me.


Edweirdo profile image

Edweirdo 5 years ago from United States Author

@T.T. - You do not paste HTML code into HubPages! They do all of that stuff for you in the background. Here is the setup page from the HubPages help section:

http://hubpages.com/faq/#kontera

And, FYI, unless you have lots of traffic (1,000s of views per day) you will not see any significant return from Kontera...


dallas93444 profile image

dallas93444 5 years ago from Bakersfield, CA

Wow! More to learn. I will learn this and impliment it into my pages. Thanks. I just completed my website and had to learn the basics of HTML... Flag up and awesome...


Patti Riggs Hale profile image

Patti Riggs Hale 5 years ago from Burdette, Arkansas

Thanks for this! Helpful as usual.


bri36 4 years ago

Dude, saving the hubs one at a time!Great hub thanks for helping us out with some of the more confusing parts of coding and stuff. Yes I voted^

Submit a Comment
New comments are not being accepted on this article at this time.
Click to Rate This Article
working