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.
Related
I know that linking in general looks like
examplesite.com
I was wondering how would someone link within the page it self. Sort of like when someone clicks on biography section in Wikipedia and it scrolls down to the part that has the biography but staying on the same page.
Any example could would be great.
I believe that you're referring to URL fragments (a.k.a. named anchors or bookmark links).
You'd create such a link like:
Jump to example
Which would take you to the part of the page where the element with the ID of example exists. Like:
<h1 id="example">example</h1>
In older versions of HTML, the name attribute was first used for this, however the ID has replaced that.
What you posted is actually a link inside a website. It does not contain a protocol such as http:// nor starts with // which would indicate a protocol-relative link, so it would load exampleside.com relative to whatever path you are currently on.
These are the kind of links you can use (each inside href="..."). We assume that you are currently on http://example.net/foo/index.html
https://example.com - goes to the "external" site https://example.com
//example.com - goes to the "external" site xxx://example.com with xxx being the protocol used to load example.net, so in my example http://example.com
www.example.com - goes to http://example.net/foo/www.example.com as it is not an external link
#foo - goes to the element with id="foo" on the current site (does not load anything from the server)
So what you want is probably the last example: ... and then id="foo" on the element you want to jump to.
Add some id to the element you want to link to, e.g
<div id="target">Hello</div>
Then you can link it by using #:
Go to target
Go to target
<hr style="height: 300vh" />
<div id="target">Hello</div>
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.
<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/
I'm trying to create a page where a user clicks on a link on the left and is taking to a specific section on the page.
Here is example. I've added as much of the code I'm using as I can.
What your trying to do works with the Id or Name attribute.
To elaborate: The anchor tag that your rendering as the target of where your page needs to go should be:
<a id="myId"></a>
or
<a name="myId"></a>
or both..
When you build a link to another part of the page, you need two parts, the link (that you click), and the target (that the page scrolls to).
The link's href attribute needs to start with a '#'. This signifies that the link is 'internal' to the page, and not another, external page.
The target can be either a named anchor <a name="something"></a> or an element with an ID: <div id="something">. You don't include the '#' in the name or the ID.
That's the key part you're missing. Take the '#' off the front of your <a name=""> values and it will work.
Let us know if that works, and we can help you develop this further: There's a lot more polish you could add, but let's get the basics working first.