Building Websites with HTML and CSS – Part 6


Untitled-1   In part 3 I had introduced the structure of a HTML tag. To jog your memory, here’s the image I had used in the original post. There are many different tags and so many more attributes to each of them. Going into every one of these is a tedious and unnecessary exercise. We will cover the essential tags and their respective attributes in this series based on their application. In this part, we delve into a a certain set of attributes so commonly used, they are known as core attributes. There are four core attributes:

1. id 

As the name suggests, the id attribute is used to identify chunks of code or separate them for a particular requirement. Say for example a part of your page is dedicated to the players of the Indian cricket team, the “Men in Blue”. Stands to reason that you may want their names displayed in blue. For this you would say:

<div id=”playernames”>

M.S Dhoni, Dinesh, Karthik, Rohit Sharma, Virat Kohli yadi yadi ya…


Now that you have this neatly tucked into a division called “playernames” (known as value of the attribute), you can easily target it in your css (how exactly this is done we will see later).


The class attribute, like id, is used to group parts of html code so they can be referred to easily either in the javascript or css sheets. The difference is that any number of elements in an HTML document can have a class with a certain value whereas only one part of the html can be given a certain id value. So for example you can say:

<h2 class=”food”>Pasta</h2>

<h2 class=”food”>Taco</h2>

However, you cannot have used the id attribute in this case as multiple elements had to be targeted.

3. title

This attribute quite simply adds a title to the element it is applied on. It is a nifty little creature that is used to give a little extra information about the use of an element. It is commonly used with elements such as link (sometimes to detail the destination of the link) and blockquote (to mention the source of the quote). Another reason this attribute is handy is that it is read out by screen readers, hence making your pages more accessible to visually challenged users. Additionally, browsers turn the value of the title attribute into a little tool tip that look’s something like this:

On hovering over HTML, the tool tip appears because the title tag has been used.

4. style

Finally we have the style element. Innocuous as it sounds, this attribute has gained much infamy in the web design world. Why, you ask? Well because the style attribute is used to write css code directly in the html document. This has become a practice that is frowned upon. It is a quick fix method of applying styles but gives up on the advantages of using css in the first place, namely separating presentation from structure and the ability to make global changes from a single source. I’ve mentioned it for the sake of comprehensiveness. Don’t ever use inline css.


Leave A Reply