Id and Class in HTML

by

Id and Class in HTML

Id attribute: The Identification with id:-

ID Attribute Syntax:-  < tag name  id=”id name”>

The id attribute is used to assign a unique identifier to an element in the HTML document. The value of the id must be used only once in the document. The value of the id is useful for assigning a name to a particular element. The id attributes are the global attributes that mean you can use id attributes to all HTML elements. If you want to watch video tutorials about “Id and Class in HTML” in the Hindi language then go to the bottom of the page

The value For id attribute In HTML5: the values for id attributes must contain at least one character (that is, they may not be empty and may not contain any character spaces). You can use pretty much any character in the value.

Example:-

 

 

Id attribute example

In the above example, we have three <h2> elements that points to the id name: “Rohan”, “Sohan”, and “Mohan”. In other words’ we have assigned their name like “Rohan”, “Sohan”, and “Mohan”.

Note:- Id and Class in HTML are case sensitive!

The syntax for the id attribute is: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}.

Now time to use the id attribute; I want to styling with CSS for  second <h2> element but not all three <h2> element. Here I will use the “sohan” id name for styling the second <h2>. This <h2> element will be styled according to the #sohan style definition in the Style element:

See the Example:

id attribute example

If you do not understand styling with CSS, Don’t worry, we will learn in CSS (Cascading style sheet) tutorials.

Class Attribute: Classification with class:-

Class Attribute Syntax:-  < tag name  class=”class name”>

The class attribute classifies elements into conceptual groups; so, the class attribute, unlike the id attribute. A class name may be shared by more than one element. By making elements part of the same class, you can apply style rules to all of the labeled elements at once with a single style rule.

See The Example below:

class attribute example

In the above example, all  the <h2> elements shared the same class name “BA” therefore, you can apply the style rule to all <h2> elements  in only one time,

The syntax for the Class attribute is: write a ‘Dot’ character (.), followed by a Class name like BA in the below example. Then, define the CSS properties within curly braces {}.

See Example:-

Class Attribute Examples

In the above example, this  one style rule will apply to all <h2> elements

you can use both a class and an id to the same element and also possible for elements to belong to multiple classes. When there is a list of class values, simply separate them with character spaces. See the example below:

class attribute example

In the above example, the <h2> element have both an id attribute named “rohan” and  multiple classes  named “BA, Hindi, and Math“

The id and class attributes are two of the global attributes in HTML, Some Global Attributes:

HTML5 defines a set of attributes that can be used with every HTML element. They are called the global attributes:

  • accesskey
  • class
  • contenteditable
  • dir
  • draggable
  • hidden
  • id
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate