I have inspected some sites and they have a pound(#) sign in the url. What does it do?
<a href="#" >Link name</a>
It's a "fragment" or "named anchor". You can you use to link to part of a document. Typically when you link to a page, the browser opens it up at the top of the page. But you link to a section half-way down, you can use the fragment to link to that heading (or whatever).
If there is no <a name="whatever"/> tag within the page, then the browser will just link to the top of the page. If the fragment is empty, then it will also just link to the top of the page.
For a fragment only Link name, then that's just a link to the top of the current page.
You often see that kind of link used in conjuction with javascript. Standards compliant HTML requires a href attribute, but if you're planning to handle the request with javascript then "#" serves as a reasonable place holder.
... just to add a few extra useful tips.
You can access and change it with document.location.hash in JavaScript.
It can point to a named anchor (e.g. <a name="top"></a>) or to an element with a corresponding id (e.g. <div id="top"></div>).
Seeing one on its own (e.g. popup) generally means a link is being used to run JavaScript exclusively. This is bad practice.
Any a element should have a href that points to a valid resource. If one does not exist, consider using another element, such as button.
The pound sign (#) indicates to locate an anchor on the page. For example, if you include this somewhere on the page:
<a name="foo"></a>
or, more recently:
<div id="foo">*part of page*</div>
and then you click on a link on the page that has the href #foo, it will navigate to the anchor with the name or div with the id foo.
However, if you just have the href #, it will lead to the top of the page.
# indicates a link to an anchor.
I thougt I'd also mention something else:
Using '#' as the href for a link that activates JavaScript is bad because it scrolls the page to the top - which is probably not what you want. Instead, use javascript:void(0).
This links back to the page itself. It's often used with links which actually run some JavaScript.
I think most of the posters here forgot how to use Internal Links.
A typical <a> element uses an href attribute to link to an external URL/URI (website). But most new developers do not realize you can also link to internal sections of your web page by using a "#" and an identifier instead. The easiest way to do this cross-browser, is using the following HTML:
This page link...
Go to Section 1
...goes to this page location.
<a id="section1" name="section1"></a>
The "#section1" href value is called a "fragment identifier" and will appear in your browser's url when you click the link. Your page will then look for this identifier in your HTML page and automatically scroll down the page to it.
Notice I have used the anchor <a> tag as my receiver to the link. Traditionally this is how most web pages used to use these types of page links. Using anchors you avoid having to rename existing elements. It is also semantically correct and a better way to manage these types of bookmarks. But....it's ok practice to use a <div> or other HTML element with an id and name matching attribute assigned as the bookmark for the fragment identifier.
I like to use both id and name attributes with the fragment identifier, as HTML5 often does not support the name attribute on some elements, while id may not be recognized for the page marker identifier in older browsers.
This shortened, nameless version below is often used by developers as a default URL "stub" for an unknown URL added later to an anchor, to trigger a page refresh, or enable a link but let a Javascipt method capture the click event and route off somewhere else. This makes the "#" a nice fallback should the Javascript piece fail. It then becomes a nice Javascript-free refresh link. The "#" can also be a useful URL "filler for the "href" value when a missing or blank URL on an element might otherwise trigger some problem or style:
Go to the Top
The specific question was "I have inspected some sites and they have a pound(#) sign in the url. What does it do?"
An example is then given:
<a href="#" >Link name</a>
A consistent valid answer is given for jumplinks (whatever you want to call them) however the CSS :target psuedoselector would absolutely makes use of the hash in a URL as well.
It doesn't change the answers. However gives another use case I thought would be valuable, to not belabor, see the below excellent link which explains:
However, https://css-tricks.com/on-target/
Related
I know how to link to an anchor tag in my own code, and I also know how to link to another server's URL. However, If I want to create a (hyper)link in, say, a Word document, that will not only bring the user to a designated URL but will also scroll to a specific place on that HTML page specifically if I am NOT the developer of the page?
It doesn't look like this is possible, but I thought I'd ask.
Thanks.
If I get your question correctly you can. To link to a specific section of a page, that has to be given a name with the <a name="hello"></a> and to link to that, lets have a dummy url to the page as: http://example.com/page. Now to link to that part specifically, just add #hello to the url, to give http://example.com/page#hello.
It's possible, provided there is somewhere in the page that you can anchor to. This would be the value of an element's name or id.
For more information, use the following link. Please note, I've included an anchor to the answers section in the URL.
How to use HTML # anchor in a dynamic url
https://stackoverflow.com/questions/12096614/how-to-use-html-anchor-in-a-dynamic-url#answers
The default way to jump to somewhere in a HTML page is use the a href/a name tags. However, if I want to refer to an external website, somewhere in the middle and that external page does not use the a name tag, is there an alternative way? Like jumping to the first occurrence of some text?
Not possible unless the external website has any custom support for it and they don't have name or id in the desired location.
You really don't need a:
<a name="named-anchor"></a>
Find the nearby element with an id attribute. For eg., consider this:
https://www.digitalocean.com/community/tutorials/how-to-set-up-an-openvpn-server-on-ubuntu-14-04
The site has:
<h2 id="prerequisites">Prerequisites</h2>
So you can go to that place, by adding # and the id value:
https://www.digitalocean.com/community/tutorials/how-to-set-up-an-openvpn-server-on-ubuntu-14-04#prerequisites
If that's not there, then it is not possible.
It's only possible if you find element with ID at the place of where to jump, than simply apply #id-of-element to link.
E.g. We have this HTML attributes list and want to link to lang attribute.
Inspect element and we find <dt id="attr-lang"> than link would be https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-lang
If one of the elements on the site which your are trying to link to has an id attached to it.
You can force the load of the page onto that specific element by adding a hashtag at the end of the url of the website, and the name of the id for that specific element.
For example:
Click me!
Try clicking this clicking this link just here:
Link to a part inside an external HTML page
You will notice that it brings you to the footer section of this StackOverflow post.
However, other than that there are no other possible ways of achieving this (at least as far as Google knows)
I know that # character within links of hyperlink tag href is used to scroll the pointed page to the specified element-id once opened:
href="//site.com/#some-id"
when used solely, means to just scroll up to the top of the current page:
href="#"
but what about when it is attached to the beginning of a link?
href="#/phones/phoneid
will it scroll the pointed page to its top once opened?
The # in a URI is used to indicate an in-page anchor on a given page.
I know that # character within links of hyperlink tag href is used to
scroll the pointed page to the specified element-id once opened:
href="//site.com/#some-id"
It's not so much that it "opens" the page and then "scrolls" to the anchor. It opens the page at the anchor - the anchor is part of the address.
when used solely, means to just scroll up to the top of the current
page:
href="#"
Yes. Kind of. But that's because you haven't stated the name of the anchor and the browser can't find it - so the browser doesn't take you to anywhere below the top of the page.
but what about when it is attached to the beginning of a link?
href="#/phones/phoneid/"
will it scroll the pointed page to its top once opened?
Well, there's no need, is there?
href="/phones/phoneid/"
will already take you to the top of the /phones/phoneid/ page.
In short, a hash-fragment is part of a web address.
The hash-fragment consists of two parts:
The hash (#)
The name of the anchor
Clicking on a URI containing a hash-fragment opens the indicated page at the indicated anchor.
Clicking on a URI which does not contain a hash-fragment opens the indicated page at the top.
If a URI contains a hash-fragment which has an invalid name (or which isn't named at all), the browser won't be able to find the anchor and will default to opening the indicated page at the top.
No it won't. You have to add the # to the end of the URL to let it scroll to the top, for example:
Text
It will search for an ID in your DOM. If there isn't an ID like this, nothing happens.
But try it yourself because this is only a speculation.
The url system currently works like this:
protocol://domain.name/resource#anchor Link
(syntax simplified for this example)
Adding another resource path after an anchor link makes no sense because the anchor link is assigned to the resource you seek, it cannot be part of the resource path.
Solution: add the # at the end of your link to make it scroll to the top.
I have hash(#) links in my own website, and I realised that when I click on them, a hash sign will always appear at the end of my url. But in other web pages that I was fiddling around with, no matter how many times I clicked the link which had a source of '#', it would never add a hash to the end of my URL. Why is this?
They probably have javascript attached to the link that prevents the link action from starting.
A simple
return false;
will do this
It's normal behaviour of anchor links. If you click link with href like something#anchor, you are redirected to url something (if you aren't already on it) and #anchor appended to url. This anchor refers to some part of page. Single "#" sign is simply the empty anchor.
To avoid this sign appearing in url, you should remove href attribute entirely (but sometimes after this action you need to fix stylesheet because appearance of links depends on href attribute presence). Or, if you are using javascript handlers of click event, you should change them to return false.
I see on some website (like StackOverflow, yahoo, the US Homeland Security department, ...) a word associated to a link that, when clicked, not only loads a page, but also, displays that page at the exact location where the contain related to the word starts.
How can I obtain that with ASP.NET MVC? (by the way, do I need javascript for that?)
Thanks for helping
Go to the other content
<a name="jumpHere">Some content</a>
Also the URL can have /yourpage.html#jumpHere or with variables, /yourpage.html?var1=foo&var2=bar#jumpHere.
Since we're talking about the hash (#), it's usually used for jumping to a specific part of the page. Because of that, it won't reload the whole page. This is useful for web applications that move from one view to another using only AJAX. To make each view bookmarkable, JavaScript "saves" the state (what view you are on) using location.hash to the URL. The next time you open the URL, JavaScript reads it and loads the correct view. In HTML5 this is superseded by pushState.
1) Find the coordinates of the element on the page
2) window.scrollTo(x,y)
Its called an anchor tag.
Place this in your HTML.
<a name="name"></a>
If you call this URL, it will jump to that place.
html-file.html#name
See: http://www.w3schools.com/tags/tag_a.asp
You can use a named anchor to do this with HTML, without javascript. here is a link explaining this.
It is very simply done with id tag of differnt html elements
for eg :- an div element if it is having "footer" as its id and is placed at the bottom of the page then, http://url-address-to-thatpage.html#footer will load the page and scroll it too the footer. (adding the "#idoftheelement" after the page url)
It is also possible to load and scroll the page with javascript.
You need to create a named anchor within the page. This will have the result you're talking about, almost like creating a "bookmark" within a page. No javascript required.
First, create the anchor using the <a> tag with the name attribute specified (in this case, section1):
<a name="section1"></a>
Then, to link to that anchor from the same page, just use something like this:
Go to Section 1
If you're linking to that anchor from another page (in this case, mypage.html), append #section1 at the end of the url:
Go to Section 1 in MyPage.html
For more information, see here.
Another way to do it is with the "id" attribute if it's not an anchor tag you'd like to bookmark. For example:
<div id="bookmark1">Content...</div>
Then, you can link to it with an anchor tag like this:
Go to content
Or link to that spot on the page by appending a #bookmark1 to
http://yourwebsite.com/page#bookmark1