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="https://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

  • profile image

    bri36 

    6 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^

  • Patti Riggs Hale profile image

    Patti Riggs Hale 

    7 years ago from Burdette, Arkansas

    Thanks for this! Helpful as usual.

  • dallas93444 profile image

    Dallas W Thompson 

    7 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...

  • Edweirdo profile imageAUTHOR

    Edweirdo 

    7 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:

    https://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...

  • T.T. profile image

    T.T. 

    7 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.

  • Carrie Foreword profile image

    Carrie Foreword 

    7 years ago from Leicestershire, England, UK

    Useful. Bookmarked for future reference. Thanks.

  • Alison Graham profile image

    Alison Graham 

    8 years ago from UK

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

  • WoodsmensPost profile image

    WoodsmensPost 

    8 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.

  • forlan profile image

    forlan 

    8 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.

  • vinividivici profile image

    vinividivici 

    8 years ago

    I think you are right, Ed.

  • Edweirdo profile imageAUTHOR

    Edweirdo 

    8 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 

    8 years ago

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

  • joe-on-the-net profile image

    joe-on-the-net 

    8 years ago

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

  • profile image

    celticmelody 

    8 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.

  • Edweirdo profile imageAUTHOR

    Edweirdo 

    8 years ago from United States

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

  • nadp profile image

    nadp 

    8 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 imageAUTHOR

    Edweirdo 

    8 years ago from United States

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

  • Money Glitch profile image

    Money Glitch 

    8 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 imageAUTHOR

    Edweirdo 

    8 years ago from United States

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

  • bonny2010 profile image

    bonetta hartig 

    8 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 imageAUTHOR

    Edweirdo 

    8 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

  • tonymac04 profile image

    Tony McGregor 

    8 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

  • mailxpress profile image

    Michelle Cesare 

    8 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.

  • wyanjen profile image

    Jen King 

    8 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...

    :)

  • Edweirdo profile imageAUTHOR

    Edweirdo 

    8 years ago from United States

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

  • scarytaff profile image

    Derek James 

    8 years ago from South Wales

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

working

This website uses cookies

As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

Show Details
Necessary
HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
LoginThis is necessary to sign in to the HubPages Service.
Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
AkismetThis is used to detect comment spam. (Privacy Policy)
HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
Features
Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
MavenThis supports the Maven widget and search functionality. (Privacy Policy)
Marketing
Google AdSenseThis is an ad network. (Privacy Policy)
Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
Index ExchangeThis is an ad network. (Privacy Policy)
SovrnThis is an ad network. (Privacy Policy)
Facebook AdsThis is an ad network. (Privacy Policy)
Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
AppNexusThis is an ad network. (Privacy Policy)
OpenxThis is an ad network. (Privacy Policy)
Rubicon ProjectThis is an ad network. (Privacy Policy)
TripleLiftThis is an ad network. (Privacy Policy)
Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
Statistics
Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)