In a previous article we covered the basics of HTML elements. Now it is time to move ahead to HTML attributes and the enormous impact they have on the elements. Again, like the aforementioned article, this is a beginning point, a resource for newbies if you will. We won’t cover all attributes, nor will we go into too much detail. First order of business is to make you familiar with the word and the basic information you’ll need so as to claim a better understanding.
What Are Attributes?
You should think of attributes as a way of defining specific characteristics of various elements. Attributes are expressed as the attribute name followed by an equal sign and plain quote marks, like this.
Example: <someelement someattribute="somevalue">
Where you see someattribute in the example above, would be the real attribute. Since we only introduced you to the required elements in our last HTML article, we’ll use one of those for this example: body.
Example: <body id="idvaluehere">
Within the quotes would be a particular value, as shown. The expression of this value would depend on the attribute; it may be numeric or text (though the id attribute as used in the last example cannot begin with a number). Also note in some cases, attributes may contain more than one value (i.e. style).
There are many attributes, but not all can be applied to all elements. We don’t want to confuse the subject at his tender stage, though, so let’s not get too technical right now. For now let’s just take a tour of a few attributes that can be universally applied to nearly all elements. Most of these are commonly used, though that is not the case for all of them. Read on.
Universal Attributes
- The
id=""attribute is used primarily for scripting and styling purposes so as to make one element which may be used repeatedly unique among its peer elements. Often this attribute is used on larger, container-type elements but there are certainly exceptions to this. One fact without exception is that the value of anidmay only be used once per page, regardless of the element to which it’s applied. This attribute requires a text or numeric value, but the value cannot begin with a number. - The
class=""attribute is used solely for identifying an element for the purpose of applying styling characteristics. This attribute’s value may be used repeatedly per page so a single defined style may be applied to many elements. Using this assumes you will use Cascading Style Sheet (CSS) styling methods, typically in a separate and universally-applied file, a *.css file to be specific. There are other ways to style elements, though. Just see the next item on our list. This attribute requires text and can contain more than one value though some will argue that this is not a preferred practice. - The
style=""attribute is also used for styling as the name implies, but instead of using theclassattribute with separate styles in a style sheet or at the top of the page [in the source code], this attribute allows one to apply style information directly to the affected element. This is not a preferred practice (using a separate style sheet is the best choice), but there are instances where using this attribute would be the smartest or easiest way. This attribute requires specific CSS information likefont-size:90%;as just one example. - The
title=""attribute is useful to people who use a mouse, but they doesn’t do much else that would benefit others. The title attribute can be applied to just about any element, but is most often used on links. For instance, say you have a link to a contact page. The link text might say “contact us,” whereas the title attribute might expand that to “Contact us by email, phone, or mail today.” As you can see, it adds a little information, but remember it’ll only be available to mouse users primarily. The title attribute, for mouse users, will pop up like a little “tool tip” when the element to which it is applied is hovered over (hover over this text if you can). This attribute requires a text or numeric value, though the length really shouldn’t be excessive. - The
lang=""attribute can be applied to nearly any element — which is why it’s being listed here — but it doesn’t need to be used except under special circumstances. The lang attribute is used to identify a language being used. Since a properly formed HTML document (a web page) has its language identified in the source code of thehead, this attribute isn’t needed unless there is a change to said language. For example, you’d use this attribute on an element that encompasses foreign language text within a web page of your native language. For instance, if the web page was English (en), you’d use this attribute on any non-English text on that page. Using this helps people who access the web with special devices (for accessibility) make sense of non-native words. This attribute requires text, a language code, specifically. - The
tabindex=""attribute can be applied to nearly any element — especially form elements — which is why it’s listed, but it usually shouldn’t be used at all. This attribute is given a numeric value. The value dictates the tab order of the page (pertaining to the order of your stopping points when you tab through page with your keyboard, using the Tab key). Typically the tab order is determined by the source order of the page and nine times out of ten, the natural order is what’s expected and preferred. We did want to mention it, though. Now you can forget it.
That’s all we’re going to offer right now. Again, this is just a primer so in the future, when the word attribute is used, you’ll know what we mean. We will take the time to explain the specific attribute used, why it’s used, and how it’s used at that time. This is just a place to start.