คำแนะนำทีละขั้นตอนสำหรับแอตทริบิวต์ HTML

แอตทริบิวต์ HTML กำหนดคุณสมบัติเพิ่มเติมสำหรับองค์ประกอบ HTML มีการระบุไว้ในแท็กเปิดขององค์ประกอบ HTML และองค์ประกอบบางอย่างจำเป็นต้องมีแอตทริบิวต์ในการทำงาน

แอตทริบิวต์ HTML คืออะไร และคุณใช้งานอย่างไร เมื่อคุณกำลังเรียนรู้ HTML คุณอาจพบคำว่า attributes . แอตทริบิวต์ใช้เพื่อให้ข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบเฉพาะในหน้า HTML

แอตทริบิวต์ระบุไว้ในแท็กเปิดของเอกสาร HTML และมักจะระบุเป็นคู่ของชื่อ/ค่า ตัวอย่างเช่น คุณลักษณะที่เรียกว่า name ด้วยค่า value จะปรากฏดังนี้:name=value .

บทช่วยสอนนี้จะกล่าวถึง พื้นฐานของแอตทริบิวต์ใน HTML และเหตุผลที่ใช้โดยอ้างอิงกับตัวอย่าง นอกจากนี้ เราจะพูดถึงแอตทริบิวต์เอนกประสงค์บางรายการที่ใช้กับองค์ประกอบส่วนใหญ่ใน HTML และคุณมักจะพบเมื่อเขียนโค้ด

แอตทริบิวต์ HTML คืออะไร

ทุกองค์ประกอบในภาษามาร์กอัป HTML สามารถมีแอตทริบิวต์ ซึ่งใช้เพื่อกำหนดคุณสมบัติเพิ่มเติมที่องค์ประกอบนั้นถือครอง

ตัวอย่างเช่น เราอาจต้องการระบุแอตทริบิวต์ที่กำหนดความสูงของรูปภาพหรือค่าที่จัดเก็บโดยองค์ประกอบของแบบฟอร์ม คุณลักษณะเหล่านี้เฉพาะสำหรับองค์ประกอบ ซึ่งหมายความว่าสามารถใช้เพื่อปรับแต่งวิธีการทำงานขององค์ประกอบบางอย่างบนหน้าเว็บได้

ในบางกรณี แอตทริบิวต์ที่จำเป็นสำหรับองค์ประกอบ ตัวอย่างเช่น หากคุณกำลังทำงานกับ <a> แท็ก HTML คุณต้องกำหนด href เพื่อให้แท็กรู้ว่าควรชี้ไปที่ URL ใดเมื่อคลิก

มีสององค์ประกอบสำหรับแอตทริบิวต์ใน HTML:

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

• ชื่อ กำหนดชื่อแอตทริบิวต์ที่คุณกำลังสร้าง
• คุณค่า กำหนดค่าที่ถือโดยแอตทริบิวต์

สมมติว่าเราต้องการกำหนดลิงก์ที่ชี้ไปยังโฮมเพจของเว็บไซต์ Career Karma ในการทำเช่นนั้น เราสามารถใช้ <a> แท็กใน HTML อย่างไรก็ตาม หากเราต้องการให้แท็กเชื่อมโยงกับหน้าแรกของ Career Karma เราก็ต้องใช้ href แอตทริบิวต์

นี่คือตัวอย่าง <a> แท็กที่เชื่อมโยงไปยังโฮมเพจ Career Karma:

<a href="https://careerkarma.com/">Career Karma</a>

แท็กนี้ใช้แอตทริบิวต์ที่เรียกว่า href และกำหนดค่าเป็น “https://careerkarma.com/” ซึ่งเป็น URL ของหน้าแรกของ Career Karma

คุณลักษณะใน HTML ไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ แต่คุณลักษณะมักจะเขียนด้วยตัวพิมพ์เล็ก

อัญประกาศเดี่ยวและคู่ HTML

เมื่อคุณกำหนดค่าให้กับแอตทริบิวต์ คุณสามารถใช้ทั้งเครื่องหมายคำพูดเดี่ยวและคู่ การใช้เครื่องหมายคำพูดคู่เป็นวิธีที่พบได้บ่อยที่สุด (และเป็นวิธีที่เราใช้ในตัวอย่างก่อนหน้านี้) อย่างไรก็ตาม วิธีการที่คุณใช้ขึ้นอยู่กับเนื้อหาของแอตทริบิวต์ของคุณ

สมมติว่าเรากำลังสร้างองค์ประกอบแบบฟอร์มที่มีค่า John ‘Rocketman’ Smith . ในกรณีนี้ เนื่องจากค่าของเราประกอบด้วยเครื่องหมายคำพูดเดี่ยว เราจึงควรใช้เครื่องหมายคำพูดคู่สำหรับชื่อแอตทริบิวต์ของเรา นี่คือรหัสที่เราจะใช้ในการประกาศแอตทริบิวต์นี้:

<input type="text" value="John 'Rocketman' Smith">

ในทางกลับกัน สมมติว่าค่าของเรามีเครื่องหมายคำพูดคู่และถูกแทนที่ด้วย John “Rocketman” Smith . ในกรณีนี้ เราต้องการใช้เครื่องหมายคำพูดเดี่ยวเพื่อกำหนดแอตทริบิวต์ของเรา นี่คือรหัสที่เราจะใช้:

<input type="text" value='John "Rocketman" Smith'>

วิธีใช้แอตทริบิวต์บูลีน HTML

คุณลักษณะบางอย่างไม่ได้ใช้โครงสร้างคู่ชื่อ/ค่า เราเรียกสิ่งเหล่านี้ว่าเป็นแอตทริบิวต์บูลีน แอตทริบิวต์เหล่านี้มีได้เฉพาะค่าจริง-เท็จ และค่าของแอตทริบิวต์จะถูกตั้งค่าเป็น "จริง" หากระบุ และเป็นเท็จหากไม่ได้ระบุ

แอตทริบิวต์บูลีนมักใช้ในรูปแบบ HTML สมมติว่าเรากำลังสร้างฟิลด์แบบฟอร์มที่ขอชื่อจากผู้ใช้ เราต้องการให้ฟิลด์แบบฟอร์มนี้เป็นฟิลด์บังคับโดยค่าเริ่มต้น เราสามารถใช้ required แอตทริบิวต์บูลีนเพื่อให้งานนี้สำเร็จ:

<input type="text" value="Name" required>

ในตัวอย่างนี้ เราได้กำหนดแท็กอินพุตที่มีสามแอตทริบิวต์ สองแอตทริบิวต์แรก type และ value ให้ใช้โครงสร้างชื่อ/ค่า คุณลักษณะที่สาม required เป็นแอตทริบิวต์บูลีน เนื่องจากเราได้ระบุ required แอตทริบิวต์บูลีน ค่าของมันถูกตั้งค่าเป็นจริง

วิธีใช้แอตทริบิวต์ HTML มาตรฐาน

มีแอตทริบิวต์ HTML บางส่วนที่ใช้กับทุกองค์ประกอบใน HTML สิ่งเหล่านี้เรียกว่าแอตทริบิวต์สากล

คุณมักจะพบสิ่งเหล่านี้ในหน้าเว็บ ดังนั้นสิ่งสำคัญคือคุณต้องรู้ว่ามันคืออะไรและทำงานอย่างไร มาดูแอตทริบิวต์ HTML มาตรฐานทั่วไปสี่รายการที่ใช้กับองค์ประกอบกัน

แอตทริบิวต์รหัส HTML

id แอตทริบิวต์ให้องค์ประกอบตัวระบุที่ไม่ซ้ำกัน แอตทริบิวต์ id นั้นไม่ได้ส่งผลต่อลักษณะที่ปรากฏขององค์ประกอบ HTML แต่ให้คุณเลือกองค์ประกอบเฉพาะเพื่อจัดการเมื่อคุณทำงานกับ CSS หรือ JavaScript

รหัสที่คุณกำหนดองค์ประกอบที่กำหนดควรไม่ซ้ำกันในเอกสาร

นี่คือตัวอย่างแอตทริบิวต์ id ที่ใช้ใน <p> แท็ก:

<p id="secondParagraph">Hello, there! Welcome to my site.</p>

ในตัวอย่างนี้ เราได้กำหนด <p> . ของเรา แท็กแอตทริบิวต์ id ด้วยค่า secondParagraph .

แอตทริบิวต์ชื่อ HTML

แอตทริบิวต์ชื่อ HTML มักใช้เพื่ออธิบายองค์ประกอบหรือเนื้อหา ค่าที่เก็บไว้ในแอตทริบิวต์ชื่อจะแสดงเป็นคำแนะนำเครื่องมือซึ่งจะปรากฏขึ้นเมื่อผู้ใช้วางเคอร์เซอร์เหนือองค์ประกอบนั้นด้วยเคอร์เซอร์

สมมติว่าเรามีช่องใส่ข้อมูลที่รวบรวมชื่อผู้ใช้ เราต้องการแสดง This field is required เมื่อผู้ใช้วางเมาส์เหนือสนาม เราสามารถบรรลุเป้าหมายนี้โดยใช้รหัสต่อไปนี้:

<input type="text" title="This field is required">

เมื่อเราวางเมาส์เหนือช่องข้อความ คำแนะนำเครื่องมือต่อไปนี้จะปรากฏขึ้น:

แอตทริบิวต์รูปแบบ HTML

แอตทริบิวต์สไตล์ HTML ใช้เพื่อระบุสไตล์ CSS สำหรับองค์ประกอบเฉพาะ วิธีการจัดสไตล์องค์ประกอบนี้เรียกว่าการสร้างสไตล์อินไลน์

สมมติว่าเรากำลังสร้างย่อหน้าของข้อความที่ต้องการให้ปรากฏเป็นสีเทา เราสามารถใช้แอตทริบิวต์ style เพื่อระบุสีของข้อความของเราได้ นี่คือรหัสที่เราสามารถใช้ทำงานนี้ให้สำเร็จ:

<p style="color: gray;">Hello, there! This is my website.</p>

นี่คือผลลัพธ์ของรหัสของเรา:

อย่างที่คุณเห็น สีของข้อความของเราเปลี่ยนเป็นสีเทา เนื่องจากเราได้ระบุแอตทริบิวต์รูปแบบและเปลี่ยน color สไตล์ให้เท่ากับ gray .

แอตทริบิวต์ HTML เฉพาะองค์ประกอบ

มีแอตทริบิวต์อื่นๆ มากมายที่คุณอาจพบซึ่งเฉพาะกับองค์ประกอบหนึ่งๆ ต่อไปนี้คือตัวอย่างบางส่วน:

img src

<img src="source.png">

ในตัวอย่างนี้ เราได้ระบุแอตทริบิวต์ src คุณลักษณะนี้ใช้กับ img เพื่อชี้ไปยังไฟล์ที่แท็กควรแสดงบนหน้าเว็บ

a href

<a href="https://careerkarma.com/">Career Karma homepage</a>

href แอตทริบิวต์ถูกใช้ในตัวอย่างนี้เพื่อบอก <a> แท็กไซต์ที่จะนำผู้ใช้ไปเมื่อคลิกลิงก์

img alt

<img src="source.png" alt="Image of a book">

ในโค้ดของเรา เราได้ระบุ alt คุณลักษณะ. แอตทริบิวต์นี้เฉพาะสำหรับแท็ก img และระบุข้อความทางเลือกที่หน้าเว็บจะประมวลผลหากไม่สามารถแสดงภาพได้

แอตทริบิวต์ alt ใน HTML สามารถอ่านได้โดยโปรแกรมอ่านหน้าจอ ดังนั้นผู้ที่มีความบกพร่องทางการมองเห็นซึ่งต้องใช้โปรแกรมอ่านหน้าจอจึงยังคงเข้าใจหน้าเว็บของเราได้

วิธีใช้แอตทริบิวต์ HTML:บทสรุป

แอตทริบิวต์เป็นคุณสมบัติเพิ่มเติมที่ใช้กับองค์ประกอบเฉพาะใน HTML แอตทริบิวต์ระบุไว้ในแท็กเปิดขององค์ประกอบเสมอ และมักใช้คู่ชื่อ/ค่า

บทแนะนำนี้อธิบายโดยอ้างอิงถึงตัวอย่าง พื้นฐานของแอตทริบิวต์ใน HTML แอตทริบิวต์บูลีน แอตทริบิวต์ HTML มาตรฐานบางส่วน และแอตทริบิวต์เฉพาะบางองค์ประกอบ ตอนนี้คุณรู้วิธีใช้แอตทริบิวต์ใน HTML แล้ว