สอนเขียนโปรแกรมภาษา HTML ตั้งแต่เริ่มต้น

ทุกหน้าเว็บที่คุณเคยเปิดดู ไม่ว่าจะเป็นเว็บข่าว เว็บร้านค้า หรือเว็บส่วนตัว ล้วนมีโครงสร้างพื้นฐานที่เขียนด้วยภาษา HTML ภาษานี้ไม่ใช่ภาษาโปรแกรมแบบที่ต้องคำนวณหรือวนลูป แต่เป็น "ภาษาทำเครื่องหมาย" (Markup Language) ที่บอกเบราว์เซอร์ว่าแต่ละส่วนของหน้าคืออะไร เป็นหัวข้อ ย่อหน้า รูปภาพ ลิงก์ หรือฟอร์ม บทความนี้จะพาคุณเริ่มเขียน HTML ตั้งแต่ศูนย์ ไปจนถึงการสร้างหน้าโปรไฟล์ส่วนตัวหนึ่งหน้าที่ใช้งานได้จริง

HTML คืออะไร

HTML ย่อมาจาก HyperText Markup Language คำว่า HyperText หมายถึงข้อความที่เชื่อมโยงกันด้วยลิงก์ และคำว่า Markup หมายถึงการใส่แท็ก (Tag) เพื่อกำกับความหมายของข้อความ เบราว์เซอร์จะอ่านไฟล์ HTML จากบนลงล่าง แปลแท็กเหล่านั้นเป็นโครงสร้างของหน้า แล้วแสดงผลให้ผู้ใช้เห็น

HTML ไม่ได้กำหนดสีหรือขนาดตัวอักษรโดยตรง งานนั้นเป็นหน้าที่ของ CSS และการทำให้หน้าเว็บมีการโต้ตอบเป็นหน้าที่ของ JavaScript ทั้งสามภาษาทำงานร่วมกันเหมือนโครงบ้าน (HTML) สีและการตกแต่ง (CSS) และระบบไฟฟ้าที่ทำให้บ้านเคลื่อนไหวได้ (JavaScript)

เตรียมเครื่องมือ

การเขียน HTML ต้องการเครื่องมือเพียงสองอย่าง

1. **โปรแกรมแก้ไขข้อความ:** Notepad บน Windows ก็ใช้ได้ แต่แนะนำ VS Code ซึ่งฟรี มีการไฮไลต์แท็กและช่วยเติมโค้ดอัตโนมัติ

2. **เว็บเบราว์เซอร์:** Chrome, Edge หรือ Firefox เอาไว้เปิดไฟล์ที่เขียนเพื่อดูผลลัพธ์

ให้สร้างโฟลเดอร์ใหม่ เช่น `my-website` แล้วสร้างไฟล์ชื่อ `index.html` ไว้ข้างใน ชื่อ `index.html` เป็นชื่อมาตรฐานที่เบราว์เซอร์และเซิร์ฟเวอร์เว็บรู้จักว่าเป็นหน้าแรก

โครงสร้างหน้าเว็บแรก

เปิดไฟล์ `index.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">` เป็นกรอบหลักของหน้า ค่า `lang="th"` บอกว่าภาษาหลักของหน้าคือภาษาไทย ซึ่งช่วยโปรแกรมอ่านหน้าจอและเครื่องมือค้นหา
• `<head>` เก็บข้อมูลที่ผู้ใช้ไม่เห็นโดยตรง เช่น การตั้งค่าตัวอักษร ชื่อหน้า และการตั้งค่าสำหรับมือถือ
• `<meta charset="UTF-8">` บอกว่าไฟล์ใช้ตัวอักษรแบบ UTF-8 ซึ่งทำให้ภาษาไทยแสดงถูกต้อง
• `<title>` คือชื่อที่แสดงบนแท็บของเบราว์เซอร์
• `<body>` เก็บเนื้อหาทั้งหมดที่ผู้ใช้จะเห็นบนหน้าจอ

บันทึกไฟล์ แล้วดับเบิลคลิกเพื่อเปิดด้วยเบราว์เซอร์ คุณจะเห็นหัวข้อและย่อหน้าที่เขียนไว้

วิธีบันทึกและรันตัวอย่างทุกตัว

1. สร้างโฟลเดอร์ชื่อ `my-website` ไว้บนเดสก์ท็อป

2. ในโฟลเดอร์นี้ สร้างไฟล์ใหม่ชื่อ `index.html` (ทุกตัวอย่างในบทความใช้ชื่อไฟล์ตามที่ระบุไว้ในตารางด้านล่าง)

3. คัดลอกโค้ดจากตัวอย่างไปวางแทนเนื้อหาในไฟล์

4. บันทึกด้วย UTF-8 (Notepad: เลือก "Save As" แล้วตั้ง Encoding เป็น UTF-8) และตรวจว่าไฟล์ลงท้ายด้วย `.html` จริง ไม่ใช่ `.html.txt`

5. ดับเบิลคลิกไฟล์เพื่อเปิดในเบราว์เซอร์ หรือกด F5 หลังบันทึกใหม่เพื่อดูผลลัพธ์

6. ถ้าใช้ VS Code แนะนำให้ติดตั้งส่วนเสริม Live Server เพื่อให้หน้าเว็บรีเฟรชอัตโนมัติทุกครั้งที่บันทึก

ตัวอย่างที่มีรูปภาพ (เช่น แกลเลอรี หรือหน้าร้านกาแฟ) ต้องวางไฟล์รูปไว้ในโฟลเดอร์เดียวกับ HTML และให้ชื่อไฟล์ตรงกับค่า `src` ทุกตัวอักษร ถ้าชื่อไม่ตรง เบราว์เซอร์จะแสดงกรอบรูปเสียพร้อมข้อความ `alt` แทน

ข้อความและหัวข้อ

HTML มีแท็กหัวข้อตั้งแต่ `<h1>` ถึง `<h6>` โดย `<h1>` คือหัวข้อที่สำคัญที่สุด ควรมีเพียงหนึ่งครั้งต่อหน้า ส่วน `<h2>` ถึง `<h6>` ใช้กับหัวข้อย่อยตามลำดับ

<h1>ประวัติของฉัน</h1>
<h2>วัยเด็ก</h2>
<p>ฉันเกิดที่กรุงเทพฯ และชอบอ่านหนังสือตั้งแต่เด็ก</p>
<p>ฉันชอบ <strong>เขียนโปรแกรม</strong> และ <em>ถ่ายภาพ</em></p>
<p>บรรทัดนี้ขึ้นบรรทัดใหม่<br>แล้วต่อด้วยบรรทัดนี้</p>

`<p>` คือย่อหน้า `<strong>` ทำให้ข้อความเป็นตัวหนาพร้อมความหมายว่าสำคัญ ส่วน `<em>` ทำให้เป็นตัวเอียงพร้อมความหมายว่าเน้น `<br>` ขึ้นบรรทัดใหม่โดยไม่ต้องเริ่มย่อหน้าใหม่ แท็กนี้ไม่มีแท็กปิด

ลิงก์และรูปภาพ

แท็ก `<a>` สร้างลิงก์ ค่า `href` คือปลายทาง

<a href="https://www.example.com">ไปที่เว็บตัวอย่าง</a>
<a href="about.html">ไปหน้าเกี่ยวกับฉัน</a>

ลิงก์แรกพาไปยังเว็บภายนอก ลิงก์ที่สองพาไปยังไฟล์ `about.html` ในโฟลเดอร์เดียวกัน

แท็ก `<img>` แสดงรูปภาพ ต้องมีค่า `src` เป็นที่อยู่รูป และควรมี `alt` เสมอ เพื่ออธิบายรูปสำหรับคนที่มองไม่เห็นหรือเมื่อรูปโหลดไม่ขึ้น

<img src="photo.jpg" alt="ภาพถ่ายทิวทัศน์ยามเช้า" width="400">

รายการ

รายการแบบไม่เรียงลำดับใช้ `<ul>` ส่วนรายการแบบมีลำดับใช้ `<ol>` และแต่ละข้อใช้ `<li>`

<h2>ภาษาที่ฉันอยากเรียน</h2>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<h2>ขั้นตอนการติดตั้ง</h2>
<ol>
  <li>ดาวน์โหลดโปรแกรม</li>
  <li>ติดตั้งตามขั้นตอน</li>
  <li>เปิดโปรแกรมเพื่อเริ่มใช้งาน</li>
</ol>

ตาราง

ตารางใช้แท็ก `<table>` แต่ละแถวคือ `<tr>` ช่องหัวตารางคือ `<th>` และช่องข้อมูลคือ `<td>`

<table>
  <tr>
    <th>วิชา</th>
    <th>คะแนน</th>
  </tr>
  <tr>
    <td>คณิตศาสตร์</td>
    <td>85</td>
  </tr>
  <tr>
    <td>ภาษาอังกฤษ</td>
    <td>78</td>
  </tr>
</table>

ควรใช้ตารางเฉพาะกับข้อมูลที่เป็นตารางจริง ๆ อย่าใช้เพื่อจัดหน้าเว็บทั้งหน้า เพราะจะทำให้หน้าเว็บอ่านยากสำหรับโปรแกรมอ่านหน้าจอ

ฟอร์ม

ฟอร์มเป็นวิธีให้ผู้ใช้ส่งข้อมูลกลับมายังเซิร์ฟเวอร์ ตัวอย่างฟอร์มติดต่อมีช่องกรอกชื่อ อีเมล และข้อความ

<form action="/send" method="post">
  <label for="name">ชื่อ:</label>
  <input type="text" id="name" name="name" required>

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

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

  <button type="submit">ส่งข้อความ</button>
</form>

แท็ก `<label>` ผูกกับช่องกรอกผ่านค่า `for` ซึ่งต้องตรงกับค่า `id` ของช่องนั้น การทำแบบนี้ทำให้คลิกที่ชื่อก็โฟกัสช่องได้ และช่วยให้โปรแกรมอ่านหน้าจอบอกผู้ใช้ได้ว่าต้องกรอกอะไร แอตทริบิวต์ `required` บังคับให้กรอกก่อนส่ง และ `type="email"` ให้เบราว์เซอร์ตรวจรูปแบบอีเมลให้

แท็กเชิงความหมาย

นอกจาก `<div>` ซึ่งไม่มีความหมายเฉพาะ HTML5 มีแท็กเชิงความหมายที่บอกโครงสร้างของหน้าได้ชัดเจน

• `<header>` ส่วนหัวของหน้าหรือของบทความ
• `<nav>` เมนูนำทาง
• `<main>` เนื้อหาหลักของหน้า มีได้หนึ่งอันต่อหน้า
• `<section>` ส่วนหนึ่งของเนื้อหาที่มีหัวข้อของตัวเอง
• `<article>` เนื้อหาที่อ่านแยกเป็นเอกเทศได้ เช่น บทความหรือโพสต์
• `<footer>` ส่วนท้ายของหน้าหรือของบทความ

<body>
  <header>
    <h1>เว็บของฉัน</h1>
    <nav>
      <a href="index.html">หน้าแรก</a>
      <a href="about.html">เกี่ยวกับ</a>
    </nav>
  </header>
  <main>
    <article>
      <h2>บทความแรก</h2>
      <p>เนื้อหาของบทความ</p>
    </article>
  </main>
  <footer>
    <p>สงวนลิขสิทธิ์ 2026</p>
  </footer>
</body>

แท็กเชิงความหมายช่วยให้เครื่องมือค้นหาเข้าใจหน้าเว็บของคุณดีขึ้น และช่วยให้ผู้ที่ใช้โปรแกรมอ่านหน้าจอเลื่อนไปยังส่วนที่ต้องการได้เร็วขึ้น

แอตทริบิวต์ id และ class

แอตทริบิวต์คือข้อมูลเพิ่มเติมที่ใส่ในแท็ก เช่น `href`, `src` และ `alt` ที่ได้กล่าวไปแล้ว สองตัวที่ใช้บ่อยที่สุดคือ `id` และ `class`

• `id` ต้องไม่ซ้ำกันทั้งหน้า ใช้ระบุองค์ประกอบเพียงหนึ่งชิ้น
• `class` ใช้กับหลายองค์ประกอบได้ ใช้จัดกลุ่มเพื่อตกแต่งด้วย CSS

<p id="intro" class="highlight">ย่อหน้านี้มีรหัสประจำตัวและอยู่ในกลุ่ม highlight</p>
<p class="highlight">ย่อหน้านี้ก็อยู่ในกลุ่มเดียวกัน</p>

เชื่อม CSS และ JavaScript

เพื่อให้หน้าดูดีขึ้น ควรแยกการตกแต่งไว้ในไฟล์ CSS และเชื่อมเข้ามาด้วยแท็ก `<link>` ในส่วน `<head>`

<link rel="stylesheet" href="style.css">

ไฟล์ `style.css` อาจมีเนื้อหาเช่นนี้

body {
  font-family: sans-serif;
  background-color: #f5f7fb;
  color: #1a1a1a;
}
h1 {
  color: #2255aa;
}

ส่วน JavaScript เชื่อมด้วยแท็ก `<script>` โดยควรวางไว้ก่อนปิด `</body>` เพื่อให้หน้าโหลดเนื้อหาก่อนแล้วจึงทำงาน

<script src="main.js"></script>

ทำโปรเจกต์เล็ก: หน้าโปรไฟล์ส่วนตัว

ลองรวมทุกอย่างเข้าด้วยกันโดยสร้างหน้าโปรไฟล์ส่วนตัว

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>โปรไฟล์ของฉัน</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>สมชาย ใจดี</h1>
    <nav>
      <a href="#about">เกี่ยวกับ</a>
      <a href="#skills">ทักษะ</a>
      <a href="#contact">ติดต่อ</a>
    </nav>
  </header>

  <main>
    <section id="about">
      <h2>เกี่ยวกับฉัน</h2>
      <img src="me.jpg" alt="รูปถ่ายของสมชาย" width="160">
      <p>ฉันเป็นนักพัฒนาเว็บที่กำลังเรียนรู้ทุกวัน</p>
    </section>

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

    <section id="contact">
      <h2>ติดต่อ</h2>
      <p>อีเมล: <a href="mailto:[email protected]">[email protected]</a></p>
    </section>
  </main>

  <footer>
    <p>สร้างด้วย HTML</p>
  </footer>
</body>
</html>

ลิงก์ `#about` ชี้ไปยังองค์ประกอบที่มี `id="about"` ในหน้าเดียวกัน ทำให้เมนูเลื่อนลงไปยังส่วนนั้นทันที ส่วนลิงก์ `mailto:` เปิดโปรแกรมอีเมลของผู้ใช้

ตัวอย่างเพิ่มเติม: เขียนหน้าเมนูร้านกาแฟทีละขั้น

ลองเขียนหน้าเมนูร้านกาแฟสมมติ เพื่อฝึกใช้แท็กหลายชนิดร่วมกัน เริ่มจากโครงหลักก่อน

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>เมนูร้านกาแฟบ้านสวน</title>
</head>
<body>
  <h1>เมนูร้านกาแฟบ้านสวน</h1>
  <p>เปิดทุกวัน 8.00 - 18.00 น.</p>
</body>
</html>

อธิบายทีละบรรทัด

• `<h1>` เป็นชื่อร้าน เป็นหัวข้อหลักเพียงหนึ่งเดียวของหน้า
• `<p>` เป็นข้อความทั่วไป เช่นเวลาเปิดปิด ซึ่งไม่ต้องการการเน้นพิเศษ

ขั้นต่อมาเพิ่มหมวดหมู่เครื่องดื่ม โดยใช้ `<h2>` เป็นหัวข้อย่อย และใช้ `<ul>` กับ `<li>` สำหรับรายการ

<h2>กาแฟร้อน</h2>
<ul>
  <li>เอสเปรสโซ 45 บาท</li>
  <li>ลาเต้ 55 บาท</li>
  <li>คาปูชิโน 55 บาท</li>
</ul>

<h2>เครื่องดื่มเย็น</h2>
<ul>
  <li>อเมริกาโน่เย็น 60 บาท</li>
  <li>ชาเขียวนม 50 บาท</li>
</ul>

ขั้นต่อมาใส่ราคาในตาราง เพื่อให้เปรียบเทียบได้ง่ายขึ้น ใช้ `<table>` กับ `<th>` และ `<td>` ตามที่อธิบายไปแล้ว

<table>
  <tr>
    <th>เมนู</th>
    <th>ขนาด</th>
    <th>ราคา</th>
  </tr>
  <tr>
    <td>ลาเต้</td>
    <td>เล็ก</td>
    <td>55 บาท</td>
  </tr>
  <tr>
    <td>ลาเต้</td>
    <td>ใหญ่</td>
    <td>65 บาท</td>
  </tr>
</table>

สุดท้ายเพิ่มรูปร้านและลิงก์กลับหน้าแรก เพื่อให้หน้าเว็บใช้งานได้จริง

<img src="shop.jpg" alt="หน้าร้านกาแฟบ้านสวนที่มีต้นไม้ร่มรื่น" width="600">
<p><a href="index.html">กลับหน้าแรก</a></p>

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

ข้อผิดพลาดที่มือใหม่มักเจอและวิธีแก้

• **ลืมปิดแท็ก:** เช่นเขียน `<p>ข้อความ` โดยไม่มี `</p>` ทำให้หน้าเพี้ยนได้ ให้เช็กว่าทุกแท็กที่เปิดมีการปิดที่ตรงกัน
• **ใช้ `<br>` แทนการเว้นย่อหน้า:** ถ้าต้องการช่องว่างระหว่างย่อหน้า ควรใช้ `<p>` แยกกัน ไม่ควรใช้ `<br>` หลายครั้ง
• **ลืม `alt` ในรูป:** ทำให้คนใช้โปรแกรมอ่านหน้าจอไม่รู้ว่ารูปคืออะไร ใส่คำอธิบายสั้น ๆ เสมอ
• **ใช้ `id` ซ้ำ:** `id` ต้องไม่ซ้ำกันในหน้า ถ้าซ้ำ ลิงก์และ CSS อาจทำงานผิดพลาด
• **ลิงก์รูปหรือไฟล์ผิดที่:** ตรวจว่าชื่อไฟล์และโฟลเดอร์ตรงกันทุกตัวอักษร เพราะระบบส่วนใหญ่แยกตัวพิมพ์เล็กพิมพ์ใหญ่
• **เปิดไฟล์แล้วไม่เห็นการเปลี่ยนแปลง:** ให้บันทึกไฟล์ก่อนแล้วกดรีเฟรชเบราว์เซอร์ หรือกด Ctrl+F5 เพื่อโหลดใหม่ทั้งหมด

เมื่อเจอข้อผิดพลาด อ่านข้อความแจ้งเตือนในเครื่องมือตรวจสอบของเบราว์เซอร์ (กด F12 แล้วเลือกแท็บ Console) จะช่วยชี้ตำแหน่งปัญหาได้เร็วขึ้นมาก

คำสั่งและแท็กเพิ่มเติมที่ควรรู้

นอกจากแท็กพื้นฐานแล้ว HTML ยังมีแท็กอีกมากที่ช่วยให้หน้าเว็บสมบูรณ์ขึ้น ต่อไปนี้คือแท็กที่ใช้บ่อย พร้อมตัวอย่างสั้น ๆ

การเน้นข้อความ

<p>ราคาเดิม <s>100 บาท</s> ตอนนี้เหลือ <mark>80 บาท</mark></p>
<p>น้ำ H<sub>2</sub>O และ E = mc<sup>2</sup></p>
<p>ระวัง: <small>ไม่รวมภาษี</small></p>
<p>คำว่า <abbr title="HyperText Markup Language">HTML</abbr> ย่อมาจากอะไร</p>
<p>ประชุมวันที่ <time datetime="2026-10-30">30 ตุลาคม</time></p>

`<mark>` ไฮไลต์ข้อความ `<sub>` และ `<sup>` ทำตัวห้อยและตัวยก `<abbr>` ให้เมาส์ชี้แล้วเห็นคำเต็ม และ `<time>` บอกวันเวลาที่อ่านได้ทั้งโดยมนุษย์และเครื่องมือ

การอ้างอิงและโค้ด

<blockquote cite="https://example.com/source">
  การเรียนรู้คือการลงมือทำซ้ำ ๆ
</blockquote>
<p>ตัวอย่างคำสั่ง: <code>console.log("hi")</code></p>
<pre>
  บรรทัดนี้จะคงช่องว่าง
  และการขึ้นบรรทัดไว้เหมือนที่พิมพ์
</pre>

`<blockquote>` ใช้ยกข้อความที่มาจากที่อื่น `<code>` ใช้แสดงคำสั่งในบรรทัด และ `<pre>` เก็บการเว้นวรรคกับการขึ้นบรรทัดไว้ทั้งหมด

การจัดกลุ่มข้อมูล

<figure>
  <img src="chart.png" alt="กราฟยอดขายรายเดือน" width="500">
  <figcaption>ยอดขายรายเดือนปี 2026</figcaption>
</figure>

<details>
  <summary>คลิกเพื่อดูวิธีสมัคร</summary>
  <p>กรอกชื่อและอีเมล แล้วกดยืนยัน</p>
</details>

<dl>
  <dt>HTML</dt>
  <dd>ภาษาสำหรับโครงสร้างเว็บ</dd>
  <dt>CSS</dt>
  <dd>ภาษาสำหรับตกแต่งหน้าตาเว็บ</dd>
</dl>

`<figure>` และ `<figcaption>` จับคู่รูปกับคำอธิบาย `<details>` ซ่อนเนื้อหาจนกว่าผู้ใช้จะคลิก และ `<dl>` ใช้จัดคู่คำศัพท์กับคำอธิบาย

วิดีโอ เสียง และเฟรมภายนอก

<video controls width="480" poster="cover.jpg">
  <source src="clip.mp4" type="video/mp4">
  เบราว์เซอร์ของคุณไม่รองรับวิดีโอ
</video>

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
</audio>

<iframe src="https://www.example.com/map" width="400" height="300" title="แผนที่ร้าน"></iframe>

`controls` แสดงปุ่มควบคุมการเล่น ส่วน `<iframe>` ฝังหน้าเว็บอื่นไว้ในหน้าของเรา ควรใส่ `title` เสมอ เพื่อให้คนใช้เครื่องอ่านหน้าจอรู้ว่าเฟรมนั้นคืออะไร

ฟอร์มเพิ่มเติม

<form>
  <fieldset>
    <legend>ช่องทางที่ต้องการรับข่าว</legend>
    <input type="checkbox" id="mail" name="channel" value="mail">
    <label for="mail">อีเมล</label>
    <input type="radio" id="sms" name="plan" value="sms">
    <label for="sms">SMS</label>
  </fieldset>

  <label for="city">จังหวัด:</label>
  <select id="city" name="city">
    <option value="bkk">กรุงเทพฯ</option>
    <option value="cnx">เชียงใหม่</option>
  </select>

  <label for="visit">วันที่เข้าชม:</label>
  <input type="date" id="visit" name="visit">

  <label for="qty">จำนวน:</label>
  <input type="number" id="qty" name="qty" min="1" max="10" value="1">
</form>

`checkbox` ให้เลือกได้หลายข้อ `radio` ให้เลือกได้ข้อเดียวในกลุ่มที่มี `name` เดียวกัน `select` ทำเมนูแบบดรอปดาวน์ และ `type="date"` หรือ `type="number"` ทำให้เบราว์เซอร์แสดงตัวเลือกที่เหมาะกับชนิดข้อมูล

เส้นแบ่งและแถบความคืบหน้า

<hr>
<p>ดาวน์โหลดแล้ว 70%</p>
<progress value="70" max="100"></progress>
<meter value="0.6" min="0" max="1">60%</meter>

`<hr>` ใช้แบ่งหัวข้อเรื่องในเชิงความหมาย ไม่ใช่เพียงเส้นตกแต่ง ส่วน `<progress>` และ `<meter>` แสดงค่าเป็นแถบ โดย `<progress>` ใช้กับงานที่กำลังดำเนินการ และ `<meter>` ใช้กับค่าที่วัดได้ในช่วงที่กำหนด

ตัวอย่าง HTML เพิ่มเติม 10 แบบ

ต่อไปนี้คือตัวอย่างที่มักพบในเว็บจริง แต่ละตัวอย่างเป็นโค้ดที่คัดลอกไปวางได้ทันที พร้อมอธิบายว่าทำไมจึงเขียนแบบนั้น

ตัวอย่างที่ 1: บันทึกการเดินทาง

<article>
  <h2>เชียงใหม่ 3 วัน 2 คืน</h2>
  <p>เดินทางช่วงต้นปี อากาศเย็นสบาย</p>
  <ol>
    <li>วันแรก: วัดพระธาตุดอยสุเทพ</li>
    <li>วันที่สอง: ตลาดวโรรส</li>
    <li>วันที่สาม: ดอยอินทนนท์</li>
  </ol>
</article>

บทความบันทึกการเดินทางใช้ `<article>` เพราะเป็นเนื้อหาที่อ่านแยกได้ และใช้ `<ol>` เพราะลำดับของวันมีความหมาย ถ้าใช้ `<ul>` ลำดับจะหายไปจากความหมายของเนื้อหา

ตัวอย่างที่ 2: แบบฟอร์มสมัครสมาชิกพร้อมการตรวจสอบ

<form action="/register" method="post">
  <label for="username">ชื่อผู้ใช้ (ภาษาอังกฤษ 4-12 ตัว):</label>
  <input type="text" id="username" name="username"
         pattern="[A-Za-z]{4,12}" required>

  <label for="password">รหัสผ่าน (อย่างน้อย 8 ตัว):</label>
  <input type="password" id="password" name="password"
         minlength="8" required>

  <label for="birth">วันเกิด:</label>
  <input type="date" id="birth" name="birth">

  <button type="submit">สมัครสมาชิก</button>
</form>

แอตทริบิวต์ `pattern` ใช้นิพจน์ปกติตรวจรูปแบบข้อความ `minlength` กำหนดความยาวขั้นต่ำ และ `required` บังคับให้กรอก เบราว์เซอร์จะแจ้งเตือนให้ผู้ใช้แก้ไขก่อนส่ง ซึ่งลดภาระของเซิร์ฟเวอร์ แต่ต้องตรวจซ้ำที่เซิร์ฟเวอร์เสมอ เพราะผู้ไม่หวังดีสามารถข้ามการตรวจของเบราว์เซอร์ได้

ตัวอย่างที่ 3: แกลเลอรีรูปภาพ

<section>
  <h2>ภาพถ่ายทริป</h2>
  <figure>
    <img src="doi1.jpg" alt="ทะเลหมอกบนดอยอินทนนท์" width="300">
    <figcaption>ทะเลหมอกยามเช้า</figcaption>
  </figure>
  <figure>
    <img src="temple.jpg" alt="วัดเก่าแก่ท่ามกลางต้นไม้" width="300">
    <figcaption>วัดในเมืองเก่า</figcaption>
  </figure>
</section>

ทุกรูปใช้ `<figure>` คู่กับ `<figcaption>` เพื่อให้คำอธิบายผูกกับรูปจริง ๆ ค่า `alt` ควรบรรยายภาพ ไม่ใช่เขียนว่า "รูปภาพ" เฉย ๆ

ตัวอย่างที่ 4: เมนูนำทางแบบซ้อน

<nav>
  <ul>
    <li><a href="index.html">หน้าแรก</a></li>
    <li>
      <a href="shop.html">สินค้า</a>
      <ul>
        <li><a href="shop-shirts.html">เสื้อ</a></li>
        <li><a href="shop-bags.html">กระเป๋า</a></li>
      </ul>
    </li>
    <li><a href="contact.html">ติดต่อเรา</a></li>
  </ul>
</nav>

เมนูเป็นรายการซ้อนกันเพราะโครงสร้างมีลำดับชั้นจริง เครื่องมืออ่านหน้าจอจะแจ้งจำนวนรายการและระดับของเมนูให้ผู้ใช้ทราบ

ตัวอย่างที่ 5: หน้าคำถามที่พบบ่อย

<h2>คำถามที่พบบ่อย</h2>
<details>
  <summary>สั่งซื้อแล้วจะได้รับสินค้าเมื่อไร</summary>
  <p>จัดส่งภายใน 1-3 วันทำการ ขึ้นอยู่กับพื้นที่</p>
</details>
<details>
  <summary>คืนสินค้าได้หรือไม่</summary>
  <p>คืนได้ภายใน 7 วัน หากสินค้ายังไม่ผ่านการใช้งาน</p>
</details>

`<details>` ช่วยให้หน้าสั้นลงโดยไม่ต้องใช้ JavaScript และยังเข้าถึงได้ง่ายสำหรับทุกคน

ตัวอย่างที่ 6: ตารางเปรียบเทียบแพ็กเกจ

<table>
  <caption>เปรียบเทียบแพ็กเกจ</caption>
  <thead>
    <tr>
      <th scope="col">รายการ</th>
      <th scope="col">พื้นฐาน</th>
      <th scope="col">โปร</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">พื้นที่เก็บข้อมูล</th>
      <td>5 GB</td>
      <td>50 GB</td>
    </tr>
    <tr>
      <th scope="row">ราคาต่อเดือน</th>
      <td>99 บาท</td>
      <td>299 บาท</td>
    </tr>
  </tbody>
</table>

`<caption>` ตั้งชื่อตาราง `<thead>` และ `<tbody>` แบ่งส่วนหัวกับเนื้อหา และ `scope` บอกว่าหัวตารางนั้นใช้กับคอลัมน์หรือแถว ทำให้เครื่องอ่านหน้าจอเข้าใจข้อมูลได้ถูกต้อง

ตัวอย่างที่ 7: คำคมพร้อมที่มา

<figure>
  <blockquote cite="https://example.com/book">
    <p>อย่ากลัวที่จะช้า กลัวแต่การหยุดนิ่ง</p>
  </blockquote>
  <figcaption>— จากหนังสือ <cite>เส้นทางนักเขียน</cite></figcaption>
</figure>

ใช้ `<cite>` สำหรับชื่อผลงาน ไม่ใช่ชื่อผู้เขียน และ `cite` บน `<blockquote>` ชี้ไปยังแหล่งที่มา

ตัวอย่างที่ 8: ช่องค้นหาพร้อมคำแนะนำ

<form action="/search" method="get" role="search">
  <label for="q">ค้นหาสินค้า</label>
  <input type="search" id="q" name="q" list="suggest" placeholder="เช่น กาแฟ">
  <datalist id="suggest">
    <option value="กาแฟคั่วกลาง">
    <option value="กาแฟคั่วเข้ม">
    <option value="ชาเขียว">
  </datalist>
  <button type="submit">ค้นหา</button>
</form>

`type="search"` ให้ช่องมีปุ่มล้างข้อความ `<datalist>` แสดงตัวเลือกแนะนำขณะพิมพ์ และ `method="get"` ทำให้คำค้นหาปรากฏใน URL ซึ่งแชร์หรือบุ๊กมาร์กได้

ตัวอย่างที่ 9: หน้าอ้างอิงภายในด้วย id

<nav>
  <a href="#intro">บทนำ</a> |
  <a href="#terms">คำศัพท์</a>
</nav>

<h2 id="intro">บทนำ</h2>
<p>เนื้อหาบทนำ...</p>

<h2 id="terms">คำศัพท์</h2>
<dl>
  <dt>URL</dt>
  <dd>ที่อยู่ของทรัพยากรบนเว็บ</dd>
  <dt>DNS</dt>
  <dd>ระบบแปลงชื่อโดเมนเป็น IP</dd>
</dl>

ลิงก์ที่ขึ้นต้นด้วย `#` ไปยัง `id` ในหน้าเดียวกัน ทำให้เลื่อนไปยังหัวข้อได้โดยไม่ต้องโหลดหน้าใหม่

ตัวอย่างที่ 10: เมทาแท็กสำหรับเครื่องมือค้นหา

<head>
  <meta charset="UTF-8">
  <meta name="description" content="สอนทำเว็บด้วย HTML ตั้งแต่เริ่มต้น">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta property="og:title" content="เรียน HTML ตั้งแต่เริ่มต้น">
  <meta property="og:type" content="article">
  <link rel="canonical" href="https://example.com/html-course/">
</head>

`description` คือคำอธิบายที่เครื่องมือค้นหามักแสดงใต้ชื่อเว็บ `og:title` และ `og:type` ควบคุมการแสดงผลเมื่อแชร์ลิงก์ในโซเชียลมีเดีย ส่วน `canonical` บอกว่าหน้าไหนคือเวอร์ชันหลัก ป้องกันปัญหาเนื้อหาซ้ำ

ตารางสรุปผลลัพธ์ของตัวอย่างเพิ่มเติม

แนวทางที่ควรทำตั้งแต่แรก

• ใส่ `lang` ที่ถูกต้องใน `<html>` และใส่ `alt` ในรูปทุกรูป
• ใช้แท็กตามความหมาย ไม่ใช่เพื่อให้ได้หน้าตาอย่างเดียว
• ปิดแท็กให้ครบ และจัดย่อหน้าให้อ่านง่าย
• ตรวจหน้าด้วยเครื่องมือ Validator ของ W3C เพื่อหาข้อผิดพลาดของโค้ด
• ทดสอบหน้าบนหน้าจอขนาดมือถือ เพราะผู้ใช้จำนวนมากเข้าเว็บจากโทรศัพท์

ขั้นตอนต่อไป

เมื่อเข้าใจ HTML แล้ว ควรเรียนรู้ CSS เพื่อจัดหน้าตาเว็บ แล้วต่อด้วย JavaScript เพื่อทำให้หน้าเว็บโต้ตอบกับผู้ใช้ได้ หลังจากนั้นสามารถเรียนรู้เครื่องมือเช่น Git เพื่อจัดการโค้ด หรือเฟรมเวิร์กอย่าง React หรือ Vue เมื่อโปรเจกต์ใหญ่ขึ้น

สรุป

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