Are there any browser issues with tags that lack an href attribute?
I also checked the following document with the W3C HTML5 validator:
Example of an anchor with no href attribute. Example of an anchor with a null href attribute. Example of an anchor with an empty string href attribute. Example of an anchor that links to Google. So my question is: are there any known situations where the total lack of an href attribute on an tag causes problems in certain browsers? IE? Mobile Safari?
1 Answer 1
An a element without an href attribute has always been valid in HTML, and there is no reason to expect any browser to have an issue with this. Such an element is effectively similar to span , i.e. lacks any semantics. Traditionally . has been used to set up a destination anchor, usually without an href attribute, and such elements work across browsers, though it is more modern and recommendable to use the id attribute (on any element).
Using href=»» is formally correct, with an empty URL, which is interpreted as same-document reference.
Using href without any value is invalid according to current HTML specs. By HTML5 drafts, it can be used in HTML serialization and it is equivalent to href=»» . There is no guarantee that browsers behave that way.
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.21.43541
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
Is href required on links? [duplicate]
I am assuming that by «links» you simply mean a elements. If that’s true then:
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.
Authors may also create an A element that specifies no anchors, i.e., that doesn’t specify href, name, or id. Values for these attributes may be set at a later time through scripts.
This doesn’t match OP’s situation. OP doesn’t want a placeholder link, she wants a button. (Oh, and a@href wasn’t required in earlier HTML versions either.)
That is true. However, the answer to the question «Is href required on links» is «no». The question over the semantics of how to use such links is a different question altogether. The OPs code would pass a validation test with no href attributes.
Yes. Anchors without href attributes are not links.
I’m asking this because I have some links that act like buttons that pull out content trough ajax
If you are doing that, then do it right. Use Unobtrusive JavaScript and pushState.
«Links» that only work if you are using a pointing device and have JS turned on are not good links.
I’m asking this from the SEO perspective
Search engines won’t execute your JavaScript, so the pseudo-links (which depend on JS) are just black holes of nothingness as far as they are concerned).
If you have links that act like buttons, you should probably have used a element.
no it’s not. But links may render different (underline and color) if the href is not set.
I’m not sure, but some time ago I had a problems with «a» without href. the clicks just didn’t work. But maybe it was just an old browser.
According to the specs it is, and also you’ll find browsers implement different default styling (e.g. not changing the cursor to pointer) when you leave out href. The most common approaches to adding dummy hrefs are
href="#" // But the event handler function must return false in order to avoid the default behaviour of jumping to the top of the page href="javascript:void()" // has the advantage of having no annoying default behaviour They’re not absolutely required, however you should probably put href=»#/» as the href to make it semantically correct. Without an href=»» attribute, the anchor is likely to be parsed as a bookmark in the page, especially if the name=»» attribute is specified.
While it’s not required, you should add the href to the anchor tags, because, well without an href they’re not really anchor tags.
You can add a ‘#’ to the link and add a onClick=’return false;’ to prevent the click event. If you’re using JQuery, you can add event.preventDefault() to your click handler for your links.
From an SEO perspective, I’d go with using titles for the anchor tags (avoid the -ve text-indent property.)
Linked
Related
Hot Network Questions
Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.21.43541
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
HTML Links «file not found»
I am having a problem with my html code when it comes to adding links to a webpage. I am trying to add 2 links to my homepage to get from Home to page 2 and page 3 of the webpage. Every time I click on the page 2 and page 3 links on the webpage in Google chrome I get «Your file was not found» message appear. Driving me crazy hope somebody out there can advise me.
I have done this to my knowledge I have saved index.html page2.html and page3.html to the same folder on my desktop and used a href with page2.html but I get file not found
3 Answers 3
When linking in HTML it’s often handy to begin the link with «./», this ensures you’re starting in the directory that the link exists in. If you already have that, make sure you’ve included the file extension in the link, and that everything is spelt correctly.
@SLaks I have had a lack of ./ be the problem before with links. Logically, yes, it does sound like it would do nothing. I also do believe it helps to ensure you’re starting in the right directory, if for no other reason than readability. ./page2.html reads as «this directory, page 2». If someone is going crazy trying to figure out an error link this, an added ./ may help to cross a possibility off the list.
I tried adding ./ still no luck. I’m completely stuck here now. Still have file not found error message on Google chrome
This happened to me and drove me mad until I realized I needed to go back and change the file names.
If it’s the same issue, check that you didn’t save your actual file name icon as page2.html in the folder, because the .html part is hidden anyway when you save it as an html document.
That means the computer thinks it is actually called page2.html.html with html written twice!! So it won’t understand unless you tell it to link to href=»page2.html.html» or change the file name back to just page2
Why aren’t my href links working?
I’m a little new to web programming and have looked far and wide trying to fix this problem on my own but for the life of me I cannot figure it out, I greatly appreciate any and all help. I’m basically making a navigation bar and I attempt to have it link to my other html pages but it’s not working. I use the following code. HTML
- Home
- Schedule
- Register
- About
- Contact
header < border-top: 12px solid #9e2630; width: 100%; background: #fff; left: 0; top: 0; z-index: 200; height: 115px; margin-bottom: 130px; >header #logo img < padding-top: 35px; display: block; margin-left: auto; margin-right: auto; >header ul < float: left; position:relative; left:50%; min-height: 60px; margin-top: 30px; >header ul li < margin: 0; padding: 0; list-style: none; float: left; position:relative; left:-50%; /*height: 45px;*/ >header ul li a < font: normal normal normal 18px/20px 'Century Gothic', sans-serif; text-align: center; color: #9e2630; /*height: 43px;*/ >header .nav li a:hover < background-color: #9e2630; color:#FFFFFF; >header ul li a.current
The link in the logo works fine. The link in the contact also work fine, there’s no problem when I link to an element on the page. The other four links do not work. I’ve also tried setting the href to an «http» address but that didn’t work either. I’ve run all of these tests in DreamWeaver’s browser preview function (IE and Chrome) as well as on a remote server with no difference in results. I also noticed the z-index in the header is set to 200 (this is sample code I’m working with) which I understand plays a role in how elements are layered. I tried fiddling with that to no avail. What do you guys think? Edit1: here’s what my file structure looks like file structure Also here’s the template I’ve been using template Edit2: Ok guys I found the problem was a JS file called jquery.singlePageNav.min.js unfortunately when I disable this file I lose the nice image slider I had on my web page but the links work again, so now I have to fix that :p Thanks for your help everybody!