BASEWEBMASTER

Brought To You By
Tomlin Ventures Ltd

Adding Attributes To HTML Elements

Increasing Functionality With HTML Attributes For Elements.

Having covered the markup of the HTML document with the use of tags, and the standard format of a page with elements. The next logical step is to introduce the HTML attribute.

In brief an attribute is applied to the opening tag of an element in order to provide some kind of added functionality, like links, titles and and name.

What do Attributes Look Like

Attributes always take on the same format, that being a name value pair i.e. you name the attribute then you give it a value of some kind. The value depends on the attribute some will require a simple numerical value others will require specific text often chosen from a limited list of valid options.

HTML
This is an attribute: href='http://www.mysite.com'
Applied to an anchor tag: <a href='http://www.mysite.com'>This is my site</a>

So in the example above we have firstly shown an attribute on its own, this is for illustration purposes only in a real HTML document you will alway apply attributes to an elements opening tag. Notice that the attribute name href is assigned its value http://www.mysite.com using the = sign, this is standard for a attribute. Also that the value its self is surrounded by quotation marks, this also is standard practice. Whether you use single quotes or double quotaion marks is up to you as both would be acceptable forms of HTML just remember to use the same type to open the value as to close it.

Adding Attributes To Elements

The second line above shows an attribute applied to an element. Firstly we have the text This is my site this is then surrounded by the HTML anchor tags <a> </a> to create the element. Then to the opening tag we have applied the href attribute along with the value, in this case we are creating a hyper lnk much like the links you can find on almost all web pages on the web, the value being the web addres you would like to send the user to when clicked.

Example Of Using Attributes For Functionality.

There is no real limit to the number of attributes that you can apply to an element assuming that the attribute itself is aloud on the element you can use it. For a full list of attributes and there related elements see here.

Attributes Used For Basic Navigation

Let us try a worked example expanding on the example above. Open your text editor then copy and save the code shown below.

HTML
<a href='#chapter-1'>Chapter-1</a>
<a href='#chapter-2'>Chapter-2</a>
<a href='#chapter-3'>Chapter-3</a>
<a href='#chapter-4'>Chapter-4</a>
<a href='#chapter-5'>Chapter-5</a>

<h1 id='chapter-1'>Chapter one</h1><br /><br />
<h2 id='chapter-2'>Chapter two</h2><br /><br />
<h3 id='chapter-3'>Chapter three</h3><br /><br />
<h4 id='chapter-4'>Chapter four</h4><br /><br />
<h5 id='chapter-5'>Chapter five</h5><br /><br />

<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<h6>The End</h6>

Open the file with your Browser to view the page, you should see a screen similar to this...

Example Of HTML Attributes In Action

As you can see the page contains five links similar to the earlier example but in this case the links point to internal point on the same page. Therefore by clicking the links, instead of being taken to a new page the browser will move the current page to the relevant point. This anchor point is dictated by the id attribute which we have applied to the header tags. The href values simply take the name of the id values with an # symbol at the start.

This is a very simple example of using attributes but is often used on long documents or on document that have very specific sections to help with the page navigation.


More Attributes

Below is an incomplete list of valid anchor attributes, you can use the attributes glossary to find out their functionality if you wish but at least realise that they can, if the situation warrants it, all be applied to the same anchor tag.

  1. title
  2. lang
  3. style
  4. dir
  5. class
  6. tabindex
  7. rel
  8. rev
  9. name

Thats about it in a nut shell, obviously we have coverered only a handfull of attributes here but it is not nessecry at this point to look at specifics as they come up you will slowly get to know the main ones. The important thing is to understand how and when they can be used and also on what elements they may be attached.

Once you are happy you fully understand the HTML attribute hit the next article button below and we will continue.

Share to Facebook Share to Twitter Digg This Stumble It Share to Reddit Share to Delicious Technorati LinkedIn Google Buzz Blogger More...

blog comments powered by Disqus