How to use delimiter text symbol (<) without getting HTML error on my webpage?

Question

For the paging function on my webpage I will be using the symbol < which is a delimiter. When I run an html check it give me this error:

Line 747, Column 318: character "<" is the first character of a delimiter but occurred as data 
…quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))"><<   </a>

I know there has to be a way to get around this problem. Here is what my aspx code looks like:

 <td>
     <asp:LinkButton ID="PagerPrev" runat="server" CommandName="Page" CommandArgument="Prev"
    Text="<&nbsp;&nbsp;&nbsp;" ToolTip="Previous" />
</td>

If you see right after Text=" I used < and thats what the html error checker is picking up. Help is appreciated.

Answer 1

You have to encode it like you did with the non breaking spaces:

"<" is "<"

The ">" would be ">"

Answer 2

HTML-Encode the value using <.

If you were updating the text programmatically you could use HttpServerUtility (exposed via the Server property of an ASP.NET page):

PagePrev.Text = Server.HtmlEncode(theValue);

HTML encoding makes sure that text is displayed correctly in the browser and not interpreted by the browser as HTML. For example, if a text string contains a less than sign (<) or greater than sign (>), the browser would interpret these characters as the opening or closing bracket of an HTML tag. When the characters are HTML encoded, they are converted to the strings < and >, which causes the browser to display the less than sign and greater than sign correctly.

In fact, you could even do this on page with inline scripting, but largely unnecessary.

Answer 3

As others have said, if you use the “<” character in HTML content, it needs to be escaped e.g. as <.

A different approach is to use other characters. In normal language, “<” means just “less than”. The idea of going backward or forward is perhaps better conveyed using arrow characters such as “←” e.g. as follows:

<style>
.arrow { font-weight: bold; font-family: Verdana; }
</style>
<a href="..." title="previous page" class="arrow">&larr;</a>