the_category() function in WordPress generates some invalid markup by creating an anchor tag with a rel attribute that looks like "category tag" (see the markup for the "Uncategorized" link here).
It seems the problem is category is not a valid value, and also it should be one word.
Most people are deleting it completely, but I was looking at the list of valid values and was wondering if any of them would be appropriate for a link to category page (such as this one)?
In particular tag, section, and subsection caught my eye, but their intended uses are not clear to me.
category and tag are valid values. Some validators are not up to date.
tag is defined in the HTML5 spec.
category is listed at http://microformats.org/wiki/existing-rel-values#HTML5_link_type_extensions, which is the normative registry for link type extensions.
If both link types apply, it's correct to separate them with whitespace.
Note: don't use these link types on any link to the category/tag page; only use it where the linking page is categorized/tagged with the corresponding category/tag. So a page listing all categories shouldn't use the rel value "category" for the links.
I was wondering: if I put in my page a link tag like so:
<link href="/path/to/template.mustache" rel="template" />
thus using an invalid rel attribute for a link tag element, could this come around and byte me in the ass later (like SEO problems, rendering issues in IE, etc) or it will create no more than just some invalid HTML ?
Also, considering that this is a link to a mustache template that will render a small part of the page, will it be more appropriate to use rel='subsection' ? I can't find more details about this rel attribute other than what is mentioned on w3schools.
No downsides if you do not use rel="nofollow" or some other specific rel, like "canonical" or "me". The reference for the rel attribute is in the XFN : http://gmpg.org/xfn/
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.
I used rel values in jQuery for the parametrized (#!hashbang) AJAX calls.
<a id='_qualifier' rel='telephony' href='contact.php'>contact</a>
and with jQuery:
var hashbang = "#!"+$("#_qualifier").attr('rel'); //gives desired result=>"#!telephony"
But, when I validated the page on validator.w3.org, it gave me error:
Bad value #telephony for attribute rel on element a: Keyword #telephony is not registered.
I searched around and according to the HTML5 specs here and here, the rel attribute should have the registered/pre-defined values.
Is there a work around to use custom values for rel in HTML5, without failing the validation?
Is it also invalid for HTML4 doctypes?
You can use custom attributes:
...
It is HTML5 compliant, but not HTML4 or xHTML.
You'll access the attribute just like you did with jQuery.
You can find more informations on the HTML5 reference.
Is there a work around to use custom values for rel in HTML5, without failing the validation?
The microformats page is a Wiki. If you are satisfied that you are using rel correctly and that there is no other appropriate rel value already registered, you can add you own value as a Proposed value. Instructions for doing so can be found here: http://dev.w3.org/html5/spec/links.html#other-link-types
According to the HTML5 spec, this will make your rel value valid. Of course, it may take some time before automated validators catch up with this, but that's just a technical matter.
Is it also invalid for HTML4 doctypes?
No, it isn't.
You can use any other attribute of 'a' tag for eg. 'title'
One of our web developers uses the following html as a placeholder for styling a drop down list.
Is this considered anchor tag valid?
Since there is no href value, it shows up as broken on some of our link checker reports.
It is valid.
However, standard practice is to use href="#" or sometimes href="javascript:;".
As others have said, it is valid.
There are some downsides to each approach though:
href="#" adds an extra entry to the browser history (which is annoying when e.g. back-buttoning).
href="" reloads the page
href="javascript:;" does not seem to have any problems (other than looking messy and meaningless) - anyone know of any?
While it may be completely valid HTML to not include an href, especially with an onclick handler, there are some things to consider: it will not be keyboard-focusable without having a tabindex value set. Furthermore, this will be inaccessible to screenreader software using Internet Explorer, as IE will report through the accessibility interfaces that any anchor element without an href attribute as not-focusable, regardless of whether the tabindex has been set.
So while the following may be completely valid:
<a class="arrow">Link content</a>
It's far better to explicitly add a null-effect href attribute
Link content
For full support of all users, if you're using the class with CSS to render an image, you should also include some text content, such as the title attribute to provide a textual description of what's going on.
Link content
Although this question is already answered (tl;dr: yes, an empty href value is valid), none of the existing answers references the relevant specifications.
An empty string can’t be a URI. However, the href attribute doesn’t only take URIs as value, but also URI references. An empty string may be a URI reference.
HTML 4.01
HTML 4.01 uses RFC 2396, where it says in section 4.2. Same-document References (bold emphasis mine):
A URI reference that does not contain a URI is a reference to the current document. In other words, an empty URI reference within a document is interpreted as a reference to the start of that document, and a reference containing only a fragment identifier is a reference to the identified fragment of that document.
RFC 2396 is obsoleted by RFC 3986 (which is currently IETF’s URI standard), which essentially says the same.
HTML5
HTML5 uses (valid URL potentially surrounded by spaces → valid URL) W3C’s URL spec, which has been discontinued. WHATWG’s URL Standard should be used instead (see the last section).
HTML 5.1
HTML 5.1 uses (valid URL potentially surrounded by spaces → valid URL) WHATWG’s URL Standard (see the next section).
WHATWG HTML
WHATWG’s HTML uses (valid URL potentially surrounded by spaces) the definition of valid URL string from WHATWG’s URL Standard, where it says that it can be a relative-URL-with-fragment string, which must at least be a relative-URL string, which can be a path-relative-scheme-less-URL string, which is a path-relative-URL string that doesn’t start with a scheme string followed by :, and its definition says (bold emphasis mine):
A path-relative-URL string must be zero or more URL-path-segment strings, separated from each other by U+002F (/), and not start with U+002F (/).
The current HTML5 draft also allows ommitting the href attribute completely.
If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant.
To answer your question: Yes it's valid.
Indeed, you can leave it empty (W3 validator doesn't complain).
Taking the idea one step further: leave out the ="". The advantage of this is that the link isn't treated as an anchor to the current page.
<a href>sth</a>
Whilst W3's validator may not complain about an empty href attribute, the current HTML5 Working Draft specifies:
The href attribute on a and area elements must have a value that is a valid URL potentially surrounded by spaces.
A valid URL is a URL which complies with the URL Standard. Now the URL Standard is a bit confusing to get your head around, however nowhere does it state that a URL can be an empty string.
...which means that an empty string is not a valid URL.
The HTML5 Working Draft goes on, however, to state:
Note: The href attribute on a and area elements is not required; when those elements do not have href attributes they do not create hyperlinks.
This means we can simply omit the href attribute altogether:
<a class="arrow"></a>
If your intention is that these href-less a elements should still require keyboard interraction, you'll have to go down the normal route of assigning a role and tabindex alongside your usual click/keydown handlers:
<a class="arrow" role="button" tab-index="0"></a>
A word of caution:
In my experience, omitting the href attribute causes problems for accessibility as the keyboard navigation will ignore it and never give it focus like it will when href is present. Manually including your element in the tabindex is a way around that.
it's valid but
like UpTheCreek said
'There are some downsides to each approach'
if you're calling ajax through an tag
leave the href="" like this will keep the page reloading
and the ajax code will never be called ...
just got this thought would be good to share
Try to do <a href="#" class="arrow"> instead. (Note the sharp # character).