TECHSITH = Technology Simple Intuitive Tutorial Home

Difference between id and class attributes in html

Difference between id and class attributes in html

Difference between id and class attributes in html

Writing attributes

ID and class are attributes in HTML, they are predefined attributes meaning that they have specific meaning within HTML language. Just like any other attributes in HTML, you would write id and class in key value pair format like this:
key=“value”

Example

[code language=”HTML”]
<p id=“this paragraph”>blah</p>
<p class=“all blue paragraphs”>blah</p>
[/code]

ID and class are a way to access elements via css or javascript. Just like we have attributes such as name, address, age, driver’s license number, social security number (if you live in the USA), HTML has id and class attributes that do the same thing.

ID is like your social security number (Mr Unique)

In the US a social security number is a unique identification number given to each citizen. When the government collects taxes from you using this unique identification number they know exactly who you are. id does the same job for an HTML page. Once you use an ID for an element you cannot use the same id for any other elements. This helps javascript precisely pinpoint specific element.

Example

[code language=”HTML”]
<p id=“123121234”>My social security number is 123-12-1234</p>

[/code]

Class is like your birth date (Mr  IcanBeAnyone-Or-Everyone )

Birthdays are not unique however, within a country there could be more than one person with same birthday. For people, eye color, hair color, etc. are also not unique attributes. Class is just like your birthday. Let’s say the government wants to give $100 to each citizen over the age of 65, they would use everyone’s birthday to classify. Similarly, in HTML, let’s say you like to make first paragraph of every chapter bold, you would create a class and add it to first paragraphs of every chapter. You can use this class in .css files to change the fonts.

Example

[code language=”HTML”]
<p class=“01011995”>My birthday is 01/01/1995</p>
<p class=“01011995”>His birthday is 01/01/1995</p>
<p class=“01011995”>Her birthday is also 01/01/1995</p>

[/code]
In nutshell id allows you to pinpoint a specific element in the page and class allows you to group similar elements.

 

 

 

Difference between id and class attributes in html

2 thoughts on “Difference between id and class attributes in html”

  1. Yoս сan contact companies tһat offer 24 hour towing
    services Melbourne tߋ get instant Ԁay and night towing service immᥱdiately.
    These arᥱ sⲟme of thе mоst popular Ford diesel
    performance chips. Вү distributing tһe weight of yоur trailer’sload օveг the central arᥱa, ɑbove tҺe axle(s) you can minimise the vertical instability οf
    yоur trailer outfit.

Leave a Comment

Your email address will not be published. Required fields are marked *

mycap *

Scroll to Top