I have been following this tutorial to learn how to use Scrapy. I am using greenbook as my sample site to test out the web scraping. One of the function: SgmlLinkExtractor takes in a parameter which is the href of the "next" page button . The problem is that for greenbook , the href for the "next" page button is a "#" if you inspect the element via firefox
These are my questions
1) What does "#" mean when used in this way : href="#"
2) How do i solve this issue
Thanks
You can use # to point to an ID on the page rather than redirect to a URL.
When you see stuff like "Click here to scroll to the bottom of the page`
The here href will be #bottomOfPage
http://jsfiddle.net/2q3NJ/
The attribute href="#" means the same as href="", i.e. a reference to the start of the current document. It is seldom used with the intention of linking to the start, however. Instead, it is used a placeholder that makes the a element formally a link, and also a link from styling point of view, but in a context where the element is expected to have an onclick event handler or to have its href value overwritten.
Cf. to Is an empty href valid? and Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?
In your case, it sounds like the software you are using generates next page “links” that are not real links but driven by JavaScript and carrying href="#" as a placeholder only. This does not work with other software that expects href attributes to be real. It depends on both pieces of software whether and how you can make them work together.
Related
code:
Start a Process link
I am using wave tool for Web accessibility.
Wave tool gives error:
Redundant link- Adjacent links go to the same URL.
Ref : WCAG 2.4.4 Link Purpose (In Context) (Level A)
I understand due to href="javascript:void(0)" it gives the error "Adjacent links go to the same URL."
But I have to run jQuery function (to check validation & set value before redirect) on click of the <a> tag.
Any suggestion please?
The error points out that there is another link element (anchor <a> with a valid href attribute or another element with role="link") that has the same target. In your case it is very likely as the target (href) is javascript:void(0) and there's probably more than one link like that. So the Wave thinks that those links are the same thus flagging WCAG 2.0 Success Criterion 2.4.4 Link Purpose (In Context).
Solution
Ideally, use <button> (as was mentioned in the comment above) - it will handle all events naturally
If it's not possible:
change the target (it can be replaced with href="#")
remove role="button" - it will overwrite all link behavior otherwise.
remove word "link" in both title and inner text is excessive - the role will be communicated to screen reader users from the markup, no need to add it in labels.
Examples
Start a Process
Or
<button style="">Start a Process</a>
How do I create a link to a part of long webpage on another website that I don't control?
I thought you could use a variant of the #partofpage at the end of my link. Any suggestions?
Just append a # followed by the ID of the <a> tag (or other HTML tag, like a <section>) that you're trying to get to. For example, if you are trying to link to the header in this HTML:
<p>This is some content.</p>
<h2><a id="target">Some Header</a></h2>
<p>This is some more content.</p>
You could use the link Link.
Create a "jump link" using the following format:
http://www.example.com/somepage#anchor
Where anchor is the id of the element you wish to link to on that page. Use browser development tools / view source to find the id of the element you wish to link to.
If the element doesn't have an id and you don't control that site then you can't do it.
That is only possible if that site has declared anchors in the page.
It is done by giving a tag a name or id attribute, so look for any of those close to where you want to link to.
And then the syntax would be
text
In case the target page is on the same domain (i.e. shares the same origin with your page) and you don't mind creation of new tabs (1), you can (ab)use some JavaScript:
see tenth paragraph on another page
Trivia:
var w = window.open('some URL of the same origin');
w.onload = function(){
// do whatever you want with `this.document`, like
this.document.querySelecotor('footer').scrollIntoView()
}
Working example of such 'exploit' you can try right now could be:
javascript:(function(url,sel,w,el){w=window.open(url);w.addEventListener('load',function(){w.setTimeout(function(){el=w.document.querySelector(sel);el.scrollIntoView();el.style.backgroundColor='red'},1000)})})('https://stackoverflow.com/questions/45014240/link-to-a-specific-spot-on-a-page-i-cant-edit','footer')
If you enter this into location bar (mind that Chrome removes javascript: prefix when pasted from clipboard) or make it a href value of any link on this page (using Developer Tools) and click it, you will get another (duplicate) SO question page scrolled to the footer and footer painted red. (Delay added as a workaround for ajax-loaded content pushing footer down after load.)
Notes
Tested in current Chrome and Firefox, generally should work since it is based on defined standard behaviour.
Cannot be illustrated in interactive snippet here at SO, because they are isolated from the page origin-wise.
MDN: Window.open()
(1) window.open(url,'_self') seems to be breaking the load event; basically makes the window.open behave like a normal a href="" click navigation; haven't researched more yet.
The upcoming Chrome "Scroll to text" feature is exactly what you are looking for....
https://github.com/bokand/ScrollToTextFragment
You basically add #targetText= at the end of the URL and the browser will scroll to the target text and highlight it after the page is loaded.
It is in the version of Chrome that is running on my desk, but currently it must be manually enabled. Presumably it will soon be enabled by default in the production Chrome builds and other browsers will follow, so OK to start adding to your links now and it will start working then.
Edit: It's been implemented in Chrome. See https://chromestatus.com/feature/4733392803332096
You can NOW...
As of Chrome release 81 (Feb 2020), there is a new feature called Text Fragments. It allows you to provide a link that opens at the precise text specified (with that text highlighted).
At the moment, it works in Edge, Chrome and Opera but not in Firefox, Safari or Brave. (See note 6 at bottom for more)
For security reasons, the feature requires links to be opened in a noopener context. Therefore, make sure to include rel="noopener" in your anchor markup or add noopener to your Window.open() list of window functionality features.
You create the link to your desired text by appending this string to the end of the URL:
/#:~:text=
and providing the percent-encoded search string thus:
/#:~:text=String%20to%20focus%20on
Here is a working example:
https://newz.icu/#:~:text=Google%20surveillance%20increases
Notes:
Test the above link in Chrome or Opera only
In the above example, note that the text string is in a div that is normally hidden on page load - so in this example it is being displayed despite what would normally happen. Useful.
Recent versions of Chrome also include a new option when you Right-Click on selected text: Copy link to highlight. This will auto-create the direct-to-text link for you (i.e. it automatically appends the /#:~:text= to the text you highlighted) and place it in the clipboard - just paste it where desired.
Suppose you want to highlight an entire block of text? The Text Fragments feature allows specifying a starting%20phrase and an ending%20phrase (separated by a comma), and it will highlight all text in between:
https://newz.icu/#:~:text=Dr.%20Mullis,before%20now
Note the comma between Mullis and before
web.dev article about Text Fragments
CanIUse status of Text Fragments
PS - Please forgive choice of example website. It simply had the desired
elements required for the demonstration. Hoping we can focus on function
rather than content.
First off target refers to the BlockID found in either HTML code or chromes developer tools that you are trying to link to. Each code is different and you will need to do some digging to find the ID you are trying to reference. It should look something like div class="page-container drawer-page-content" id"PageContainer"Note that this is the format for the whole referenced section, not an individual text or image. To do that you would need to find the same piece of code but relating to your target block. For example dv id="your-block-id" Anyways I was just reading over this thread and an idea came to my mind, if you are a Shopify user and want to do this it is pretty much the same thing as stated.
But instead of
> http://url.to.site.example/index.html#target
You would put
> http://example.com/target
For example, I am setting up a disclaimer page with links leading to a newsletter signup and shopping blocks on my home page so I insert https://mystore-classifier.com/#shopify-section-1528945200235 for my hyperlink.
Please note that the -classifier is for my internal use and doesn't apply to you. This is just so I can keep track of my stores.
If you want to link to something other than your homepage you would put
> http://mystore-classifier.example/pagename/#BlockID
I hope someone found this useful, if there is something wrong with my explanation please let me know as I am not an HTML programmer my language is C#!
It's now possible to create an "anchor" link that goes to a specific part of any webpage in most browsers in a few different ways.
All of them will create a link with an #anchor at the end, where "anchor" is the thing that you want to navigate to. The browser will interpret the part of the URL after the # to scroll to a specific part of the page.
Here are 3 ways to create a url like this:
Using an existing anchor. Perhaps there will be one in the URL as you scroll down the page. If not, look around the page for a header that has a little link icon to the left of it and click it to update the browsers navigation url.
Using any html element's id property or the name or id on an ("anchor") element. The other answers explain this quite well. You will have to open the developer console and inspect the part of the page to find an id (and you may not find one). It's a little different on each browser, but here's how to inspect an element in Chrome.
Using a text snippet to highlight part of the page.
Basically, html tag can have id="abc" as shown below:
<div id="abc">test</div>
<p id="abc">test</p>
<span id="abc">test</span>
<a id="abc">test</a>
And, "<a>" tag can also have name="abc" as shown below:
<a name="abc">test</a>
Then, you can use the id and name values "abc" with "#" in urls as shown below to go to the specific part of a page:
https://www.example.com/#abc
https://www.example.com/index.html#abc
Then, you can put the urls above in "<a>" tag to create the links to id="abc" and name="abc" as shown below:
test
test
And, if you want to go to the specific part of the same page, you can only put the id and name values "abc" with "#" in "<a>" tag to create the links to id="abc" and name="abc" as shown below:
<!-- Go to the specific part of the same page -->
test
<div id="abc">test</div>
<!-- Go to the specific part of the same page -->
test
<a name="abc">test</a>
How do I create a link to a part of long webpage on another website that I don't control?
I thought you could use a variant of the #partofpage at the end of my link. Any suggestions?
Just append a # followed by the ID of the <a> tag (or other HTML tag, like a <section>) that you're trying to get to. For example, if you are trying to link to the header in this HTML:
<p>This is some content.</p>
<h2><a id="target">Some Header</a></h2>
<p>This is some more content.</p>
You could use the link Link.
Create a "jump link" using the following format:
http://www.example.com/somepage#anchor
Where anchor is the id of the element you wish to link to on that page. Use browser development tools / view source to find the id of the element you wish to link to.
If the element doesn't have an id and you don't control that site then you can't do it.
That is only possible if that site has declared anchors in the page.
It is done by giving a tag a name or id attribute, so look for any of those close to where you want to link to.
And then the syntax would be
text
In case the target page is on the same domain (i.e. shares the same origin with your page) and you don't mind creation of new tabs (1), you can (ab)use some JavaScript:
see tenth paragraph on another page
Trivia:
var w = window.open('some URL of the same origin');
w.onload = function(){
// do whatever you want with `this.document`, like
this.document.querySelecotor('footer').scrollIntoView()
}
Working example of such 'exploit' you can try right now could be:
javascript:(function(url,sel,w,el){w=window.open(url);w.addEventListener('load',function(){w.setTimeout(function(){el=w.document.querySelector(sel);el.scrollIntoView();el.style.backgroundColor='red'},1000)})})('https://stackoverflow.com/questions/45014240/link-to-a-specific-spot-on-a-page-i-cant-edit','footer')
If you enter this into location bar (mind that Chrome removes javascript: prefix when pasted from clipboard) or make it a href value of any link on this page (using Developer Tools) and click it, you will get another (duplicate) SO question page scrolled to the footer and footer painted red. (Delay added as a workaround for ajax-loaded content pushing footer down after load.)
Notes
Tested in current Chrome and Firefox, generally should work since it is based on defined standard behaviour.
Cannot be illustrated in interactive snippet here at SO, because they are isolated from the page origin-wise.
MDN: Window.open()
(1) window.open(url,'_self') seems to be breaking the load event; basically makes the window.open behave like a normal a href="" click navigation; haven't researched more yet.
The upcoming Chrome "Scroll to text" feature is exactly what you are looking for....
https://github.com/bokand/ScrollToTextFragment
You basically add #targetText= at the end of the URL and the browser will scroll to the target text and highlight it after the page is loaded.
It is in the version of Chrome that is running on my desk, but currently it must be manually enabled. Presumably it will soon be enabled by default in the production Chrome builds and other browsers will follow, so OK to start adding to your links now and it will start working then.
Edit: It's been implemented in Chrome. See https://chromestatus.com/feature/4733392803332096
You can NOW...
As of Chrome release 81 (Feb 2020), there is a new feature called Text Fragments. It allows you to provide a link that opens at the precise text specified (with that text highlighted).
At the moment, it works in Edge, Chrome and Opera but not in Firefox, Safari or Brave. (See note 6 at bottom for more)
For security reasons, the feature requires links to be opened in a noopener context. Therefore, make sure to include rel="noopener" in your anchor markup or add noopener to your Window.open() list of window functionality features.
You create the link to your desired text by appending this string to the end of the URL:
/#:~:text=
and providing the percent-encoded search string thus:
/#:~:text=String%20to%20focus%20on
Here is a working example:
https://newz.icu/#:~:text=Google%20surveillance%20increases
Notes:
Test the above link in Chrome or Opera only
In the above example, note that the text string is in a div that is normally hidden on page load - so in this example it is being displayed despite what would normally happen. Useful.
Recent versions of Chrome also include a new option when you Right-Click on selected text: Copy link to highlight. This will auto-create the direct-to-text link for you (i.e. it automatically appends the /#:~:text= to the text you highlighted) and place it in the clipboard - just paste it where desired.
Suppose you want to highlight an entire block of text? The Text Fragments feature allows specifying a starting%20phrase and an ending%20phrase (separated by a comma), and it will highlight all text in between:
https://newz.icu/#:~:text=Dr.%20Mullis,before%20now
Note the comma between Mullis and before
web.dev article about Text Fragments
CanIUse status of Text Fragments
PS - Please forgive choice of example website. It simply had the desired
elements required for the demonstration. Hoping we can focus on function
rather than content.
First off target refers to the BlockID found in either HTML code or chromes developer tools that you are trying to link to. Each code is different and you will need to do some digging to find the ID you are trying to reference. It should look something like div class="page-container drawer-page-content" id"PageContainer"Note that this is the format for the whole referenced section, not an individual text or image. To do that you would need to find the same piece of code but relating to your target block. For example dv id="your-block-id" Anyways I was just reading over this thread and an idea came to my mind, if you are a Shopify user and want to do this it is pretty much the same thing as stated.
But instead of
> http://url.to.site.example/index.html#target
You would put
> http://example.com/target
For example, I am setting up a disclaimer page with links leading to a newsletter signup and shopping blocks on my home page so I insert https://mystore-classifier.com/#shopify-section-1528945200235 for my hyperlink.
Please note that the -classifier is for my internal use and doesn't apply to you. This is just so I can keep track of my stores.
If you want to link to something other than your homepage you would put
> http://mystore-classifier.example/pagename/#BlockID
I hope someone found this useful, if there is something wrong with my explanation please let me know as I am not an HTML programmer my language is C#!
It's now possible to create an "anchor" link that goes to a specific part of any webpage in most browsers in a few different ways.
All of them will create a link with an #anchor at the end, where "anchor" is the thing that you want to navigate to. The browser will interpret the part of the URL after the # to scroll to a specific part of the page.
Here are 3 ways to create a url like this:
Using an existing anchor. Perhaps there will be one in the URL as you scroll down the page. If not, look around the page for a header that has a little link icon to the left of it and click it to update the browsers navigation url.
Using any html element's id property or the name or id on an ("anchor") element. The other answers explain this quite well. You will have to open the developer console and inspect the part of the page to find an id (and you may not find one). It's a little different on each browser, but here's how to inspect an element in Chrome.
Using a text snippet to highlight part of the page.
Basically, html tag can have id="abc" as shown below:
<div id="abc">test</div>
<p id="abc">test</p>
<span id="abc">test</span>
<a id="abc">test</a>
And, "<a>" tag can also have name="abc" as shown below:
<a name="abc">test</a>
Then, you can use the id and name values "abc" with "#" in urls as shown below to go to the specific part of a page:
https://www.example.com/#abc
https://www.example.com/index.html#abc
Then, you can put the urls above in "<a>" tag to create the links to id="abc" and name="abc" as shown below:
test
test
And, if you want to go to the specific part of the same page, you can only put the id and name values "abc" with "#" in "<a>" tag to create the links to id="abc" and name="abc" as shown below:
<!-- Go to the specific part of the same page -->
test
<div id="abc">test</div>
<!-- Go to the specific part of the same page -->
test
<a name="abc">test</a>
Is it okay to use an anchor tag without including the href attribute, and instead using a JavaScript click event handler? So I would omit the href completely, not even have it empty (href="").
In HTML5, using an a element without an href attribute is valid. It is considered to be a "placeholder hyperlink."
Example:
<a>previous</a>
Look for "placeholder hyperlink" on the w3c anchor tag reference page: https://www.w3.org/TR/2016/REC-html51-20161101/textlevel-semantics.html#the-a-element.
And it is also mentioned on the wiki here:
https://www.w3.org/wiki/Elements/a
A placeholder link is for cases where you want to use an anchor element, but not have it navigate anywhere. This comes in handy for marking up the current page in a navigation menu or breadcrumb trail. (The old approach would have been to either use a span tag or an anchor tag with a class named "active" or "current" to style it and JavaScript to cancel navigation.)
A placeholder link is also useful in cases where you want to dynamically set the destination of the link via JavaScript at runtime. You simply set the value of the href attribute, and the anchor tag becomes clickable.
See also:
https://stackoverflow.com/a/10510353/19112
http://www.html5in24hours.com/2012/06/8-ways-to-get-started-with-html5-today/
http://webdesign.about.com/od/html5tutorials/qt/html5-placeholder-links.htm
My advice is use
If you're using JQuery remember to also use:
.click(function(event){
event.preventDefault();
// Click code here...
});
If you have to use href for backwards compability, you can also use
link
instead of # ,if you don't want to use the attribute
Short answer: No.
Long answer:
First, without an href attribute, it will not be a link. If it isn't a link then it wont be keyboard (or breath switch, or various other not pointer based input device) accessible (unless you use HTML 5 features of tabindex which are not universally supported). It is very rare that it is appropriate for a control to not have keyboard access.
Second. You should have an alternative for when the JavaScript does not run (because it was slow to load from the server, an Internet connection was dropped (e.g. mobile signal on a moving train), JS is turned off, etc, etc).
Make use of progressive enhancement by unobtrusive JS.
The tag is fine to use without an href attribute. Contrary to many of the answers here, there are actually standard reasons for creating an anchor when there is no href. Semantically, "a" means an anchor or a link. If you use it for anything following that meaning, then you are fine.
One standard use of the a tag without an href is to create named links. This allows you to use an anchor with name=blah and later on you can create an anchor with href=#blah to link to the named section of the current page. However, this has been deprecated because you can also use IDs in the same manner. As an example, you could use a header tag with id=header and later you could have an anchor pointing to href=#header.
My point, however, is not to suggest using the name property. Only to provide one use case where you don't need an href, and therefore reasoning why it is not required.
From an accessibility perspective <a> without a href is not tab-able, all links should be tab-able so add a tabindex='0" if you don't have a href.
The <a> tag without the "href" can be handy when using multi-level menus and you need to expand the next level but don't want that menu label to be an active link. I have never had any issues using it that way.
In some browsers you will face problems if you are not giving an href attribute. I suggest you to write your code something like this:
Link
you can replace yourcode() with your own function or logic,but do remember to add return false; statement at the end.
Just add bellows code in your working component on top to remove this warning, that's it.
/* eslint-disable jsx-a11y/anchor-is-valid */
I understand that it's a good idea not to leave empty anchor tags. In jQuery and other syntaxes I've noticed everyone typically uses a # to fill the gap (<a href='#'>anchor text</a>). Is this character any better or worse than filling it with anything else? (e.g. <a href='$'>anchor text</a>). I have no reason to want to do this, but seemingly no reason aside from convention to do it the other way either. Why is the # convention used in empty anchor tag hrefs?
This is because the # character in a URL references the local page.
It is used for named anchors (or any ID) within a page, so a link can jump directly to that area.
Wikipedia calls it the fragment identifier and has this to say:
The fragment identifier, if present, specifies a part or a position within the overall resource or document. When used with HTTP, it usually specifies a section or location within the page, and the browser may scroll to display that part of the page.
As a practical example - this link to wikipedia has a fragment identifier (always at the end of the URL):
http://en.wikipedia.org/wiki/Uniform_Resource_Locator#Syntax
In the page, there is a <span id="Syntax" ... tag, and the browser jumps directly to it.
This way, if the user has disabled javascript, actually following the link to "http://mysite.com/#" will not have any negative consequences.
For example, these links still work, since # specifies a location on the current page:
http://www.stackoverflow.com#
http://www.stackoverflow.com/#
while these don't:
http://www.stackoverflow.com$
http://www.stackoverflow.com/$
The link denoted by <a href= points to somewhere else. This somewhere could be on the other side of the world (absolute URL), or locally on the same domain/path (relative URL). Just leaving it empty refers to the very document itself.
The # is the character used to separate an anchor from the rest of the URL. Browers don't even send it to the server, but use it to vertically scroll to the position in the page marked with this anchor (using <a name="foo"></a>).
So basically, <a href="#"> instructs the browser to stay on the same page. It is usually used together with JavaScript - hooking into onClick events - so that the JavaScript does something useful, then return false to prevent the browser from actually following the link. But if he would (e.g. if JavaScript is disabled, or return false is ommitted) then it would not leave the current site, usually not even reloading it.
So #is used not as a random char, but because that's actually the char specified for the purpose of denoting an anchor in a link - it just happens that in your case you neither need the actual link (to another page) nor the anchor, but just a clickable element.
it's mostly old school way of preventing the click action to trigger a page reload.
If you aren t using the href attribute just leave it empty, or even better if you can target some fallback URL for people with JS disabled