What are ID and Class attributes in HTML? Learn HTML Online


LinkVietVip.Com là một website miễn phí, nơi mà bạn có thể rút gọn liên kết miễn phí và kiếm thu nhập từ việc chia sẻ liên kết rút gọn đó của mình.
Trang Download, Tải về,Site Tải Xuống, Upload, Mở, Xem, Open, Load, Tiếp Tục,Chơi, Chơi Game, Continue, Reading, Xem tiếp, Xem thêm, Chuyển hướng tới địa chỉ bên ngoài vui lòng xem bên dưới.

In the HTML id attribute & class attribute are used to name (classify) elements, the purpose is to facilitate the management and formatting of elements later. Attributes idand  class used to define one or more class names for HTML elements. Class names can be used in CSS or JavaScript to perform certain actions for elements with that class name. In CSS, to select elements with special classes, we add a dot (.) And then enter the class name.

For example:

– My website has 100 elements, including 50 elements I want to set red text on. If based on the conventional method, we have to turn 50 elements and then set it the style attribute with the value color: red

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <meta charset="utf-8">
</head>
<body>
    <p>Cách sử dụng thuộc tính class 01</p>
    <p style="color:red">Cách sử dụng thuộc tính class 02</p>
    <p>Cách sử dụng thuộc tính class 03</p>
    <p style="color:red">Cách sử dụng thuộc tính class 04</p>
    <p style="color:red">Cách sử dụng thuộc tính class 05</p>
    <p>Cách sử dụng thuộc tính class 06</p>
    <p>Cách sử dụng thuộc tính class 07</p>
    <p style="color:red">Cách sử dụng thuộc tính class 08</p>
    <p>Cách sử dụng thuộc tính class 09</p>
    <p style="color:red">Cách sử dụng thuộc tính class 10</p>
</body>
</html>

– However, if we want to change it to another color later on, do we have to go to those 50 elements to correct it !? Not to mention the above example that only has 50 elements, but what about the hundreds, thousands of elements !?

– From here, the id attribute & class attribute are used to manage cases like this, we only need to classify the elements only once. Then, if you want to format an element, you only need to format an element, the remaining elements will be applied accordingly.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <meta charset="utf-8">
    <style type="text/css">
        .hello{color:red;}
    </style>
</head>
<body>
    <p>Cách sử dụng thuộc tính class 01</p>
    <p class="hello">Cách sử dụng thuộc tính class 02</p>
    <p>Cách sử dụng thuộc tính class 03</p>
    <p class="hello">Cách sử dụng thuộc tính class 04</p>
    <p class="hello">Cách sử dụng thuộc tính class 05</p>
    <p>Cách sử dụng thuộc tính class 06</p>
    <p>Cách sử dụng thuộc tính class 07</p>
    <p class="hello">Cách sử dụng thuộc tính class 08</p>
    <p>Cách sử dụng thuộc tính class 09</p>
    <p class="hello">Cách sử dụng thuộc tính class 10</p>
</body>
</html>

What is ID attribute?

– The id attribute is used to name the element, this name must be unique, there is no case that the id name of the elements are duplicated (if comparing an element in the website is like a Vietnamese citizen) then the id name is the same as the ID number, it is used to identify the element’s identity)

– To declare the id for an element, we put the id attribute inside the opening tag of that element with the syntax id = “id name”. After declaring, if we want to format the element, we just call its id name directly with the syntax # id name

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <meta charset="utf-8">
    <style type="text/css">
        #step{color:red;}
    </style>
</head>
<body>
    <p>Chức năng của thuộc tính id</p>
    <p id="step">Cách sử dụng thuộc tính id</p>
    <p>Tầm quan trọng của thuộc tính id</p>
</body>
</html>

What are Class Properties?

– Actually, the function of the class attribute is similar to the id attribute, which is used to name the element. However, naming the class is different from the id name in that it is with the same class name, we can use it for many different elements (if comparing an element in the website like a Vietnamese citizen) Nam, the class name is like a nickname, but the nickname can be used to give many different people)

– To declare the class for an element, we put the class attribute inside the opening tag of the element with the syntax class = “class name”. After the class has been declared, if we want to format the element, we simply call its class name with the syntax.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <meta charset="utf-8">
    <style type="text/css">
        .hello{color:red;}
    </style>
</head>
<body>
    <p>Chức năng của thuộc tính class</p>
    <p class="hello">Tầm quan trọng của thuộc tính class</p>
    <p>Cách sử dụng thuộc tính class</p>
    <p class="hello">Tìm hiểu cách đặt tên cho class</p>
    <p class="hello">Thuộc tính class là gì</p>
</body>
</html>

– Note: A person may have many nicknames, the element is similar, an element can have many class names (remember to add a space “space” between the class names)

For example:

<!DOCTYPE html>
<html>
<head>
    <title>Xem Ví dụ</title>
    <meta charset="utf-8">
    <style type="text/css">
        .nguyen{color:blue;}
        .thanh{font-size:30px;}
        .nhan{background-color:yellow;}
    </style>
</head>
<body>
    <p class="nguyen">Tài liệu học Lập Trình Web 01</p>
    <p class="nguyen thanh">Tài liệu học Lập Trình Web 02</p>
    <p class="nguyen thanh nhan">Tài liệu học Lập Trình Web 03</p>
</body>
</html>

– The first <p> element has a class: nguyen

– The second <p> element has 2 classes: nguyen, thanh

– The third <p> element has 3 classes: nguyen, thanh, nhan

Rule naming id and class name

– The rules for naming ids and class names are exactly the same, they are only allowed to contain the following characters:

  • The characters are lowercase letters: [a. . z]
  • The uppercase letters are: [A. . Z]
  • Characters are numbers: [0. . 9]
  • Underline: _
  • Hyphens: –

– Note: Absolute id and class names must not contain special characters (eg! @ # $% ^ &) And must not start with a digit character [0. . 9]

– Here are some examples of naming ids and class names:

It’s correct:

  • H
  • Hoan
  • Festival
  • HoanTN
  • hoantn20
  • _hoan_tn
  • Hoan-TN

Wrong:

  • 20hoan (wrong because starting with a number)
  • hoan ^^ (wrong because it contains special characters)

– Note: The id and the class name are case-sensitive, for example hoantn and HoanTN are two completely different names.

Differences between “id attribute” and “class attribute”

– Here is a summary of some differences between id attribute and class attribute.

Id attribute :

  • – An element should only receive one id.
  • – An id name can only be used to give a unique element.
  • – When you want to select an element based on id, we use the syntax # name id

Class properties :

  • – An element may receive one or more classes.
  • – A class name can be used to give many different elements.
  • – When you want to select an element based on the class, we use the syntax .name class

– Note: Because “id attribute” & “class attribute” are two separate properties, so with the same name, we can still use it to set id & class.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <meta charset="utf-8">
    <style type="text/css">
        #hello{background-color:yellow;}
        .hello{font-size:40px;}
    </style>
</head>
<body>
    <p id="hello" class="hello">Tài liệu học Lập Trình Web</p>
</body>
</html>

Summary:

Through this article, we have learned what id and class are? The effect and usage of these two properties.

If you have comments or questions about this article, please leave me a comment below. I wish you good learning with HTML ^^.



Hãy bình luận đầu tiên

Để lại một phản hồi

Thư điện tử của bạn sẽ không được hiện thị công khai.


*