How to display HTML special characters in a text box

Written by sue smith Google
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to display HTML special characters in a text box
HTML special character encoding allows pages to display punctuation symbols and characters used in different languages. (Jupiterimages/Brand X Pictures/Getty Images)

In HTML Web pages, you can include elements designed to capture user input such as text boxes. Within these text boxes, you can display text included in your page markup code. When you include certain characters in any HTML element, you need to encode them in order to make them appear correctly in the user's Web browser. This includes displaying special characters in a text-box within an HTML page. The process of encoding HTML special characters is typically a simple one. In each case, you can choose to enter either an entity number or an entity name representing the character in question. Common uses for this encoding include punctuation symbols and characters used in certain languages.

Skill level:
Moderately Easy


  1. 1

    Create your HTML markup. If you do not already have one, create the HTML page you plan on using special characters with. The following page outline uses HTML5 and includes a basic text field together with a text area for demonstration:

    <!DOCTYPE HTML> <html> <head> </head> <body> <form> <input type="text" /> <textarea rows="3" cols="30"> </textarea> </form> </body> </html>

    Text inputs can be either of the two types included here: text-fields and text-areas. You can indicate text you wish to appear in either type of text-box when you create the page or can let the user enter their own text for you to capture and process.

  2. 2

    Encode your special characters. Before you include them in your page, you need to encode your HTML special characters in a way that the Web browser can process them. You can use online references on sites such as W3Schools (link in References) to translate your characters into a format you can include in HTML. You can choose to include either an entity number or an entity name for each special character. For example, the entity number for the "&" ampersand character appears in HTML as follows:


    To use the entity name for this character, you could include the following:


  3. 3

    Include your special characters in HTML. In your HTML file, add the encoded version of your special characters to your text-box. For a text input field, you can use the value attribute with entity name as follows:

    <input type="text" value="&" />

    To use the entity number this would appear as follows:

    <input type="text" value="&" />

    To include the character in a text-area, enter it between the opening and closing tags:

    <textarea rows="3" cols="30"> && </textarea>

    This example will display two ampersand characters, one listed using the entity number and the other using the name. Save and test your page in a browser.

Tips and warnings

  • If you are trying to validate your HTML pages using the W3C validation service, using special characters can sometimes help.
  • Special characters sometimes appear differently in different browsers, so testing is essential.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.