HTML Attributes เป็นการใส่หรือกำหนดลักษณะพิเศษให้กับ tag ต่างๆ โดยจะอยู่ภายใน elements หรือ tag โดยจะมีกฎ ดังนี้
- HTML elements สามารถมี Attributes ได้
- Attributes จะเป็นการกำหนดข้อมูลต่างๆ เกี่ยวกับ elements
- Attributes จะต้องถูกกำหนดใน tag เปิดของ elements เท่านั้น
- Attributes จะมาคู่กันในรูปแบบ name/value อย่างเช่น name=”value”
href Attributes
tag <a> จะเป็น tag ที่เกี่ยวกับลิงก์ href จะเป็น attributes ที่ใช้ระบุ URL หน้าเพจที่จะไป
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<body>
<h2>The href Attribute</h2>
<p>tag จะเป็น tag ที่เกี่ยวกับลิงก์ href จะเป็น attributes ที่ใช้ระบุ URL หน้าเพจที่จะไป:</p>
<a href="https://www.hostatom.com/">เข้าชมเว็บของ hostatom</a>
</body>
</html>รูปแบบที่แสดง
คุณจะเรียนรู้เพิ่มเติมเกี่ยวกับการลิงก์ได้ในบทเรียน HTML Links
src Attribute
tag <img> จะใช้ในกรณีที่มีการใส่ภาพลงในหน้าเพจ ส่วน <scr> จะเป็นการระบุที่อยู่ของภาพ
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<body>
<h2>The src Attribute</h2>
<p>tag img จะใช้ในกรณีที่มีการใส่ภาพลงในหน้าเพจ ส่วน scr จะเป็นการระบุที่อยู่ของภาพ:</p>
<img src="https://kb.hostatom.com/wp-content/uploads/2022/11/pict-for-html.png" width="500" height="333">
</body>
</html>รูปแบบที่แสดง
สำหรับการระบุ URL ใน scr attribute มี 2 แบบ
- Absolute URL – จะเป็นการลิงก์ไปยังรูปที่อยู่ภายนอกโฮสติ้งที่ใช้งานอยู่ หรือลิงก์ไปยังเว็บไซต์อื่น เช่น src=”https://kb.hostatom.com/wp-content/uploads/2022/11/pict-for-html.png”
หมายเหตุ การนำรูปมาใช้นั้นอาจต้องระวังเรื่องลิขสิทธิ์ด้วยนะคะ และเมื่อคุณใช้ภาพที่มาจากเว็บไซต์อื่น คุณจะไม่สามารถควบคุมคุณภาพของรูปรวมไปถึง ภาพถูกลบหรือถูกเปลี่ยนได้
- Relative URL – เป็นการลิงก์ภาพที่อยู่ภายในโฮสติ้งที่เว็บไซต์ใช้งานอยู่ ซึ่ง URL ในที่นี้จะไม่รวมกับชื่อโดเมน ถ้า URL เริ่มต้นโดยไม่มีเครื่องหมาย “/” นั่นหมายถึง จะเป็นการเรียกใช้ไฟล์ โดยการเรียกจากชื่อโดเมน แล้วต่อด้วย path ที่ใส่ใน src เช่น src=”pict-for-html.png” แต่ถ้ามีเครื่องหมาย “/” หน้า URL หมายถึง จะเป็นการเรียกใช้ไฟล์จากที่อยู่ไฟล์ปัจจุบัน เช่น src=”/images/pict-for-html.png”
เคล็ดลับ: วิธีืที่ดีที่สุดในการระบุ URL ของภาพ แนะนำให้ใช้วิธีที่ 2 Relative URL เพราะหากมีการเปลี่ยนชื่อโดเมนไฟล์ภาพก็จะยังไม่หายหรือพัง
width and height Attributes
ภายใต้ tag <img> จะมีการระบุความสูงและความกว้างของภาพ (ขนาดเป็น pixel)
โดยจะใช้ attributes width และ height
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<body>
<h2>Width and Height Attributes</h2>
<p>width กับ height เป็น attributes ของ img tag</p>
<p>ใช้ระบุความสูงและความกว้างของภาพ </p>
<img src="https://kb.hostatom.com/wp-content/uploads/2022/11/pict-for-html.png" width="500" height="333">
</body>
</html>รูปแบบที่แสดง
alt Attribute
alt ถือว่าเป็น attributes ที่สำคัญสำหรับ tag <img> โดยจะเป็นข้อความ หรือ คำอธิบายสำหรับรูปภาพ ซึ่ง attributes alt จะช่วยให้ทราบว่าสาเหตุที่รูปไม่แสดงเกิดจากอะไร เช่นไฟล์ภาพหายไป หรือการเชื่อมต่ออินเตอร์ที่ใช้เวลานาน หรือชื่อไฟล์ผิด เป็นต้น
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<body>
<h2>The alt Attribute</h2>
<p>attribute alt โดยจะเป็นข้อความ หรือคำอธิบายสำหรับรูปภาพ</p>
<img src="https://kb.hostatom.com/wp-content/uploads/2022/11/pict-for-html.png" alt="Cute Kitty" width="507" height="333">
</body>
</html>รูปแบบที่แสดง
ตัวอย่างในกรณีที่หาภาพไม่พบ
<!DOCTYPE html>
<html>
<body>
<img src="pict-for-html.png" alt="Cute Kitty">
<p>ในกรณีที่ภาพมีปัญหาหรือใช้งานไม่ได้</p>
<p>ค่า alt จะถูกแสดงแทน</p>
</body>
</html>
style Attribute
attribute style ใช้สำหรับเพิ่มรูปแบบให้กับ elements อย่างเช่น สี, รูปแบบตัวอักษร, ขนาด และอื่นๆ
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<body>
<h2>The style Attribute</h2>
<p>attribute style ใช้เพิ่มรูปแบบให้กับ elements</p>
<p>อย่างเช่น สี, รูปแบบตัวอักษร, ขนาด และอื่นๆ</p>
<p style="color:red;">ข้อความนี้สีแดง</p>
</body>
</html>
lang Attribute
attribute lang จะเป็นการระบุภาษาที่ใช้ในหน้าเว็บ ว่าเป็นภาษาอะไร โดยจะอยู่ใน tag <html>
ตัวอย่างการระบุให้หน้า html เป็นภาษาอังกฤษ
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>attribute lang สามารถใช้รหัสประเทศแทนก็ได้นะคะ ซึ่งรหัสจะประกอบด้วยตัวอักษร 2 แรกของชื่อภาษา และ ตัวอักษร 2 ตัวของชื่อประเทศ
ตัวอย่างการระบุเป็นภาษาอังกฤษ ของประเทศสหรัฐอเมริกา
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>title Attribute
attribute title เป็นคำอธิบายของข้อความ โดยที่เมื่อเอาเมาส์ไปวางไว้ที่ข้อความ title ที่สร้างไว้ก็จะแสดง
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<body>
<h2>The title Attribute</h2>
<p title="แสดงข้อความของ Title">เมื่อเอาเมาส์ไปวางไว้ที่ข้อความ title ที่สร้างไว้ก็จะแสดง</p>
</body>
</html>
แนะนำ: เวลาพิมพ์ attributes ให้ใช้ตัวพิมพ์เล็กทั้งหมด
ปกติแล้ว มาตรฐานของ HTML จะไม่พิมพ์ชื่อ attributes ด้วยตัวพิมพ์เล็ก แต่ทว่า attribute title รวมไปถึง attributes อื่นๆ ทั้งหมด จะใช้ตัวอักษรพิมพ์เล็กหรือพิมพ์ใหญ่ก็ได้ เช่น title หรือ TITLE ก็สามารถใช้ได้เหมือนกัน
แต่แนะนำให้ใช้ตัวพิมพ์เล็กจะดีกว่า เพราะบางโปรแกรมอย่าง XHTML นั้นเวลาพิมพ์ attributes จะต้องใช้ตัวพิมพ์เล็กเพียงอย่างเดียวเท่านั้น
แนะนำ: ค่าของ attributes จะต้องอยู่ใน ” ” (Quote) เสมอ
ตามมาตรฐานของ HTML ค่าของ attributes ไม่จำเป็นจะต้องอยู่ใน ” ” แต่อย่างไรก็ตาม แนะนำให้ใส่ไว้ใน ” ” จะดีกว่า เพราะบางโปรแกรมอย่าง XHTML นั้น
เวลาใส่ค่า attributes จะต้องอยู่ใน ” ” หรือ quote เสมอ
ตัวอย่างการเขียน attributes ที่ดี
<a href="https://www.hostatom.com/">โฮสอะตอมบริการ Web Hosting ที่ดีที่สุด</a>ตัวอย่างการเขียน attributes ที่ไม่ดี
<a href=https://www.hostatom.com/>โฮสอะตอมบริการ Web Hosting ที่ดีที่สุด</a>บางครั้งก็ต้องใช้เครื่องหมาย ” ” จากตัวอย่างด้านล่างนี้ attribute title จะไม่แสดง นั่นก็เพราะว่าข้อความใน title มีช่องว่าง
ตัวอย่างที่ไม่ใส่ ” ” หรือ quote
<!DOCTYPE html>
<html>
<body>
<h1>การใช้งาน Quote</h1>
<p title=การใช้งาน Quote>
อย่าลืมใส่ quite ในกรณีที่มีการเว้นวรรข้อความ
</p>
<p><b>
แต่ในกรณีนี้ หากไม่ใส่ Quote
เมื่อเอาเมาส์ไปวางที่ข้อความ จะแสดงแค่ข้อความแรกเท่านั้น
</b></p>
</body>
</html>
จะใช้ Quotes แบบเดี่ยว หรือแบบคู่?
Quotes แบบเดี่ยว คือ “ข้อความ“
Quotes แบบคู่ คือ ‘ข้อความ “ข้อความ“ ข้อความ‘
ซึ่งตามปกติแล้วใน HTML ค่า attributes จะใส่ Quotes แบบคู่ แต่ Quotes แบบเดี่ยว ก็สามารถใช้ได้เหมือนกัน
ตัวอย่างการใช้งาน Quotes แบบคู่
<p title='John "ShotGun" Nelson'>หรือจะสลับที่ Quotes
<!DOCTYPE html>
<html>
<body>
<h2>Quotes แบบเดี่ยว หรือแบบคู่</h2>
<p>ในบางที หากค่า attribute เป็นแบบ Quotes แบบคู่
อาจต้องใช้ Quotes แบบเดี่ยว:</p>
<p>นำเมาส์ไปวางไว้เหนือข้อความด้านล่างเพื่อดูความแตกต่าง</p>
<p title='John "ShotGun" Nelson'>John with double quotes</p>
<p title="John 'ShotGun' Nelson">John with single quotes</p>
</body>
</html>
สรุป
- elements ของ HTML ทั้งหมด สามารถมี attributes ได้
- attribute href ของ <a> จะใช้เพื่อระบุ URL ของเพจที่ต้องการจะลิงก์ไป
- attribute src ของ <img> จะใช้เพื่อระบุ path ของรูปที่ต้องการแสดง
- attribute width และ height ของ <img> จะใช้เพื่อระบุขนาดของรูปภาพ
- attribute alt ของ <img> จะใช้เพื่อแสดงคำอธิบายของรูปภาพ
- attribute style จะใช้เพื่อเพิ่มรูปแบบให้กับ elements อย่างเช่น สี, รูปแบบตัวอักษร, ขนาด และอื่นๆ
- attribute lang ของ <html> จะใช้เพื่อระบุภาษาที่ใช้ในหน้าเว็บ
- attribute title จะใช้เพื่อบอกข้อมูลที่สำคัญของ element
