What is href and why is it used

Question

On many websites I see links that have href      What does it mean  What is it used for

User · Answer

As some of the other answers have pointed out, the a element requires an href attribute and the # is used as a placeholder, but it is also a historical artifact.

From Mozilla Developer Network:

href

This was the single required attribute for anchors defining a hypertext source link, but is no longer required in HTML5. Omitting this attribute creates a placeholder link. The href attribute indicates the link target, either a URL or a URL fragment. A URL fragment is a name preceded by a hash mark (#), which specifies an internal target location (an ID) within the current document.

Also, per the HTML5 spec:

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element's contents.

User · Answer

Putting the     symbol as the href for something means that it points not to a different URL  but rather to another id or name tag on the same page   For example    lt a href   bottomOfPage  gt Click to go to the bottom of the page lt  a gt  blah blah blah blah      lt a id  bottomOfPage  gt  lt  a gt    However  if there is no id or name then it goes  no where    Here s another similar question asked HTML Anchors with   39 name  39  or   39 id  39

User · Answer

About hyperlinks   The main use of anchor tags -  lt a gt  lt  a gt  - is as hyperlinks  That basically means that they take you somewhere  Hyperlinks require the href property  because it specifies a location    Hash   A hash -   within a hyperlink specifies an html element id to which the window should be scrolled    href   some-id  would scroll to an element on the current page such as  lt div id  some-id  gt     href    site com  some-id  would go to site com and scroll to the id on that page   Scroll to Top   href     doesn t specify an id name  but does have a corresponding location - the top of the page  Clicking an anchor with href     will move the scroll position to the top   See this demo   This is the expected behavior according to the w3 documentation   Hyperlink placeholders   An example where a hyperlink placeholder makes sense is within template previews  On single page demos for templates  I have often seen  lt a href     gt  so that the anchor tag is a hyperlink  but doesn t go anywhere  Why not leave the href property blank  A blank href property is actually a hyperlink to the current page  In other words  it will cause a page refresh  As I discussed  href     is also a hyperlink  and causes scrolling  Therefore  the best solution for hyperlink placeholders is actually href      The idea here is that there hopefully isn t an element on the page with id      who does that    and the hyperlink therefore refers to nothing - so nothing happens   About anchor tags   Another question that you may be wondering is   Why not just leave the href property off    A common response I ve heard is that the href property is required  so it  should  be present on anchors  This is FALSE  The href property is required only for an anchor to actually be a hyperlink  Read this from w3  So  why not just leave it off for placeholders  Browsers render default styles for elements and will change the default style of an anchor tag that doesn t have the href property  Instead  it will be considered like regular text  It even changes the browser s behavior regarding the element  The status bar  bottom of the screen  will not be displayed when hovering on an anchor without the href property  It is best to use a placeholder href value on an anchor to ensure it is treated as a hyperlink   See this demo demonstrating style and behavior differences

User · Answer

The problem with using href     for an empty link is that it will take you to the top of the page which may not be the desired action  To avoid this  for older browsers or non-HTML5 doctypes  use   lt a href  javascript void 0   gt Goes Nowhere lt  a gt

User · Answer

It s a link that links to nowhere essentially  it just adds     onto the URL   It s used for a number of different reasons  For instance  if you re using some sort of JavaScript jQuery and don t want the actual HTML to link anywhere   It s also used for page anchors  which is used to redirect to a different part of the page

User · Answer

As far as I know it   s usually a placeholder for links that have some JavaScript attached to them  The main point of the link is served by executing the JavaScript code  browsers with JS support then ignore the real link target  If the browser does not support JS  the hash mark essentially turns the link into a  no-op  See also unobtrusive JavaScript

User · Answer

Unordered lists are often created with the intent of using them as a menu  but an li list item is text   Because the list li item is text  the mouse pointer will not be an arrow  but an  I cursor    Users are accustomed to seeing a pointing finger for a mouse pointer when something is clickable   Using an anchor tag a inside of the li tag causes the mouse pointer to change to a pointing finger   The pointing finger is a lot better for using the list as a menu    lt ul id  menu  gt      lt li gt  lt a href     gt Menu Item 1 lt  a gt  lt  li gt      lt li gt  lt a href     gt Menu Item 2 lt  a gt  lt  li gt      lt li gt  lt a href     gt Menu Item 3 lt  a gt  lt  li gt      lt li gt  lt a href     gt Menu Item 4 lt  a gt  lt  li gt   lt  ul gt    If the list is being used for a menu  and doesn t need a link  then a URL doesn t need to be designated   But the problem is that if you leave out the href attribute  text in the  lt a gt  tag is seen as text  and therefore the mouse pointer is back to an I-cursor   The I-cursor might make the user think that the menu item is not clickable   Therefore  you still need an href  but you don t need a link to anywhere   You could use lots of div or p tags for a menu list  but the mouse pointer would be an I-cursor for them also   You could use lots of buttons stacked on top of each other for a menu list  but the list seems to be preferable   And that s probably why the href     that points to nowhere is used in anchor tags inside of list tags   You can set the pointer style in CSS  so that is another option   The href     to nowhere might just be the lazy way to set some styling

User · Answer

The href attribute defines the URL of the resource of a link  If the anchor tag  does not have href tag then it will not become hyperlink  The href attribute have the following values   1  Absolute path  move to another site like href  http   www google com  2  Relative path  move to another page within the site like herf   defaultpage aspx  3  Move to an element with a specified id within the page like href   bottom  4  href  javascript void 0    it does not move anywhere  5  href       it does not move anywhere but scroll on the top of the current page  6  href       it will load the current page but some browsers causes forbidden errors   Note  When we do not need to specified any url inside a anchor tag then use   lt a href  javascript void 0   gt Test1 lt  a gt

User · Answer

Unfortunately  the most common use of  lt a href     gt  is by lazy programmers who want clickable non-hyperlink javascript-coded elements that behave like anchors  but they can t be arsed to add cursor  pointer  or  hover styles to a class for their non-hyperlink elements  and are additionally too lazy to set href to javascript void 0     The problem with this is that one  lt a href     onclick  some function     gt  or another inevitably ends up with a javascript error  and an anchor with an onclick javascript error always ends up following its href   Normally this ends up being an annoying jump to the top of the page  but in the case of sites using  lt base gt    lt a href     gt  is handled as  lt a href   base href     gt   resulting in an unexpected navigation   If any logable errors are being generated  you won t see them in the latter case unless you enable persistent logs   If an anchor element is used as a non-anchor it should have its href set to javascript void 0   for the sake of graceful degradation   I just wasted two days debugging a random unexpected page redirect that should have simply refreshed the page  and finally tracked it down to a function raising the click event of an  lt a href     gt    Replacing the   with javascript void 0   fixed it   The first thing I m doing Monday is purging the project of all instances of  lt a href     gt

[html] What is href="#" and why is it used?

Examples related to html

Examples related to hyperlink