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.
I always thought the standard way to specify a fragment identifier is by <a name="foo"></a>.
go to foo
<a name="foo"></a> <!-- obsolete method, it seems -->
<p>some content under that anchor with name</p>
But it seems like this is the old way, and the new way is using an id, like this:
go to bar
<p id="bar">some content under that p with id</p>
In fact, the W3C validator says that name is obsolete for the <a> element. So are there 2 ways to jump to the fragment identifier but 1 of them is obsolete? (And when did that happen?)
(there are other questions about the difference between id and name, but this one is about fragment identifier)
So are there 2 ways to jump to the fragment identifier but 1 of them is obsolete?
There are two ways to identify a fragment.
(There are also two ways to jump to one, since you can do it with a URL or write a pile of JavaScript to scroll the page).
And when did that happen?
id was introduced in 1996 when HTML 4 came out. It effectively obsoleted the name attribute for anchors.
name was made officially obsolete in HTML 5 in 2014 (or in Living HTML on some date that I'm not going to try to figure out).
Yes there are two ways to jump to a fragment identifier and both aren't obsolete ( except a element).
That's rules applied to all HTML 5 elements other than a (because in a hasn't name attribute in HTML5).
So shortly it's obsolete to idenfity name attribute as fragment idenitifier for a element as that's attribute depricated since HTML4.
Flow of accessing fragment from HTML5 Specification:
If there is an element in the DOM that has
an ID exactly equal to fragid, then the first such element in tree
order is the indicated part of the document; stop the algorithm here.
If there is an a element in the DOM that has a name attribute whose
value is exactly equal to fragid, then the first such element in tree
order is the indicated part of the document; stop the algorithm here.
Otherwise, there is no indicated part of the document.
Both ways of doing fragment identifiers work.
Using id="fragment" is the newer, recommended way of jumping to fragments in HTML. It was introduced with HTML4, and works basically everywhere (I just verified this with IE5).
<a name="fragment">, the older way, still works, but is obsolete since HTML5.
Answer to your question: Yes, There are two ways to identify a fragment and one is obsolete.
What is Fragment Identifiers ?
Fragment identifiers for text/plain.
URIs refer to a location in the same resource. This kind of URI starts with "#" followed by an anchor identifier (called the fragment identifier).
Fragment Identifier using JS like below.
location.replace('#middle');
More information on the name attribute.
Basically, the name attribute has been deprecated (obsolete in HTML5-speak) for just about everything except for form elements. Forms retain them as the method of identifying data, and it is the name plus the value property which is sent back to the server. (The id in form elements is used for attaching label elements, and has nothing to do with the actual data).
There is a fundamental weakness in the name attribute, which the id attribute addresses: the name attribute is not required to be unique. This is OK for forms where you can have multiple elements with the same name, but unsuitable for the rest of the document where you are trying to uniquely identify an element.
The id attribute was specifically required to be unique, which makes it better for identifying a link target, among other things. CSS is pretty relaxed about applying styles to multiple elements with the same id, but JavaScript is more strict about this requirement. And, of course, you can’t have a practical link target if you can’t guarantee uniqueness.
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/
What is the difference between the id and name attributes? They both seem to serve the same purpose of providing an identifier.
I would like to know (specifically with regards to HTML forms) whether or not using both is necessary or encouraged for any reasons.
The name attribute is used when sending data in a form submission. Different controls respond differently. For example, you may have several radio buttons with different id attributes, but the same name. When submitted, there is just the one value in the response - the radio button you selected.
Of course, there's more to it than that, but it will definitely get you thinking in the right direction.
Use name attributes for form controls (such as <input> and <select>), as that's the identifier used in the POST or GET call that happens on form submission.
Use id attributes whenever you need to address a particular HTML element with CSS, JavaScript or a fragment identifier. It's possible to look up elements by name, too, but it's simpler and more reliable to look them up by ID.
Here is a brief summary:
id is used to identify the HTML element through the Document
Object Model (via JavaScript or styled with CSS). id is expected
to be unique within the page.
name corresponds to the form element and identifies what is posted
back to the server.
The way I think about it and use it is simple:
id is used for CSS and JavaScript/jQuery (it has to be unique on a page).
name is used for form handling on the server when a form is submitted via HTML (it has to be unique in a form - to some extent, see Paul's comment below).
See id= vs name=:
What’s the difference? The short answer is, use both and don’t worry about it. But if you want to understand this goofiness, here’s the skinny:
id= is for use as a target like this: <some-element id="XXX"></some-element> for links like this: <a href="#XXX".
name= is also used to label the fields in the message send to a server with an HTTP (HyperText Transfer Protocol) GET or POST when you hit submit in a form.
id= labels the fields for use by JavaScript and Java DOM (Document Object Model).
The names in name= must be unique within a form. The names in id= must be unique within the entire document.
Sometimes the name= and id= names will differ, because the server is expecting the same name from various forms in the same document or various radio buttons in the same form as in the example above. The id= must be unique; the name= must not be.
JavaScript needed unique names, but there were too many documents already out here without unique name= names, so the W3 people invented the id tag that was required to be unique. Unfortunately older browsers did not understand it. So you need both naming schemes in your forms.
Note: attribute "name" for some tags like <a> is not supported in HTML5.
The ID tag - used by CSS, define a unique instance of a div, span or other elements. Appears within the JavaScript DOM model, allowing you to access them with various function calls.
The Name tag for fields - this is unique per form -- unless you are doing an array which you want to pass to PHP/server-side processing. You can access it via JavaScript by name, but I think that it does not appear as a node in the DOM or some restrictions may apply (you cannot use .innerHTML, for example, if I recall correctly).
Generally, it is assumed that name is always superseded by id. This is true, to some extent, but not for form fields and frame names, practically speaking. For example, with form elements, the name attribute is used to determine the name-value pairs to be sent to a server-side program and should not be eliminated. Browsers do not use id in that manner. To be on the safe side, you could use the name and id attributes on form elements. So, we would write the following:
<form id="myForm" name="myForm">
<input type="text" id="userName" name="userName" />
</form>
To ensure compatibility, having matching name and id attribute values when both are defined is a good idea. However, be careful—some tags, particularly radio buttons, must have nonunique name values, but require unique id values.
Once again, this should reference that id is not simply a replacement for name; they are different in purpose. Furthermore, do not discount the old-style approach, a deep look at modern libraries shows such syntax style used for performance and ease purposes at times. Your goal should always be in favor of compatibility.
Now in most elements, the name attribute has been deprecated in favor of the more ubiquitous id attribute. However, in some cases, particularly form fields (<button>, <input>, <select>, and <textarea>), the name attribute lives on, because it continues to be required to set the name-value pair for form submission. Also, we find that some elements, notably frames and links, may continue to use the name attribute, because it is often useful for retrieving these elements by name.
There is a clear distinction between id and name. Very often when name continues on, we can set the values the same. However, id must be unique, and name in some cases shouldn’t—think radio buttons. Sadly, the uniqueness of id values, while caught by markup validation, is not as consistent as it should be. CSS implementation in browsers will style objects that share an id value; thus, we may not catch markup or style errors that could affect our JavaScript until runtime.
This is taken from the book JavaScript - The Complete Reference by Thomas-Powell.
<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="Submit">
</form>
The forum thread below has answers to the same basic question, but basically, id is used for scripting identification and name is for server-side.
id vs. name attribute for HTML controls
name is deprecated for link targets, and invalid in HTML5. It no longer works at least in the latest Firefox (v13). Change <a name="hello"> to <a id="hello">.
The target does not need to be an <a> tag. It can be <p id="hello"> or <h2 id="hello">, etc. which is often cleaner code.
As other posts say clearly, name is still used (needed) in forms. It is also still used in META tags.
name vs. id
name
Name of the element. For example used by the server to identify the
fields in form submits.
Supporting elements are <button>, <form>, <fieldset>, <iframe>,
<input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>,
<meta>, and <param>
Name does not have to be unique.
id
Often used with CSS to style a specific element. The value of this
attribute must be unique.
Id is a global attribute. Global attributes can be used on all elements, though the attributes may have no effect on some elements.
Must be unique in the whole document.
This attribute's value must not contain white spaces, in contrast to
the class attribute, which allows space-separated values.
Using characters except ASCII letters and digits, '_', '-' and '.'
may cause compatibility problems, as they weren't allowed in HTML 4.
Though this restriction has been lifted in HTML 5, an ID should start
with a letter for compatibility.
<body>
<form action="">
<label for="username">Username</label>
<input type="text" id="username" name="username">
<button>Submit!</button>
</form>
</body>
As we can see here, "id" and "for" elements are interconnected. If you click on the label (Username) then the input field will be highlighted (this is useful for mobile users and is considered as a good practice).
On the other hand, the "name" element is useful while submitting the form. Whatever you enter in the input field it will be displayed on the URL. Please see the attached image.
The ID of a form input element has nothing to do with the data contained within the element. IDs are for hooking the element with JavaScript and CSS. The name attribute, however, is used in the HTTP request sent by your browser to the server as a variable name associated with the data contained in the value attribute.
For instance:
<form>
<input type="text" name="user" value="bob">
<input type="password" name="password" value="abcd1234">
</form>
When the form is submitted, the form data will be included in the HTTP header like this:
If you add an ID attribute, it will not change anything in the HTTP header. It will just make it easier to hook it with CSS and JavaScript.
ID is used to uniquely identify an element.
Name is used in forms. Although you submit a form, if you don’t give any name, nothing will will be submitted. Hence form elements need a name to get identified by form methods like "get or push".
And only the ones with the name attribute will go out.
If you're not using the form's own submit method to send information to a server (and are instead doing it using JavaScript) you can use the name attribute to attach extra information to an input - rather like pairing it with a hidden input value, but it looks neater because it's incorporated into the input.
This bit does still currently work in Firefox although I suppose in the future it might not get allowed through.
You can have multiple input fields with the same name value, as long as you aren't planning to submit the old fashioned way.
Id:
It is used to identify the HTML element through the Document Object Model (DOM) (via JavaScript or styled with CSS).
Id is expected to be unique within the page.
Name corresponds to the form element and identifies what is posted back to the server.
Example:
<form action="action_page.php" id="Myform">
First name: <input type="text" name="FirstName"><br>
<input type="submit" value="Submit">
</form>
<p>The "Last name" field below is outside the form element, but still part of the form.</p>
Last name: <input type="text" name="LastName" form="Myform">
In all the time this question has been around, I am chagrined (and perhaps a bit saddened) that nobody has thought to mention accessibility which, though always important, has been steadily gaining support amongst both management and software engineers (just from my personal observations; no hard data to back that up).
One statistic I can provide is this (source):
So awareness of accessibility shortcomings show a steadily growing trend. The same reference mentions that, from those numbers, one can observe that at least one lawsuit is filed every hour!
So how does accessibility weigh in on name vs id?
According to the World Wide Web Consortium (W3C):
The for attribute of the label must exactly match the id of the
form control.
Based on personal experiences and according to the W3Schools description for attributes:
ID is a global attribute and applies to virtually all elements in HTML. It is used to uniquely identify elements on the Web page, and its value is mostly accessed from the frontend (typically through JavaScript or jQuery).
name is an attribute that is useful to specific elements (such as form elements, etc.) in HTML. Its value is mostly sent to the backend for processing.
HTML Attribute Reference
Below is an interesting use of the id attribute. It is used within the <form> tag and used to identify the form for <input> elements outside of the </form> boundaries so that they will be included with the other <input> fields within the form.
<form action="action_page.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
<p>The "Last name" field below is outside the form element, but still part of the form.</p>
Last name: <input type="text" name="lname" form="form1">
There is no literal difference between an id and name.
name is an identifier and is used in the HTTP request sent by the browser to serve as a variable name associated with data contained in the value attribute of the element.
The id on the other hand is a unique identifier for browser, client side and JavaScript. Hence the form needs an id while its elements need a name.
id is more specifically used in adding attributes to unique elements. In DOM methods, Id is used in JavaScript for referencing the specific element you want your action to take place on.
For example:
<html>
<body>
<h1 id="demo"></h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>
Same can be achieved by name attribute, but it's preferred to use id in a form and name for small form elements like the input tag or select tag.
Both name and id is targetable by # so not sure why ID was mentioned for this task exclusively.
I often Inspect those attributes to create specific links to bookmark (where clicking on header with mouse cursor to do the same is not provided for some reason) such as the Option File Inclusions
section of MySQL 5.6 4.2.2.2 Using Option Files documentation:
https://dev.mysql.com/doc/refman/5.6/en/option-files.html#option-file-inclusions
where it's defined as <a name="option-file-inclusions"></a> (with absolutely no forms involved).
I think, the name attribute is also older than id in HTML.
The id will give an element an id, so once you write real code, (like JavaScript) you can use the id to read elements. The name is just a name, so the user can see the name of the element, I guess.
Example:
<h1 id="heading">text</h1>
<script>
document.getElementById("heading"); // Reads the element that has the id "heading".
</script>
// You can also use something like this:
document.getElementById("heading").value; // Reads the value of the selected element.