If you take this example, <a name="xxx"></a> ... is this ok when creating an anchor?
I have always preferred to use an already created tag for my destinations.
If you are using this for in page navigation you can just just the id of the element rather than having to set up the anchor tag e.g.
link to stuff
<div id="stuff"></div>
I personally would not use an empty anchor tag.
For navigational purposes within one page, it's perfectly fine. Though that style of navigation is usually related to some kind of headings or titles, so usually most people end up surrounding the appropriate heading/title with the anchor. I guess it's better from a readability and maintenance point of view.
Of course, why not? You just create internal link to content block with this method.
Using an anchor tag without href is useless. It is simply put a text styling to the contents inside the tag.
But you can use a anchor tag without a href, But onthe onclcick event you can dynamically divert the navigation of page. We use simply in some sites to apply the style to the contents within the anchor tag.
Related
I was wondering, can you make an element that is not an anchor (<a>) tag (for ex. <div>, <span>, etc.) behave like an anchor tag? (Link to page on click).
Or, are there any other elements that behave the same?
Only partially.
You can give any tag a tabindex to make it focusable.
You can give any tag a click event listener that sets location.href.
You can't make anything other than a real link react to :link and :visited in CSS
That leaves aside issues of getting (for example) screen readers to recognise the element as a link and annouce it to the user, and for search engines to recognize it as a link and follow it, and the JS simply failing.
In short: If you want a link, then use a real link. HTML is a semantic markup language. Use the semantics it comes with. Don't try to fake the behaviour that comes with the semantics using other elements.
So I found out recently that just like
<p> and <a>
you can use your own like
<o> and <k>
and style them in a css sheet by just using
o {} and k {}
which is pretty cool but unlike
<a> which you can href to
you can't do this with
<o> because <o href="url"></o> just doesn't work, even when adding the styling for cursor hover and o:focus {etc..} and o:hover {etc..}
Could anyone explain why? I got around it by using spans but it would be cool to be able to use any combination of letters for custom tags which have href functionality
Stay away from defining your own tags. XML offers users the ability to define their own tags, while HTML (especially HTML5) wants the user to use the pre-defined tags consistently.
The reason why you can't use href on just anything you like is because HTML just doesn't allow it. You use <a>s when placing links, <span>s to style certain word(s) of a text.
http://www.w3schools.com/tags/tag_span.asp
For the simple reason that if you define a "custom" element like this:
<o href="url">go to page x</o>
you probably mean a behavior like this:
go to page x
But what we are "supposing" can't be simply "predicted" by the browser; so, basically, the browser wouldn't know how to manage those attributes which you are giving to your custom tag...
Indeed, when you use something like <o>...</o> "tag" you are NOT defining a REAL custom tag; you are just placing a markup: whose regard the browser is simply "trasparent" (indeed doesn't do anything) just shows what is inside (if "showable") as if the "custom tag" wasn't there (we might say a "null" inline element). It can be managed, of course, trought CSS and Javascript that will specify the rest...
To build a real custom element you should place it in the register trought Javascript, with a specific sintax for the name, defining (trought Javascript) attributes and behavoirs...
There is web-site for Nodeclipse FOSS project http://www.nodeclipse.org/
I am not quick at web development and styles, and there is problem I don't know how to approach:
On the main page http://www.nodeclipse.org/index.html there is <pre> element (source line)
and after it style is always different than at pragraph start.
I guess there's something to be in applied http://www.nodeclipse.org/pipe.css" (source), but what to look for? (As it is not about pre element but what happens after it)
FOSS project needs help with web.
As you can see, <pre> tag usage inside <p> tag breaks the DOM structure
So the text after pre tag are not enclosed inside the <p> tag.
It is not advised to use pre tag to display a content that doesn't lose it's meaning if not pre-formatted.
So use a <a> tag or some other suitable tags like span (if you don't want it to be a clickable link) to display the url and style it accordingly.
This question already has answers here:
Is an anchor tag without the href attribute safe?
(9 answers)
Closed 8 months ago.
I've been using Twitter Bootstrap to build a site, and a lot of its functionality depends on wrapping things in <a>, even if they're just going to execute Javascript. I've had problems with the href="#" tactic that Bootstrap's documentation recommends, so I was trying to find a different solution.
But then I tried just removing the href attribute altogether. I've been using <a class='bunch of classes' data-whatever='data'>, and having Javascript handle the rest. And it works.
Yet something's telling me I shouldn't be doing this. Right? I mean, technically <a> is supposed to be a link to something, but I'm not entirely sure why this is a problem. Or is it?
The <a>nchor element is simply an anchor to or from some content. Originally the HTML specification allowed for named anchors (<a name="foo">) and linked anchors (<a href="#foo">).
The named anchor format is less commonly used, as the fragment identifier is now used to specify an [id] attribute (although for backwards compatibility you can still specify [name] attributes). An <a> element without an [href] attribute is still valid.
As far as semantics and styling is concerned, the <a> element isn't a link (:link) unless it has an [href] attribute. A side-effect of this is that an <a> element without [href] won't be in the tabbing order by default.
The real question is whether the <a> element alone is an appropriate representation of a <button>. On a semantic level, there is a distinct difference between a link and a button.
A button is something that when clicked causes an action to occur.
A link is a button that causes a change in navigation in the current document. The navigation that occurs could be moving within the document in the case of fragment identifiers (#foo) or moving to a new document in the case of urls (/bar).
As links are a special type of button, they have often had their actions overridden to perform alternative functions. Continuing to use an anchor as a button is ok from a consistency standpoint, although it's not quite accurate semantically.
If you're concerned about the semantics and accessibility of using an <a> element (or <span>, or <div>) as a button, you should add the following attributes:
<a role="button" tabindex="0" ...>...</a>
The button role tells the user that the particular element is being treated as a button as an override for whatever semantics the underlying element may have had.
For <span> and <div> elements, you may want to add JavaScript key listeners for Space or Enter to trigger the click event. <a href> and <button> elements do this by default, but non-button elements do not. Sometimes it makes more sense to bind the click trigger to a different key. For example, a "help" button in a web app might be bound to F1.
I think you can find your answer here : Is an anchor tag without the href attribute safe?
Also if you want to no link operation with href , you can use it like :
something
Yes, it is valid to use the anchor tag without a href attribute.
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.
Yes, you can use class and other attributes, but you can not use target, download, rel, hreflang, and type.
The target, download, rel, hreflang, and type attributes must be
omitted if the href attribute is not present.
As for the "Should I?" part, see the first citation: "where a link might otherwise have been placed if it had been relevant". So I would ask "If I had no JavaScript, would I use this tag as a link?". If the answer is yes, then yes, you should use <a> without href. If no, then I would still use it, because productivity is more important for me than edge case semantics, but this is just my personal opinion.
Additionally, you should watch out for different behaviour and styling (e.g. no underline, no pointer cursor, not a :link).
Source: W3C HTML5 Recommendation
It is valid. You can, for example, use it to show modals (or similar things that respond to data-toggle and data-target attributes).
Something like:
<a role="button" data-toggle="modal" data-target=".bs-example-modal-sm" aria-hidden="true"><i class="fa fa-phone"></i></a>
Here I use the font-awesome icon, which is better as a a tag rather than a button, to show a modal. Also, setting role="button" makes the pointer change to an action type. Without either href or role="button", the cursor pointer does not change.
Text. replace href="#name"..then save its working..
I've been looking through various websites and came across multiple ways to make "buttons". What are the pros and cons to each way?
<div class='btn'><a>Click Me!</a></div>
<span class='btn'><a>Click Me!</a></span>
<a class='btn'>Click Me!</a>
CSS:
.btn{
display:inline-block;
min-width:100px;
text-decoration:none;
cursor: pointer;
}
Those are all three the exact same thing. They're all just a link, the only difference is that parent class is used as a selector target. They are effectively identical.
There is one differences between the first and second 2, though. a div, by default, is a block element while a span and an a tag are both inline, thus a dive fills up the entire width of the container, but that can be changed with css (as your example does).
Why not just, I don't know.. call me crazy.. but why not just use an actual button?
The only reason I can think of to NOT use a button is if you want the links to be search spider visible. If you're going to use javascript to post a form, then i suggest using a button instead.
I recommend reading this article by Chris Coyer. It's titled "When (and when not to) use an anchor tag?".
Here's an excerpt:
I think if you are going to put a href attribute on the anchor that
actually does something even if JavaScript is disabled, then the
anchor is the right choice. If the app is totally JavaScript dependent
all behavior is attached via JavaScript, I guess it doesn't really
matter what element you use. Maybe it's even better not to use an
anchor since the behavior probably bears no resemblance to what anchor
links do. You could probably talk me out of that though. The thing is,
anchors give you ("for free") lots of the visual functionality that
you want with deep browser support. So...
I'm not sure about the a tag (more info here), but the span tag is inline and the div tag isn't. Otherwise they're all pretty much the same.
the <div> and the <span> must have an action using javascript but the <a> can have a link to another page without using java script code
If you are using a form submit i prefer to use a input button. As it doesn't need further Javascript code to submit a form.
The difference between span and div is that div is a container element whereas span is not. How this is helpful to you? Check out his link.
If you dont want to apply any style and if you are okay in writing (or) if its a simple get request to server (or) if you are willing to write some javascript event handlers then go with anchor tags
I think the best method is the third one because you use only one DOM element instead of two. This will improve the performance and will make your code more semantically because you are not creating empty DOM elements for styling.
In addition, with the example 1 and 2 if the anchor is smaller than 100px the clickable zone will be smaller than the example 3.