Display CDATA as text in html - html

How can I display <!CDATA[ as text in an html document? I tried wrapping it in <pre> tags but that didn't work.
<! DOCTYPE html >
<html>
<body>
<div>This should show <pre><!CDATA[</pre> when the page renders</div>
</body>
</html>

Browsers do not support CDATA markers in text/html documents. Use character references instead (<, &, etc).

As others have written, you should escape “<” as <. HTML markup like pre or code does not change the way content is parsed, with “<” as markup-significant. You can use e.g. code markup here, since the content is computer code and this markup may have some advantages, but that’s a different issue. Example: <code><!CDATA[</code>.
There is a half-secret markup, however: <xmp><!CDATA[</xmp>. Within an xmp element, everything is taken literally; only the end tag of this element is recognized. Such markup is regarded as very obsolete by many, and it has been dropped from HTML specs, but it actually keeps working.

Related

How do I show actual HTML Code in textarea rather than rendered HTML?

I have a code that saves (html code) plus (some text) in mysql from textarea.
I then take the text from the mysql and display it under the textarea. The thing is if I save the code
<div style="color:red">Hello</div>
in mysql and then display it, I see Hello in red, but I want to see the actual
<div style="color:red">Hello</div>
to appear under the textarea. I hope you understand my problem.
so when you've grabbed the data from the database you want to actually display the html, rather than the page rendering the html?
if so just use the php function htmlentities();
You can use the xmp element, see What was the tag used for. It has been in HTML since the beginning and is supported by all browsers. Specifications frown upon it, but HTML5 CR still describes it and requires browsers to support it (though it also tells authors not to use it, but it cannot really prevent you).
Everything inside xmp is taken as such, no markup (tags or character references) is recognized there, except, for apparent reason, the end tag of the element itself, .
Otherwise xmp is rendered like pre.
When using “real XHTML”, i.e. XHTML served with an XML media type (which is rare), the special parsing rules do not apply, so xmp is treated like pre. But in “real XHTML”, you can use a CDATA section, which implies similar parsing rules. It has no special formatting, so you would probably want to wrap it inside a pre element:
<![CDATA[
This is a demo, tags will
appear literally.
<div style="color:red">Hello</div>
]]>
you can refer this ans : https://stackoverflow.com/a/16785992/3000179
If you want to do on browser level, you can follow the steps :
Replace the & character with &
Replace the < character with <
Replace the > character with >
Optionally surround your HTML sample with <pre> and/or <code>
tags.
Hope this helps.

Stop html from being rendered inside code blocks

My problem is that HTML is being rendered inside code tags.
In ghost blog I have had no issues using code tags.
Except from HTML, which is actually rendered.
This example from below is actually rendered.
<pre><code>
<div>some text</div>
<input value="even this is rendered"></input>
</code></pre>
If I use 4-spaces inline it works fine.
I'm using the default style layout.
Looking at the official markdown-documentation this is supposed to work.
http://daringfireball.net/projects/markdown/syntax
<code> isn't supposed to stop HTML being rendered. It means "Present this in a way that indicates it is code" not "Don't treat this HTML as HTML".
Use character references for characters with special meaning in HTML if you want them to be displayed (&, <, etc).
The Markdown documentation says:
Within a code block, ampersands (&) and angle brackets (< and >) are automatically converted into HTML entities.
… but code block means "When the markdown source is indented by 4 characters" not "When wrapped in pre/code".
Try escaping problematic characters:
<pre><code>
<div>some text</div>
<input value="even this is rendered"></input>
</code></pre>

Is there a HTML/CSS way to display HTML tags without parsing?

Is there any way that I could display HTML tags without parsing? Tags like XMP worked before perfectly but now it's replaced with PRE that isn't so cool. Take a look at this example:
//This used to NOT PARSE HTML even if you used standard < and >.
<XMP>
<a hred="http://example.com">Link</a>
</XMP>
//New PRE tag requires < and > as replacement for < and >.
<PRE>
<a href="http://example.com">Link</A>
</PRE>
What I'm looking for is equivalent of old XMP tag. New PRE tag will parse code.
You can use a script element with its type set to denote plain text, and set its display property to block. This only affects the parsing behavior: no markup (tags or entity or character references) is recognized, except for the end tag of the element itself </script>. (So it is not quite the same as xmp, where the recognized tag is </xmp>.) You can separately make white space handling similar to that of xmp and pre and/or set the font the monospace as in those elements by default.
Example:
<style>
script {
display: block;
}
</style>
Then within document body:
<script type="text/plain">
<i>é</i>
</script>
Tested on newest versions of IE, Chrome, Firefox, Opera. Didn’t work in IE 8 and IE 7 emulation on IE 9, but that’s probably a bug in the emulation.
However, I don’t see why you would use this instead of xmp, which hasn’t stopped working. It’s not in the specs, but if you are worried about that, you should have always been worried. Mentioned in HTML 2.0 (the first HTML spec ever) as avoidable, it was deprecated in HTML 3.2 and completely removed in HTML 4.0 (long ago: in 1997).
The xmp is making a comeback rather than dying. The W3C HTML5 (characterized as the current HTML specification by W3C staff) declares xmp as obsolete and non-conforming, but it also imposes a requirement on browsers: “User agents must treat xmp elements in a manner equivalent to pre elements in terms of semantics and for purposes of rendering. (The parser has special behavior for this element though.)” The old parsing behavior is thus not explicitly required, but clearly implied.
I personally think using the <code> </code> tags only works in Dream Weaver and the tag <xmp> </xmp> never stopped working unless you put in </xmp> it works fine. Using <textarea> </textarea> makes it so that others can edit your code on the website or the page so I recommend that the tag <xmp> </xmp> is still used and that that tag still lives on.
The modern way is to use textarea with (boolean) attribute readonly. You could use XMP, but that is deprecated, so it may eventually stop being supported.
example:
<textarea readonly='true'>
<p>This is some text</p>
</textarea>
And then... a few years go by, I have the same problem while converting my blog from wordpress to a vuejs spa backed by lambda and dynamodb.
And the answer is; at least in my situation. Escape the entity.
< becomes &lt;
> becomes &gt;
etc. etc.
Hope this helps.
There isn't.
In theory you could use a CDATA block, but no browser supports that in text/html mode.
Use character references.
If you want to be more complex, another way is to create a custom tag using jQuery. For this example, I used <noparse>.
$('noparse').each(function(){
if($(this).attr('tagchecked') != 'true'){ //checks if already changed tag
$(this).text($(this).html()).attr('tagchecked', 'true'); //makes the html into plaintext
}
});
JSFiddle here
I suggest using the html iframe tag and put the text you like to display in the src attribute. you only have to url or base64 encode it first.
example (urlencoded):
<iframe src="data:text/plain,%22%3Chello%3E%22"></iframe>
example (base64):
<iframe src="data:text/plain;base64,IjxoZWxsbz4i"></iframe>
Result displayed as:
"<hello>"
Technically you could use <textarea>, but it would require that there be no </textarea> tag in the code you are trying to show. It'd just easier to escape the <.
Well, one way would be to use jQuery. the jQuery .text() method will encode special characters. And the original un-encoded text will remain if you view source.
<div id="text">
This is an anchor
</div>
<script>
var t = $('#text'); t.html(t.text());
</script>

Are there any issues with always self closing empty tags in html?

Are there any browser issues with always collapsing empty tags in html.
So for example an empty head tag can be written like this
<head></head>
but is can also be written like this
<head/>
Will the second case cause issues in any scenerio?
Thanks
Self-closing <script> tags can mess up some browsers really badly. I remember my whole page disappearing into thin air in IE after I self-closed a script tag - everything after it was read as a script.
Assuming that you are serving your XHTML as XML, no. <head></head> is entirely equivalent to <head />. In fact, an XML parser won't even bother to tell you which one you have.
(There is, however, an issue in that the <head> tag must contain a <title>.)
You shouldn't use minimized form for head in XHTML.
http://www.w3.org/TR/xhtml1/#guidelines
About empty elements:
http://www.w3.org/TR/xhtml1/#C_3
Given an empty instance of an element
whose content model is not EMPTY (for
example, an empty title or paragraph)
do not use the minimized form (e.g.
use <p> </p> and not <p />).
In other words, paragraph should always be closed in XHTML, in HTML you could go with only opening tag. But if the element is supposed to have content it should be properly opened and closed.
For example line break has EMPTY content model and can be written as <br /> (same goes for <hr />) but not <div />.
Also see this SO question.
Empty Elements (XHTML)
Shorthand markup in HTML
Self-closing tags don't exist in HTML. The / is always ignored, that is, <foo/> and <foo> are equivalent. For elements such as br, that's fine, because you want <br>. However, <script src="..." /> means the same as <script src="...">, which is a problem (as noted in other answers). <head/> is less of a problem, because the </head> end tag is optional anyway.
In XML, on the other hand, self-closing tags do what you want. However, you probably aren't using XML, even if you've got an XHTML doctype. Unless you send your documents with a text/xml, application/xml or application/xhtml+xml MIME type (or any other XML MIME type), particularly if you send them as text/html, they will not be treated as XML.
Not that I am aware of. One caveat that has bitten me in the past is self closing my script tag: <script type="text/javascript" src="somefile.js" />
This results in some interesting fail.
In general an empty element can be written as a self closing tag, or opening and closing tags.
However, the HTML4 DTD specifies that the document HEAD must contain a TITLE element.
"Every HTML document must have a TITLE element in the HEAD section."
http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#h-7.4.1
I believe some older browsers had problems with the lack of whitespacing - in particular
<head/> would be interpreted as a "head/" tag, whereas <head /> will be interpreted as a "head" tag with a blank attribute "/" which is ignored.
This only affects a few browsers, AFAIK. Either is valid XHTML, but older HTML-only browsers might have trouble.
This is in fact documented in the XHTML guidelines as C.2
Even considering only browser issues (i.e. disregarding validity) and narrowing the question down to the head tag alone, the answer is still yes.
Compare
<head/>
<object>Does this display?</object>
against
<head></head>
<object>Does this display?</object>
each served as text/html to any version of IE.
Does this display? will be shown only in the latter example.

What was the <XMP> tag used for?

Does anyone remember the XMP tag?
What was it used for and why was it deprecated?
XMP and PRE differ. Content within PRE tags is formatted as follows:
Content is shown with a fixed font,
All whitespace is preserved, and
Each line break begins a new line.
If you want to include special characters such as <, > and & within PRE tags, they must be escaped so that they are not subject to special interpretation by the browser.
In contrast, content within XMP tags does not need to be escaped.
The only character sequence that cannot be included within XMP tags is the XMP end tag (</XMP>).
XMP is still supported by the browsers I have tested. You can try it with xmp.html. View the source to see the tags.
A quick Google search on W3C reveals that XMP was introduced for displaying preformatted text in HTML 3.2 and earlier. When W3C deprecated the XMP tag, it suggested using the PRE tag as a preferred alternative.
Update: http://www.w3.org/TR/REC-html32#xmp, http://www.w3.org/MarkUp/html-spec/html-spec_5.html#SEC5.5.2.1
XMP does some things that PRE does not support. I still depend on XMP, there is no substitute.
<xmp> is used with strapdown.js in formatting markdown notation. The name strapdown combining the terms bootstrap and markdown.
<!DOCTYPE html>
<html>
<title>Example</title>
<xmp theme="united">
## Example
- note one
- note two
- note three
</xmp>
<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
</html>
I still use the xmp tag for debugging var_dump(); in PHP. I just can't remember to use the pre tag for some reason.
I think it doesn't really matter because if you really want to output text, you should use textarea with the readonly attribute.
See http://www.w3.org/Bugs/Public/show_bug.cgi?id=12235
For HTML5. it was, according to the HTML5 editor (comments 11 and 12), a very close call either way.
I used <textarea>, which puts the html code into a neat box and clearly defines the code as different from the text before or after.
<textarea><b>boldtext</b><textarea>
Still works to show raw html - if you use it in script, break the start tag.
var stuff='<xmp'+'>this is shown as is<br/>hello</xmp>';
document.getElementById("x").innerHTML=stuff;
<div id="x"></div>