บทความนี้ส่วนใหญ่แนะนำแอตทริบิวต์มาตรฐานและแอตทริบิวต์ที่กำหนดเองใน HTML5 บทความยังพูดถึงประเด็นความรู้ที่เกี่ยวข้องบางประการเกี่ยวกับการเข้าถึงแอตทริบิวต์ที่กำหนดเองเมื่อ JavaScript ดำเนินการ DOM ขอแนะนำมาก เพื่อนที่ต้องการมันสามารถอ้างถึงมันได้
ตามที่ระบุไว้ในไวยากรณ์ HTML5 องค์ประกอบสามารถมีคุณสมบัติในการตั้งค่าคุณสมบัติต่าง ๆ สำหรับองค์ประกอบ
คุณสมบัติบางอย่างถูกกำหนดให้เป็นทั่วโลกและสามารถใช้กับองค์ประกอบใด ๆ ในขณะที่อื่น ๆ ถูกกำหนดให้เป็นองค์ประกอบเฉพาะ คุณสมบัติทั้งหมดมีชื่อและค่าซึ่งดูเหมือนตัวอย่างต่อไปนี้
นี่คือตัวอย่างที่ใช้แอตทริบิวต์ HTML5 ที่แสดงวิธีการติดแท็กองค์ประกอบ DIV ด้วยแอตทริบิวต์และตัวอย่างค่าชื่อคลาส:
<div class = ตัวอย่าง> ... </div>
แอตทริบิวต์สามารถระบุได้ในแท็กเริ่มต้นเท่านั้นและต้องไม่ใช้ในแท็กปลาย
แอตทริบิวต์ HTML5 เป็นตัวพิมพ์ใหญ่และสามารถใช้เงินทุนทั้งหมดหรือผสมได้แม้ว่าการประชุมที่พบบ่อยที่สุดคือการใช้ตัวพิมพ์เล็กเสมอ
คุณลักษณะมาตรฐานคุณสมบัติที่แสดงด้านล่างได้รับการสนับสนุนโดยแท็ก HTML5 เกือบทั้งหมด
| คุณสมบัติ | ตัวเลือก | การทำงาน |
| AccessKey | ผู้ใช้กำหนด | กำหนดแป้นพิมพ์ลัดสำหรับการเข้าถึงองค์ประกอบ |
| จัดแนว | ขวา, ซ้าย, กึ่งกลาง | จัดตำแหน่งฉลากในแนวนอน |
| พื้นหลัง | url | ตั้งค่าภาพพื้นหลังด้านหลังองค์ประกอบ |
| สี bgcolor | ค่า, ค่าเลขฐานสิบหก, ค่า RGB | ตั้งค่าสีพื้นหลังด้านหลังองค์ประกอบ |
| ระดับ | ผู้ใช้กำหนด | จำแนกองค์ประกอบเพื่ออำนวยความสะดวกในการใช้แผ่นสไตล์ cascading |
| เป็นที่ชื่นชอบ | จริงเท็จ | กำหนดว่าผู้ใช้สามารถแก้ไขเนื้อหาขององค์ประกอบได้หรือไม่ |
| บริบท | รหัสเมนู | กำหนดเมนูบริบทสำหรับองค์ประกอบ |
| data-xxxx | ผู้ใช้กำหนด | คุณสมบัติที่กำหนดเอง ผู้เขียนเอกสาร HTML สามารถกำหนดคุณสมบัติของตนเองได้ คุณสมบัติที่กำหนดเองจะต้องเริ่มต้นด้วย data- |
| คลี่คลายได้ | จริงเท็จอัตโนมัติ | กำหนดว่าผู้ใช้สามารถลากองค์ประกอบหรือไม่ |
| ความสูง | ค่าตัวเลข | กำหนดความสูงของตารางภาพหรือเซลล์ตาราง |
| ที่ซ่อนอยู่ | ที่ซ่อนอยู่ | กำหนดว่าควรมองเห็นองค์ประกอบหรือไม่ |
| รหัสประจำตัว | ผู้ใช้กำหนด | องค์ประกอบชื่อสำหรับการใช้แผ่นสไตล์แบบเรียงซ้อนได้ง่าย |
| รายการ | รายการองค์ประกอบ | ใช้เพื่อรวมองค์ประกอบ |
| รายการ | รายการรายการ | ใช้เพื่อรวมรายการ |
| ตรวจการสะกดคำ | จริงเท็จ | กำหนดว่าองค์ประกอบจะต้องมีการสะกดคำหรือตรวจสอบข้อผิดพลาด |
| สไตล์ | CSS Stylesheet | กำหนดสไตล์อินไลน์สำหรับองค์ประกอบ |
| เรื่อง | ID ที่ผู้ใช้กำหนด | กำหนดรายการที่เกี่ยวข้องกับองค์ประกอบ |
| Tabindex | หมายเลขแท็บ | พิจารณาจากลำดับคีย์แท็บขององค์ประกอบ |
| ชื่อ | ผู้ใช้กำหนด | ชื่อป๊อปอัปขององค์ประกอบ |
| นำไปสู่ | ด้านบนตรงกลางด้านล่าง | การจัดแนวแนวตั้งของแท็กภายในองค์ประกอบ HTML |
| ความกว้าง | ค่าตัวเลข | กำหนดความกว้างของตารางรูปภาพและเซลล์ตาราง |
HTML5 ยังแนะนำคุณสมบัติใหม่ซึ่งคือการเพิ่มแอตทริบิวต์ข้อมูลที่กำหนดเอง
แอตทริบิวต์ข้อมูลที่กำหนดเองเริ่มต้นด้วยข้อมูล- และมีชื่อตามความต้องการของเรา นี่คือตัวอย่างง่ายๆ:
<div class = ตัวอย่างข้อมูล subject = ฟิสิกส์ระดับข้อมูล = ซับซ้อน>
-
</div>
ในตัวอย่างด้านบนคุณสมบัติที่กำหนดเองสองประการที่เรียกว่าข้อมูลย่อยและระดับข้อมูลนั้นใช้ได้อย่างสมบูรณ์ใน HTML5 นอกจากนี้เรายังสามารถใช้ JavaScript API หรือรับค่าของพวกเขาใน CSS ในลักษณะเดียวกันเพื่อรับแอตทริบิวต์มาตรฐาน
เพิ่มแอตทริบิวต์ที่กำหนดเองให้กับองค์ประกอบ HTML และเข้าถึงพวกเขาผ่าน JavaScript หากคุณเคยลองมาก่อนคุณจะพบว่ามันง่ายที่จะเพิกเฉยต่อการตรวจสอบแท็กและ HTML5 สามารถให้ความสามารถในการสร้างและใช้แอตทริบิวต์องค์ประกอบของคุณเองภายในเว็บเพจที่ถูกต้อง
สร้างไฟล์ HTML5:
หากคุณยังไม่ทราบว่าจะใช้อันไหนคุณสามารถคัดลอกรหัสต่อไปนี้:
XML/HTML รหัสคัดลอกเนื้อหาไปยังคลิปบอร์ด