HTML HTML intro.
  1. HTML intro
  2. Web pages and you
HTML basics
  1. HTML getting started
  2. HTML basics
  3. HTML document
HTML text
  1. HTML text formatting 1
  2. HTML text formatting 2
  3. HTML text formatting 3
  4. HTML fonts
  5. HTML entities
HTML links
  1. HTML links
  2. HTML email links
HTML images
  1. HTML images
  2. HTML image maps
HTML forms
  1. HTML forms
  2. HTML form labels
  3. HTML fieldset/legend
HTML tables
  1. HTML tables
  2. HTML tables concepts
HTML frames
  1. HTML frames
HTML backgrounds/color
  1. HTML backgrounds
  2. HTML colors
  3. HTML color shades
  4. HTML color usage
HTML style/layout
  1. HTML stylesheets
  2. HTML div/span
HTML media
  1. HTML audio
  2. HTML video
  3. HTML objects
  4. HTML download media
HTML declaratives
  1. HTML head section
  2. HTML meta tags
  3. HTML scripts
  4. HTML declarations
  5. HTML document types
Practical HTML
  1. HTML tag rules
  2. HTML things to avoid
  3. URL formatting
  4. URL encoding/decoding
  5. HTML use/access
  6. HTML publish work
HTML extras
  1. HTML marquees
HTML wrap-up
  1. HTML history
  2. HTML summary

HTML entities

There is so much text on so many webpages across the web, and some of this text happens to be special characters that do not appear on a keyboard. How then, to go about including such characters on webpages?

This tutorial focuses on:

What is an entity?

An entity is a symbol that is displayed on a webpage such as the copyright symbol ( ), the trademark symbol (), and the ampersand symbol (&). Each entity is displayed using a special code.

Entity construction

Now that you what entities are, how do you go displaying them?

An HTML entity code has three parts:

For example, to display a greater than sign on a webpage, we would write > or >

Here is a greater than sign - >
Here it is again - >
Output:
Here is a greater than sign - > Here it is again - >

NOTE: While you can use names or numbers for character entities, it is better to use names because they are easier to remember.

NOTE: Entities are case sensitive!

Common entities

There are many entities you can use, the ones below are very commonly used.

Common character entities and what they will display:

Common entities
Entity Name Entity Number Character Output
    space
&lt; &#60; less than sign <
&gt; &#62; greater than sign >
& &#38; ampersand &
&quot; &#34; quotation mark "
&apos; &#34; apostrophe '
&copy; &#169; copyright symbol
&reg; &#174; trademark symbol
&times; &#215; multiplication symbol x
&divide; &#247; division symbol
Example using some of the common entities:
HTML tags: &lt;p&gt;, &lt;h1&gt;, &lt;a&gt;, &lt;table&gt;, &lt;body&gt; With character entities, you can also create lots of &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;spaces This page is copyright &copy; &amp; trademark &trade; 5 &times; 5 = 25 We&apos;re just hangin&apos; out on a saturday afternoon
Output:
HTML tags: <p>, <h1>, <a>, <table>, <body> With character entities, you can also create lots of        spaces This page is copyright © & trademark ™ 5 × 5 = 25 We're just hangin' out on a saturday afternoon

For a full list of HTML character entities, read our HTML character entities reference page.

Read more about text formatting in our HTML text formatting 1, HTML text formatting 2, and HTML text formatting 3 tutorials.

Reverse entities

What if you wanted to print the code for an entity on a webpage instead of the character itself?

Remember that every entity begins with the & symbol, and how do we display this symbol? By using the &amp; entity. So to display the code for an entity on a webpage instead of the character itself, simply use &amp; to produce an & symbol followed by the rest of the entity code.

Example:
Entity code for the < (less than symbol) - &amp;lt; Entity code for the > (greater than symbol) - &amp;gt;
Output:
Entity code for the < (less than symbol) - &lt; Entity code for the > (greater than symbol) - &gt;
© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information