ในเอกสาร HTML มีแท็กหลักๆ ที่ทำหน้าที่ในการจัดโครงสร้างของเอกสาร ได้แก่ <html>, <head>, และ <body> แต่ละแท็กมีบทบาทที่สำคัญแตกต่างกันไป ซึ่งสามารถอธิบายได้อย่างละเอียดดังนี้
แท็ก <html>
แท็ก <html> เป็นแท็กหลักสุดที่ครอบคลุมเนื้อหาทั้งหมดของหน้าเว็บ มันเป็น “ราก” ของเอกสาร HTML และบอกเบราว์เซอร์ว่าข้อมูลทั้งหมดภายในแท็กนี้คือเอกสาร HTML
โครงสร้าง
<html>
<!-- ส่วนต่างๆ ของ HTML จะอยู่ในนี้ -->
</html>
หน้าที่หลัก
- ครอบคลุมทุกเนื้อหาที่เกี่ยวข้องกับ HTML ในหน้าเว็บ
- ช่วยให้เบราว์เซอร์เข้าใจว่าเอกสารนี้เป็นไฟล์ HTML
- โดยทั่วไป จะมีการกำหนดภาษาของเอกสารในแท็ก
<html>เช่น
<html lang="th">
<!-- เนื้อหาของ HTML จะอยู่ในนี้ -->
</html>
lang="th" คือการระบุว่าภาษาหลักของเอกสารคือภาษาไทย
แท็ก <head>
แท็ก <head> จะอยู่ภายในแท็ก <html> และเป็นส่วนที่ใช้ใส่ข้อมูลที่ไม่แสดงผลบนหน้าเว็บโดยตรง แต่เป็นข้อมูลที่เกี่ยวข้องกับการตั้งค่าหรือการอ้างอิงของเอกสาร HTML เช่น การกำหนดสไตล์ของหน้าเว็บ, ไฟล์ CSS และ JavaScript ที่จะใช้, และข้อมูลเมตา (meta information) อื่นๆ
โครงสร้าง
<head>
<!-- ข้อมูลเพิ่มเติมของเอกสาร HTML จะอยู่ในนี้ -->
</head>
หน้าที่หลัก
- ใส่ข้อมูลเกี่ยวกับเมตาดาต้าของเอกสาร เช่น ชื่อเรื่อง, คำอธิบาย, และคีย์เวิร์ด
- ใส่การเชื่อมต่อไปยังไฟล์ CSS หรือ JavaScript
- ระบุสไตล์ที่เป็นโกลบอล (ถ้าต้องการ)
- ตัวอย่างการใช้งาน
<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> เป็นส่วนที่ใช้ใส่เนื้อหาทั้งหมดที่จะแสดงบนหน้าเว็บ เช่น ข้อความ รูปภาพ ลิงก์ วิดีโอ หรือองค์ประกอบอื่นๆ ที่ผู้ใช้งานสามารถเห็นและโต้ตอบได้
โครงสร้าง
<body>
<!-- เนื้อหาทั้งหมดที่จะแสดงบนหน้าเว็บจะอยู่ในนี้ -->
</body>
หน้าที่หลัก
- ใส่เนื้อหาที่จะแสดงผลบนหน้าเว็บ เช่น ข้อความ, รูปภาพ, วิดีโอ, ลิงก์, ฟอร์ม
- ทุกสิ่งที่อยู่ภายในแท็ก
<body>จะถูกแสดงบนหน้าเว็บเมื่อผู้ใช้เข้ามา
ตัวอย่างการใช้งาน
<body>
<h1>ยินดีต้อนรับสู่การเรียนรู้ HTML</h1>
<p>นี่คือเนื้อหาสำหรับผู้เริ่มต้นศึกษาการสร้างเว็บไซต์ด้วย HTML</p>
<img src="image.jpg" alt="ภาพประกอบการสอน HTML">
</body>
สรุปภาพรวมโครงสร้าง HTML
การใช้ <html>, <head>, และ <body> เป็นโครงสร้างพื้นฐานสำหรับเอกสาร HTML
<!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