Night More

Revise Now

Cambridge AS levels

Physics Chemistry Computer Science

Programming and coding

Learn HTML Learn SEO


What do you want
to do?

Contact us Donate Support More Services Send a tweet Social media

more topic chapters

HTML Classes & Ids (Attributes)

The class and the id attributes are mainly part of the CSS section. However, classes and Ids are heavily used in javascript also.

What are HTML Classes

Think of a normal class. It can hold many students under a single name or class - eg grade 12

Likewise a class is used to identify a group of elements which are related

The main purpose of classes and Ids are used to identify each element in the HTML document uniquely. So we can configure and change each elements

When a change is made to a class. All the elements which were part of the class will be affected

We will see a simple CSS example


As you can see the elements which were defined for a particular class got affected by the style. This saves us a lot of time rather than defining the inline style for each element

Classes can also be used in javascript and not just in CSS

The basic idea is that a class is used to uniquelu identify a group of related elements so they can be all accessed at once

Html Ids

Id is more precise and specific. You can only have one element with the particular id name. Which means it can not repeat

This is used when you want to style or access a specific element

Let's see an example


In theory you can have many ids with the same name in the same document. But this is wrong!

So only a single element is styled

You dont have to know the CSS syntax as it is part of the CSS topic. Just understand the concept

Another use of Ids

There is another use of Ids

It is used by links to direct users to a specific location of the same html document or in different html document - this is called HTML bookmarks!

This is an example


This is very useful especially when you want to direct the user to a specific page of an HTMl webpage or document

You also can direct the user to a different section of a different website by adding the # at the end of the url of a web address. However, you must make sure that the selected webpage has an id of the same name or else the HTMl page will load normally

Here is a simple example

Learn coding(HTML and CSS) now

The HTML class and Ids are very useful an important in HTMl coding. So hope you understand the concept

Revisezone.com Copyright 2020 Developers & Coding section