ภาษา HTML มีองค์ประกอบหลายอย่าง ซึ่งรวมถึง คอมโพเนนต์เว็บไซต์ที่ ใช้ทั่วไปเช่นย่อหน้าหัวเรื่องลิงก์และรูปภาพ นอกจากนี้ยังมีองค์ประกอบใหม่ ๆ ที่นำมาใช้กับ HTML5 ซึ่ง ได้แก่ ส่วนหัว nav ส่วนท้ายและอื่น ๆ องค์ประกอบ HTML ทั้งหมดนี้ใช้เพื่อสร้างโครงสร้างของเอกสารและให้ความหมาย หากต้องการเพิ่มความหมายให้กับองค์ประกอบคุณสามารถให้แอตทริบิวต์ได้
แท็กเปิด HTML พื้นฐานเริ่มต้นด้วย <อักขระ ที่ตามด้วยชื่อแท็กและสุดท้ายคุณทำแท็กด้วยตัวอักษร> ตัวอย่างเช่นแท็กย่อหน้าเปิดจะเขียนเช่นนี้:
ในการเพิ่มแอ็ตทริบิวต์ลงในแท็ก HTML ของคุณก่อนอื่นคุณต้องเว้นวรรคหลังชื่อแท็ก (ในกรณีนี้คือ "p") จากนั้นคุณจะเพิ่มชื่อแอตทริบิวต์ที่คุณต้องการใช้และตามด้วยเครื่องหมายเท่ากับ สุดท้ายค่าแอตทริบิวต์จะอยู่ในเครื่องหมายคำพูด ตัวอย่างเช่น:
แท็กสามารถมีหลายแอตทริบิวต์ คุณจะแยกแอตทริบิวต์แต่ละตัวออกจากที่อื่นด้วยช่องว่าง
องค์ประกอบที่จำเป็นต้องใช้
องค์ประกอบ HTML บางอย่างจำเป็นต้องมีแอตทริบิวต์ถ้าคุณต้องการให้ทำงานตามที่ตั้งใจไว้ องค์ประกอบรูปภาพและองค์ประกอบลิงก์เป็นตัวอย่างสองแบบนี้
องค์ประกอบรูปภาพต้องใช้แอตทริบิวต์ "src" แอตทริบิวต์ดังกล่าวบอกเบราเซอร์ว่าคุณต้องการใช้ภาพใดในตำแหน่งนั้น ค่าของแอ็ตทริบิวต์คือเส้นทางของไฟล์ไปยังรูปภาพ ตัวอย่างเช่น:
คุณจะสังเกตเห็นว่าฉันได้เพิ่มแอตทริบิวต์อื่นในองค์ประกอบนี้ "alt" หรือแอตทริบิวต์ข้อความอื่น นี่ไม่ใช่ลักษณะที่จำเป็นสำหรับภาพ แต่เป็นวิธีที่ดีที่สุดในการใส่เนื้อหาสำหรับการเข้าถึงนี้เสมอ ข้อความที่แสดงอยู่ในค่าของแอตทริบิวต์ alt คือสิ่งที่จะแสดงผลหาก รูปภาพไม่สามารถโหลดได้ ด้วยเหตุผลบางประการ
องค์ประกอบอื่นที่ต้องใช้แอตทริบิวต์เฉพาะคือ anchor หรือ link tag องค์ประกอบนี้ต้องมีแอตทริบิวต์ "href" ซึ่งย่อมาจาก "การอ้างอิงแบบไฮเปอร์เท็กซ์" นั่นคือวิธีที่แฟนซีบอกว่า "ลิงก์นี้ควรไปที่ใด" เช่นเดียวกับองค์ประกอบรูปภาพจำเป็นต้องทราบว่าจะโหลดรูปภาพใดแท็กลิงก์ต้อง ทราบว่าควรจะทำอย่างไรต่อไปนี้เป็นวิธีที่แท็กลิงก์อาจมีลักษณะดังนี้
ลิงก์ดังกล่าวจะนำผู้ใช้ไปยังเว็บไซต์ที่ระบุไว้ในค่าของแอตทริบิวต์ ในกรณีนี้เป็นหน้าหลักของ.
แอตทริบิวต์เป็น CSS Hooks
การใช้คุณลักษณะอื่น ๆ ก็คือเมื่อใช้เป็น "hooks" สำหรับรูปแบบ CSS เนื่องจากมาตรฐานเว็บกำหนดว่าคุณควรรักษาโครงสร้างเพจของคุณไว้ (HTML) แยกจากสไตล์ (CSS) คุณใช้แอ็ตทริบิวต์ตะขอเหล่านี้ใน CSS เพื่อกำหนดวิธีแสดงหน้าเว็บที่มีโครงสร้างในเว็บเบราเซอร์ ตัวอย่างเช่นคุณอาจมีมาร์คอัปนี้ในเอกสาร HTML ของคุณ
หากคุณต้องการให้แผนกดังกล่าวมีสีพื้นหลังเป็นสีดำ (# 000) และขนาดแบบอักษร 1.5em คุณจะเพิ่ม CSS นี้ลงใน CSS:
.featured {background-color: # 000; ขนาดอักษร: 1.5em;}แอตทริบิวต์คลาส "featured" จะทำหน้าที่เป็นเบ็ดที่เราใช้ใน CSS เพื่อใช้สไตล์กับพื้นที่นั้น เรายังสามารถให้เราเป็นแอตทริบิวต์ ID ได้ที่นี่หากเราต้องการ ทั้งคลาสและรหัสเป็นแอตทริบิวต์สากลซึ่งหมายความว่าสามารถเพิ่มองค์ประกอบใดก็ได้ นอกจากนี้ยังสามารถกำหนดเป้าหมายทั้งสองแบบด้วยสไตล์ CSS เฉพาะเพื่อกำหนดลักษณะที่ปรากฏขององค์ประกอบนั้น
เกี่ยวกับ Javascript
สุดท้ายการใช้แอตทริบิวต์ในองค์ประกอบ HTML บางอย่างเป็นสิ่งที่คุณอาจใช้ใน Javascript หากคุณมีสคริปต์ที่กำลังมองหาองค์ประกอบที่มีแอตทริบิวต์ ID เฉพาะซึ่งเป็นอีกหนึ่งการใช้งานชิ้นส่วนภาษา HTML ฉบับนี้