I want to add a #something to an HTML page.
An example of this would be #History on http://en.wikipedia.org/wiki/Stack_Overflow_(website).
How can I do it?
If you inspect the HTML on that page you'll see how it's being done.
The # sign in an anchor tag's href will tell the browser to move to the element that has a matching ID (where ID = everything that comes after the # sign).
For Example:
My Link
<div id="MyLocation">The anchor destination</div>
You can also include it at the end of your URL and it will take the user directly to the destination on page load.
http://en.wikipedia.org/wiki/Stack_Overflow_(website)#History
Use a name or id attribute on an <a>nchor:
<a name="foo"></a>
<h1>Foo</h1>
<a id="bar"></a>
<h1>Bar</h1>
Pointing your link to http://www.example.com/#foo or http://www.example.com/#bar will scroll the browser down to the respective <a>.
The specification of HTML4 lists name first and id second. (Notice the # in the link? You can also look at the sourcecode of the website!)
When the name or id attributes of the A element are set, the element defines an anchor that may be the destination of other links.
According to HTML Anchors with 'name' or 'id'?, in HTML5 it can be id="foo" or name="foo" with id="foo" having precedence.
Related
<a href="#"
onclick="
window.open(
'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href),
'facebook-share-dialog',
'width=626,height=436');
return false;">
Share on Facebook
</a>
Apologies if this is a beginner question. But why is "href" there? What purpose does it serve? I am not getting its purpose.
I am assuming "onclick" a new window will be opened which has all the information in it about the link to be shared and the FB target destination.
Then why is "href" there????
HTML anchors (<a> tags) define clickable links, but only if the href attribute is present. (It is possible to not have the href element, but either a name or id instead; in this case it is not a clickable link, but rather a destination for a link). See the HTML specification for more detail.
The # element on a href attribute indicates a predefined anchor, for instance, http://domain.com/page#section. In this case, when the link is clicked the browser will open the page at http://domain.com/page, and in its HTML the browser expects a section called #section, defined by a <a name="section"> on its code. Upon finding this section, the browser will position the screen at this position.
When the section isn't specified, just the # is provided, it means it's a link pointing to the local page (or more specifically, the top of it). If the page isn't at the top, it jumps to the top. If it is at the top, nothing happens.
You can test it by creatin an HTML file with a text link, it will be clickable, but there will be no effect (the only effect is, if it isn't at the top, it will jump to the top).
The return false; at the end of the JavaScript code is there to prevent the "jump to the top", if you remove it, the browser will position its view at the top of the page upon clicking.
Some will argue that href should always point to actual links and using # placeholders is bad practice.
It specifies where the URL goes to. In this case it's set to # meaning it won't open up a URL but instead will do nothing. It's telling the 'a tag' that this function will DO something.
See it as a default measure.
Hope that helps :)
Tags <a> are not considered as clickable links if they does not contains a href.
Total newbie question, but I cant figure out what im doing wrong. I want a make a link that jumps down the page to a header. I believe these are called fragment links. Here is my code thats not working:
My Link
<div id="cont">
<p>Lots of content here, abbreviated in this example to save space</p>
<h2 id="Frag">Header I want to jump to</h2>
</div>
Pretty sure you need to specify the name attribute for an anchor to work, for example:
Skip to content
<div name="content" id="content"></div>
Okay, so 'pretty sure' was a euphemism for 'guess' and I thought I'd look it up, so, from the HTML 4.01 Specification we get this from section 12.2.3 Anchors with the id attribute:
The id attribute may be used to create an anchor at the start tag of
any element (including the A element). This example illustrates the use of the id attribute to position an anchor in an H2 element. The anchor is linked to via the A element.
You may read more about this in Section Two.
...later in the document
<H2 id="section2">Section Two</H2>
...later in the document
<P>Please refer to Section Two above for more details.`
To carry on the convention of guesswork, perhaps your page isn't long enough to allow jumping to that content (that is, your page might have nowhere to jump and the content to jump to is already visible.)
Other than that, and from the same section of the spec previously linked, here is some general info on when to use what as the anchor identifier (in terms of the link its self) that could be otherwise valuable:
Use id or name? Authors should consider the following issues when
deciding whether to use id or name for an anchor name:
The id attribute can act as more than just an anchor name (e.g., style sheet selector, processing identifier, etc.).
Some older user agents don't support anchors created with the id attribute.
The name attribute allows richer anchor names (with entities).
Your code works fine in firefox anyway you can use as well name instead of id..
http://www.w3schools.com/tags/att_a_name.asp
if you want to have a nice scrolling you can use jquery scroll http://api.jquery.com/scroll/
When jumping to anchors on a JSP, HTML anchors do not work. Eg, something like
Link
...
<div id="name"></div>
fails because the server actually looks for a file named "filename.jps#name" and returns an error. Is there any workaround for this?
What you describe is called a fragment identifier and the target can be a named anchor or an identified element, for example
go to foo
<a name="foo">foo</a>
<div id="foo">foo</div>
with the named anchor variation demonstrated in this demo
Please also note that the HTML5 specification has deprecated the name attribute for a elements has been dropped, so an id would be the only HTML5 valid way to navigate to a fragment identifier.
I think that you've set a <base> tag in your document. All identifier links are also relative to it. If this is true, then you need to change your identifier links from
<a href="#name">
to
<a href="${pageContext.request.requestURI}#name">
See also:
Is it recommended to use the <base> html tag?
what is the meaning of this anchoring tag format
<A href="#some name">
Should be more like
Some Text
If you click on the link, the browser will automatically jump the element with id or name "some name", e.g.
<div id="some name">
Some more text.
</div>
You will also see that the URL changes. The generic format of a URL is (more or less):
<scheme>://<host>/<path>?<query>#<fragment identifier>
The fragment identifier is what you are talking about to and it refers content inside the page. The href attribute above actually contains a URL, a relative one. That means, this URL should be interpreted relatively to the current URL.
If you current URL is
http://www.example.com/some/path
then clicking on the link will lead you to
http://www.example.com/some/path#some%20name
As already said, the fragment identifier refers to a part in the current page, so the browser does not reload the page but just jumps to that part.
In layman's terms:
It is intended to link to a section of a page (specifically, it's usually a div or anchor named 'some name') rather than link to a new page. It can be used to link to a section of a new page other than the start also.
in an href in html, whats the difference between using
<a href="http://www.somesite.com/" name="The Name">
and
<a href="http://www.somesite.com/" title="The Name">
Is there any advantage to using one over the other?
Thanks
Look it up in the spec, or better yet a resource that condenses the spec a bit. (And, then the spec if that isn't enough.)
title text Specifies extra information about an element
http://www.w3schools.com/tags/tag_a.asp
The name attribute specifies the name
of an anchor.
The name attribute is used to create a
bookmark inside a document.
The href or the name attribute must be
present in the tag
http://www.w3schools.com/tags/att_a_name.asp
So, the name of the anchor is used for links like exampledomain.com/index.php#some_section, which would bring that anchor into focus on the page.
Many modern browsers will display the title attribute in a tooltip when hovering over the link. It's likely also useful for screen readers and such.
markup tag Node
- Name -- is to identify the element and for lookup
- title -- is default toolTip property. like ALT