Kodokon kodokon.com

HTML คืออะไร? แท็กและแอตทริบิวต์

ทำความรู้จักว่า HTML คืออะไร และเรียนรู้ที่จะจดจำแท็กและแอตทริบิวต์

6 นาที · 3 คำถาม

เปิดบทเรียนนี้ใน Kodokon

เมื่อคุณเข้าเว็บไซต์บนโทรศัพท์หรือคอมพิวเตอร์ คุณกำลังใช้ เบราว์เซอร์: โปรแกรมที่แสดงหน้าเว็บ (Chrome, Firefox, Safari...) เพื่อให้รู้ว่าต้องแสดงอะไร เบราว์เซอร์จะอ่านเอกสารที่เขียนด้วย HTML HTML ย่อมาจาก HyperText Markup Language มันไม่ใช่ภาษาโปรแกรม: มันไม่ได้คำนวณอะไรทั้งสิ้น มันเป็นภาษาสำหรับ บรรยาย ที่บอกเบราว์เซอร์ว่าเนื้อหาแต่ละส่วนคืออะไร: "นี่คือหัวเรื่อง", "นี่คือย่อหน้า", "นี่คือรูปภาพ"

ในการบรรยายเนื้อหา HTML ใช้ แท็ก แท็กคือคำสำคัญที่วางอยู่ระหว่างเครื่องหมายมุม < และ > แท็กส่วนใหญ่ทำงานเป็นคู่: แท็กเปิด เช่น <p> ตามด้วยเนื้อหา แล้วตามด้วย แท็กปิด ที่จับคู่กันซึ่งมีเครื่องหมายทับนำหน้า: </p> ทั้งหมด "แท็กเปิด + เนื้อหา + แท็กปิด" นี้เรียกว่า เอลิเมนต์ ชื่อ p ย่อมาจาก paragraph (ย่อหน้า)

HTML
<p>Hello!</p>
<p>This is my first paragraph.</p>
<p>The text goes between the two tags.</p>
เอลิเมนต์ p สามตัว: ทุกแท็กที่เปิดจะถูกปิดเสมอ

แท็กสามารถพกข้อมูลเพิ่มเติมที่เรียกว่า แอตทริบิวต์ ได้ แอตทริบิวต์อยู่ในแท็กเปิดเสมอ ไม่เคยอยู่ในแท็กปิด มันเขียนในรูปแบบ name="value": ชื่อแอตทริบิวต์ เครื่องหมายเท่ากับ แล้วตามด้วยค่าที่อยู่ในเครื่องหมายอัญประกาศคู่ ตัวอย่างเช่น แอตทริบิวต์ lang ระบุภาษาของเนื้อหา และแอตทริบิวต์ id ให้ตัวระบุที่ไม่ซ้ำกันแก่เอลิเมนต์

HTML
<p lang="fr">Un paragraphe écrit en français.</p>
<p lang="en">A paragraph written in English.</p>
<p id="conclusion">A paragraph with an identifier.</p>
แอตทริบิวต์ lang และ id ที่วางอยู่ภายในแท็กเปิด

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

  1. คำย่อ HTML ย่อมาจากอะไร?
    • HyperText Markup Language
    • High Tech Modern Language
    • Home Tool Markup Language
    • HyperText Machine Link
  2. แท็กปิดของย่อหน้าเขียนอย่างไร?
    • <p>
    • </p>
    • <end-p>
  3. คุณวางแอตทริบิวต์อย่างเช่น lang="en" ไว้ที่ไหน?
    • ภายในแท็กเปิด
    • ภายในแท็กปิด
    • หลังเอลิเมนต์ ในบรรทัดใหม่