I am trying to validate a page in which I have implemented Lightbox and W3C thinks rel="lightbox['gallery']" is invalid code. Code is :
<a rel="lightbox[gallery]" href="link-to-image">
...image...
</a>
Error:
Bad value lightbox[gallery] for attribute rel on element a: Keyword lightbox[gallery] is not registered.
Any insight into this is welcomed.
At least for me it's more comfortable to use "target" instead of "rel" or "data-rel" (which is not a standard link attribute anyway), thus still pass w3 HTML5 validation and do not mess with page's CSS setup ("class" is commonly used for layout and such). Of course all "*.getAttribute('rel')" in javascript source has to be updated accordingly.
You're trying to validate HTML5, right?
It's simple enough I'm afraid; whereas HTML4 allows pretty much any content in rel, HTML5 is much stricter and "lightbox[gallery]" isn't a registered rel type.
I've seen a fix which should work: get Lightbox to look for class="lightbox[gallery]" instead of rel="lightbox[gallery]", but so far my inept tweaks haven't worked. I'm trying to contact the Lightbox dev to ask him about this, but his forum is giving 500 errors. Not a good sign. :(
Or a better idea - in my opinion ofc - instead of rel use data-rel. But also you have to modify lightbox a little bit ;-)
With Lightbox2, you should use
<strong><a data-lightbox="lightbox[gallery]" href="link-to-image"></strong>
instead of
<strong><a rel="lightbox[gallery]" href="link-to-image"></strong>
This will validate as HTML5.
Related
The code:
<a ng-repeat="..." href="{{...}}"></a>
I am using a plugin that requires the href attribute, so data-ng-href can't be used :(
Is there an alternative to keeping an AngularJS expression inside a href attribute, and have it validate under the W3C HTML5 validator? Thanks in advance, will mark answer as correct :)
Unless it's an absolute requirement, I wouldn't be too concerned about the standards validity of Angular templates. Strictly speaking, they aren't actually HTML5, but Angular's extension of its functionality. As far as I'm aware Angular is not designed to allow this sort of conformation. I think you'd be best just to leave validation behind.
Another opinion here,
using data-ng-href will still produce an href once the template has been initialized, so perhaps your plugin can run once the template is ready? Here is the relevant code right from the angular docs:
<a id="link-3" ng-href="/{{'123'}}">link 3</a> (link, reload!)<br />
becomes
<a id="link-3" ng-href="/123" href="/123">link 3</a>
on the page.
ref - https://docs.angularjs.org/api/ng/directive/ngHref
I personally really like the fact that one can use angular and still have valid html5-
I'm using mobile template HTML files on a PHPBB forum.
I tested the html for errors at http://validator.w3.org/
The test results showed the following error
Line 24, Column 66: {navlinks.FORUM_NAME}
Bad value up for attribute rel on element a: The string up is not a registered keyword or absolute URL.
Not having heard back from the author and not finding much on Google search, I'm trying to understrand what rel="up" does, if anything constructive.
Can't find any mention as an official HTML attribute
http://www.w3schools.com/tags/att_link_rel.asp
wondering if it's probably safe to just remove the phrase rel="up"
The Internet Assigned Numbers Authority (IANA) keeps a list of link relationships The latest version is from March 21 2013.
up: Refers to a parent document in a hierarchy of documents.
Unfortunately, despite the fact that this registry was long established, it was decided that HTML5 would not use this registry and would use a Wiki page to list the conforming link types instead.
Up, is listed in a rather insane section marked "dropped without prejudice", which nobody seems to know what to do with, or how to get those link types out of.
It's safe to drop it, but some browsers and browser plugins make use of it. For example, I use a Firefox plugin called "Link Widgets" like this to make use of the link type.
From: http://www.w3.org/MarkUp/html3/dochead.html
REL=Up
When the document forms part of a hierarchy, this link references the immediate parent of the current document.
If this is causing any specific problems or unexpected results, please post your code. Thanks.
Any ideas how I can fix this?
Line 58, Column 72: Bad value fancybox2 for attribute rel on
element a: Keyword fancybox2 is not registered.
…er.jpg" class="grid_1" rel="fancybox2"><img src="images/werk/klein/tubeplayer.…
Syntax of link type valid for <a> and <area>:
A whitespace-separated list of link types listed as allowed
on <a> and <area> in the HTML specification or listed as an
allowed on <a> and <area> on the Microformats wiki without duplicate
keywords in the list. You can register link types on the Microformats
wiki yourself.
<a href="images/werk/clipta.jpg" class="grid_1" rel="fancybox2">
<img src="images/werk/klein/clipta.jpg" alt="clipta"/></a>
The error message explains it rather well. You are using an HTML5 doctype, which means that HTML5 rules are applied, and they allow a specific list of rel values but with a wiki-based extension mechanism. This means that the rules for rel values may change at any moment without prior or posterior notice.
What should you do? First, consider why you are using rel="fancybox2". If you have sound reasons to think that some software makes some use of it, in a useful way, keep using it and ignore the error message. If not, remove the attribute.
Theoretically, you could and should register the attribute value if you think it is useful and well-documented. But this is something that should primarily be done by people who have invented the value and defined it and promote it and have some idea of how it supposed to work.
rel can only have one of the values specified in the list you see when you click on this link: w3schools/tags/att_a_rel
What dou you want to do in the first place?
The code you are using appears to abuse the rel attribute to describe something that isn't a relationship between the page and the content at the other end of the link. Change it to use a more appropriate means of storing the information, perhaps a class or a data-... attribute.
When I read the documentation on Common-Tags, I thought it would be easy to put this in a jsp because the examples were cut and paste
<body xmlns:ctag="http://commontag.org/ns#" rel="ctag:tagged">
<span typeof="ctag:Tag"
rel="ctag:means"
resource="http://rdf.freebase.com/ns/en.u2"
property="ctag:label" content="U2"/>
</span>
</body>
It's a good thing that we're using Eclipse in our dev work. It's telling us that something is wrong with our markup. It's underlining the common-tags markup with yellow returning:
Undefined attribute name
What am I missing here? or is this completely okay?
The typeof, resource and property attributes are extensions to XHTML which are part of the RDFa specification which is why Eclipse doesn't know about them.
Since RDFa+XHTML is now a W3C recommendation this is absolutely fine to use as is.
http://www.w3.org/TR/rdfa-syntax/#rdfa-attributes
I assume you're not sending your pages with an XML MIME type, because that snippet isn't well-formed. Using RDFa isn't allowed when using a text/html MIME type. For an alternative, have a look at "microdata".
I've curious how this should be properly done.
I ran a page im working on through the w3 html validateor and I got one error message
Line 47, Column 54: Attribute "target" exists, but can not be used for this element.**
<ul><li>1000 Design PM</li>
You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).
any idea on how i can have a link open a new window but not use the target tag?
You can use JavaScript to open new windows, which avoids the issue of target being invalid in modern HTML.
However, this bypasses various systems people have in place to warn them about new windows (or prevent them from opening) so you are better off using the target attribute (and switching to a Doctype that allows it).
Better still is to leave it to the user to decide when they want a new window. Aside from the annoyance factor, they do introduce accessibility problems.
target="_blank"
Will not validate strict because the 'target' attribute has been deprecated.
Instead, try something similar to the aforementioned onclick workaround, but you don't need the "_blank" in there either. Simply:
1000 Design PM
Will work. The reason for the deprecation of "target" is because HTML is used to semantically mark up data whereas the target attribute was providing behaviour, which is what javascript is for.
If the user has javascript turned off then the URL will simply open in the same window.
The target attribute is not part of the Strict variants of HTML 4 and XHTML 1.0 as well as XHTML 1.1.
So you would need to use a workaround using JavaScript:
1000 Design PM
var aElems = document.getElementsByTagName("a");
for (var i=0, n=aElems.length; i<n; ++i) {
if (/(?:^|\s+)_blank(?:\s+|$)/.test(aElems[i].className)) {
aElems[i].onclick = function() {
return !window.open(this.href, "_blank");
}
}
}
Or (in the future) CSS 3 (see Hyperlink Presentation Module):
a._blank {
target: new;
}
Shouldn't it be...
target="_blank"
Regardless... You could open a new window using javascript, but that breaks the beauty of simple browsing. What if I'm browsing using Lynx or something?
According to W3C, it seems that "target" attribute is not deprecated any more in HTML 5:
The target attribute for the a and area elements is no longer
deprecated, as it is useful in Web applications, e.g. in conjunction
with iframe.
http://www.w3.org/TR/html5-diff/
Using:
target="_blank"
breaks strict XHTML validation methods. Here's a document detailing a workaround:
Instead of target="_blank" (who will never validate) you could use javascript like this:
<a onclick='window.open("./jobops/1000 Design PM.pdf", "_blank");return false;' href="./jobops/1000 Design PM.pdf">1000 Design PM</a>
Then the link will open in a new window, and your page will validate.
The users who doesn't have Javascript enabled (even though that is only about 2% of all users), will still be able to follow the link with this method. The guy's have a good point in the comments :)
Have a nice weekend everyone...