HTML ID Attribute

Attribute id ใช้เพื่อระบุ รหัสเฉพาะ (Unique Identifier) สำหรับองค์ประกอบ HTML

⚠️ ในหน้า HTML เดียวกัน ไม่สามารถมีหลายองค์ประกอบที่ใช้ id เดียวกันได้

การใช้ Attribute id

id ใช้เพื่อระบุรหัสเฉพาะให้กับ Element ในหน้า HTML โดยค่าของ id ต้องไม่ซ้ำกันในเอกสารเดียวกัน

สามารถใช้ได้ทั้งกับ CSS และ JavaScript เพื่อจัดรูปแบบ หรือเข้าถึง Element เฉพาะได้

ไวยากรณ์ (Syntax) : ใช้เครื่องหมาย # ตามด้วยชื่อ id แล้วใส่ CSS Properties ภายใน { }

				
					<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
} 
</style>
</head>
<body>

<h2>The id Attribute</h2>
<p>Use CSS to style an element with the id "myHeader":</p>

<h1 id="myHeader">My Header</h1>

</body>
</html>

⚠️ หมายเหตุ ชื่อ id คำนึงถึงตัวพิมพ์เล็ก-ใหญ่ ต้องไม่ขึ้นต้นด้วยตัวเลข ต้องไม่มีช่องว่างหรืออักขระพิเศษ

ความแตกต่างระหว่าง Class และ ID

Class (.classname) ใช้ซ้ำกับหลายองค์ประกอบได้
ID (#idname) ต้องเป็น เอกลักษณ์เฉพาะ (unique) ใช้ได้เพียงหนึ่งองค์ประกอบต่อหน้า

				
					<style>
/* Style the element with the id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* Style all elements with the class name "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
} 
</style>
</head>

<h2>ความแตกต่างระหว่าง Class และ ID</h2>
<p>ชื่อ Class สามารถใช้กับองค์ประกอบ HTML หลายรายการได้ ในขณะที่ชื่อรหัสจะต้องใช้โดยองค์ประกอบ HTML เดียวเท่านั้นภายในเพจ:</p>

<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>

<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

การใช้ Bookmark กับ ID และลิงก์

Bookmark ใช้เพื่อให้ผู้ใช้สามารถ “ข้ามไปยังส่วนใดส่วนหนึ่งของหน้าเว็บ” ได้โดยตรง
เหมาะกับหน้าเว็บที่มีเนื้อหายาวมาก

ขั้นตอนการสร้าง Bookmark

1. สร้างบุ๊กมาร์ก ด้วย id

				
					<h2 id="C4">Chapter 4</h2>

2. สร้างลิงก์ ไปยังบุ๊กมาร์กนั้นในหน้าเดียวกัน

				
					<a href="#C4">Jump to Chapter 4</a>

หรือเพิ่มลิงก์ไปยังบุ๊กมาร์กหน้าอื่นได้ด้วย :

				
					<a href="html_demo.html#C4">Jump to Chapter 4</a>

การใช้ Attribute id ใน JavaScript

JavaScript สามารถเข้าถึงและจัดการ Element ด้วย id ได้โดยใช้คำสั่ง document.getElementById()

				
					<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

สรุป

id ใช้เพื่อระบุรหัสเฉพาะสำหรับองค์ประกอบ HTML
ค่าของ id ต้องไม่ซ้ำกันภายในหน้า HTML เดียวกัน
id ถูกใช้ทั้งใน CSS และ JavaScript เพื่อจัดรูปแบบหรือเลือก Element เฉพาะ
ชื่อ id คำนึงถึงตัวพิมพ์เล็ก–ใหญ่
id สามารถใช้สร้างบุ๊กมาร์กภายในหน้าเว็บได้
JavaScript เข้าถึง Element โดยใช้ getElementById()