XHTML 1 specification says:
С.3. Element Minimization and Empty Element Content
Given an empty instance of an element whose content model is not EMPTY
(for example, an empty title or paragraph) do not use the minimized form (e.g. use <p> </p>
and not <p />
).
XHTML DTD specifies script elements as:
<!-- script statements, which may include CDATA sections -->
<!ELEMENT script (#PCDATA)>
I use javascript:void(0)
.
Three reasons. Encouraging the use of #
amongst a team of developers inevitably leads to some using the return value of the function called like this:
function doSomething() {
//Some code
return false;
}
But then they forget to use return doSomething()
in the onclick and just use doSomething()
.
A second reason for avoiding #
is that the final return false;
will not execute if the called function throws an error. Hence the developers have to also remember to handle any error appropriately in the called function.
A third reason is that there are cases where the onclick
event property is assigned dynamically. I prefer to be able to call a function or assign it dynamically without having to code the function specifically for one method of attachment or another. Hence my onclick
(or on anything) in HTML markup look like this:
onclick="someFunc.call(this)"
OR
onclick="someFunc.apply(this, arguments)"
Using javascript:void(0)
avoids all of the above headaches, and I haven't found any examples of a downside.
So if you're a lone developer then you can clearly make your own choice, but if you work as a team you have to either state:
Use href="#"
, make sure onclick
always contains return false;
at the end, that any called function does not throw an error and if you attach a function dynamically to the onclick
property make sure that as well as not throwing an error it returns false
.
OR
Use href="javascript:void(0)"
The second is clearly much easier to communicate.
Best Answer
About hyperlinks:
The main use of anchor tags -
<a></a>
- is as hyperlinks. That basically means that they take you somewhere. Hyperlinks require thehref
property, because it specifies a location.Hash:
A hash -
#
within a hyperlink specifies an html element id to which the window should be scrolled.href="#some-id"
would scroll to an element on the current page such as<div id="some-id">
.href="//site.com/#some-id"
would go tosite.com
and scroll to the id on that page.Scroll to Top:
href="#"
doesn't specify an id name, but does have a corresponding location - the top of the page. Clicking an anchor withhref="#"
will move the scroll position to the top.See this demo.
This is the expected behavior according to the w3 documentation.
Hyperlink placeholders:
An example where a hyperlink placeholder makes sense is within template previews. On single page demos for templates, I have often seen
<a href="#">
so that the anchor tag is a hyperlink, but doesn't go anywhere. Why not leave thehref
property blank? A blankhref
property is actually a hyperlink to the current page. In other words, it will cause a page refresh. As I discussed,href="#"
is also a hyperlink, and causes scrolling. Therefore, the best solution for hyperlink placeholders is actuallyhref="#!"
The idea here is that there hopefully isn't an element on the page withid="!"
(who does that!?) and the hyperlink therefore refers to nothing - so nothing happens.About anchor tags:
Another question that you may be wondering is, "Why not just leave the href property off?". A common response I've heard is that the
href
property is required, so it "should" be present on anchors. This is FALSE! Thehref
property is required only for an anchor to actually be a hyperlink! Read this from w3. So, why not just leave it off for placeholders? Browsers render default styles for elements and will change the default style of an anchor tag that doesn't have the href property. Instead, it will be considered like regular text. It even changes the browser's behavior regarding the element. The status bar (bottom of the screen) will not be displayed when hovering on an anchor without the href property. It is best to use a placeholder href value on an anchor to ensure it is treated as a hyperlink.See this demo demonstrating style and behavior differences.