การใช้แอตทริบิวต์ id

แอตทริบิวต์ id ระบุรหัสเฉพาะสำหรับองค์ประกอบ HTML ค่าของ id แอตทริบิวต์ต้องไม่ซ้ำกันในเอกสาร HTML

แอตทริบิวต์ id ใช้เพื่อชี้ไปที่การประกาศสไตล์เฉพาะในสไตล์ชีต นอกจากนี้ยังใช้โดย JavaScript เพื่อเข้าถึงและจัดการองค์ประกอบด้วยรหัสเฉพาะ

ไวยากรณ์สำหรับรหัสคือ: เขียนแฮช (#) ตามด้วยชื่อรหัส จากนั้นกำหนดคุณสมบัติ CSS ภายในวงเล็บปีกกา {}

ในตัวอย่างต่อไปนี้ เรามี องค์ประกอบที่ชี้ไปที่ชื่อรหัส “myHeader” องค์ประกอบ นี้ จะจัดสไตล์ตาม#myHeader คำจำกัดความของสไตล์ในส่วนหัว:

ตัวอย่าง

<!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 name นั้นคำนึงถึงตัวพิมพ์เล็กและใหญ่! ชื่อรหัสต้องมีอักขระอย่างน้อยหนึ่งตัว ไม่สามารถขึ้นต้นด้วยตัวเลข และต้องไม่มีช่องว่าง (เว้นวรรค แท็บ ฯลฯ)

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

class สามารถใช้กับองค์ประกอบ html หลายรายการได้ ในขณะที่ id จะต้องใช้โดยองค์ประกอบ HTML เดียวเท่านั้นภายในเพจ:

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<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>
<body>

<h2>ความแตกต่างระหว่าง Class และ ID</h2>
<p> ชื่อคลาสสามารถใช้กับองค์ประกอบ 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>

</body>
</html>

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

bookmark ใช้เพื่ออนุญาตให้ผู้อ่านข้ามไปยังส่วนใดส่วนหนึ่งของหน้าเว็บ จะมีประโยชน์มากหากหน้าเว็บของคุณยาวมาก

หากต้องการใช้บุ๊กมาร์ก คุณต้องสร้างบุ๊กมาร์กก่อน แล้วจึงเพิ่มลิงก์ไปยังบุ๊กมาร์ก

จากนั้นเมื่อคลิกลิงก์ หน้าจะเลื่อนไปยังตำแหน่งที่มีบุ๊กมาร์ก

ตัวอย่าง

ขั้นแรก สร้างบุ๊กมาร์กด้วย id แอตทริบิวต์:

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

จากนั้น เพิ่มลิงก์ไปยังบุ๊กมาร์ก (“ข้ามไปที่บทที่ 4”) จากภายในหน้าเดียวกัน:

ตัวอย่าง

เมื่อคลิกที่ข้อความ Jump to Chapter 4 / Jump to Chapter 10 หน้าจะเลื่อนไปแสดงที่ Chapter นั้น

<!DOCTYPE html>
<html>
<body>

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

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C10">Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>



</body>
</html>

Jump to Chapter 4

Jump to Chapter 10