โครงสร้างพื้นฐานของ HTML

เมื่อเราเข้าใจแล้วว่า HTML คืออะไร ในบทนี้ เราจะมาเจาะลึกถึงโครงสร้างพื้นฐานของเอกสาร HTML ซึ่งเป็นรากฐานสำคัญสำหรับการสร้างหน้าเว็บทุกหน้า เปรียบเสมือนพิมพ์เขียวที่บอกให้เบราว์เซอร์รู้ว่าข้อมูลอะไรควรแสดงตรงไหน และอย่างไร

ส่วนประกอบหลักของเอกสาร HTML

เอกสาร HTML ที่ถูกต้องตามหลักไวยากรณ์ (Syntax) จะประกอบด้วยส่วนหลักๆ 3 ส่วน ได้แก่:

<html>: แท็กราก (Root Tag) ที่ครอบคลุมเนื้อหาทั้งหมดของเอกสาร HTML
<head>: ส่วนหัวของเอกสาร HTML ที่บรรจุข้อมูล metadata ต่างๆ เช่น ชื่อเรื่อง (title), การกำหนด character set, และลิงก์ไปยังไฟล์ CSS หรือ JavaScript
<body>: ส่วนเนื้อหาของเอกสาร HTML ที่บรรจุเนื้อหาทั้งหมดที่ผู้ใช้มองเห็นบนหน้าเว็บ

ลองดูโครงสร้างพื้นฐานของ HTML ที่สมบูรณ์:

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ชื่อเรื่องของหน้าเว็บ</title>
</head>
<body>
  <!-- เนื้อหาของเว็บไซต์จะอยู่ในส่วนนี้ -->
  <h1>หัวข้อหลักของหน้า</h1>
  <p>เนื้อหาในย่อหน้า</p>
</body>
</html>

เราจะมาอธิบายแต่ละส่วนประกอบอย่างละเอียดกัน:

`<!DOCTYPE html>`: การประกาศ Doctype

<!DOCTYPE html> คือการประกาศ Doctype (Document Type Declaration) ซึ่งเป็นคำสั่งแรกสุดในเอกสาร HTML ทำหน้าที่บอกเบราว์เซอร์ว่าเอกสารนี้เป็น HTML5 การประกาศ Doctype ช่วยให้เบราว์เซอร์แสดงผลหน้าเว็บได้อย่างถูกต้องตามมาตรฐาน

สำคัญ: ต้องประกาศ <!DOCTYPE html> ที่บรรทัดแรกของเอกสารเสมอ

`<html>`: แท็กราก (Root Tag)

แท็ก <html> เป็นแท็กรากที่ครอบคลุมเนื้อหาทั้งหมดของเอกสาร HTML ภายในแท็กนี้ จะมีแท็ก <head> และ <body> เป็นส่วนประกอบหลัก

Attribute lang: เราสามารถกำหนดภาษาหลักของเอกสาร HTML ได้โดยใช้ attribute lang เช่น <html lang="th"> หมายถึงเอกสารนี้ใช้ภาษาไทยเป็นหลัก การกำหนดภาษาช่วยให้เบราว์เซอร์และเครื่องมือช่วยเหลือต่างๆ ทำงานได้อย่างถูกต้อง เช่น โปรแกรมอ่านหน้าจอสำหรับผู้พิการทางสายตา

`<head>`: ส่วนหัวของเอกสาร HTML

แท็ก <head> เป็นส่วนหัวของเอกสาร HTML ที่บรรจุข้อมูล metadata ต่างๆ ซึ่งข้อมูลเหล่านี้จะไม่แสดงผลบนหน้าเว็บโดยตรง แต่มีประโยชน์สำหรับการกำหนดค่าต่างๆ ของหน้าเว็บ เช่น:

<title>: ชื่อเรื่องของหน้าเว็บ ชื่อเรื่องจะปรากฏบนแถบชื่อเรื่อง (Title Bar) ของเบราว์เซอร์ หรือบนแท็บของเบราว์เซอร์ ชื่อเรื่องมีความสำคัญต่อ SEO (Search Engine Optimization) ช่วยให้ search engine เข้าใจเนื้อหาของหน้าเว็บ
<meta>: ข้อมูล metadata อื่นๆ แท็ก <meta> ใช้สำหรับกำหนดข้อมูล metadata ต่างๆ เช่น:
- charset: กำหนด character set ที่ใช้ในเอกสาร HTML เช่น <meta charset="UTF-8"> กำหนดให้ใช้ UTF-8 ซึ่งรองรับอักษรทุกภาษา
- name="description": กำหนดคำอธิบายของหน้าเว็บ คำอธิบายนี้อาจแสดงในผลการค้นหาของ search engine
- name="keywords": กำหนดคำหลัก (keywords) ที่เกี่ยวข้องกับเนื้อหาของหน้าเว็บ (ปัจจุบันไม่ค่อยมีผลต่อ SEO แล้ว)
- name="viewport": กำหนด viewport ของหน้าเว็บ เพื่อให้หน้าเว็บแสดงผลได้อย่างเหมาะสมบนอุปกรณ์ต่างๆ (Responsive Design) เช่น <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link>: ลิงก์ไปยังไฟล์ CSS ใช้สำหรับลิงก์ไปยังไฟล์ CSS ภายนอก เพื่อกำหนดรูปแบบการแสดงผลของหน้าเว็บ
<script>: ลิงก์ไปยังไฟล์ JavaScript ใช้สำหรับลิงก์ไปยังไฟล์ JavaScript ภายนอก เพื่อเพิ่มลูกเล่นและการทำงานแบบไดนามิกให้กับหน้าเว็บ
<base>: กำหนด URL ฐาน ใช้สำหรับกำหนด URL ฐานสำหรับลิงก์ทั้งหมดในหน้าเว็บ
<style>: กำหนด CSS ภายในหน้าเว็บ ใช้สำหรับกำหนด CSS ภายในแท็ก <head> (ไม่แนะนำให้ใช้ในกรณีที่ต้องการแยก CSS ออกจาก HTML)

ตัวอย่างการใช้งานแท็ก <head>:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="ตัวอย่างหน้าเว็บเกี่ยวกับ HTML">
  <meta name="keywords" content="HTML, เว็บไซต์, การพัฒนาเว็บ">
  <title>โครงสร้างพื้นฐานของ HTML - ตัวอย่าง</title>
  <link rel="stylesheet" href="style.css">
</head>

`<body>`: ส่วนเนื้อหาของเอกสาร HTML

แท็ก <body> เป็นส่วนเนื้อหาของเอกสาร HTML ที่บรรจุเนื้อหาทั้งหมดที่ผู้ใช้มองเห็นบนหน้าเว็บ เช่น ข้อความ รูปภาพ วิดีโอ ลิงก์ ฟอร์ม และอื่นๆ แท็กส่วนใหญ่ที่เราจะเรียนรู้ในบทต่อๆ ไป จะถูกนำมาใช้ภายในแท็ก <body>

ตัวอย่างการใช้งานแท็ก <body>:

<body>
  <h1>ยินดีต้อนรับสู่เว็บไซต์ของฉัน</h1>
  <p>นี่คือเนื้อหาของหน้าเว็บ</p>
  <img src="image.jpg" alt="รูปภาพประกอบ">
</body>

สรุป

ในบทนี้ เราได้เรียนรู้เกี่ยวกับโครงสร้างพื้นฐานของเอกสาร HTML ซึ่งประกอบด้วย <!DOCTYPE html>, <html>, <head>, และ <body> การเข้าใจโครงสร้างพื้นฐานนี้เป็นสิ่งสำคัญสำหรับการสร้างหน้าเว็บที่ถูกต้องตามมาตรฐาน และเป็นพื้นฐานสำหรับการเรียนรู้ HTML ในระดับที่สูงขึ้น ในบทต่อไป เราจะเริ่มเรียนรู้เกี่ยวกับแท็กพื้นฐานที่ใช้ในการสร้างเนื้อหาภายในแท็ก <body> เช่น แท็กหัวเรื่อง (Heading Tags) และแท็กย่อหน้า (Paragraph Tag)

โครงสร้างพื้นฐานของ HTML