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
Related
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.
Not only does clicking on this do nothing in Firefox, but the cursor indicating this is an anchor does not display either. It works perfectly in IE of course. Since zillions of similar anchors work fine in Firefox, all I can guess is that the fact that the url has query variables has something to do with this. The page I'm having trouble with is guistbrothers.com/photos.htm.
<img src="images/photo.jpg" alt="Photo Caption" width="200" height="200" />
I think you are on the right track. In your href, you have a / inside the src variable. Since a / is used as a directory separator in URL's, you cannot use it inside a variable. Try replacing it with a %2f. Also, the space between Photo and Caption needs to be replaced with %20.
This Tutorial Points article is a good reference for the URL codes for special characters.
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).
I've been working on this for way too long. I'm trying to put HTML inside the title attribute of a tag. This is for a tooltip. Of course, if this is going to be possible, then I have to escape all of the necessary characters so it doesn't screw up the tag in which it is contained. To be specific, how can I fit the following inside the title attribute of a tag:
test
That is, I want this:
<div title="test">my div</div>
I feel like I've tried everything. Is this even possible?
I googled HTML Escape Characters and found a tool to do it: http://accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php
It produced this string which you can use:
<a href="test">test</a>
if you are using jquery you can do it like this
$('div').attr('title','test');
if you want to escape html tags then you simply can do this
if your test is in a div something like this
<div id="tag">test</div>
then you can do $('div').attr('title', $("#tag").text());
Below is some html I found in this jquery tooltip tutorial, the contents inside of content"" show up in the tooltip using javascript. I have never seen the content propert befre, I search on W3schools.com but and google but could not find anything about it. Is this a valid property?
Image Tooltip
sorry If I am overlooking this, I searched but just briefly, didn't look too much before asking this.
If you need to put custom attributes into an element, then use the html5 data- attributes.
Shamelessly copied from John Resig:
<li class="user" data-name="John Resig" data-city="Boston"
data-lang="js" data-food="Bacon">
<b>John says:</b> <span>Hello, how are you?</span>
</li>
This is most likely a custom attribute that the jQuery tooltip creators made up to hold the text for the tooltip. This is unfortunately a common practice with many jQuery plugins (although most put stuff like this in the rel="" attribute instead).
The downside of this is that if you are concerned with validatiing your HTML, this will cause that to fail.
The upside is that browsers will ignore attributes that they do not expect, so it will not affect the rendering of the page.
The proper place for this would be the title="" attribute, but without the extra HTML markup in the value (<span> in this case).
If you must have the extra markup, be sure to encode it:
title=">span<Image Title</span>"
But, be aware that if the Javascript fails, the user will see this encoded text as the built-in, browser-rendered tooltip.
Based on my initial searches on w3c, it seems that there is not such attribute "content" for a tag. The "content" attribute is for meta tag only. For tooltips you would use the "title" attribute. Also, I don't think html is allowed in a title attribute.
Image Tooltip
The content attribute doesn't exist. For tooltips you can use the title attribute (which works on alot of tags).
I thinks some browsers also use the alt attribute for tooltips on img tags, but this isn't the intended purpose of alt.