โครงสร้าง HTML คืออะไร

โครงสร้าง HTML (HTML Structure) คือรูปแบบการจัดเรียงองค์ประกอบ (Elements) ในเอกสารเว็บเพจที่ใช้ภาษา HTML (HyperText Markup Language) โดย HTML ทำหน้าที่เป็นโครงร่างหลักของเว็บไซต์ ซึ่งประกอบด้วยแท็ก (Tags) ต่างๆ ที่กำหนดเนื้อหาและลักษณะขององค์ประกอบในเว็บเพจ

องค์ประกอบสำคัญของโครงสร้าง HTML:

HTML จะเริ่มต้นด้วยการประกาศประเภทของเอกสาร (Document Type Declaration) และมีองค์ประกอบพื้นฐานที่ครอบคลุมการจัดหน้าเว็บเพจในส่วนต่างๆ ดังนี้:

1. DOCTYPE Declaration

<!DOCTYPE html>

เป็นการบอกเบราว์เซอร์ว่าเอกสารนี้ใช้ HTML5

2. องค์ประกอบหลักของ HTML

HTML แบ่งโครงสร้างเป็นสองส่วนใหญ่ ๆ คือ ส่วนหัว (Head) และส่วนเนื้อหา (Body) ซึ่งครอบคลุมใน <html>...</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>

รายละเอียดขององค์ประกอบหลักในโครงสร้าง HTML:

1. <html>:

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

2. <head>:

ส่วนหัวของเอกสาร ซึ่งเป็นที่รวมของข้อมูลที่ไม่แสดงบนหน้าจอ แต่มีความสำคัญสำหรับการทำงานของเว็บเพจ เช่น เมตาแท็ก (Meta Tags), ชื่อของหน้าเว็บ (Title), และการอ้างอิงถึงไฟล์ CSS หรือ JavaScript ภายนอก

ตัวอย่าง:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ชื่อของหน้าเว็บ</title>
</head>

<meta>: ใช้เพื่อให้ข้อมูลเพิ่มเติมเกี่ยวกับเอกสาร เช่น การตั้งค่าตัวอักษร (charset) หรือคำสั่งสำหรับขนาดหน้าจอ (viewport) สำหรับการแสดงผลบนมือถือ
<title>: กำหนดชื่อของหน้าเว็บ ซึ่งจะแสดงในแถบเบราว์เซอร์และมีผลต่อ SEO

3. <body>:

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

ตัวอย่าง:

<body>
    <h1>หัวข้อหลัก</h1>
    <p>ย่อหน้าของเนื้อหา</p>
    <a href="https://www.example.com">ลิงก์ไปยังหน้าอื่น</a>
    <img src="image.jpg" alt="รูปภาพ">
</body>

<h1> ถึง <h6>: แท็กที่ใช้สำหรับแสดงหัวข้อ โดย <h1> คือหัวข้อหลักและ <h6> คือหัวข้อย่อยที่สุด
<p>: แท็กที่ใช้สำหรับแสดงย่อหน้าของข้อความ
<a>: แท็กลิงก์ที่ใช้เชื่อมโยงไปยังหน้าอื่นหรือแหล่งข้อมูลอื่น
<img>: ใช้สำหรับแสดงรูปภาพบนเว็บเพจ

4. Block-level Elements และ Inline Elements

องค์ประกอบใน HTML แบ่งออกเป็นสองประเภทหลัก:

Block-level Elements: ครอบคลุมเนื้อหาเต็มบรรทัด เช่น <div>, <p>, <h1>-<h6>, <ul>, <table>
Inline Elements: องค์ประกอบที่ไม่ทำให้เกิดบรรทัดใหม่ เช่น <a>, <img>, <span>, <strong>, <em>

5. โครงสร้างเพิ่มเติมที่นิยมใช้

นอกจากองค์ประกอบพื้นฐานที่กล่าวถึงแล้ว ยังมีโครงสร้างที่ใช้เพื่อจัดการและออกแบบหน้าเว็บให้ดีขึ้น:

<div>: ใช้สำหรับการจัดกลุ่มเนื้อหาต่าง ๆ เป็นบล็อก โดยเป็น block-level element
<span>: ใช้เพื่อจัดกลุ่มเนื้อหาในบรรทัด โดยเป็น inline element
<header>: ใช้สำหรับกำหนดส่วนหัวของหน้าเว็บ
<nav>: ใช้สำหรับกำหนดส่วนเมนูนำทาง (navigation)
<section>: ใช้สำหรับแบ่งเนื้อหาเป็นกลุ่มที่เกี่ยวข้องกัน
<article>: ใช้สำหรับบทความหรือเนื้อหาที่เป็นอิสระจากส่วนอื่น
<footer>: ใช้สำหรับกำหนดส่วนท้ายของหน้าเว็บ

สรุป:

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