HTML Core Tag Attributes

There are a number of attributes that are common to most tags. Some are very frequently use while others not so much so; you should only know that they exist.

Most frequently used core attributes

ATTRIBUTE	DESCRIPTION
title	If supported by the browser, it displays a "tooltip" for an element. That is, when the mouse is placed over the element the title value will be displayed for about 5 seconds.
id	Uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
class	Specifies the element to be a member of one or more style classes. any number of elements can share the same class. An element may also belong to multiple classes in which case the attribute value will consist of class names separated by a space.
style	Used to define inline style rules for a single occurrence of an element.

Other core attributes

ATTRIBUTE	DESCRIPTION
lang	If supported by the browser, it specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own lang attribute.
dir	Specifies the directionality of text: for left-to-right, dir="ltr" (the default). For right-to-left, dir="rtl".

Notes on the most frequently used core attributes

The id, class, and style attributes are used with styles and scripts. They are extremely important when you design nice looking and dynamic web pages. The title attribute, on the other hand, is quite simple and is most useful with links and images. You can already see the title atttribute in action by placing your mouse here.

Let's now pre-empt what is to be discussed later and see how the word "here" is coded in the above paragraph. Here is the code:

How to use the TITLE attribute and some basic styles
Code	`<span title="The titlle attribute is used at several places on all our pages." style="color:red;background-color:yellow;cursor:help">here</span>`
Output	here

Yeah, all this just to write one word! Here is a break-down of the code:

Remember the tag? It was listed in a previous section as one of the most common tags, indeed it is. You might be asking 'what does it do?' The answer is 'nothing'. Unlike the other tags we have seen so far such as the bold tag which makes text bold and others, just writing here doesn't do anything to the element it contains. It is simply a container. If you want to do something with some text, like changing the color of our word "here", you first place it inside a tag and apply some attributes.

Inside the tag we used two attributes, title and style. The value of the title attribute will be displayed as a tooltip when you place your mouse over the word 'here'. The value of the style attribute is a CSS (Cascading Style Sheet) command which will be introduced in our HTML part and further covered in its own part. For now, it shouldn't be hard to perceive that color:red specifies the color of the text element, background-color:yellow is for the background, and cursor:help tells it to show a cusor with an arrow and a question mark.

As you might have noticed from the menus of our web site (top left), CSS occupies its own section separate from HTML. This does not mean that it is a completely different language. As a matter of fact, now-a-days it has become part and parcel of HTML for designing good web pages. However, web pages can indeed be designed without CSS.

Finally, you must have noticed by now that at several places we used another form of a "tooltip" such as this tooltip that displays further description of a topic. This tooltip is not available by a simple tag or attribute, it is custom designed by using CSS and a somewhat advanced JavaScript (DHTML).

All the basic concepts of HTML are now covered in this and previous sections. In the next rather long section we will see an overview of all the main HTML elements that make up a web page

TOP