รู้จักกับ Attribute (แอตทริบิวต์)

เนื้อหาหัวข้อ Attributes นี้ จะมีเนื้อหาเกี่ยวกับ HTML Elements เพิ่มเติม

HTML Attributes

• ทุกๆ HTML Elements สามารถมี Attributes ได้
• Attributes แสดงถึงข้อมูลเพิ่มเติมเกี่ยวกับ Element นั้นๆ
• Attributes จะถูกระบุอยู่ที่ Tag เปิดเท่านั้น
• Attributes จะมาในรูปแบบชื่อและค่าเสมอ เช่น name="value"

Attributes: title

ถ้าเราใส่ Attribute title ลงใน Tag <p> ค่าของ title จะปรากฎเป็น tooltip เมื่อคุณเอาเมาส์วางบนย่อหน้านั้นค้างไว้

Attributes: href

ลิงก์ HTML จะระบุด้วย Tag <a> ส่วน url ของลิงก์จะระบุอยู่ใน Attribute href

Attributes: width, height

รูปภาพใน HTML จะระบุด้วย Tag <img>

ส่วนที่อยู่ของไฟล์จะระบุอยู่ใน Attribute src

ขนาดของไฟล์จะระบุอยู่ใน Attribute width, height

กรณีไม่สามารถอ่านรูปภาพได้ ต้องการให้ขึ้นข้อความอะไรแทน จะระบุอยู่ใน Attribute alt

ใช้ Attributes ตัวพิมพ์เล็ก

แม้ว่าใน HTML5 การใช้ Attributes ตัวพิมพ์เล็กหรือตัวพิมพ์ใหญ่ไม่มีผลอะไรต่อการแสดงผล แต่คุณก็ควรจะใช้ตัวพิมพ์เล็กไว้ เพื่อการแสดงผลในประเภทเอกสารอื่นๆ เช่น XHTML

ใช้ Single หรือ Double Quotes ?

ปกติแล้ว Double Quotes จะเป็นที่นิยมใช้มากกว่า แต่ Single Quotes ก็สามารถใช้ได้เหมือนกัน

ในบางกรณี ถ้าค่าใน Attibute มี Double Quotes รวมอยู่ด้วย เราก็จำเป็นต้องใช้ Single Quotes

หรือ

บทสรุป

• ทุกๆ HTML Elements สามารถมี Attributes ได้
• title แสดงข้อมูล tool-tip เพิ่มเติม
• href ใส่ url ของลิงก์
src ระบุที่อยู่ของไฟล์รูป
• width และ height กำหนดขนาดของรูป
• alt แสดงข้อความในกรณีโหลดรูปไม่ขึ้น
• ใช้ตัวพิมพ์เล็ก
• ปกติให้ใช้ Double Quotes

HTML Attributes

ตัวอย่าง Attributes ที่จะได้เจอบ่อยๆ