in an href in html, whats the difference between using
<a href="http://www.somesite.com/" name="The Name">
and
<a href="http://www.somesite.com/" title="The Name">
Is there any advantage to using one over the other?
Thanks
Look it up in the spec, or better yet a resource that condenses the spec a bit. (And, then the spec if that isn't enough.)
title text Specifies extra information about an element
http://www.w3schools.com/tags/tag_a.asp
The name attribute specifies the name
of an anchor.
The name attribute is used to create a
bookmark inside a document.
The href or the name attribute must be
present in the tag
http://www.w3schools.com/tags/att_a_name.asp
So, the name of the anchor is used for links like exampledomain.com/index.php#some_section, which would bring that anchor into focus on the page.
Many modern browsers will display the title attribute in a tooltip when hovering over the link. It's likely also useful for screen readers and such.
markup tag Node
- Name -- is to identify the element and for lookup
- title -- is default toolTip property. like ALT
Related
I'm just starting to learn about Web Content Accessibility and I was reading this document regarding non-text contents.
According to it:
For non-text content that is a control or accepts user input, such as
images used as submit buttons, image maps or complex animations, a
name is provided to describe the purpose of the non-text content so
that the person at least knows what the non-text content is and why it
is there.
So I double checked if what was meant here as name is the same as the HTML name attribute and found out that it isn't.
Near the bottom of the document here's what the definition of name is:
name
text by which software can identify a component within Web content to
the user
Note 1: The name may be hidden and only exposed by assistive
technology, whereas a label is presented to all users. In many (but
not all) cases, the label and the name are the same.
Note 2: This is unrelated to the name attribute in HTML.
So my question is how do I incorporate this name in my website if it's not the HTML attribute?
It depends on the control you are using. Some examples:
Input controls, textarea:
Use the label element with the for attribute, matching the id attribute of the element.
<label for="input1">My label</label><input type="text" id="input1" />
Buttons
If you use the button element include the description inside the content
<button>My label</button>
For input[type=submit], you can use the value attribute:
<input type="submit" value="My label" />
If you want to describe an image, use the alt attribute
Ex:
<img src="..." alt="My label" />
See my answer on If an HTML element has role="button" should it also have the attribute "name". Another person was asking about the "name" of an object and I clarified that the name of an object is not the name= property (that property is used for javascript) but rather is the label of the object that assistive technology will surface to the user. More details in my post.
The "name" attribute you mean is an attribute of the tag you are using in the web page. Example: Tag Button you can specify the name of the tag to facilitate user. Note 2 is telling you that HTML tag is unrelated to this attribute.
Do all HTML tags support the name attribute or are there only a few that one may use the name attribute on? Furthermore, do all tags support the title attribute?
The reason I ask is because I need to store information in these attributes about the current element.
Here is an example:
<img src="example-image.jpg" alt="Example Image" title="Additional Information" name="Even more info"/>
<div class="example-word" title="Information about this tag" name="More information about this tag">Word</div>
This additional information i am storing in the attribute will be grabbed via javascript.
According to MDN name officially only applies to the following elements: <a>, <applet>, <button>, <form>, <frame>, <iframe>, <img>, <input>, <map>, <meta>, <object>, <param>, <select>, and <textarea> - basically form fields, links, and plugin objects.
If you want to store other information (metadata) with an element, you should look at data- attributes. This is the recommended approach for HTML5, but will work on older browsers too. This also means you can store as many different pieces of extra data as you need
<img src="example-image.jpg" alt="Example Image" title="Additional Information"
data-name="Even more info" data-other-info="Some other information" />
<div class="example-word" title="Information about this tag"
data-name="More information about this tag">Word</div>
You can add your own tags and read them via javascript. These tags have to begin with data-:
<div data-whatever="Information the world needs"></div>
Tags don’t “support” anything. HTML specifications define which attributes are valid for which elements. For the name attribute as well as the title attribute, this depends on HTML version.
Browsers don’t care that much about specs. If your markup contains the attribute foo=bar, they happily include foo in the attributes property of the element node. They may or may not also make foo a property of the node itself. For title, this happens, i.e. “modern browsers support title for all elements”, and this also means that most browsers implement that attribute as a “tooltip”, which is a usability nightmare, but I digress. For name, this happens for some elements but not all, and for controls inside a form, that attribute also has a specialized meaning (it affects the issue whether the value of the control is included in the form data).
The recommended way to store data is to use data-* attributes, since they are guaranteed to have no meaning and no effect, beyond what you specify in your scripts or style sheets.
You really should store it using the data- attribute, but you can always use name and access it like so:
obj.getAttribute('name'); //Pure JavaScript
$(obj).attr('name'); //jQuery
But really, stick to data-.
I want to add a #something to an HTML page.
An example of this would be #History on http://en.wikipedia.org/wiki/Stack_Overflow_(website).
How can I do it?
If you inspect the HTML on that page you'll see how it's being done.
The # sign in an anchor tag's href will tell the browser to move to the element that has a matching ID (where ID = everything that comes after the # sign).
For Example:
My Link
<div id="MyLocation">The anchor destination</div>
You can also include it at the end of your URL and it will take the user directly to the destination on page load.
http://en.wikipedia.org/wiki/Stack_Overflow_(website)#History
Use a name or id attribute on an <a>nchor:
<a name="foo"></a>
<h1>Foo</h1>
<a id="bar"></a>
<h1>Bar</h1>
Pointing your link to http://www.example.com/#foo or http://www.example.com/#bar will scroll the browser down to the respective <a>.
The specification of HTML4 lists name first and id second. (Notice the # in the link? You can also look at the sourcecode of the website!)
When the name or id attributes of the A element are set, the element defines an anchor that may be the destination of other links.
According to HTML Anchors with 'name' or 'id'?, in HTML5 it can be id="foo" or name="foo" with id="foo" having precedence.
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/
Below is some html I found in this jquery tooltip tutorial, the contents inside of content"" show up in the tooltip using javascript. I have never seen the content propert befre, I search on W3schools.com but and google but could not find anything about it. Is this a valid property?
Image Tooltip
sorry If I am overlooking this, I searched but just briefly, didn't look too much before asking this.
If you need to put custom attributes into an element, then use the html5 data- attributes.
Shamelessly copied from John Resig:
<li class="user" data-name="John Resig" data-city="Boston"
data-lang="js" data-food="Bacon">
<b>John says:</b> <span>Hello, how are you?</span>
</li>
This is most likely a custom attribute that the jQuery tooltip creators made up to hold the text for the tooltip. This is unfortunately a common practice with many jQuery plugins (although most put stuff like this in the rel="" attribute instead).
The downside of this is that if you are concerned with validatiing your HTML, this will cause that to fail.
The upside is that browsers will ignore attributes that they do not expect, so it will not affect the rendering of the page.
The proper place for this would be the title="" attribute, but without the extra HTML markup in the value (<span> in this case).
If you must have the extra markup, be sure to encode it:
title=">span<Image Title</span>"
But, be aware that if the Javascript fails, the user will see this encoded text as the built-in, browser-rendered tooltip.
Based on my initial searches on w3c, it seems that there is not such attribute "content" for a tag. The "content" attribute is for meta tag only. For tooltips you would use the "title" attribute. Also, I don't think html is allowed in a title attribute.
Image Tooltip
The content attribute doesn't exist. For tooltips you can use the title attribute (which works on alot of tags).
I thinks some browsers also use the alt attribute for tooltips on img tags, but this isn't the intended purpose of alt.