Solved

Proper use of cdata with XHTML

Posted on 2004-11-01
801 Views
Last Modified: 2013-12-16
I like to keep my personal page XHTML valid.  There's a lot of less than signs and semicolons in some javascript I just posted which validators complain quite loudly about.
I tried to use some CDATA (<![CDATA[ ]]>) tags to get past the validator, but the best I managed was to completely bungle up my page by hiding large chunks of it that shouldn't have been hidden.

As long as I'm taking the right approach, can you suggest how to include the un-escaped html below into a validating XHTML document?  If it's not cdata what's the right approach?

<a href="javascript:if (1<2) { alert('One is less than two!'); }">Check it</a>

0
Question by:arantius
    11 Comments
     
    LVL 26

    Expert Comment

    by:rdcpro
    Probably you can use:

    <a href="javascript:if (1 &lt; 2) { alert('One is less than two!'); }">Check it</a>


    The issue is that there are 5 characters that are reserved for Markup:  <, >, &, " and '

    Most of the time the Apostrophe and Quote isn't a problem, but the other three need to be escaped as an entity.

    Regards,
    Mike Sharp
    0
     
    LVL 18

    Author Comment

    by:arantius
    Un-escaped means ...  not escaped.  Can't replace the < with &lt; and etc.
    0
     
    LVL 26

    Expert Comment

    by:rdcpro
    Why can't you replace < with &lt; ?  It validates for me, and also displays correctly (at least in IE 6 and Opera).  But any conforming browser should be able to expand the entity into a pointy bracket.

    Remember, I don't mean "un-escaped"...I mean "escaped".  When an entity is parsed, then turned into the character it represents, it's being "expanded".

    XHTML is an XML representation of HTML, and pointy brackets are not allowed except as markup.  You'll have the same problem if you use:

    <a href="javascript:if (1 &lt; 2 && true) { alert('One is less than two!'); }">

    This functions as desired if you write it:

    <a href="javascript:if (1 &lt; 2 &amp;&amp; true) { alert('One is less than two!'); }">Check it</a>

    Regards,
    Mike Sharp
    0
     
    LVL 26

    Expert Comment

    by:rdcpro
    BTW, if you have an XHTML validator that complains about the &lt; then I'd question the validity of the validator.

    Regards,
    Mike Sharp
    0
     
    LVL 18

    Author Comment

    by:arantius
    The question is two parts.  There's an XML thing called CDATA.  I want to know how to properly use it in an XHTML page.

    I have some javascript that for my own reasons should stay exactly as it is and not be escaped expanded whatever you want to call it.  I believe CDATA solves this.  How is it used properly if that is true?
    0
     
    LVL 26

    Accepted Solution

    by:
    You can't use CDATA sections in an attribute.  Attributes are parsable character data, and markup must be escaped in attributes regardless of your reasons for keeping it non-parsable.  Remember, XHTML is XML, and therefore must follow all the well-formedness rules of XML.  

    The XHTML way of using CDATA is like:

    <script type="text/javascript">
    <![CDATA[ alert("hello"); ]]>
    </script>

    HOWEVER this will not work in many current browsers, because of the CDATA block.  You'll have to use external script files:

    <script type="text/javascript" src="myScriptFile.js"></script>

    and call the code as a function.  

    These are your only choices:

    1.  Escape the attribute markup characters.
    2.  Use external Javascript file.
    3.  Forget about using XHTML.

    Regards,
    Mike Sharp
    0
     
    LVL 7

    Assisted Solution

    by:J_Mak
    0
     
    LVL 18

    Author Comment

    by:arantius
    Thanks Mike.  I'm working on a home brew blog site, and one of my posts was about a javascript bookmarklet I wrote.  Took a lot of work to fit it in to the 508 byte limit IE puts on bookmarklets and I can't add 1 more byte (well, maybe 2) of code to it so I have to leave it as it is.  I also don't handle posts very well.
    I like to remain purely validating XHTML valid, as a learning experience.  This is the information I was looking for, and J_Mak those are good links as well!
    0
     
    LVL 26

    Expert Comment

    by:rdcpro
    Well, here's a thought.  Whenever an entity like &lt; is parsed, it is expanded into the character it represents.  It is not kept as 4 one-byte characters (or more, depending on encoding).  An &lt; becomes a <, and occupies the same space in memory that an un-escaped < would.    Is the 508 byte limit the *parsed* size?  If it is, you may not have to worry about replacing < with &lt; etc. as the expanded size won't change.


    Regards,
    Mike Sharp
    0
     
    LVL 18

    Author Comment

    by:arantius
    I had problems keeping it within the limit because it would escape spaces as %20, and that did factor in.
    I didn't test html entity escaping and how that would effect it... I wager, it would be un escaped before it gets added.  I just thought CDATA would solve my problem, but I was wrong =) Thanks again for the effort.
    0
     
    LVL 26

    Expert Comment

    by:rdcpro
    Oh, I see.  Yeah, if there's URL encoding going on, you're gonna have trouble no matter what.  Even though the parsed entity will only be one character, the URL encoding will turn in into three characters again.

    One thing, spaces can be URL encoded with a + sign as well as the %20.  You might be able to scare up a few extra bytes that way.  ;^)

    Regards,
    Mike Sharp
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone. Privacy Policy Terms of Use

    Featured Post

    Threat Intelligence Starter Resources

    Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

    The Problem How to write an Xquery that works like a SQL outer join, providing placeholders for absent data on the outer side?  I give a bit more background at the end. The situation expressed as relational data Let’s work through this.  I’ve …
    The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
    The purpose of this video is to demonstrate how to make a WordPress Site faster and smaller in size by cleaning up the database. This will be demonstrated using a Windows 8 PC. Plugin WP Optimize will be used. Go to your WordPress login page. T…
    The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…

    875 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    12 Experts available now in Live!

    Get 1:1 Help Now