Can someone give me some examples of what type of values are valid for the aria-label attribute.
It can be any string, which is used to name an element. The ARIA spec: aria-label says:
Most host languages provide an
attribute that could be used to name
the element (e.g. the title attribute
in HTML), yet this may present a
browser tooltip. In the cases where a
visible label or visible tooltip is
undesirable, authors MAY set the
accessible name of the element using
aria-label.
So it's like the HTML title attribute.
Like Alohci said, it can be a string. Any value you want. You use it like so:
<input aria-label="This can be anything inside quotes. It can be very long or very short. Can have numbers 1234567890 or symbols !##$%^&*()-.,<>;/'[]{}\|-_=+å∫ç∂´ƒ©˙ˆ∆˚¬µ˜øπœ®ß†¨√∑≈ÅıÇÎ´Ï˝ÓˆÔÒ˜Ø∏Œ‰Íˇ¨◊„˛Á¸">
Related
I have an HTML page that is way too junky, so I am trying to trim it down.
I always put type='text' on my inputs, when they are text inputs:
<input type="text" />
However, it doesn't seem that browsers strictly require that.
Is omitting this attribute where it is text considered bad practice?
The type attribute has always been optional, defaulting to text, in all HTML specifications (which start from HTML 2.0) and in all implementations. It is thus safe to omit it, and of course equally safe to include it, when you want to have a text input field.
In the DOM, <input> and <input type=text>, have the same representation (including the presence of a type property of the element node, with the value 'text'), except that only in the latter case the attributes property contains type. So any JavaScript processing that needs the type property works just the same.
It is a matter of opinion and taste whether it is useful to include it for symmetry with other input elements or for explicitness, so that a person reading HTML source will immediately see that we have a text input field, without needing to scan a possibly long list of attributes to see that no type attribute is present.
However, there is a technical difference that may matter, possibly making it advantageous to use the type=text attribute. In CSS, the selector input[type=text] matches only elements that have the attribute type=text explicitly set. If such attributes are used consistently, you can thus set styling properties for text input fields without affecting any other input fields. Otherwise you need a more complicated selector.
To answer to this question we can refer to:
HTML4 SPEC 17.4 The INPUT element
type =
text|password|checkbox|radio|submit|reset|file|hidden|image|button
[CI] This attribute specifies the type of control to create. The
default value for this attribute is "text".
The HTML5 Spec 4.10.5 The input element
The type attribute controls the data type (and associated control) of
the element. It is an enumerated attribute. The missing value default
is the Text state.
So, omitting the attribute is not considerable a bad practice
text is the default value for an input tag's type attribute in most if not all modern browsers. However, it isn't considered a "bad practice" to leave it off, only /good/ practice to include it.
If you are looking at modern browsers, they will surely handle it. But if your users are using older browsers (specially IE-older ones) then gods know what will happen. ;)
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 do not see title listed as an attribute for html <img> on sitepoint or mdn, or even on w3.org, yet it is widely used, and compatible in most browsers. I want to know if this is indeed a valid img attribute?
If so, why is it not listed on those sites. If not, why is it so widely used, and should I use it or no?
Yes, title is a global attribute: http://www.w3.org/TR/html5/dom.html#the-title-attribute
The title attribute represents advisory information for the element, such as would be appropriate for a tooltip. On a link, this could be the title or a description of the target resource; on an image, it could be the image credit or a description of the image; on a paragraph, it could be a footnote or commentary on the text; on a citation, it could be furtherinformation about the source; on interactive content, it could be a label for, or instructions for, use of the element; and so forth. The value is text.
Attributes are listed in the specification:
http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element
Content attributes:
Global attributes
alt - Replacement text for use when images are not available
src - Address of the resource
crossorigin - How the element handles crossorigin requests
usemap - Name of image map to use
ismap - Whether the image is a server-side image map
width - Horizontal dimension
height - Vertical dimension
Yes it is, look here for example:
< http://www.w3.org/TR/html5/dom.html#the-title-attribute>
title is a global attribute, which means that it can be used on any element.
The title attribute is more like meta information on various types of HTML tags. There is no harm in not having it, but if present, it can be used in anyway you want either in Javascript/ any DOM parsing.
Check the usage of it this W3 schools - TryIt! with the ID myAbbr
Why do we use the the name, id and value attributes with html elements? What are they important and how are they interpreted? What are the differences between them? I have looked at w3schools and every tutorial but I would like a simple explanation from a person.
What is the difference between just doing:
<form>
<input type="text" />
</form>
and
<form>
<input type="text" name="name" />
</form>
what are the benefits of using these attributes?
name - passed to the server in forms
id - a unique identifier to the HTML element
value - the value of an input or textarea element
The presence of a name attribute in an input element causes a name=value pair to be included in the form data, if the value is not empty. In the absence of such an attribute, the form field does not make any contribution to the form data.
The id attribute can be used to give an element a unique identifier that can be used in client-side scripting and styling. It has nothing to do with the functionality of the name attribute.
The value attribute in a text input box specifies the initial (default) content of the input field.
Each form element in your application must save some information for you. Those are value.
When you want process your forms using a server-side programming language, you must point to your wanted element. Here, you need name to fetch your form elements values.
Also, sometimes you might need to process your form client-side or do something else on elements in your HTML document, now one way to point to them can be an id.
id is usually referred to by, or used in relation to, CSS styling. name is usually referred to by data-related php or or other server-side scripting , and value is the "content" ascribed to that element, so if input value = "hello", then that is what will appear in the text input field.
One point that the other answers don't make clear, is that the purpose of an attribute can differ depending on which element it belongs to.
So while an id attribute identifies an element no matter where it is, the name attribute serves a different purpose on the iframe and object than it does on the meta element, which is again different from its purpose on the submittable elements button, input, keygen, object, select and textarea. The param element and the map element both have name attributes, each for a different purpose, while the form element, fieldset element and output element use their name attributes for a more or less common purpose, but different from the other elements.
Similarly, the value attribute on the input, button and option elements serve similar but slightly different purposes, and the progress and meter elements share a similarly purposed value attribute, but each of the param, li, and data (WHATWG HTML living standard only) elements has a value attribute with a purpose dedicated to that particular element.
To understand all the purposes properly, I recommend that you at least read the spec.
I was looking at this Slideshow http://www.slideshare.net/CharJTF/structures-semantics-controls-and-more-html-5-is-here-3523971 and on slide #14 there are 3 examples of img tag
third one is without value. Is it allow in HTML 5?
The parsing rules for attributes start here. Note that the default action on encountering the first character of an attribute is this:
Start a new attribute in the current tag token. Set that attribute's
name to the current input character, and its value to the empty
string. Switch to the attribute name state.
So in HTML5, alt and alt="" are equivalent.
It is acceptable to have an empty string value for an alt attribute when the image is entirely presentational (though really in that case, that image should be included with CSS rather than in the content), or when it would repeat information already available to the detriment of screen reader users. The point of putting an empty string there instead of leaving off altogether is that many screenreaders, if there isn't an alt attribute, will read out the full path in the src attribute instead.
HTML 5 now defines foo as being the same as foo=''