🌐 คู่มือการเขียน HTML

บทนำ HTML

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

HTML คืออะไร

ความหมาย

HTML ย่อมาจาก HyperText Markup Language

HTML ใช้สำหรับ

ประวัติความเป็นมา

เวอร์ชัน ปี ข้อเสริม
HTML 1989 เวอร์ชันแรก โดย Tim Berners-Lee
HTML 2.0 1995 เพิ่ม form elements
HTML 3.2 1997 เพิ่ม tables, applets
HTML 4.01 1999 ปรับปรุง structure, frames
XHTML 1.0 2000 XML-based version
HTML5 2014 เวอร์ชันปัจจุบัน เพิ่ม semantic tags, media, APIs

โครงสร้างพื้นฐาน

Minimal HTML Document

โครงสร้าง HTML ที่สมบูรณ์ต่ำสุด:

<!DOCTYPE html>
<html lang="th">
  <head>
    <meta charset="UTF-8" />
    <title>ชื่อเพจ</title>
  </head>
  <body>
    <h1>ยินดีต้อนรับ</h1>
    <p>เนื้อหาของเพจ</p>
  </body>
</html>
💡 ข้อมูล: DOCTYPE บอกให้เบราว์เซอร์รู้ว่าใช้ HTML5 และต้องอยู่ที่บรรทัดแรกเสมอ

DOCTYPE Declaration

บอกให้เบราว์เซอร์รู้ว่านี่คือ HTML5:

<!DOCTYPE html>

HTML Element

<html lang="th" dir="ltr">
  <!-- เนื้อหา -->
</html>

Head Element

ประกอบด้วย metadata ที่ไม่ปรากฏบนหน้าเว็บ:

<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 Element

ประกอบด้วยเนื้อหาทั้งหมดที่ปรากฏบนหน้าเว็บ

HTML Elements และ Tags

ความแตกต่างระหว่าง Element และ Tag

ประเภทของ Tags

Paired Tags (Open & Close)

<p>เนื้อหา</p>

Self-closing Tags

<img src="image.jpg" alt="รูป" />

Text Elements

Text Elements คือ tags ที่ใช้ในการจัดรูปแบบและกำหนดความหมายให้กับข้อความ นี่เป็นส่วนพื้นฐานของการสร้างเนื้อหา HTML

Headings (หัวข้อ)

Headings ใช้สำหรับกำหนดลำดับชั้นของเนื้อหา มี 6 ระดับ (h1-h6) โดยที่ h1 เป็นหัวข้อหลัก: 

<h1>หัวข้อระดับ 1</h1>
<h2>หัวข้อระดับ 2</h2>
<h3>หัวข้อระดับ 3</h3>
⚠️ สำคัญ: ใช้ h1 เพียง 1 อันต่อหน้า สำหรับ SEO และ Accessibility
💡 เคล็ดลับ: ลำดับการใช้ h tags ควรเป็นลำดับชั้น เช่น h1 → h2 → h3 ไม่ควรข้ามระดับ

Paragraph (ย่อหน้า)

Tag <p> ใช้สำหรับกำหนดย่อหน้า โดยบราวเซอร์จะเพิ่มพื้นที่ว่างก่อน-หลังโดยอัตโนมัติ: 

<p>นี่คือย่อหน้าแรก</p>
<p>นี่คือย่อหน้าที่สอง</p>

Text Formatting (จัดรูปแบบข้อความ)

มีหลายวิธีในการจัดรูปแบบข้อความ แต่สำคัญที่สุดคือการเลือก tag ที่ถูกต้องตามความหมาย: 

<b>ข้อความตัวหนา</b>           <!-- Visual only (ไม่มีความหมาย semantic) -->
<strong>ข้อความสำคัญ</strong>   <!-- Semantic (สำหรับ screen reader) -->
<i>ข้อความเอียง</i>            <!-- Visual only -->
<em>ข้อความที่เน้น</em>         <!-- Semantic (emphasis) -->
<del>ลบออก</del>              <!-- ข้อความที่ถูกลบ -->
<ins>เพิ่มเข้ามา</ins>          <!-- ข้อความที่เพิ่มใหม่ -->
<mark>ไฮไลท์</mark>            <!-- ทำเครื่องหมายข้อความ -->
<small>ข้อความขนาดเล็ก</small> <!-- เช่น copyright -->
<sub>ตัวห้อย</sub>             <!-- Subscript (เช่น H₂O) -->
<sup>ตัวยก</sup>              <!-- Superscript (เช่น x²) -->
✅ ดีที่สุด: ใช้ <strong> และ <em> แทน <b> และ <i> เพราะมี semantic meaning

Links ใช้สำหรับนำทางระหว่างหน้า ไฟล์ หรือ resources อื่น ๆ

Basic Links (ลิงก์พื้นฐาน)

<!-- ลิงก์ไปยัง URL ภายนอก -->
<a href="https://example.com">ลิงก์พื้นฐาน</a>

<!-- ลิงก์ไปยังไฟล์ภายในเว็บไซต์ -->
<a href="about.html">เกี่ยวกับเรา</a>

<!-- ลิงก์ไปยัง anchor (ID ในหน้าเดียวกัน) -->
<a href="#section2">ไปยังส่วนที่ 2</a>

<!-- เปิดลิงก์ในแท็บใหม่ -->
<a href="https://example.com" target="_blank">เปิดในแท็บใหม่</a>

Special Links (ลิงก์พิเศษ)

<!-- ลิงก์สำหรับส่งอีเมล -->
<a href="mailto:info@example.com">ส่งอีเมล</a>

<!-- ลิงก์สำหรับโทรศัพท์ -->
<a href="tel:+66812345678">โทรสาย</a>

<!-- ลิงก์สำหรับ WhatsApp -->
<a href="https://wa.me/66812345678">Chat บน WhatsApp</a>
💡 ข้อมูล: href attribute ต้องชี้ไปยังที่ถูกต้อง อาจเป็น URL, ไฟล์, หรือ anchor

Image Elements

Images ใช้สำหรับแสดงรูปภาพในหน้าเว็บ tag <img> เป็น void element (ไม่มี closing tag)

Basic Image (รูปพื้นฐาน)

<img src="image.jpg" alt="คำอธิบายรูป" />
⚠️ สำคัญ: ทั้ง src และ alt เป็นสิ่งจำเป็น:
  • src: เส้นทางไปยังไฟล์รูปภาพ
  • alt: คำอธิบายรูปสำหรับ accessibility และ SEO

Image with Size (รูปกับขนาด)

<img src="image.jpg" alt="รูป" width="200" height="150" />
💡 เคล็ดลับ: กำหนดขนาดช่วยบ่อกองค์ประกอบเปลี่ยนแปลงและป้องกัน Cumulative Layout Shift

Responsive Images (รูปแบบตอบสนอง)

<!-- ใช้ srcset สำหรับรูปคุณภาพต่างกัน -->
<img 
  src="image-small.jpg"
  srcset="image-medium.jpg 800w, image-large.jpg 1200w"
  alt="คำอธิบาย"
/>

List Elements

Lists ใช้สำหรับแสดงข้อมูลในรูปแบบรายการ มี 3 ประเภท: Unordered, Ordered, และ Description

Unordered List (รายการไม่มีลำดับ)

ใช้ <ul> กับ <li> เมื่อลำดับไม่สำคัญ:

<ul>
  <li>รายการที่ 1</li>
  <li>รายการที่ 2</li>
  <li>รายการที่ 3</li>
</ul>

Ordered List (รายการมีลำดับ)

ใช้ <ol> เมื่อลำดับสำคัญ:

<ol>
  <li>ขั้นตอนแรก</li>
  <li>ขั้นตอนที่สอง</li>
  <li>ขั้นตอนที่สาม</li>
</ol>

Nested List (รายการซ้อน)

<ul>
  <li>หมวดหมู่ 1
    <ul>
      <li>หมวดย่อย 1.1</li>
      <li>หมวดย่อย 1.2</li>
    </ul>
  </li>
  <li>หมวดหมู่ 2</li>
</ul>

Description List (รายการอธิบาย)

<dl>
  <dt>HTML</dt>
  <dd>ภาษามาร์กอัป - โครงสร้างของเว็บ</dd>
  
  <dt>CSS</dt>
  <dd>แบบฟอร์มและการออกแบบ - ลักษณะของเว็บ</dd>
</dl>

Table Elements

Tables ใช้สำหรับแสดงข้อมูลแบบตารางโดยใช้ rows (แถว) และ columns (คอลัมน์)

Basic Table (ตารางพื้นฐาน)

<table border="1">
  <thead>
    <tr>
      <th>ชื่อ</th>
      <th>อายุ</th>
      <th>เมือง</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>สมชาย</td>
      <td>25</td>
      <td>กรุงเทพ</td>
    </tr>
    <tr>
      <td>วิจิตรา</td>
      <td>23</td>
      <td>เชียงใหม่</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">รวมทั้งหมด 2 คน</td>
    </tr>
  </tfoot>
</table>

Table Structure (โครงสร้างตาราง)

Advanced Table Features (คุณสมบัติขั้นสูง)

<!-- colspan: ยุบหลายคอลัมน์ -->
<td colspan="2">ข้อมูลข้ามคอลัมน์</td>

<!-- rowspan: ยุบหลายแถว -->
<td rowspan="3">ข้อมูลข้ามแถว</td>

Form Elements

Forms ใช้สำหรับรวบรวมข้อมูลจากผู้ใช้เช่น ชื่อ อีเมล ข้อความ ฯลฯ

Basic Form (ฟอร์มพื้นฐาน)

<form action="submit.php" method="POST">
  <label for="username">ชื่อผู้ใช้:</label>
  <input type="text" id="username" name="username" required />

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

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

  <input type="submit" value="ส่งข้อมูล" />
</form>

Form Attributes (คุณลักษณะของฟอร์ม)

Input Types (ประเภทของ input)

<input type="text" />           <!-- ข้อความปกติ -->
<input type="email" />          <!-- อีเมล (มี validation) -->
<input type="password" />       <!-- รหัสผ่าน (ซ่อนข้อความ) -->
<input type="number" />         <!-- ตัวเลข -->
<input type="date" />           <!-- วันที่ -->
<input type="checkbox" />       <!-- กล่องเลือก -->
<input type="radio" />          <!-- ปุ่มเลือก (หนึ่งเดียว) -->
<textarea></textarea>          <!-- พื้นที่ข้อความหลายบรรทัด -->
<select></select>              <!-- ดรอปดาวน์ -->

Semantic Elements

Semantic HTML ใช้ tags ที่บ่งบอกความหมายที่ชัดเจน ทำให้ search engines และ screen readers เข้าใจเนื้อหาได้ดีขึ้น

Document Structure Tags (Tags โครงสร้างเอกสาร)

<header>...</header>    <!-- ส่วนหัว (โลโก้, เมนู) -->
<nav>...</nav>         <!-- เมนูนำทาง -->
<main>...</main>       <!-- เนื้อหาหลักของหน้า (1 เดียว) -->
<article>...</article> <!-- บทความ (independent content) -->
<section>...</section> <!-- ส่วนของหน้า (thematic grouping) -->
<aside>...</aside>     <!-- sidebar / content นอกเหนือจาก main -->
<footer>...</footer>   <!-- ส่วนท้าย -->

Content Grouping (การจัดกลุ่มเนื้อหา)

<figure>
  <img src="diagram.png" alt="แผนภาพ" />
  <figcaption>รูปที่ 1: คำอธิบาย</figcaption>
</figure>

<blockquote>
  <p>นี่คือการอ้างอิงจากแหล่งอื่น</p>
  <footer>- ชื่อผู้เขียน</footer>
</blockquote>

<address>
  ติดต่อ: info@example.com<br />
  123 ถนน ตำบล อำเภอ
</address>

Text Level Semantic Elements (Elements ระดับข้อความ)

<time datetime="2024-12-01">1 ธันวาคม 2024</time>
<mark>ข้อความที่ไฮไลท์</mark>
<code>cout << "Hello";</code>
<kbd>Ctrl</kbd> + <kbd>C</kbd>
<samp>Program output</samp>

Meta Tags และ Document Head

Meta tags ให้ข้อมูลเกี่ยวกับเอกสาร HTML ต่อเบราว์เซอร์และ search engines

Essential Meta Tags (Meta tags สำคัญ)

<head>
  <!-- Character encoding -->
  <meta charset="UTF-8" />
  
  <!-- Responsive design -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
  <!-- SEO -->
  <meta name="description" content="คำอธิบายเพจสั้น ๆ" />
  <meta name="keywords" content="keyword1, keyword2, keyword3" />
  <meta name="author" content="ชื่อผู้เขียน" />
  
  <!-- Open Graph (Social Media) -->
  <meta property="og:title" content="ชื่อเพจ" />
  <meta property="og:description" content="คำอธิบาย" />
  <meta property="og:image" content="image.jpg" />
  
  <!-- Stylesheets & Icon -->
  <link rel="icon" href="favicon.ico" />
  <link rel="stylesheet" href="style.css" />
  
  <!-- Title -->
  <title>ชื่อเพจ - เว็บไซต์</title>
</head>

Attributes (คุณลักษณะ)

Attributes ให้ข้อมูลเพิ่มเติมแก่ HTML elements

Common Attributes (Attributes ทั่วไป)

<!-- id: ให้ ID ไปยังองค์ประกอบ (unique, ใช้เพียงครั้งเดียว) -->
<h1 id="main-title">ชื่อเรื่อง</h1>

<!-- class: ให้ class สำหรับ styling (สามารถใช้หลายครั้ง) -->
<p class="intro highlight important">ย่อหน้า</p>

<!-- style: inline CSS (หลีกเลี่ยงถ้าสามารถ) -->
<p style="color: blue; font-size: 16px;">ข้อความสีน้ำเงิน</p>

<!-- title: tooltip (แสดงเมื่อ hover) -->
<p title="ข้อมูลเพิ่มเติม">วางเมาส์เพื่อดูข้อมูล</p>

<!-- data attribute: เก็บข้อมูลสำหรับ JavaScript -->
<div data-product-id="123" data-category="electronics">
  สินค้า
</div>

<!-- disabled: ปิดใช้งาน element -->
<input type="submit" value="ส่งข้อมูล" disabled />

<!-- hidden: ซ่อน element -->
<p hidden>ข้อความซ่อน</p>

Global Attributes (Attributes ทั่วไปทั้งหมด)

Comments (ความเห็น)

Comments ใช้สำหรับเพิ่มโน้ตสำหรับตัวเอง หรือ developers คนอื่น ไม่แสดงในเบราว์เซอร์: 

<!-- นี่คือ single-line comment -->

<!-- 
  Multi-line comment
  สามารถเขียนได้หลายบรรทัด
  ใช้สำหรับอธิบายโค้ด
-->

<!-- 
  TODO: ต้องปรับปรุงในอนาคต
  NOTE: เรื่องสำคัญที่ต้องจำ
  FIXME: มีปัญหาที่ต้องแก้ไข
-->

Best Practices (วิธีที่ดีที่สุด)

1. Semantic HTML (ใช้ Semantic HTML)

เลือก HTML tags ที่บ่งบอกความหมาย เช่น <header>, <nav>, <article> แทนการใช้ <div> ทั่วไป:

❌ ไม่ดี: 
<div>
  <div>ชื่อเพจ</div>
  <div>เมนูนำทาง</div>
</div>
✅ ดี: 
<header>
  <h1>ชื่อเพจ</h1>
  <nav>เมนูนำทาง</nav>
</header>

2. Accessibility (ทำให้ใช้ได้ทั้งหมด)

3. SEO (Search Engine Optimization)

4. Performance (ประสิทธิภาพ)

5. Code Quality (คุณภาพโค้ด)

Common Mistakes (ข้อผิดพลาดที่พบบ่อย)

1. Missing Alt Text (ไม่มี Alt Text)

ทุกรูปต้องมี alt text สำหรับ accessibility และ SEO:

❌ ผิด: 
<img src="photo.jpg" />
✅ ถูก: 
<img src="photo.jpg" alt="คำอธิบายรูปที่อธิบายเนื้อหาของรูป" />

2. Improper Nesting (การซ้อน Tag ไม่ถูก)

Tags ต้องเปิด-ปิดในลำดับที่ถูกต้อง:

❌ ผิด: 
<b><i>ข้อความ</b></i>
✅ ถูก: 
<b><i>ข้อความ</i></b>

3. Missing Closing Tags (ลืม Closing Tag)

❌ ผิด: 
<p>ย่อหน้าแรก
<p>ย่อหน้าที่สอง
✅ ถูก: 
<p>ย่อหน้าแรก</p>
<p>ย่อหน้าที่สอง</p>

4. Using Too Many h1 Tags (ใช้ h1 มากเกินไป)

❌ ผิด: 
<h1>หัวเรื่อง 1</h1>
<p>เนื้อหา</p>
<h1>หัวเรื่อง 2</h1>
✅ ถูก: 
<h1>หัวเรื่องหลัก</h1>
<h2>หัวเรื่องย่อย 1</h2>
<h2>หัวเรื่องย่อย 2</h2>

5. Not Using Labels with Form Inputs (ไม่มี Label กับ Input)

❌ ผิด: 
<input type="text" />
<input type="email" />
✅ ถูก: 
<label for="name">ชื่อ:</label>
<input type="text" id="name" />

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

6. Inline Styling (ใช้ Inline Styling)

หลีกเลี่ยงการใช้ style attribute ทีละ element:

❌ ผิด: 
<p style="color: blue; font-size: 16px;">ข้อความ</p>
<p style="color: blue; font-size: 16px;">ข้อความ</p>
✅ ถูก: 
<style>
  .highlight { color: blue; font-size: 16px; }
</style>
<p class="highlight">ข้อความ</p>
<p class="highlight">ข้อความ</p>

Tools & Resources (เครื่องมือและทรัพยากร)

Text Editors (โปรแกรมแก้ไข)

Online Tools (เครื่องมือออนไลน์)

Resources & Documentation (เอกสารและทรัพยากร)

📚 สรุปประเด็นสำคัญ

  • ✅ HTML ใช้สำหรับ structure ไม่ใช่ styling
  • ✅ ใช้ semantic HTML เสมอ (header, nav, main, article, section ฯลฯ)
  • ✅ เพิ่ม alt text ให้รูปทุกรูปสำหรับ accessibility
  • ✅ ให้ label กับ form inputs ทุกตัว
  • ✅ ตรวจสอบไฟล์ด้วย HTML validator
  • ✅ ทำให้ semantic structure โครงสร้างที่ชัดเจน
  • ✅ เขียนโค้ดที่อ่านได้ง่ายด้วย proper indentation
  • ✅ ให้ใส่ใจกับ SEO และ accessibility ตั้งแต่เริ่มต้น