ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

How To Use The HubPages HTML Editor In Your Text Capsules

Updated on January 16, 2012

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!


Comments

Submit a Comment
New comments are not being accepted on this article at this time.

  • scarytaff profile image

    Derek James 7 years ago from South Wales

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

  • Edweirdo profile image
    Author

    Edweirdo 7 years ago from United States

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

  • wyanjen profile image

    Jen King 7 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

    Michelle Cesare 7 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

    Tony McGregor 7 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
    Author

    Edweirdo 7 years ago from United States

    @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

    bonetta hartig 7 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
    Author

    Edweirdo 7 years ago from United States

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

  • Money Glitch profile image

    Money Glitch 7 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
    Author

    Edweirdo 7 years ago from United States

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

  • nadp profile image

    nadp 7 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
    Author

    Edweirdo 7 years ago from United States

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

  • profile image

    celticmelody 7 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
    Author

    Edweirdo 6 years ago from United States

    @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 6 years ago from Leicestershire, England, UK

    Useful. Bookmarked for future reference. Thanks.

  • T.T. profile image

    T.T. 6 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
    Author

    Edweirdo 6 years ago from United States

    @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

    Dallas W Thompson 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.

  • profile image

    bri36 5 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^

Click to Rate This Article