website management marketing & design

Hi – Edmundo at the controls again. I’m a little later than expected because I’ve been helping the team on a couple of big projects. However, as promised:

Attributes (XHTML)

Last session we covered elements in your XHTML document and the next but one session we will have a closer look at setting up a standard document with those elements  – but first we need to have a closer look at the Attributes of those Elements.

Each element in an XHTML document serves a purpose. We have looked at <a> tags, <h1> tags etc. and you already know what function these elements perform. In order to assist each element in fulfilling it’s purpose each element can carry an attribute. Attributes can help the element in many different ways – and in fact are the only way you can influence an elements behaviour.

The best way to help you understand the concept of attributes may be to show how they are “attributed” to an element and describe the core or universal attributes – these are the attributes that work with all elements – or we could say – that all elements carry!

Let us take our familiar <h1> tag or element. Core attributes are class, id and title. These are attributes that all (well actually the vast majority) of elements will accept. Each attribute carries a name and a value.

Let us add the class attribute to our <h1> tag. <h1 class=”myClass”>. Notice how we have added the attribute name (class) and it’s value (myClass) and how we have done that by saying our attribute name of  class is equal to (=) our attribute value of myClass – and lastly that the value is contained in exclamation marks to make sure the that XHTML can recognise that this is the value we are assigning to our attribute.

Now – why would we do such a thing? In the case of the class attribute this would mean that we could have 2 or more types of <h1> element in our document. For instance we might want to have one group that are italicised in 20pt times new roman (font) and another group that sit on a different group of pages that are in 15pt arial and not italicised. If we assign all the <h1> headers that we want in the first group the appropriate class - then we can specify in one command line (using CSS which we will visit later) just how those particular headers will appear!

The id and title attributes which also belong to the core group both have their own uses for each element that uses them. The id attribute is unique (or should be) to each element that uses it. So rather than allowing us to specify a group of elements like the class attribute, it allows us to specify a unique element. An example where me might use this attribute could be when we want to locate an image precisely on a page – it’s only that image that we are trying to position and we wouldn’t want to influence the on-page behaviour of any other images with our instructions.

The title attribute allows us to (you guessed already didn’t you? smart cookie, you are) give a title to our element – this title typically (but not always) is used to display a tooltip on the screen as you move across the element. So for instance moving over a link may display the destination url of the link as a tooltip.

That’s it for today. I’ll look at Document Declaration next as this will also help us look at “versions” of XHTML and something called deprecated attributes – so until next time, peace out – Edmundo Gonzales.

Filed under: Beginners by Edmundo