Anatomy of HTML/xHTML tags

Tags and Attributes

As we covered in Introduction to HTML, HTML tags are defined by angle brackets <tag>.
Sometimes they are stand-alone, like the Image tag <img> or Line-break <br>.

All HTML tags can include one or more attributes.
These give the browser more information about the tag.

Let’s jump in and look at some of the most common attributes for everyday HTML tags.

• Style
• Name
• Href
• Title
• Class
• ID

HTML Style Property

You can apply the style attribute to any visible tag.
It assigns CSS styles inline.
(This is not always a good idea, see: Introduction to CSS.)

Looks like:

Hello mum

HTML Name Property

The name attribute is used by more than one type of tag.

Form elements

Form elements should have a name attribute in order for server-side scripts to work out what was entered into each field.

e.g.

<form action="yourscript.php" method="get">
   <input type="text" name="username" />
   <input type="password" name="password" />
   <input type="submit" />
</form>

On-page anchors

The anchor (<a>) tag isn’t only for creating links.
You can also use them to create places on a page that you can jump to directly from a link.

e.g. You can create an on-page anchor with…

<a name="mainbody"></a>

Which you can then link to with…

<a href="#mainbody">Skip navigation</a>

Which brings us on to…

HTML Href Property

href stands for "hypertext reference", and simply means the target of a link.

e.g. A link to another site…

<a href="http://www.scratchmedia.co.uk/about-us.html">About us</a>

A link to an anchor on this page…

<a href="#product1">Product One</a>

Or a link to an anchor on a different page…

<a href="people.html#geoff">About Geoff</a>

HTML Title Property

The title attribute is different to the <title></title> tag (which goes in the page head and sets the title of your page).

The title attribute provides a bit of extra information for a visible element, like a link, image or button.
In most browsers, it causes a tooltip to appear when the mouse pointer hovers over the element.

e.g.

Looks like…

HTML Class Property

Almost any tag that you put in the HTML body can have one or more classnames.
The example div above has two classnames: "comment" and "code".

At the highest level, a tag’s classes provide additional description about what kind of element the tag is.
For example, the example above is described as a "comment" container and also as "code" container.

These definitions don’t really mean much on their own, but it’s good practice to make sure they make sense (i.e. semantically useful).
(For example, my code snippets get the "code" classname, instead of being called class="greybox" or class="typewriterstyle")

What you can do with Class

You mainly use an element’s classname(s) to assign styles through Cascading Style Sheets, but it’s also possible to read them and do stuff in DHTML.

Example of applying styles in CSS using elements’ class.
The classname is prefixed with a dot/period to specify that it applies to elements with class="comment".

<style type="text/css">
   .comment {
      border:1px solid white;
      background-color:#f6f6ff;
      padding:1em;
      margin:.5em;
      border-left:6px solid #eee;
   }
</style>

HTML ID Property

Anything can have an ID attribute.
An element’s ID is its unique identifier.

Note: There should only be one element on each page with a particular ID attribute.

What you can do with ID

Like class, id is frequently used to assign properties through CSS.
Here, note how the id is prefixed with a hash/pound sign, to show that it applies to elements with id="nav".

#nav {
   height:76px;
   float:right;
   display:block;
   text-indent:-3000px;
}

(CSS styles assigned to an element’s ID override any of the same style properties assigned through class.)

The ID attribute is particularly useful in DHTML.
It’s very often used to identify a particular element in JavaScript.

e.g. This code finds an element with the ID "nav", and hides it.

<script type="text/javascript">
<!--
   if (document.getElementById('nav')) {
      document.getElementById('nav').style.display = 'none' ;
   }
// -->
</script>