HTML Attributes เป็นการใส่หรือกำหนดลักษณะพิเศษให้กับแท็ก (Tag) ต่างๆ โดยจะอยู่ภายในองค์ประกอบ (Element) ของ HTML โดยมีกฎดังนี้:
- HTML Elements สามารถมี แอตทริบิวต์ (Attributes) ได้
- Attributes จะเป็น การกำหนดข้อมูลต่าง ๆ เกี่ยวกับ Elements
- Attributes จะต้อง ถูกกำหนดใน tag เปิด ของ Elements เท่านั้น
- Attributes จะมาคู่กันในรูปแบบ ชื่อและค่า (
name="value")
แอตทริบิวต์ href
แท็ก <a> ใช้สำหรับสร้าง ลิงก์ (Hyperlink)
โดย href จะระบุ URL หรือที่อยู่ของหน้าเว็บปลายทาง
ตัวอย่างการใช้งาน
<a href="https://www.hostatom.com/">เข้าชมเว็บของ hostatom</a>
สามารถศึกษาเพิ่มเติมเกี่ยวกับการลิงก์ได้ในบทเรียน HTML Links
แอตทริบิวต์ src
แท็ก <img> ใช้สำหรับแทรกรูปภาพในหน้าเว็บ
โดยแอตทริบิวต์ src จะระบุ เส้นทางของไฟล์รูปภาพ
<img src="images/img_white_cat.png">
มี 2 วิธีในการระบุ URL ของรูปภาพใน src:
1. Absolute URL
คือ การลิงก์ไปยังรูปภาพนอกเว็บไซต์ หรือเป็นการดึงภาพจากเว็บไซต์อื่น
<img src="https://example.com/images/banner.webp">
2. Relative URL
/ นำหน้า จะอ้างอิงหน้าเว็บปัจจุบัน
<img src="img_white_cat.png">
/ นำหน้า จะอ้างอิงโดเมนหลัก (root directory) ของเว็บไซต์
<img src="/images/img_white_cat.png">
แอตทริบิวต์ width และ height
<img> ควรกำหนดขนาดรูปภาพโดยใช้ width และ height (หน่วยเป็นพิกเซล)
<img src="images/img_white_cat.png" width="500" height="333">
แอตทริบิวต์ alt
แอตทริบิวต์ alt ใช้สำหรับระบุ ข้อความสำรอง (Alternative Text)
ซึ่งจะแสดงขึ้นเมื่อรูปภาพไม่สามารถโหลดได้
เช่น กรณีอินเทอร์เน็ตช้า หรือไฟล์หาย
<img src="images/img_white_cat.png" alt="Cute Kitty" width="507" height="333">
ตัวอย่าง กรณีที่หาภาพไม่พบ
<img src="pict-for-html.png" alt="Cute Kitty">
แอตทริบิวต์ style
<p style="color:red;">ข้อความนี้สีแดง</p>
แอตทริบิวต์ lang
ควรระบุแอตทริบิวต์ lang ภายในแท็ก <html>
เพื่อบอกภาษาหลักของหน้าเว็บให้กับเบราว์เซอร์และเครื่องมือค้นหา (Search Engines)
ตัวอย่าง ระบุให้หน้า HTML เป็นภาษาอังกฤษ
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
"en-US" หมายถึง ภาษาอังกฤษ (ประเทศสหรัฐอเมริกา)
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
สามารถดูรหัสภาษาเพิ่มเติมได้ที่ Language Code
แอตทริบิวต์ title
<p title="แสดงข้อความของ Title">เมื่อเอาเมาส์ไปวางไว้ที่ข้อความ title ที่สร้างไว้ก็จะแสดง</p>
แอตทริบิวต์เป็นตัวพิมพ์เล็กเสมอ
HTML ไม่บังคับให้ใช้ตัวพิมพ์เล็ก
อย่างไรก็ตาม แนะนำให้ใช้ตัวพิมพ์เล็กทั้งหมด เช่น title
เพราะช่วยให้โค้ดอ่านง่าย บางภาษาหรือมาตรฐานอย่าง XHTML
กำหนดให้ใช้เฉพาะตัวพิมพ์เล็กเท่านั้น
ครอบค่าแอตทริบิวต์ด้วยอัญประกาศ
แนะนำให้ใส่อัญประกาศ (Quote) เสมอ เพื่อป้องกันข้อผิดพลาดในการแสดงผล
<a href="https://www.hostatom.com/">โฮสอะตอมบริการ Web Hosting ที่ดีที่สุด</a>
<a href=https://www.hostatom.com/>โฮสอะตอมบริการ Web Hosting ที่ดีที่สุด</a>
หากค่าของแอตทริบิวต์มีช่องว่าง (space)
ต้องใส่อัญประกาศ ไม่เช่นนั้นจะแสดงผลผิดพลาด
<p title=การใช้งาน Quote>
อย่าลืมใส่ Quote ในกรณีที่มีการเว้นวรรคข้อความ
</p>
ใช้อัญประกาศเดี่ยวหรือคู่ ?
"" แต่คุณสามารถใช้ '' ได้เช่นกัน ในบางกรณีที่ค่าภายในมีเครื่องหมายคู่
สามารถสลับมาใช้เครื่องหมายเดี่ยวได้ เช่น:
<p title='John "ShotGun" Nelson'>
<p title="John 'ShotGun' Nelson">
สรุป
- ทุกองค์ประกอบของ HTML สามารถมีแอตทริบิวต์ (Attributes) ได้
hrefของ<a>ใช้ระบุ URL ของเพจที่ต้องการจะลิงก์ไปsrcของ<img>ใช้ระบุ ตำแหน่งไฟล์ (Path) ของรูปที่ต้องการแสดงwidthและheightของ<img>ใช้ระบุขนาดของรูปภาพaltของ<img>ใช้แสดงคำอธิบายของรูปภาพstyleใช้เพิ่มสไตล์ เช่น สี, รูปแบบตัวอักษร, ขนาด และอื่นๆlangของ<html>ใช้ระบุภาษาที่ใช้ในหน้าเว็บtitleใช้เพิ่มคำอธิบายสั้น ๆ เมื่อเลื่อนเมาส์