ในเอกสาร HTML มีแท็กหลักๆ ที่ทำหน้าที่ในการจัดโครงสร้างของเอกสาร ได้แก่ <html>, <head>, และ <body> แต่ละแท็กมีบทบาทที่สำคัญแตกต่างกันไป ซึ่งสามารถอธิบายได้อย่างละเอียดดังนี้
แท็ก <html>
แท็ก <html> เป็นแท็กหลักสุดที่ครอบคลุมเนื้อหาทั้งหมดของหน้าเว็บ มันเป็น “ราก” ของเอกสาร HTML และบอกเบราว์เซอร์ว่าข้อมูลทั้งหมดภายในแท็กนี้คือเอกสาร HTML
โครงสร้าง
1 2 3 | <html> <!-- ส่วนต่างๆ ของ HTML จะอยู่ในนี้ --></html> |
หน้าที่หลัก
- ครอบคลุมทุกเนื้อหาที่เกี่ยวข้องกับ HTML ในหน้าเว็บ
- ช่วยให้เบราว์เซอร์เข้าใจว่าเอกสารนี้เป็นไฟล์ HTML
- โดยทั่วไป จะมีการกำหนดภาษาของเอกสารในแท็ก
<html>เช่น
1 2 3 | <html lang="th"> <!-- เนื้อหาของ HTML จะอยู่ในนี้ --></html> |
lang="th" คือการระบุว่าภาษาหลักของเอกสารคือภาษาไทย
แท็ก <head>
แท็ก <head> จะอยู่ภายในแท็ก <html> และเป็นส่วนที่ใช้ใส่ข้อมูลที่ไม่แสดงผลบนหน้าเว็บโดยตรง แต่เป็นข้อมูลที่เกี่ยวข้องกับการตั้งค่าหรือการอ้างอิงของเอกสาร HTML เช่น การกำหนดสไตล์ของหน้าเว็บ, ไฟล์ CSS และ JavaScript ที่จะใช้, และข้อมูลเมตา (meta information) อื่นๆ
โครงสร้าง
1 2 3 | <head> <!-- ข้อมูลเพิ่มเติมของเอกสาร HTML จะอยู่ในนี้ --></head> |
หน้าที่หลัก
- ใส่ข้อมูลเกี่ยวกับเมตาดาต้าของเอกสาร เช่น ชื่อเรื่อง, คำอธิบาย, และคีย์เวิร์ด
- ใส่การเชื่อมต่อไปยังไฟล์ CSS หรือ JavaScript
- ระบุสไตล์ที่เป็นโกลบอล (ถ้าต้องการ)
- ตัวอย่างการใช้งาน
1 2 3 4 5 6 7 | <head> <meta charset="UTF-8"> <!-- ระบุการเข้ารหัสของเอกสาร --> <meta name="description" content="หน้าเว็บที่เกี่ยวกับการเรียนรู้ HTML"> <meta name="keywords" content="HTML, สอน, พื้นฐาน, เว็บ"> <title>การเรียนรู้ HTML เบื้องต้น</title> <!-- ชื่อเรื่องของหน้าเว็บ --> <link rel="stylesheet" href="styles.css"> <!-- เชื่อมโยงกับไฟล์ CSS --></head> |
แท็ก <body>
แท็ก <body> เป็นส่วนที่ใช้ใส่เนื้อหาทั้งหมดที่จะแสดงบนหน้าเว็บ เช่น ข้อความ รูปภาพ ลิงก์ วิดีโอ หรือองค์ประกอบอื่นๆ ที่ผู้ใช้งานสามารถเห็นและโต้ตอบได้
โครงสร้าง
1 2 3 | <body> <!-- เนื้อหาทั้งหมดที่จะแสดงบนหน้าเว็บจะอยู่ในนี้ --></body> |
หน้าที่หลัก
- ใส่เนื้อหาที่จะแสดงผลบนหน้าเว็บ เช่น ข้อความ, รูปภาพ, วิดีโอ, ลิงก์, ฟอร์ม
- ทุกสิ่งที่อยู่ภายในแท็ก
<body>จะถูกแสดงบนหน้าเว็บเมื่อผู้ใช้เข้ามา
ตัวอย่างการใช้งาน
1 2 3 4 5 | <body> <h1>ยินดีต้อนรับสู่การเรียนรู้ HTML</h1> <p>นี่คือเนื้อหาสำหรับผู้เริ่มต้นศึกษาการสร้างเว็บไซต์ด้วย HTML</p> <img src="image.jpg" alt="ภาพประกอบการสอน HTML"></body> |
สรุปภาพรวมโครงสร้าง HTML
การใช้ <html>, <head>, และ <body> เป็นโครงสร้างพื้นฐานสำหรับเอกสาร HTML
01 02 03 04 05 06 07 08 09 10 11 12 13 14 | <!DOCTYPE html><html lang="th"><head> <meta charset="UTF-8"> <meta name="description" content="เว็บไซต์เกี่ยวกับการเรียนรู้ HTML เบื้องต้น"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>การเรียนรู้ HTML เบื้องต้น</title> <link rel="stylesheet" href="styles.css"></head><body> <h1>ยินดีต้อนรับสู่การเรียนรู้ HTML</h1> <p>นี่คือเนื้อหาสำหรับผู้เริ่มต้นศึกษาการสร้างเว็บไซต์ด้วย HTML</p></body></html> |
โครงสร้างนี้จะทำให้หน้าเว็บแสดงผลได้อย่างถูกต้องและสอดคล้องตามมาตรฐานของ HTML