HTML5 - แอตทริบิวต์

ตามที่อธิบายไว้ในบทที่แล้วองค์ประกอบอาจมีคุณลักษณะที่ใช้ในการตั้งค่าคุณสมบัติต่างๆขององค์ประกอบ

แอตทริบิวต์บางอย่างได้รับการกำหนดไว้ทั่วโลกและสามารถใช้กับองค์ประกอบใดก็ได้ในขณะที่คุณลักษณะอื่น ๆ กำหนดไว้สำหรับองค์ประกอบเฉพาะเท่านั้น แอตทริบิวต์ทั้งหมดมีชื่อและค่าและมีลักษณะดังที่แสดงด้านล่างในตัวอย่าง

ต่อไปนี้เป็นตัวอย่างของแอตทริบิวต์ HTML5 ซึ่งแสดงให้เห็นถึงวิธีการมาร์กอัปองค์ประกอบ div ด้วยแอตทริบิวต์ที่มีชื่อว่า class โดยใช้ค่า "example" -

<div class = "example">...</div>

สามารถระบุแอตทริบิวต์ได้ภายใน start tags และห้ามใช้ใน end tags.

แอตทริบิวต์ HTML5 ไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่และอาจเขียนเป็นตัวพิมพ์ใหญ่หรือตัวพิมพ์เล็กทั้งหมดแม้ว่าหลักการทั่วไปจะใช้ตัวพิมพ์เล็ก

คุณสมบัติมาตรฐาน

แอตทริบิวต์ที่แสดงด้านล่างได้รับการสนับสนุนโดยแท็ก HTML 5 เกือบทั้งหมด

แอตทริบิวต์	ตัวเลือก	ฟังก์ชัน
คีย์การเข้าถึง	ผู้ใช้กำหนด	ระบุแป้นพิมพ์ลัดเพื่อเข้าถึงองค์ประกอบ
จัดตำแหน่ง	ขวาซ้ายตรงกลาง	จัดเรียงแท็กในแนวนอน
พื้นหลัง	URL	วางภาพพื้นหลังไว้ด้านหลังองค์ประกอบ
bgcolor	ค่าตัวเลขฐานสิบหก RGB	วางสีพื้นหลังไว้ด้านหลังองค์ประกอบ
ชั้นเรียน	ผู้ใช้กำหนด	จำแนกองค์ประกอบสำหรับใช้กับ Cascading Style Sheets
พอใจ	ถูกผิด	ระบุว่าผู้ใช้สามารถแก้ไขเนื้อหาขององค์ประกอบได้หรือไม่
เมนูบริบท	รหัสเมนู	ระบุเมนูบริบทสำหรับองค์ประกอบ
ข้อมูล -XXX	ผู้ใช้กำหนด	แอตทริบิวต์ที่กำหนดเอง ผู้เขียนเอกสาร HTML สามารถกำหนดคุณลักษณะของตนเองได้ ต้องขึ้นต้นด้วย "data-"
ลากได้	จริงเท็จอัตโนมัติ	ระบุว่าผู้ใช้ได้รับอนุญาตให้ลากองค์ประกอบหรือไม่
ความสูง	ค่าตัวเลข	ระบุความสูงของตารางรูปภาพหรือเซลล์ตาราง
ซ่อนอยู่	ซ่อนอยู่	ระบุว่าควรมองเห็นองค์ประกอบหรือไม่
id	ผู้ใช้กำหนด	ตั้งชื่อองค์ประกอบเพื่อใช้กับ Cascading Style Sheets
สิ่งของ	รายการองค์ประกอบ	ใช้ในการจัดกลุ่มองค์ประกอบ
itemprop	รายชื่อรายการ	ใช้ในการจัดกลุ่มรายการ
ตรวจสอบการสะกด	ถูกผิด	ระบุว่าองค์ประกอบต้องมีการตรวจการสะกดหรือไวยากรณ์หรือไม่
สไตล์	CSS สไตล์ชีต	ระบุสไตล์อินไลน์สำหรับองค์ประกอบ
เรื่อง	ผู้ใช้กำหนด id	ระบุรายการที่เกี่ยวข้องขององค์ประกอบ
tabindex	หมายเลขแท็บ	ระบุลำดับแท็บขององค์ประกอบ
หัวข้อ	ผู้ใช้กำหนด	ชื่อ "ป๊อปอัป" สำหรับองค์ประกอบของคุณ
ความกล้าหาญ	ด้านบนกลางด้านล่าง	จัดเรียงแท็กในแนวตั้งภายในองค์ประกอบ HTML
ความกว้าง	ค่าตัวเลข	ระบุความกว้างของตารางรูปภาพหรือเซลล์ตาราง

สำหรับรายการที่สมบูรณ์ของ HTML5 แท็กและแอตทริบิวต์ที่เกี่ยวข้องโปรดตรวจสอบการอ้างอิงของเราเพื่อHTML5 แท็ก

แอตทริบิวต์ที่กำหนดเอง

คุณลักษณะใหม่ที่นำมาใช้ใน HTML 5 คือการเพิ่มแอตทริบิวต์ข้อมูลที่กำหนดเอง

แอตทริบิวต์ข้อมูลที่กำหนดเองเริ่มต้นด้วย data-และจะตั้งชื่อตามความต้องการของคุณ นี่คือตัวอย่างง่ายๆ -

<div class = "example" data-subject = "physics" data-level = "complex">
   ...
</div>

รหัสข้างต้นจะเป็น HTML5 ที่ถูกต้องอย่างสมบูรณ์แบบด้วยสองแอตทริบิวต์ที่กำหนดเองที่เรียกว่าdatasubjectและข้อมูลระดับ คุณจะสามารถรับค่าของแอตทริบิวต์เหล่านี้โดยใช้ JavaScript APIs หรือ CSS ในลักษณะเดียวกันกับที่คุณได้รับสำหรับแอตทริบิวต์มาตรฐาน