What is the tag in html?
Tags (Tags) in HTML are commands used in the HTML language to determine the structure and format of content on web pages. Tags are in the "<" and ">" marks and usually work in pairs, namely with opening tags and closing tags.
Further explanation:
Structure:
HTML A tag contains a tag name and may contain attributes that provide additional information about the tag.
Operation:
Tags tell the browser how to display the content, such as the < p > tag used for paragraphs (paragraphs), the < h1 > to < h6 > tags used for topics (heading), and the < a > tag used to create links.
Tags Type:
Double Tag (Pair Tags / Container Tags): Both Open and Closed Tags are available, such as < p >...< / p >, < div >...< / div >, < span >...< / span >.
Single Tag (Empty Tags / Self-Closing Tags): No closing tag, e.g. < br >, < hr >, < img >.
Example:
< h1 > This is a heading < / h1 > displays the text "This is a heading" as a heading level 1.
< p > This is a paragraph. < / p > Display the text "This is a paragraph" as a paragraph.
< a href = "https://www.example.com" > This is a link. Create a link to the website..
< img src = "image.jpg" alt = "An image" > Displays an image from an image.jpg file with explanatory text (alt text).
Importance: HTML tags are an important basis to create web pages and determine the structure of their content, so that the browser can display them correctly and as required.
เวลาเริ่มหัดทำเว็บ เรามักเจอคำถามคลาสสิกเลยว่า “แท็ก คืออะไร” (ทั้งใน 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>