Is it valid to escape html in a href attribute? - html

Assuming I have the following link:
<a href='http://google.com/bla'>http://google.com/bla</a>
Is this one also valid?
<a href='http://google.com/bla'>http://google.com/bla</a>
It works in Firefox, but I'm not sure if this is standardized behavior. I hope the question isn't super dumb!

Yes, it is perfectly valid to do that. In fact, the ampersand (&) character must be escaped into & in order to be valid HTML, even inside the href attribute (and all attributes for that matter).

Related

HTML anchor tel tag formating

I have a small question about the anchor tel: tag in HTML.
Is this valid, or are there any standards on how to write it properly?
It has bugged me about the spaces and the prefix, are they allowed?
The standards pretty much say that you can't have spaces. So this:
Is valid HTML.

Is it okay to use HTML entities in attributes?

I have been using slim, and suddenly noticed that it escapes everything by default. So the anchor tag looks something like this:
<a href="/users/lyann/followers">
<img class="user-image" src="http://adasdasdasd.cloudfront.net/users&# 47;2011/05/24/4asdasd/asdasd.jpg" />
Is it okay for the href and src attributes to be escaped like this? Are there any other implications? All browsers seems to render it without a problem, though.
Yes, it's perfectly fine. Character references are valid inside attributes, too, and will be treated as character references just the same.
For reference, see:
A description of character references (they may be found within text)
A description of text

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>

Escaping HTML attributes

I'm trying to render an escaped string into an a html attribute (using Twitter Bootstrap to render a popover of the escaped code used to generate what the user is looking at):
Something like:
<a class="btn" href="#" data-content='<pre>$escaped_code</pre>' rel="popover" data-orginal-title="$title">some cool looking thing</a>
The problem is that the browser will parse and unescape the escape code potentially allowing for unpleasantness.
Don't use < or > in HTML attributes, for one:
<a class="btn" href="#" data-content='<pre>$escaped_code</pre>' rel="popover" data-orginal-title="$title">some cool looking thing</a>
I'm not sure what sort of escaped string you have there. I am assuming PHP. However, the escape characters are different for HTML:
http://www.theukwebdesigncompany.com/articles/entity-escape-characters.php
The fact that you are trying to put HTML tags into an HTML attribute suggests that you aren't using the correct HTML escape characters. Make sure everything within the HTML tag is escaped for HTML.
The answer is to of course manually escape it twice.

How to escape everything in a block in HTML

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.