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


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

HTML Attributes

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

Attributes: title

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

ตัวอย่าง

<p title="I'm a tooltip">
This is a paragraph.
</p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Attributes: href

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

ตัวอย่าง

<a href="http://www.code-th.com/">This is a link</a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Attributes: width, height

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

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

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

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

ตัวอย่าง

<img src="code_th.jpg" alt="code-th.com" width="50" height="50">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

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

ใช้ Single หรือ Double Quotes ?

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

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


<p title="He says 'Hello' to Sam"></p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

หรือ

<p title='He says "Hello" to Sam'></p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

บทสรุป

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

HTML Attributes

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

Attributeอธิบาย
altแสดงข้อความในกรณีโหลดรูปไม่ขึ้น
disabledยกเลิกการทำงาน Input Element
hrefใส่ url ของลิงก์
idกำหนด ID ของ Element ซึ่งในหนึ่งเอกสาร HTML จะต้องไม่ซ้ำกัน
srcระบุที่อยู่ของไฟล์รูป
styleใส่โค้ด CSS ลงไปเพื่อตกแต่ง Element
classระบุคลาสของ CSS
titleข้อมูลเพิ่มเติม จะแสดงในรูปแบบของ Tool-tip

แสดงความคิดเห็น

0ความคิดเห็น

แสดงความคิดเห็น (0)