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/
Related
Trying to determine the correct syntax for using Microdata inside my breadcumbs implementation. Everything I have read seems to lean towards the fact that the breadcrumbs are structured inside an ordered or unorderd list. Mine is not.
<body itemscope="" itemtype="http://schema.org/WebPage">
...
<div class="breadcrumbs" itemprop="breadcrumb">
Home
<span class="delimiter"> > </span>
Parent Item
<span class="delimiter"> > </span>
<span>Child</span>
</div>
...
</body>
If I run it inside Google's tool it seems correct, but compared to their example it is missing a lot of elements and doesn't have the structure of their example BreadcrumbList.
I'm also a little confused about the correct properties for the links. Should they all have title and url properties?
I was looking at the examples at the bottom of the page here: http://schema.org/WebPage
The breadcrumb property expects one of two values:
Text
BreadcrumbList
If you provide a Text value (like you do in the example), you can’t provide data about each link. If you are fine with that, the Microdata in your example is correct (but it also contains RDFa, which doesn’t seem to make sense, at least not without further context; so if you didn’t add them intentionally, you might want to remove the property attributes).
If you want to provide data about each link, you have to provide a BreadcrumbList value.
For the Microdata, it doesn’t matter whether or not you use a list. If the example uses ol→li→a→span, you could as well use something like div→span→a→span. You just have to make sure to use the correct element type.
If you can’t add parent elements to the a elements, it’s still possible to use BreadcrumbList. But then you would have to duplicate the URL with a link element inside the a element.
Is it possible to make an <a href> link to the same page when your destination doesn't have an ID?
Jump to Topic 1
...
<!--destination is below-->
<h1 class="tab-title" data-editor-style="title" style="color:#444444">Topic 1</h1>
Sadly, the answer is no. You need an ID or at least a name, like CBroe mentioned in a comment of your question.
However, I found this here:
Today, all browsers recognize top as being the top of the page. If you
want the visitor to go to the very top of the page, the ID tag can be
left out and the A HREF link will still work.
A URL fragment identifier can only target an element with a matching ID, or a corresponding named anchor. You cannot link to arbitrary elements without IDs. (There was a proposal that would have allowed the use of CSS selectors as fragment identifiers, in which I was personally involved, but it never took off.)
The best you can do is to use JavaScript to select the element you want and give it an ID that is reserved for your hyperlink. If the elements matching this selector will change then you will additionally have to listen for such changes and handle them accordingly, but that's probably beyond the scope of this question.
I want to create a hyperlink to a part in a long html page.
The page: https://www.gnu.org/software/bash/manual/html_node/Shell-Parameter-Expansion.html
I want to create a link to the part where this gets explained: ${parameter/pattern/string}.
While it is possible to link to a specific part of a page, you need to have an identifier to link to.
There is no way to design a link that points to an arbitrary position on a third-party page.
Unfortunately, it's not possible to create links to arbitrary parts of a web page.
Fragments ("anchors") that are intended to be linked to can be designated by assigning id attribute to their tags. That elements can be referenced using fragment part of URI, i.e. the part after #.
<p id="first">First paragraph</p>
<p id="second">Second paragraph</p>
<p>Third paragraph</p>
First two paragraphs can be linked to using http://somewhere/.../#first and http://somewhere/.../#second URIs, whereas it's not possible to target third paragraph, as it does not have id attribute.
I always thought the standard way to specify a fragment identifier is by <a name="foo"></a>.
go to foo
<a name="foo"></a> <!-- obsolete method, it seems -->
<p>some content under that anchor with name</p>
But it seems like this is the old way, and the new way is using an id, like this:
go to bar
<p id="bar">some content under that p with id</p>
In fact, the W3C validator says that name is obsolete for the <a> element. So are there 2 ways to jump to the fragment identifier but 1 of them is obsolete? (And when did that happen?)
(there are other questions about the difference between id and name, but this one is about fragment identifier)
So are there 2 ways to jump to the fragment identifier but 1 of them is obsolete?
There are two ways to identify a fragment.
(There are also two ways to jump to one, since you can do it with a URL or write a pile of JavaScript to scroll the page).
And when did that happen?
id was introduced in 1996 when HTML 4 came out. It effectively obsoleted the name attribute for anchors.
name was made officially obsolete in HTML 5 in 2014 (or in Living HTML on some date that I'm not going to try to figure out).
Yes there are two ways to jump to a fragment identifier and both aren't obsolete ( except a element).
That's rules applied to all HTML 5 elements other than a (because in a hasn't name attribute in HTML5).
So shortly it's obsolete to idenfity name attribute as fragment idenitifier for a element as that's attribute depricated since HTML4.
Flow of accessing fragment from HTML5 Specification:
If there is an element in the DOM that has
an ID exactly equal to fragid, then the first such element in tree
order is the indicated part of the document; stop the algorithm here.
If there is an a element in the DOM that has a name attribute whose
value is exactly equal to fragid, then the first such element in tree
order is the indicated part of the document; stop the algorithm here.
Otherwise, there is no indicated part of the document.
Both ways of doing fragment identifiers work.
Using id="fragment" is the newer, recommended way of jumping to fragments in HTML. It was introduced with HTML4, and works basically everywhere (I just verified this with IE5).
<a name="fragment">, the older way, still works, but is obsolete since HTML5.
Answer to your question: Yes, There are two ways to identify a fragment and one is obsolete.
What is Fragment Identifiers ?
Fragment identifiers for text/plain.
URIs refer to a location in the same resource. This kind of URI starts with "#" followed by an anchor identifier (called the fragment identifier).
Fragment Identifier using JS like below.
location.replace('#middle');
More information on the name attribute.
Basically, the name attribute has been deprecated (obsolete in HTML5-speak) for just about everything except for form elements. Forms retain them as the method of identifying data, and it is the name plus the value property which is sent back to the server. (The id in form elements is used for attaching label elements, and has nothing to do with the actual data).
There is a fundamental weakness in the name attribute, which the id attribute addresses: the name attribute is not required to be unique. This is OK for forms where you can have multiple elements with the same name, but unsuitable for the rest of the document where you are trying to uniquely identify an element.
The id attribute was specifically required to be unique, which makes it better for identifying a link target, among other things. CSS is pretty relaxed about applying styles to multiple elements with the same id, but JavaScript is more strict about this requirement. And, of course, you can’t have a practical link target if you can’t guarantee uniqueness.
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>