tag ใน html คืออะไร..
แท็ก (Tag) ใน HTML คือ คำสั่งที่ใช้ในภาษา HTML เพื่อกำหนดโครงสร้างและรูปแบบของเนื้อหาบนหน้าเว็บ. แท็กจะอยู่ในเครื่องหมาย "<" และ ">" และมักจะทำงานเป็นคู่ คือมีแท็กเปิด (opening tag) และแท็กปิด (closing tag).
คำอธิบายเพิ่มเติม:
โครงสร้าง:
HTML แท็กประกอบด้วยชื่อแท็ก (tag name) และอาจมีแอตทริบิวต์ (attributes) ที่ให้ข้อมูลเพิ่มเติมเกี่ยวกับแท็กนั้นๆ.
การทำงาน:
แท็กบอกเบราว์เซอร์ (browser) ว่าจะแสดงผลเนื้อหาอย่างไร เช่น แท็ก <p> ใช้สำหรับย่อหน้า (paragraph), แท็ก <h1> ถึง <h6> ใช้สำหรับหัวข้อ (heading), และแท็ก <a> ใช้สำหรับสร้างลิงก์ (link).
ประเภทของแท็ก:
แท็กคู่ (Pair Tags/Container Tags): มีทั้งแท็กเปิดและแท็กปิด เช่น <p>...</p>, <div>...</div>, <span>...</span>.
แท็กเดี่ยว (Empty Tags/Self-Closing Tags): ไม่มีแท็กปิด เช่น <br>, <hr>, <img>.
ตัวอย่าง:
<h1>This is a heading</h1> แสดงข้อความ "This is a heading" เป็นหัวข้อระดับ 1.
<p>This is a paragraph.</p> แสดงข้อความ "This is a paragraph." เป็นย่อหน้า.
<a href="https://www.example.com">This is a link</a> สร้างลิงก์ไปยังเว็บไซต์ https://www.example.com.
<img src="image.jpg" alt="An image"> แสดงภาพจากไฟล์ image.jpg พร้อมข้อความอธิบาย (alt text).
ความสำคัญ: HTML แท็กเป็นพื้นฐานสำคัญในการสร้างหน้าเว็บและกำหนดโครงสร้างของเนื้อหา เพื่อให้เบราว์เซอร์สามารถแสดงผลได้อย่างถูกต้องและเป็นไปตามที่ต้องการ.
เวลาเริ่มหัดทำเว็บ เรามักเจอคำถามคลาสสิกเลยว่า “แท็ก คืออะไร” (ทั้งใน HTML และเวลาพูดรวมๆ เรื่องโค้ด) ส่วนตัวตอนเริ่มใหม่ๆ ฉันมองแท็กเหมือน “ป้ายกำกับ” ที่บอกเบราว์เซอร์ว่า ข้อความ/รูป/ลิงก์ตรงนี้ควรถูกแสดงผลและจัดวางแบบไหน 1) แท็ก (Tag) ใน HTML ทำหน้าที่อะไร? แท็กคือองค์ประกอบพื้นฐานของหน้าเว็บ อยู่ในเครื่องหมาย < > เช่น <p> หรือ <h1> โดยหน้าที่หลักคือกำหนด “โครงสร้าง” ของเนื้อหา เช่น อันไหนคือหัวข้อ อันไหนคือย่อหน้า อันไหนเป็นลิงก์ หรืออันไหนเป็นรูปภาพ พอมีโครงสร้างชัด เบราว์เซอร์ก็แสดงผลได้ถูกต้อง และยังช่วยเรื่อง SEO เพราะ Google อ่านโครงสร้างหน้าเว็บจากแท็กพวกนี้ด้วย 2) แท็กคู่ vs แท็กเดี่ยว ต่างกันยังไง? - แท็กคู่: มีแท็กเปิดและแท็กปิด เช่น <p>เนื้อหา</p> หรือ <a>ลิงก์</a> สังเกตแท็กปิดจะมี / เช่น </p> - แท็กเดี่ยว: ไม่มีแท็กปิด ใช้จบในตัว เช่น <br> (ขึ้นบรรทัดใหม่), <hr> (เส้นคั่น), <img ...> (รูปภาพ) 3) ตัวอย่างแท็กที่เจอบ่อย (จำแค่นี้ก็เริ่มทำหน้าเว็บได้) - <h1> ถึง <h6>: หัวข้อ ไล่ระดับความสำคัญ (แนะนำให้ใช้ <h1> เป็นหัวข้อหลักของหน้า 1 ครั้ง แล้วค่อยแตกหัวข้อย่อยด้วย <h2>, <h3>) - <p>: ย่อหน้า เหมาะกับข้อความอธิบายทั่วไป - <a href="URL">: ลิงก์ไปหน้าอื่นหรือเว็บไซต์อื่น - <img src="ไฟล์รูป" alt="คำอธิบายรูป">: ใส่รูปภาพ โดย alt สำคัญมาก ทั้งเพื่อคนใช้ screen reader และช่วยให้ Google เข้าใจรูปภาพ 4) Attributes คืออะไร (หลายคนงงตรงนี้) นอกจากชื่อแท็กแล้ว เรายังใส่ “แอตทริบิวต์ (attributes)” เพื่อเพิ่มรายละเอียด เช่น - href ใน <a> บอกปลายทางของลิงก์ - src ใน <img> บอกไฟล์รูป - alt ใน <img> เป็นข้อความอธิบายรูป ฉันชอบจำว่า “แท็ก = กล่อง/หน้าที่” และ “attributes = รายละเอียดของกล่องนั้น” 5) ทริคเล็กๆ ให้โค้ดอ่านง่ายและไม่พัง - อย่าลืมปิดแท็กคู่ให้ครบ (เปิด <div> ก็ต้องมี </div>) - จัดย่อหน้าและเว้นบรรทัดให้เป็นระเบียบ เวลาแก้โค้ดจะง่ายมาก - เวลาใส่รูป ให้เขียน alt ให้สื่อความหมาย เช่น alt="ไอคอน </> และพื้นหลังโค้ด HTML" จะดีกว่า alt="รูป1" สรุปสั้นๆ: ถ้ามีคนถามว่า “แท็ก คืออะไร” ให้ตอบได้เลยว่า แท็กใน HTML คือคำสั่ง/ตัวกำหนดโครงสร้างหน้าเว็บที่บอกเบราว์เซอร์ว่าคอนเทนต์แต่ละส่วนคืออะไร และควรแสดงผลแบบไหน พร้อมตัวอย่างที่เจอบ่อยอย่าง <p>, <h1>, <a>, <img>
