I seem to recall that there is an HTML tag that escapes absolutely everything inside it except the matching closing tag. Kind of like <plaintext> but not fundamentally broken.
<xmp> is the tag you are looking for:
<xmp>some stuff <tags></tags> too</xmp>
But, since it's depricated, the best you can get is <pre>.
You need to use <pre><code> ... </code></pre>.
<xmp> is deprecated and should not be used. See http://www.htmlcodetutorial.com/_XMP.html.
There is also the XML CDATA:
<![CDATA[stuff that is <tag>never</tag> parsed]]>
Whether this works in an HTML document is probably up to the browser. However, it should certainly work in an XHTML document.
Related
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 <
> becomes >
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>
I was wondering if I can write self closing elements like in XHTML in HTML5, for example, <input type="email"> can be <input type="email" />, and will it still validate? And is this the correct way to code HTML5 web pages?
HTML5 can either be coded as XHTML, or as HTML 4. It's flexible that way.
As to which is the correct way, that's a preference. I suspect that many web designers into standards are used to XHTML and will probably continue to code that way.
You can go straight to: http://html5.validator.nu/ to validate your code, or if you have the right doctype, the official W3C site will use it for you.
Self-closing tags may lead to some parsing errors. Look at this:
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
<div>
<p>
<div/>
</p>
</div>
</body>
</html>
While it is perfectly valid HTML4, it is invalid in HTML5.
W3C validation complains about <div/>:
Self-closing syntax (/>) used on a non-void HTML element. Ignoring the slash and treating as a start tag.
If innermost self-closed div is treated as start tag, it breaks whole structure, so be careful.
Either will work, just try to be consistent.
Same goes for quoting attributes - I've read tutorials that discourage quoting one word attribute variables. I would quote them all, at least for consistency (unless you have a popular web app where every byte is precious).
Is there an HTML tag that will display it's contents as a text node?
Example:
<tag><img src="pics/man.jpg"></tag>
This should be displayed like the following in a browser:
<tag><img src="pics/man.jpg"></tag>
Actually, HTML does provide such a tag. It's <xmp>...</xmp>
http://www.associatedcontent.com/article/473699/how_to_display_html_on_a_website_without.html?cat=59
What's the catch? Not every browser
supports xmp. It's a deprecated tag,
no longer in the "standard" version of
HTML. Some browsers support it, but
others don't. If you try to use an xmp
tag to display some HTML and a user
with an unsupported browser comes to
your site, he or she won't be able to
see the code.
No, there is not. XML and therefore XHTML let you write the following:
<![CDATA[
<tag><img src="pics/man.jpg"></tag>
]]>
but HTML does not allow that.
However, replacing all occurrences of < with < and replacing all occurrences of & with & should do the trick.
How about using the pre tag?
<pre><tag><img src="pics/man.jpg"></tag> </pre>
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.
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>