HTML คือภาษาพื้นฐานที่สุดของการทำเว็บ ทุกหน้าเว็บที่คุณเห็นบนอินเทอร์เน็ตล้วนสร้างจาก HTML บทความนี้จะพาคุณเรียนรู้ตั้งแต่ศูนย์จนเข้าใจโครงสร้าง แท็กสำคัญ และเขียนหน้าเว็บจริงได้ ═══════════════════════════════════════ 📌 1. HTML คืออะไร ═══════════════════════════════════════ HTML ย่อมาจาก HyperText Markup Language เป็น "ภาษามาร์กอัป" ที่ใช้กำหนดโครงสร้างและเนื้อหาของหน้าเว็บ ไม่ใช่ภาษาโปรแกรม (ไม่มีตรรกะ if/loop) แต่ใช้ "แท็ก" (Tag) บอกเบราว์เซอร์ว่า ส่วนไหนเป็นหัวข้อ ย่อหน้า รูปภาพ ลิงก์ ฯลฯ เปรียบเทียบง่าย ๆ กับการสร้างบ้าน: • HTML = โครงสร้างบ้าน (เสา ผนัง ห้อง) • CSS = การตกแต่ง (สี วอลเปเปอร์ เฟอร์นิเจอร์) • JavaScript = ระบบไฟฟ้า/การทำงาน (เปิดปิดไฟ ประตูอัตโนมัติ) ═══════════════════════════════════════ 🏷️ 2. แท็ก (Tag) และอิลิเมนต์ (Element) ทำงานอย่างไร ═══════════════════════════════════════ แท็กส่วนใหญ่มาเป็น "คู่" คือ แท็กเปิด และ แท็กปิด (มี / นำหน้า)
html 
<p>สวัสดีชาวโลก</p>
│  │           │
│  └เนื้อหา     └แท็กปิด
└แท็กเปิด
• <p> = แท็กเปิด (opening tag) • สวัสดีชาวโลก = เนื้อหา (content) • </p> = แท็กปิด (closing tag) • ทั้งหมดรวมกัน = 1 อิลิเมนต์ (element) บางแท็กไม่มีแท็กปิด เรียกว่า "Empty/Void Element" เช่น
html 
<br>      (ขึ้นบรรทัดใหม่)
<img>     (รูปภาพ)
<hr>      (เส้นคั่น)
═══════════════════════════════════════ 🧱 3. โครงสร้างพื้นฐานของหน้า 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>
อธิบายแต่ละส่วน: • <!DOCTYPE html> → บอกว่าเป็นเอกสาร HTML5 • <html lang="th"> → ราก(root)ของเอกสาร กำหนดภาษาเป็นไทย • <head> → ข้อมูลเบื้องหลัง (ไม่แสดงบนหน้า) เช่น title, meta, ลิงก์ CSS • <meta charset="UTF-8"> → กำหนดชุดอักขระ (รองรับภาษาไทย/อีโมจิ) • <meta name="viewport"...> → ทำให้แสดงผลดีบนมือถือ (สำคัญมาก!) • <title> → ชื่อที่แสดงบนแท็บเบราว์เซอร์ • <body> → เนื้อหาทั้งหมดที่ผู้ใช้เห็นบนหน้าจอ ═══════════════════════════════════════ ✍️ 4. แท็กข้อความที่ใช้บ่อย ═══════════════════════════════════════ หัวข้อ (Heading) มี 6 ระดับ h1 (ใหญ่สุด) ถึง h6 (เล็กสุด)
html 
<h1>หัวข้อใหญ่สุด</h1>
<h2>หัวข้อรอง</h2>
<h3>หัวข้อย่อย</h3>
ย่อหน้าและการจัดข้อความ
html 
<p>นี่คือย่อหน้าหนึ่ง</p>
<b>ตัวหนา</b> หรือ <strong>สำคัญ (ตัวหนา)</strong>
<i>ตัวเอียง</i> หรือ <em>เน้น (ตัวเอียง)</em>
<u>ขีดเส้นใต้</u>
<mark>ไฮไลต์</mark>
<br>  → ขึ้นบรรทัดใหม่
<hr>  → เส้นคั่นแนวนอน
*** เคล็ดลับ: ใช้ <strong> และ <em> แทน <b>/<i> จะดีต่อ SEO และการเข้าถึง *** ═══════════════════════════════════════ 🔗 5. ลิงก์และรูปภาพ ═══════════════════════════════════════ ลิงก์ (Anchor) — ใช้แท็ก <a> กับแอตทริบิวต์ href
html 
<a href="https://www.google.com">ไปที่ Google</a>
<a href="https://google.com" target="_blank">เปิดในแท็บใหม่</a>
<a href="page2.html">ไปหน้าถัดไป</a>
รูปภาพ — ใช้แท็ก <img> (ไม่มีแท็กปิด)
html 
<img src="cat.jpg" alt="รูปแมวน่ารัก" width="300">
• src → ที่อยู่ของรูป (path หรือ URL) • alt → ข้อความแทนรูป (แสดงเมื่อโหลดรูปไม่ได้ + ช่วยผู้พิการทางสายตา) • width → ความกว้าง (พิกเซล) ═══════════════════════════════════════ 📋 6. รายการ (List) ═══════════════════════════════════════ รายการแบบไม่เรียงลำดับ (จุด bullet) — <ul>
html 
<ul>
    <li>แอปเปิล</li>
    <li>กล้วย</li>
    <li>ส้ม</li>
</ul>
รายการแบบเรียงลำดับ (ตัวเลข) — <ol>
html 
<ol>
    <li>ตื่นนอน</li>
    <li>แปรงฟัน</li>
    <li>กินข้าว</li>
</ol>
• <ul> = Unordered List (มีจุดนำหน้า) • <ol> = Ordered List (มีตัวเลขนำหน้า) • <li> = List Item (แต่ละรายการ) ═══════════════════════════════════════ 📊 7. ตาราง (Table) ═══════════════════════════════════════
html 
<table border="1">
    <thead>
        <tr>
            <th>ชื่อ</th>
            <th>อายุ</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>สมชาย</td>
            <td>25</td>
        </tr>
        <tr>
            <td>สมหญิง</td>
            <td>23</td>
        </tr>
    </tbody>
</table>
• <table> → ตาราง • <tr> → แถว (Table Row) • <th> → หัวคอลัมน์ (ตัวหนา จัดกลาง) • <td> → ช่องข้อมูล (Table Data) • <thead>/<tbody> → แบ่งส่วนหัว/ตัวตาราง ═══════════════════════════════════════ 📝 8. ฟอร์ม (Form) — รับข้อมูลจากผู้ใช้ ═══════════════════════════════════════
html 
<form action="/submit" method="POST">
    <label>ชื่อ:</label>
    <input type="text" name="name" placeholder="กรอกชื่อ">

    <label>อีเมล:</label>
    <input type="email" name="email" required>

    <label>รหัสผ่าน:</label>
    <input type="password" name="password">

    <label>ข้อความ:</label>
    <textarea name="message" rows="4"></textarea>

    <label>เพศ:</label>
    <select name="gender">
        <option value="m">ชาย</option>
        <option value="f">หญิง</option>
    </select>

    <button type="submit">ส่งข้อมูล</button>
</form>
ชนิดของ input (type) ที่ใช้บ่อย: • text → ข้อความทั่วไป • email → อีเมล (ตรวจรูปแบบให้) • password → รหัสผ่าน (แสดงเป็นจุด) • number → ตัวเลข • date → วันที่ • checkbox → ช่องติ๊กเลือกได้หลายอัน • radio → เลือกได้อันเดียว • file → อัปโหลดไฟล์ แอตทริบิวต์สำคัญ: name (ชื่อฟิลด์), placeholder (ข้อความแนะนำ), required (บังคับกรอก) ═══════════════════════════════════════ 🏗️ 9. Semantic Tags — แท็กเชิงความหมาย (HTML5) ═══════════════════════════════════════ แทนที่จะใช้ <div> ไปหมด ควรใช้แท็กที่สื่อความหมาย ช่วยเรื่อง SEO และการเข้าถึง
html 
<header>   → ส่วนหัวเว็บ (โลโก้ เมนู)
<nav>      → แถบเมนูนำทาง
<main>     → เนื้อหาหลัก
<section>  → ส่วน/หมวดของเนื้อหา
<article>  → บทความ/เนื้อหาที่จบในตัว
<aside>    → เนื้อหาข้าง (sidebar)
<footer>   → ส่วนท้ายเว็บ
ตัวอย่างโครงหน้าเว็บ:
html 
<body>
    <header>โลโก้ + เมนู</header>
    <nav>หน้าแรก | สินค้า | ติดต่อ</nav>
    <main>
        <article>เนื้อหาบทความ</article>
        <aside>โฆษณา/ลิงก์ที่เกี่ยวข้อง</aside>
    </main>
    <footer>© 2026 เว็บของฉัน</footer>
</body>
═══════════════════════════════════════ ⚙️ 10. แอตทริบิวต์ (Attribute) และ Block vs Inline ═══════════════════════════════════════ แอตทริบิวต์ = ข้อมูลเสริมของแท็ก เขียนในแท็กเปิด รูปแบบ ชื่อ="ค่า"
html 
<img src="a.jpg" alt="ภาพ" width="200">
<a href="x.html" target="_blank" title="คำอธิบาย">ลิงก์</a>
<div id="box1" class="card">กล่อง</div>
แอตทริบิวต์สากลที่ใช้ได้ทุกแท็ก: • id → ชื่อเฉพาะ (ห้ามซ้ำในหน้าเดียว) ใช้อ้างอิง • class → กลุ่ม (ซ้ำได้) ใช้จัดสไตล์ด้วย CSS • style → ใส่ CSS ตรง ๆ เช่น style="color:red;" Block vs Inline: • Block-level → ขึ้นบรรทัดใหม่ กินความกว้างเต็มแถว เช่น <div>, <p>, <h1>, <ul>, <section> • Inline → อยู่ในบรรทัดเดียวกัน กินพื้นที่เท่าเนื้อหา เช่น <span>, <a>, <b>, <img> ═══════════════════════════════════════ 🎯 11. ตัวอย่างหน้าเว็บสมบูรณ์ (นำไปใช้ได้จริง) ═══════════════════════════════════════
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>
    <header>
        <h1>สมชาย ใจดี</h1>
        <p>นักพัฒนาเว็บมือใหม่</p>
    </header>

    <nav>
        <a href="#about">เกี่ยวกับ</a> |
        <a href="#skills">ทักษะ</a> |
        <a href="#contact">ติดต่อ</a>
    </nav>

    <main>
        <section id="about">
            <h2>เกี่ยวกับฉัน</h2>
            <p>สวัสดีครับ ผมกำลังเรียน HTML อยู่</p>
        </section>

        <section id="skills">
            <h2>ทักษะ</h2>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </section>
    </main>

    <footer>
        <p>© 2026 สมชาย ใจดี</p>
    </footer>
</body>
</html>
ลองคัดลอกโค้ดนี้ไปวางในไฟล์ .html แล้วเปิดด้วยเบราว์เซอร์ได้เลย! ═══════════════════════════════════════ ✅ 12. สรุปและเคล็ดลับสำหรับมือใหม่ ═══════════════════════════════════════ • ทุกหน้าเริ่มด้วย <!DOCTYPE html> และมี head + body เสมอ • ปิดแท็กให้ครบ และจัดย่อหน้า (indent) ให้อ่านง่าย • ใช้ Semantic tags แทน <div> ล้วน ๆ เพื่อ SEO ที่ดี • ใส่ alt ให้รูปภาพเสมอ และใส่ viewport meta เพื่อรองรับมือถือ • HTML วางโครงสร้าง → ใช้ CSS แต่งสวย → ใช้ JavaScript เพิ่มลูกเล่น จำไว้ว่า: วิธีเรียน HTML ที่ดีที่สุดคือ "ลงมือเขียนจริง" เปิดโปรแกรมแก้ไขข้อความ สร้างไฟล์ .html แล้วทดลองเล่นกับแท็กต่าง ๆ 🚀