อะไรคือแอตทริบิวต์ทั่วไป (Global Attributes) ใน HTML?

Question

Accepted Answer

**แอตทริบิวต์ทั่วไป** คือแอตทริบิวต์ที่คุณสามารถวางไว้บน *องค์ประกอบ* HTML ใด ๆ ก็ได้ โดยไม่คำนึงถึงประเภทของมัน แอตทริบิวต์เหล่านี้ให้การระบุตัวตน ฮุกสำหรับการจัดสไตล์ ข้อมูลการเข้าถึง และข้อมูลเมตา ```html ``` ## อันที่ใช้มากที่สุด - **`id`** — สมอเฉพาะตัวสำหรับ CSS (`#hero`), JS (`getElementById`) และลิงก์ในหน้า (`href="#hero"`). - **`class`** — ฮุกหลักสำหรับการจัดสไตล์/สคริปต์; นำกลับมาใช้ใหม่ได้ในหลายองค์ประกอบ - **`data-*`** — แนบข้อมูลที่กำหนดเองให้กับองค์ประกอบ อ่านใน JS ผ่าน `element.dataset`. - **`tabindex`** — ควบคุมการโฟกัสและลำดับแท็บของคีย์บอร์ด (`0` = สามารถโฟกัสได้ตามลำดับ, `-1` = โฟกัสได้เฉพาะผ่านสคริปต์). - **`hidden`**, **`title`**, **`lang`**, **`role`**, **`aria-*`** — การมองเห็น คำแนะนำ ภาษา และการเข้าถึง ## data-* ในการใช้งาน ```html ``` ```js button.dataset.action; // "delete" button.dataset.id; // "7" (always a string) ``` ## เหตุใดจึงสำคัญ แอตทริบิวต์ทั่วไปคือชุดเครื่องมือร่วมที่คุณใช้บนองค์ประกอบเกือบทุกตัว — `class`/`id` สำหรับการจัดสไตล์และสคริปต์ `data-*` สำหรับส่งข้อมูลไปยัง JS และ `tabindex`/`role`/`aria-*` สำหรับการเข้าถึง การรู้จักพวกมันช่วยให้มาร์กอัปสะอาดและพฤติกรรมสม่ำเสมอ