Attributes

HTML5 element สามารถมีตัวแปรได้หลายตัว ตัวแปรจะแสดงข้อมูลรายละเอียดของ element นั้นๆอย่างละเอียดขึ้น และจะอยู่ใน open tag (<...>) เช่น เราจะสร้าง link element เราจะใช้ <a> tag ส่วนตัว attribute เราจะเขียนตามตัวแปร href-attribute

<a href="http://www.myurl.com">This is a link</a>

ดังที่เห็นในตัวอย่าง link element ประกอบด้วย open tag (tag เปิด) <a> และ closing tag </a> (tag ปิด) ข้อมูลที่เราจะแสดงใน link element คือ "This is a link" แต่ ข้างใน tag เปิด จะใส่ค่าตัวแปรไว้ที href ใน href จะต้องใส่ค่าให้กับลักษณะนั้นเสมอ ในที่นี้คือ http://www.myurl.com เพราะฉะนั้นทุกครั้งที่ element มีตัวแปร ต้องเขียนในรูปแบบ attribute="value" เสมอ

ต้องจำไว้ว่า ชื่อของตัวแปรต้องตามด้วยเครื่องหมายเท่ากับ = และค่าของตัวแปรต้องอยู่ในเครื่องหมายคำพูด "..." เสมอ ใน HTML5 เราสามารถละเครื่องหมายคำพูดออกได้ แต่มันจะเพิ่มความเสี่ยงของความผิดพลาดในการเขียนโปรแกรมได้ และต้องระวังการใช้ restricted character (คำสงวน) ด้วย เช่น >, =, หรือช่องว่าง ที่นี้เรามาดูตัวอย่างของ image element บ้าง

<img src="my-puppy.jpg" alt="This is a picture of my puppy, Bob">

ในตัวอย่างนี้เรามี alt-attribute alt ย่อมาจาก alternate text ในเครื่องหมายคำพูดจะแสดงข้อมูลหรือค่าของ alt-attribute ซึ่งในประโยคจะมีช่องว่างระหว่างคำ เราจะเขียนตามแบบข้างล่างนี้ไม่ได้

<img src="my-puppy.jpg" alt=This is a picture of my puppy, Bob>

ถ้าเขียนแบบนั้นไป เบราว์เซอร์ จะถือว่าใน alt-attribute มีแค่ "this" และข้อมูลที่เหลือ "a picture of my puppy, Bob" เบราว์เซอร์จะแสดงค่าออกมาทาง webpage ในแบบที่เราไม่ต้องการ

สรุป

• HTML element สามารถมีตัวแปรได้
• รูปแบบของ attribute คือ attribute="value"
• Attribute (ตัวแปร) จะแสดงข้อมูลรายละเอียดของ element นั้นๆอย่างละเอียดขึ้น
• Attribute จะอยู่ใน open tag (<...>)
• เราสามารถละเครื่องหมายคำพูดออกได้ แต่มันจะเพิ่มความเสี่ยงของความผิดพลาดในการเขียนโปรแกรมได้

มาถึงตอนนี้ เราได้อธิบายถึงพื้นฐานของ HTML ในบทต่อไปเราจะพูดถึงรายละเอียดของ webpage ที่ใช้งานจริง