(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-66923408-1', 'auto'); ga('send', 'pageview');
<!--The <code> blocks don't prevent this HTML from being rendered--> <code> <p>This is a list of items.</p> <ul> <li>List Item A</li> <li>List Item B</li> <li>List Item C</li> </ul> </code> <!--Replace special characters with character references--> <code> <p>This is a list of items.</p> <ul> <li>List Item A</li> <li>List Item B</li> <li>List Item C</li> </ul> </code>

Let's see how that code renders in the browser.


This is a list of items.

  • List Item A
  • List Item B
  • List Item C



  • <p>This is a list of items.</p>
    <ul>
    <li>List Item A</li>
    <li>List Item B</li>
    <li>List Item C</li>
    </ul>

    As you can see, the code blocks around the first block of code did not prevent the browser from processing the HTML. However, by replacing certain characters in the second block with HTML character references, we can display the code block as HTML markup.

    Character Entity Format

    In HTML, there are three different ways to format a character entity. You can use the character name, a Unicode value, or a number. For example, an ampersand may be displayed using any of the following entities: &, &, or &.

    In all three cases, the format looks basically the same. Each entity begins with an ampersand (&), followed by the character name, Unicode, or number reference, and ends with a semicolon. When a number is used, it must be preceded by the pound symbol (#), and when a Unicode value is used, it must be preceded by a pound symbol and the letter x (#x).

    Most people use character names rather than Unicode values or numbers when adding named characters to HTML documents since they're much easier to remember, but it's equally acceptable to use either the Unicode or number references as well.

    Diacritics

    There is one special subtype of character entity code that merits special mention: diacritical marks. These are marks that appear directly over the preceding letter and include accent marks and tildes. Here are the three most common diacritics:

    MarkCharacter NameNumberExample
    Acute
    ´
    ́
    á produces á
    Grave
    `
    ̂
    produces â
    Tilde
    ˜
    ̃
    produces ã

    Support for diacritical mark character names is limited right now, and you will see more consistent results between browsers if you stick with the number codes until more browsers add support for the character names.

    Most Common Character Codes

    Here is a quick reference table with a few of the most commonly seen HTML character references:

    SymbolCharacter NameNumberUnicodeExample
    Less Than
    <
    <
    <
    <
    Greater Than
    >
    >
    >
    >
    Slash
    /
    /
    /
    /
    Quotation
    "
    "
    "
    Apostrophe
    '
    '
    '
    Ampersand
    &
    &
    &
    &
    Copyright
    ©
    ©
    ©
    ©
    Registered Trademark
    ®
    ®
    ®
    ®
    Degree
    °
    °
    °
    °
    Left-pointing double angle
    «
    «
    «
    «
    Right-pointing double angle
    »
    »
    »
    »
    Non-Breaking Space
     
     
     

    Full List of Reserved Character Codes

    A complete list of all HTML character references is maintained by the World Wide Web Consortium as part of the HTML specification.

    Jon is a freelance writer, travel enthusiast, husband and father. He writes about web technologies such as WordPress, HTML, and CSS.
    shares