I see these lines of code in some professional developer's project:
<a href="###">
...
</a>
What is the use of three # instead of one?
That's usually written when you want your anchor tag to not change the href. For instance if you want to attach an event on it later on.
It doesn't matter how many # you are using. The href='#' will make the page jump to the top of the page if clicked.
My preferred way is doing <a href="javascript:void(0);". That way the click does absolutely nothing, instead of jumping the page up.
The first thing about "anchor tags"...
This use of ### in particular is to create a links that don't go anywhere, and to do that the href attribute must have a value. Please read the href W3C spec page for more info about that.
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 with regard to the element. The status bar (bottom of the screen) will not be displayed when hovering an anchor without the href property. It is most optimal, then, to use a placeholder href value on an anchor to ensure it is treated as a hyperlink.
I've often seen <a href="#">, and <a href="##"> , a hashtag - # 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="//example.com/#some_id" would go to example.com and scroll to the id on that page.
href="#" doesn't specify an id name, but does have a corresponding location - the top of the page. Clicking an anchor with href="#" will move the scroll position to the top.
So, when you use <a href="###"> this create a links but it doesn't go anywhere. You can use it from "##","###" and more of hashtag to create a links like a "Hyperlinks" but they take you nowhere.
My Conclusion:
So, what is the use of it?
You use it when you need a hyperlink that doesn't go anywhere. It's just to tell the browsers to change the style to an anchor tag.
Check this JSFiddle demo
As Bhuiyan's answer said, it is a variation on the href="#" trick...
Goal
So, to explain that trick. The trick is to work around the fact that Anchor tags are only rendered as links if they have a target to link to (see this example). The goal is to create a link that looks like a link, but doesn't actually go anywhere.
How it works
The href="#" idiom is taking advantage of the fact that anchors can specify a specific element as a target by using the href="#{other element identifier}]" notation. When you do this the browser will not redirect or reload the page, but instead scroll to that element. So when you specify href="#" you are essentially telling the browser that this is a link, but since there is no valid target element please don't do anything when it is clicked.
Note: It would work just as effectively to say href="#mybogusid" but then you would see #mybogusid appended to the url. Gross.
TL;DR of it all: <a href="###"> is just a way to make the browser render the anchor tag like a link, but not navigate anywhere on click.
I think this is same as Go to link that person just used three "###" instead of one "#". we can use more # if we want.
It was very useful when i had button and js click event. With '#' it scrolled to top every time i pressed the button, but with '###' it stayed in place as needed!
Related
I have a requirement where I have an anchor tag in my HTML page.
<a aria-label="Back Button" class="secondary-button btn-font" title="Back" ngClass="btn-font"
ngClass.xl="btn-font-xl" i18n-title='importantFacts##back-button' id="backButton"
i18n="##importantFacts-back-button" routerLink="/apply-for-benefit/verification">
Back
</a>
My requirement is that JAWS 2022 read it as 'Back Button', but JAWS reads it as 'Back Button link'. I know it's an anchor tag and it is supposed to read it as a link, but is there a way where it can read it as just 'Back Button' ?
I have already tried using element and but it does not fulfil some other requirement. Only an anchor tag does. I have also tried giving 'role' value as 'button' to the anchor tag, but again with this other requirement was not getting fulfilled.
Kindly help.
Sounds like you already tried the correct solution - set the role.
<a role="button">Back</a>
You don't need an aria-label because the contents of your link already has the text to announce, "Back". And even if you wanted to have an aria-label, you should not specify the role in the label itself. That is, don't use aria-label="back button" but instead just use aria-label="back".
As a side note, links and buttons are quite different things. Links should be used for navigation purposes - going to a new page or navigating to a different location on the same page. Buttons should be used for "actions".
From a keyboard perspective, links only allow the enter key to select them whereas buttons allow both enter and space. If you press space on a link, it will scroll the page (the default behavior on most browsers is to scroll the page when you press space).
Also, if a screen reader user hears "link", not only will they assume they are being navigated somewhere but they will also expect the browser's "back" button to take them back to where they were previously. Buttons don't have that behavior.
So you really need to think about whether setting a role="button" on a link is the right thing to do instead of using a real <button>. If you do want to use role="button" on a link, then you'll also need a keyboard event handler to allow the space to work as explained above.
On many websites I see links that have href="#". What does it mean? What is it used for?
About hyperlinks:
The main use of anchor tags - <a></a> - is as hyperlinks. That basically means that they take you somewhere. Hyperlinks require the href 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.example/#some-id" would go to site.example 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 with href="#" 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 the href property blank? A blank href 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 actually href="#!" The idea here is that there hopefully isn't an element on the page with id="!" (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! The href 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.
Putting the "#" symbol as the href for something means that it points not to a different URL, but rather to another id or name tag on the same page. For example:
Click to go to the bottom of the page
blah blah
blah blah
...
<a id="bottomOfPage"></a>
However, if there is no id or name then it goes "no where."
Here's another similar question asked HTML Anchors with 'name' or 'id'?
Unfortunately, the most common use of <a href="#"> is by lazy programmers who want clickable non-hyperlink javascript-coded elements that behave like anchors, but they can't be arsed to add cursor: pointer; or :hover styles to a class for their non-hyperlink elements, and are additionally too lazy to set href to javascript:void(0);.
The problem with this is that one <a href="#" onclick="some_function();"> or another inevitably ends up with a javascript error, and an anchor with an onclick javascript error always ends up following its href. Normally this ends up being an annoying jump to the top of the page, but in the case of sites using <base>, <a href="#"> is handled as <a href="[base href]/#">, resulting in an unexpected navigation. If any logable errors are being generated, you won't see them in the latter case unless you enable persistent logs.
If an anchor element is used as a non-anchor it should have its href set to javascript:void(0); for the sake of graceful degradation.
I just wasted two days debugging a random unexpected page redirect that should have simply refreshed the page, and finally tracked it down to a function raising the click event of an <a href="#">. Replacing the # with javascript:void(0); fixed it.
The first thing I'm doing Monday is purging the project of all instances of <a href="#">.
It's a link that links to nowhere essentially (it just adds "#" onto the URL). It's used for a number of different reasons. For instance, if you're using some sort of JavaScript/jQuery and don't want the actual HTML to link anywhere.
It's also used for page anchors, which is used to redirect to a different part of the page.
Unordered lists are often created with the intent of using them as a menu, but an li list item is text. Because the list li item is text, the mouse pointer will not be an arrow, but an "I cursor". Users are accustomed to seeing a pointing finger for a mouse pointer when something is clickable. Using an anchor tag a inside of the li tag causes the mouse pointer to change to a pointing finger. The pointing finger is a lot better for using the list as a menu.
<ul id="menu">
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
</ul>
If the list is being used for a menu, and doesn't need a link, then a URL doesn't need to be designated. But the problem is that if you leave out the href attribute, text in the <a> tag is seen as text, and therefore the mouse pointer is back to an I-cursor. The I-cursor might make the user think that the menu item is not clickable. Therefore, you still need an href, but you don't need a link to anywhere.
You could use lots of div or p tags for a menu list, but the mouse pointer would be an I-cursor for them also.
You could use lots of buttons stacked on top of each other for a menu list, but the list seems to be preferable. And that's probably why the href="#" that points to nowhere is used in anchor tags inside of list tags.
You can set the pointer style in CSS, so that is another option. The href="#" to nowhere might just be the lazy way to set some styling.
The problem with using href="#" for an empty link is that it will take you to the top of the page which may not be the desired action.
To avoid this, for older browsers or non-HTML5 doctypes, use
Goes Nowhere
As some of the other answers have pointed out, the a element requires an href attribute and the # is used as a placeholder, but it is also a historical artifact.
From Mozilla Developer Network:
href
This was the single required attribute for anchors defining a
hypertext source link, but is no longer required in HTML5. Omitting
this attribute creates a placeholder link. The href attribute
indicates the link target, either a URL or a URL fragment. A URL
fragment is a name preceded by a hash mark (#), which specifies an
internal target location (an ID) within the current document.
Also, per the HTML5 spec:
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, consisting of just the element's contents.
As far as I know it’s usually a placeholder for links that have some JavaScript attached to them. The main point of the link is served by executing the JavaScript code; browsers with JS support then ignore the real link target. If the browser does not support JS, the hash mark essentially turns the link into a no‑op. See also unobtrusive JavaScript.
The href attribute defines the URL of the resource of a link. If the anchor tag does not have href tag then it will not become hyperlink. The href attribute have the following values:
1. Absolute path: move to another site like href="http://www.google.com"
2. Relative path: move to another page within the site like herf ="defaultpage.aspx"
3. Move to an element with a specified id within the page like href="#bottom"
4. href="javascript:void(0)", it does not move anywhere.
5. href="#" , it does not move anywhere but scroll on the top of the current page.
6. href= "" , it will load the current page but some browsers causes forbidden errors.
Note: When we do not need to specified any url inside a anchor tag then use
Test1
I am not a HTML/CSS expert but I am in charge of developing and maintaining a website for my employer.
I have set of link in the middle of my webpage that I want to have a specific CSS applied to without affecting any of the other links, and really the only change I want to make is to move the title popup to the right. Basically, the pointing hand hover mouse icon blocks the text in the title, so I want to move the popup to the right of the pointer, so that it can be read completely during a hover.
I've seen a few different ways to manipulate the title popup but they are either way too complex for what I need, way too simple in that they affect all <a> tags on the page, or do not explain how to do what I want which is just move the popup to the right a little bit.
You can manually style any element of the page by using 'inline styling' which will not effect any of the other elements on the page.
You do this in the HTML rather than the Style sheet, for example say your style sheet has:
.tinybutton {margin:0;padding;0:}
Which would use the element in HTML as:
<a class="tinybutton" href="#"> </a>
Now let's pretend you want to move the button slightly right without editing the CSS you then use the inline styling like so:
<a class="tinybutton" style="margin-left:10px" href="#"> </a>
So in other words just add style=" " with the styling options you require to the element that you want to edit without effecting the CSS.
Now that you have answered your own question, I know that the titles you are trying to move are tool-tips generated by the browser.
Not only can those not be moved, these tooltips are browser dependent and looks different on each browser. I have no idea which one you are using but it is not Chrome because we made sure that the tooltip does not overlap the mouse cursor.
The other possibility, like the jQuery plugin you mentioned, is to write Javascript that renders each title in its own invisible HTML element. Then it makes those tooltips appear on by adding an a :hover style or mouse-event-handler.
Having done further research on this, I found several questions in StackExchange that indicate that a title cannot be modified. So given this:
<a title='stuff here' href='#'>Click me!</a>
it is not possible to manipulate the "stuff here" section using jscript, css, etc. The only option is to use a jQuery plugin or something along those lines, and that has proven to be beyond my ability to troubleshoot.
For the time being, I simply added spaces to the front of the title to push the text out, like this:
<a title=' stuff here' href='#'>Click me!</a>
Probably a silly questions, but I'd like to have a hyperlink withing another hyperlink, much like a
<a href="#somewhere">
This is the hyperlink,
and this is the other one
</a>
Aside from that it's not compliant and all, is there a way of doing this?
*Edit: the outer hyperlink is used by a carousel, and won't take the browser somewhere.
Lets think about this. What is the browser suppose to do?
Go to the first hyperlink, or the second one, or both?
If you want the first one, then the second hyperlink is not required.
If you want the second one, then close the first one before and reopen if necessary after closing the second.
If both then write some Javascript to get it to open a new window. for the second hyperlink before loading the first hyperlink.
Anchor tags, just like inline or block level elements, layer up on top of each other when nested such that attributes can be set for different subsets of information or visual space within them. This may be useful if you have a large anchor element functioning as a large button, but want to insert a link to a different location within that button.
Have you tried implementing it? See this jsFiddle proving that nested inline elements work, both with span and anchor tags. Note that the nested element overrides the clickable area subset within the parent element, just as you'd expect it to if you were listening for a hover event.
Disclaimer: While technically this can be done, that doesn't mean that it should be done. Nesting links in particular can result in user confusion and be misleading about what content is pointing to what locations.
You can't nest it, but you can do something I did below..
<a href="somewhere">
This is the hyperlink,</a>
and this is the other one
May be you solution:
<form action="http://myhomepage.ru/" method="get">
second link within
<button>first link</button>
</form>
On many websites I see links that have href="#". What does it mean? What is it used for?
About hyperlinks:
The main use of anchor tags - <a></a> - is as hyperlinks. That basically means that they take you somewhere. Hyperlinks require the href 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.example/#some-id" would go to site.example 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 with href="#" 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 the href property blank? A blank href 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 actually href="#!" The idea here is that there hopefully isn't an element on the page with id="!" (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! The href 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.
Putting the "#" symbol as the href for something means that it points not to a different URL, but rather to another id or name tag on the same page. For example:
Click to go to the bottom of the page
blah blah
blah blah
...
<a id="bottomOfPage"></a>
However, if there is no id or name then it goes "no where."
Here's another similar question asked HTML Anchors with 'name' or 'id'?
Unfortunately, the most common use of <a href="#"> is by lazy programmers who want clickable non-hyperlink javascript-coded elements that behave like anchors, but they can't be arsed to add cursor: pointer; or :hover styles to a class for their non-hyperlink elements, and are additionally too lazy to set href to javascript:void(0);.
The problem with this is that one <a href="#" onclick="some_function();"> or another inevitably ends up with a javascript error, and an anchor with an onclick javascript error always ends up following its href. Normally this ends up being an annoying jump to the top of the page, but in the case of sites using <base>, <a href="#"> is handled as <a href="[base href]/#">, resulting in an unexpected navigation. If any logable errors are being generated, you won't see them in the latter case unless you enable persistent logs.
If an anchor element is used as a non-anchor it should have its href set to javascript:void(0); for the sake of graceful degradation.
I just wasted two days debugging a random unexpected page redirect that should have simply refreshed the page, and finally tracked it down to a function raising the click event of an <a href="#">. Replacing the # with javascript:void(0); fixed it.
The first thing I'm doing Monday is purging the project of all instances of <a href="#">.
It's a link that links to nowhere essentially (it just adds "#" onto the URL). It's used for a number of different reasons. For instance, if you're using some sort of JavaScript/jQuery and don't want the actual HTML to link anywhere.
It's also used for page anchors, which is used to redirect to a different part of the page.
Unordered lists are often created with the intent of using them as a menu, but an li list item is text. Because the list li item is text, the mouse pointer will not be an arrow, but an "I cursor". Users are accustomed to seeing a pointing finger for a mouse pointer when something is clickable. Using an anchor tag a inside of the li tag causes the mouse pointer to change to a pointing finger. The pointing finger is a lot better for using the list as a menu.
<ul id="menu">
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
</ul>
If the list is being used for a menu, and doesn't need a link, then a URL doesn't need to be designated. But the problem is that if you leave out the href attribute, text in the <a> tag is seen as text, and therefore the mouse pointer is back to an I-cursor. The I-cursor might make the user think that the menu item is not clickable. Therefore, you still need an href, but you don't need a link to anywhere.
You could use lots of div or p tags for a menu list, but the mouse pointer would be an I-cursor for them also.
You could use lots of buttons stacked on top of each other for a menu list, but the list seems to be preferable. And that's probably why the href="#" that points to nowhere is used in anchor tags inside of list tags.
You can set the pointer style in CSS, so that is another option. The href="#" to nowhere might just be the lazy way to set some styling.
The problem with using href="#" for an empty link is that it will take you to the top of the page which may not be the desired action.
To avoid this, for older browsers or non-HTML5 doctypes, use
Goes Nowhere
As some of the other answers have pointed out, the a element requires an href attribute and the # is used as a placeholder, but it is also a historical artifact.
From Mozilla Developer Network:
href
This was the single required attribute for anchors defining a
hypertext source link, but is no longer required in HTML5. Omitting
this attribute creates a placeholder link. The href attribute
indicates the link target, either a URL or a URL fragment. A URL
fragment is a name preceded by a hash mark (#), which specifies an
internal target location (an ID) within the current document.
Also, per the HTML5 spec:
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, consisting of just the element's contents.
As far as I know it’s usually a placeholder for links that have some JavaScript attached to them. The main point of the link is served by executing the JavaScript code; browsers with JS support then ignore the real link target. If the browser does not support JS, the hash mark essentially turns the link into a no‑op. See also unobtrusive JavaScript.
The href attribute defines the URL of the resource of a link. If the anchor tag does not have href tag then it will not become hyperlink. The href attribute have the following values:
1. Absolute path: move to another site like href="http://www.google.com"
2. Relative path: move to another page within the site like herf ="defaultpage.aspx"
3. Move to an element with a specified id within the page like href="#bottom"
4. href="javascript:void(0)", it does not move anywhere.
5. href="#" , it does not move anywhere but scroll on the top of the current page.
6. href= "" , it will load the current page but some browsers causes forbidden errors.
Note: When we do not need to specified any url inside a anchor tag then use
Test1