Empty string vs '#' in href=""

Question

In the Bootstrap CSS examples, all of the placeholder links have href="#".

I understand that href="#" provides a preventDefault()-like behavior, but without JS. Is there any other reason to use href="#"?

And if you're href="#" in this manner, isn't it more "correct" to use a <button> instead?

Personally i would avoid `#` at all, it will cause a jump to the top of the page. Use `javascript:void(0)` It will work with and without javascript since it will do nothing in either cases — Marco Acierno, Jun 04 '14 at 15:23
I recommend avoiding `href="#"` because browsers will scroll to the top if the default behavior isn't prevented, `href="javascript:;"` doesn't have that issue. — Matthew, Jun 04 '14 at 15:23
Your assumption that `href="#"` "provides a `preventDefault()`-like behavior" is incorrect. To avoid having the browser jump to the top of the document, you would still need to call `preventDefault()` on the event. — André Dion, Jun 04 '14 at 15:24
Thanks for the comments and pointing out the dupe! I was looking but couldn't find. I will vote to close too. — Dmitry Minkovsky, Jun 04 '14 at 15:26
http://www.w3.org/TR/2012/WD-html5-20121025/links.html#attr-hyperlink-href If it exists it have to be a valid URL — miguel-svq, Jun 04 '14 at 15:27
Miguel is correct - if you actually just want it to prevent default, and still feel like you need to include the href for some reason, the most correct implementation is `An empty link!` -- or take out the onclick and handle the event in separate js. Best general approach is, as in my answer below, to simply not specify an href, as that's now valid, and I don't believe that older browsers your users may have will have trouble with it (in spite of a missing href being invalid in html4) — Josh from Qaribou, Jun 04 '14 at 16:42
If you want an empty `href`, that is a sure sign that you do not want to use an `` element. Why would you use it when that is not what you need? Because it is blue and has an underline? Do you use `
` because it gives you big bold text? Wrong. Use an element that is appropriate for your situation (maybe a ` — kapa, Jun 05 '14 at 16:28
Right, @kapa that was the point of my question: since `` should be ` — Dmitry Minkovsky, Jun 05 '14 at 17:08
@dimadima Nobody is perfect. I see this mistake all the time, I think most sitebuilders simply never stopped to think that they should not use an `` if they don't need a link. This topic about the empty `href` is discussed from time to time, and one solution is worse than the other. — kapa, Jun 05 '14 at 23:13

score 1 · Answer 1 · answered Jun 04 '14 at 15:25

I recommend MDN as a better resource for understanding HTML standards than the bootstrap examples. Bootstrap is often quite focused on mixing style into your HTML itself, and often shortcuts around the 'proper' way of doing things. That said, it's generally quite pretty and does a lot of things fast, and like anything in programming you can write good or bad code using it.

The 'href' attribute was a required attribute in previous HTML specs, so you would always need it. href="#" was a quick and dirty way of essentially omitting it. It's no longer required in the html5 spec, and without an href is specifically used to create placeholder links, as described here: https://developer.mozilla.org/en/docs/Web/HTML/Element/a

"without an href is specifically used to create placeholder links" It would actually be a hyperlink **target**. — André Dion, Jun 04 '14 at 15:27

score 0 · Answer 2 · edited May 17 '19 at 21:37

0

I like more w3c for those things, spite of MDN, (for standards I mean).

https://www.w3.org/TR/2012/WD-html5-20121025/links.html#attr-hyperlink-href

If it exists, it has to be a valid URL – But it is not a required attribute.

edited May 17 '19 at 21:37

Marc.2377

7,807
7
51
95

answered Jun 04 '14 at 15:29

miguel-svq

2,136
9
11

An empty string is a valid URL according to the specs; see the other question this one's a duplicate of. – Marc.2377 May 17 '19 at 21:41

Empty string vs '#' in href=""

` because it gives you big bold text? Wrong. Use an element that is appropriate for your situation (maybe a `` styled with CSS).

2 Answers2

` because it gives you big bold text? Wrong. Use an element that is appropriate for your situation (maybe a `