I am needing to attach a value to an <a> element that will be handled in jQuery. Basically, I am aware of the data- attribute prepended to whatever name I want to give it, but I'm not sure this is the best for (X)HTML, as the software I am coding for is declaring DTD's within the tag, so it would not pass (X)HTML 5.0 validation, as I'm not able to change this to exclude the DTD's.
My question is, can I just use the <a> elements tag attribute to hold the URL links that jQuery will grab using the following code: $(this).attr('tag'); The href attributes value is set to: javascript:void(0); because the actual URL triggers an AJAX event and is not an actual page that one should be browsing to in their browser, as it just performs an action to be taken when clicked on.
I'm not entirely sure what the <a> elements tag attribute is to be used for, but am wondering if this is the best known attribute to use to be able to be valid (X)HTML in both HTML 4 and 5?
My question is, can I just use the <a> elements tag attribute
There is no tag attribute in HTML. So that will have all the problems of data-* but without the future support.
If you want to store arbitrary data in HTML 4/XHTML 1 then the best attribute to use is probably class.
The href attributes value is set to: javascript:void(0); because the actual URL triggers an AJAX event
Don't do that. Use a real (working) URI, and add a JavaScript event handler that prevents the default behaviour if it succeeds. If the URI contains the data you need for your JS to run, then all the better as you can extract it from the href attribute.
Related
I'm trying to understand how to add JSF capabilities to an HTML5 document (instead of doing the other way around), and now I see that if I add a jsf:id attribute to an element, the attribute is rendered in the browser as-is (jsf:id) and not as simply id (it doesn't happend with jsf:value in a <input> element, which is rendered as simply value). And now I've seen that some people add both attributes id and jsf:id. Now i am confused.
I understand that I need id if, for instance, I want to access that element via jQuery, but why do I need jsf:id then? couldn't I just add the jsf namespace to other attributein the same element so that the element is processed by the JSF engine, or is jsf:id useful for something else (in the managed bean maybe)?
Thanks
I'm working on a mail server that sends HTML emails down to a mail client. Can the HTML DOM be modified to indicate that either a single or all URLs (<a href=""> elements) use a specific user agent? The integrated browser in our custom client could inspect the HTML to determine what user agent to use and then take that into account when opening the URL.
If it's possible to add a custom (non-standard) attribute to the <a> element or possibly a child element to it, that'd work too, if it's valid to do so. Thanks in advance.
Can the HTML DOM be modified to indicate that either a single or all URLs (<a href=""> elements) use a specific user agent?
Not in any standard way.
If it's possible to add a custom (non-standard) attribute to the element or possibly a child element to it, that'd work too, if it's valid to do so.
"non-standard" is practically invalid by definition.
There is a loophole in data- attributes (since they are defined by the specification as a way to add extensions) but:
"These attributes are not intended for use by software that is independent of the site that uses the attributes"
HTML 5 is a Candidate Recommendation, not a standard.
We are building an image carousel, it displays clickable thumbnails that when clicked, displays the actual image. We therefore need both url to appears in the Html. Since there is no "actualImageUrl" attribute defined in the img tag, we figured out that we could build the thumbnail url like this : /thumb.png?altUrl=actualImageUrl.png. The server does not care of the actualImageUrl querystring param and we can use javascript to parse the scr attribute and figure out the actualImage Url.
How W3C valid is this ?
Changing the URL of the src attribute is perfectly valid - But you could use the data- attribute - new with HTML5 (although that doctype is not a requirement to use them) and its purpose is exactly this, from the specs :
Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
w3 specs for custom attributes
Note - you can test validation here
Anything is valid as a src attribute value, in the XHTML meaning for “valid” (a formal thing). It is also otherwise correct to have a query part in such a value and use it in client-side scripting.
But it might be unnecessarily complicated. As you are working with client-side JavaScript, you could include the URLs in a JavaScript array or object, instead of putting them anywhere in HTML markup. For example, you could use an object with thumbnail image URLs as property names and full image URLs as corresponding values, like
var fullImage = { 'thumb.png': 'actualImageUrl.png', ... }
And you would then use this object to pick up the full image URL when a thumbnail is clicked on.
For a more robust solution, which would work even when JavaScript is disabled, you would need to generate the code server-side, generating a elements around img elements.
I saw an unusual thing in This Website:
AccuWeather.com
Some tags in this page (like lis) have a href with a url in its Class attribute, Like the picture below,
So what I want to know is:
1- Why they used the href and url in class attribute?
2- how can I do this?
ScreenShot http://4ax.ir/images/screenaja.jpg.
It's nothing special. They're just using JSON encoding to put arbitrary data into a DOM element. An alternative to use to the new data- attributes allowed by HTML5.
Why do you want to do this? Browsers will not treat it specially, and in fact JSON-encoded data makes it an invalid attribute value.
1) Why they used the href and url in class attribute?
They did this mainly on li elements. I guess this has been done in order to provide the data to an event handler, in order to navigate to another page on a click or mousedown event.
2) How can I do this?
Basically they're storing a JSON object in the class name. One could extract the data with JSON.parse(...), but you shouldn't. Use the HTML5 data-xxx attributes instead.
Is it okay to use an anchor tag without including the href attribute, and instead using a JavaScript click event handler? So I would omit the href completely, not even have it empty (href="").
In HTML5, using an a element without an href attribute is valid. It is considered to be a "placeholder hyperlink."
Example:
<a>previous</a>
Look for "placeholder hyperlink" on the w3c anchor tag reference page: https://www.w3.org/TR/2016/REC-html51-20161101/textlevel-semantics.html#the-a-element.
And it is also mentioned on the wiki here:
https://www.w3.org/wiki/Elements/a
A placeholder link is for cases where you want to use an anchor element, but not have it navigate anywhere. This comes in handy for marking up the current page in a navigation menu or breadcrumb trail. (The old approach would have been to either use a span tag or an anchor tag with a class named "active" or "current" to style it and JavaScript to cancel navigation.)
A placeholder link is also useful in cases where you want to dynamically set the destination of the link via JavaScript at runtime. You simply set the value of the href attribute, and the anchor tag becomes clickable.
See also:
https://stackoverflow.com/a/10510353/19112
http://www.html5in24hours.com/2012/06/8-ways-to-get-started-with-html5-today/
http://webdesign.about.com/od/html5tutorials/qt/html5-placeholder-links.htm
My advice is use
If you're using JQuery remember to also use:
.click(function(event){
event.preventDefault();
// Click code here...
});
If you have to use href for backwards compability, you can also use
link
instead of # ,if you don't want to use the attribute
Short answer: No.
Long answer:
First, without an href attribute, it will not be a link. If it isn't a link then it wont be keyboard (or breath switch, or various other not pointer based input device) accessible (unless you use HTML 5 features of tabindex which are not universally supported). It is very rare that it is appropriate for a control to not have keyboard access.
Second. You should have an alternative for when the JavaScript does not run (because it was slow to load from the server, an Internet connection was dropped (e.g. mobile signal on a moving train), JS is turned off, etc, etc).
Make use of progressive enhancement by unobtrusive JS.
The tag is fine to use without an href attribute. Contrary to many of the answers here, there are actually standard reasons for creating an anchor when there is no href. Semantically, "a" means an anchor or a link. If you use it for anything following that meaning, then you are fine.
One standard use of the a tag without an href is to create named links. This allows you to use an anchor with name=blah and later on you can create an anchor with href=#blah to link to the named section of the current page. However, this has been deprecated because you can also use IDs in the same manner. As an example, you could use a header tag with id=header and later you could have an anchor pointing to href=#header.
My point, however, is not to suggest using the name property. Only to provide one use case where you don't need an href, and therefore reasoning why it is not required.
From an accessibility perspective <a> without a href is not tab-able, all links should be tab-able so add a tabindex='0" if you don't have a href.
The <a> tag without the "href" can be handy when using multi-level menus and you need to expand the next level but don't want that menu label to be an active link. I have never had any issues using it that way.
In some browsers you will face problems if you are not giving an href attribute. I suggest you to write your code something like this:
Link
you can replace yourcode() with your own function or logic,but do remember to add return false; statement at the end.
Just add bellows code in your working component on top to remove this warning, that's it.
/* eslint-disable jsx-a11y/anchor-is-valid */