HTML คืออะไร? พื้นฐานที่คนทำเว็บไซต์ควรรู้

HTML คือภาษามาร์กอัป (HyperText Markup Language) ที่ใช้บอกเบราว์เซอร์ว่าเนื้อหาแต่ละส่วนบนหน้าเว็บคืออะไร เช่น ตรงนี้คือหัวข้อ ตรงนี้คือย่อหน้า ตรงนี้คือรูปหรือลิงก์ ทุกหน้าเว็บที่เราเปิดดู ไม่ว่าจะสร้างด้วย WordPress, Wix หรือเขียนโค้ดเอง สุดท้ายเบราว์เซอร์ก็รับไปเป็น HTML ทั้งหมด

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

HTML ย่อมาจากอะไร แล้วมันทำหน้าที่อะไร

HTML ย่อมาจาก HyperText Markup Language ลองแยกทีละคำจะเห็นภาพง่ายขึ้น

• HyperText คือข้อความที่ลิงก์ไปหาข้อความหรือหน้าอื่นได้ หัวใจของเว็บคือการคลิกจากหน้าหนึ่งไปอีกหน้าหนึ่ง
• Markup คือการ “ทำเครื่องหมาย” ครอบเนื้อหาไว้ เหมือนเอาปากกาเน้นข้อความแล้วเขียนกำกับว่าท่อนนี้คือหัวข้อ ท่อนนี้คือรายการ
• Language คือชุดกติกาที่ทุกเบราว์เซอร์ตกลงใช้ร่วมกัน เขียนแบบเดียวกันแล้วเปิดใน Chrome, Safari หรือ Firefox ก็เข้าใจตรงกัน

จุดที่คนมักสับสนคือ HTML ไม่ใช่ภาษาโปรแกรม มันไม่มีการคำนวณ ไม่มีเงื่อนไขแบบ “ถ้า…ให้ทำ…” หน้าที่ของมันคือบอกโครงสร้างและความหมายของเนื้อหาอย่างเดียว ส่วนเรื่องสีสันเป็นงานของ CSS และการโต้ตอบเป็นงานของ JavaScript

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

HTML มาจากไหน ทำไมทุกเว็บยังใช้อยู่

HTML เกิดขึ้นพร้อมกับเว็บเลย ตามข้อมูลจาก ประวัติเว็บของ CERN ภายในช่วงคริสต์มาสปี 1990 Tim Berners-Lee ได้วางแนวคิดหลักของเว็บไว้ครบทั้ง HTML, HTTP และ URL และเว็บเซิร์ฟเวอร์เครื่องแรก info.cern.ch ก็เริ่มออนไลน์ในเดือนธันวาคมปีนั้น ต่อมาในวันที่ 30 เมษายน 1993 CERN ปล่อยซอฟต์แวร์ World Wide Web เป็นสาธารณสมบัติ ใครก็นำไปใช้ต่อได้ฟรี

หลังจากนั้นมาตรฐาน HTML ถูกพัฒนาต่อมาหลายรุ่น จนช่วงหนึ่งมีสองหน่วยงานดูแลคู่กัน คือ W3C และกลุ่ม WHATWG (ตั้งขึ้นปี 2004 โดยตัวแทนจาก Apple, Mozilla และ Opera) จนในปี 2019 ทั้งสองฝ่าย ลงนามข้อตกลงร่วมกัน ให้มี HTML มาตรฐานเดียว โดย WHATWG เป็นผู้ดูแล HTML Living Standard

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

หน้าตาของ HTML: แท็ก, เอลิเมนต์ และแอตทริบิวต์

HTML ประกอบด้วยชิ้นส่วนที่เรียกว่า เอลิเมนต์ (element) แต่ละเอลิเมนต์มักมีแท็กเปิด เนื้อหา และแท็กปิด ตัวอย่างที่ง่ายที่สุดคือย่อหน้า

<p>ร้านเปิดทุกวัน 10:00–20:00 น.</p>

• แท็กเปิด <p> บอกว่าย่อหน้าเริ่มตรงนี้
• เนื้อหา คือข้อความที่คนอ่านเห็นจริงบนหน้าจอ
• แท็กปิด </p> มีเครื่องหมาย / นำหน้าชื่อแท็ก บอกว่าย่อหน้าจบแล้ว

ถ้าอยากใส่ข้อมูลเพิ่มให้เอลิเมนต์ ก็ใช้ แอตทริบิวต์ (attribute) ซึ่งเขียนไว้ในแท็กเปิด รูปแบบคือ ชื่อ="ค่า" เช่นลิงก์ต้องมี href บอกปลายทาง

<a href="https://www.ehowme.com/" title="หน้าแรก eHowMe">ไปหน้าแรก</a>

มีกติกาเล็กๆ อีกไม่กี่ข้อที่ MDN อธิบายไว้ในบทเรียนพื้นฐาน HTML และเจอบ่อยมากเวลาแก้โค้ดจริง

• ใส่เครื่องหมายคำพูดครอบค่าเสมอ ถ้าเขียน title=หน้าแรก eHowMe โดยไม่มีเครื่องหมายคำพูด เบราว์เซอร์จะอ่านค่าแค่คำแรก ส่วนที่เหลือกลายเป็นแอตทริบิวต์แปลกๆ
• บางเอลิเมนต์ไม่มีแท็กปิด เรียกว่า void element เช่น <br> (ขึ้นบรรทัดใหม่) และ <img> (รูปภาพ)
• ซ้อนแท็กให้ถูกลำดับ อะไรเปิดทีหลังต้องปิดก่อน เช่น <p>ราคา <strong>เริ่มต้น</strong></p> ถ้าปิดสลับกัน เบราว์เซอร์ต้องเดาเอาเองว่าตั้งใจอะไร
• เว้นวรรคหลายช่องจะถูกยุบเหลือช่องเดียว กด spacebar ห้าครั้งในโค้ด หน้าเว็บก็แสดงแค่ช่องเดียว (ยกเว้นในแท็ก <pre>)
• อักขระพิเศษต้องเขียนแบบอ้างอิง ถ้าอยากแสดงเครื่องหมาย < บนหน้าเว็บ ต้องเขียนเป็น < ไม่อย่างนั้นเบราว์เซอร์จะนึกว่าเป็นแท็ก

หน้า HTML หนึ่งหน้ามีโครงสร้างยังไง

ทุกหน้าเว็บมีโครงสร้างพื้นฐานคล้ายกัน ลองดูตัวอย่างหน้าเว็บภาษาไทยแบบย่อที่สุดที่ยังใช้งานจริงได้

<!doctype html>
<html lang="th">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ร้านกาแฟบ้านสวน | กาแฟคั่วเอง เชียงใหม่</title>
    <meta name="description" content="ร้านกาแฟคั่วเองในเชียงใหม่ เปิดทุกวัน มีที่จอดรถ">
  </head>
  <body>
    <h1>ร้านกาแฟบ้านสวน</h1>
    <p>กาแฟคั่วเองทุกสัปดาห์</p>
  </body>
</html>

ไล่ดูทีละบรรทัดได้แบบนี้

1. <!doctype html> บอกเบราว์เซอร์ว่านี่คือ HTML ฉบับปัจจุบัน ต้องอยู่บรรทัดแรกสุด
2. <html lang="th"> ครอบทุกอย่างในหน้า และบอกว่าเนื้อหาหลักเป็นภาษาไทย ช่วยให้โปรแกรมอ่านหน้าจอออกเสียงถูกภาษา
3. <head> เก็บข้อมูลเกี่ยวกับหน้า ซึ่งคนอ่านไม่เห็นบนหน้าจอโดยตรง
4. <meta charset="utf-8"> กำหนดการเข้ารหัสตัวอักษร ถ้าไม่มี ตัวอักษรไทยมีโอกาสกลายเป็นภาษาต่างดาว
5. <meta name="viewport"> ทำให้หน้าเว็บย่อขยายพอดีจอมือถือ
6. <title> คือชื่อที่ขึ้นบนแท็บเบราว์เซอร์ และเป็นข้อมูลสำคัญที่ Google ใช้ตั้งชื่อลิงก์ในผลการค้นหา
7. <meta name="description"> คำอธิบายสั้นๆ ของหน้า ซึ่ง Google อาจหยิบไปแสดงใต้ชื่อลิงก์ (เรื่องนี้มีรายละเอียดเยอะ ผมแยกไว้ในบทความ Meta Description ยาวเท่าไหร่ดี)
8. <body> คือทุกอย่างที่คนเห็นบนหน้าจอ ตั้งแต่หัวข้อ ข้อความ รูป ไปจนถึงปุ่ม

ตอนเช็กโค้ดหน้าเว็บ ehowme.com (28 ต.ค. 2026) ทั้งหน้าแรกและหน้าบทความใช้ <!DOCTYPE html>, lang="th", charset UTF-8 และมีแท็ก viewport ครบ ส่วนนี้ WordPress กับธีมจัดการให้อัตโนมัติ เจ้าของเว็บแทบไม่ต้องแตะเอง

แท็ก HTML ที่เจอบ่อย ควรรู้จักไว้

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

HTML, CSS และ JavaScript ต่างกันยังไง

สามภาษานี้มักมาด้วยกันเสมอ ถ้าเทียบกับการสร้างบ้าน HTML คือโครงบ้านและห้องต่างๆ CSS คือสีทา วอลเปเปอร์ และการจัดวางเฟอร์นิเจอร์ ส่วน JavaScript คือระบบไฟฟ้าที่ทำให้กดสวิตช์แล้วไฟติด

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

Semantic HTML: ใช้แท็กให้ตรงความหมาย

หน้าเว็บสองหน้าอาจหน้าตาเหมือนกันเป๊ะ แต่โค้ดข้างในต่างกันมาก หน้าหนึ่งเขียนทุกอย่างด้วย <div> แล้วใช้ CSS แต่งให้ตัวใหญ่ อีกหน้าใช้แท็กที่บอกความหมายตรงๆ

<!-- แบบที่ดูเหมือนหัวข้อ แต่เครื่องไม่รู้ว่าเป็นหัวข้อ -->
<div class="big-title">บริการของเรา</div>

<!-- แบบที่บอกความหมายชัด -->
<h2>บริการของเรา</h2>

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

หน้าตาสวยเป็นงานของ CSS แต่ความหมายที่ถูกต้องเป็นงานของ HTML เว็บที่ดีต้องได้ทั้งสองอย่าง

ตัวอย่างใกล้ตัวที่สุดคือเว็บเราเอง ตอนนับแท็กของหน้าแรก ehowme.com (28 ต.ค. 2026) พบ <main> 1 ตัว, <nav> 2 ตัว และ <article> 8 ตัว ส่วนหน้าบทความ URL คืออะไร มี h1 แค่ตัวเดียวถูกต้อง แต่เทมเพลตหน้าบทความยังไม่มีแท็ก <main> กับ <article> ครอบเนื้อหาเลย เว็บยังใช้งานได้ปกติ แต่ถ้าจะเก็บรายละเอียดเรื่อง accessibility ให้ครบ จุดนี้ควรปรับในตัวสร้างเทมเพลต

HTML เกี่ยวกับ SEO ยังไง

Google ไม่ได้ “ดู” หน้าเว็บด้วยตาแบบคน สิ่งที่บอทอ่านจริงคือ HTML ดังนั้นหลายเรื่องใน SEO On-Page ก็คือการเขียน HTML ให้ถูกนั่นเอง จุดที่มีผลชัดๆ มีประมาณนี้

• แท็ก title แต่ละหน้าควรมีชื่อไม่ซ้ำกัน และบอกว่าหน้านั้นเกี่ยวกับอะไร
• หัวข้อ h1–h3 ใช้แบ่งเนื้อหาเป็นลำดับชั้นจริง ไม่ใช่เลือกแท็กเพราะอยากได้ตัวหนังสือใหญ่
• ลิงก์ต้องเป็นแท็ก a ที่มี href คู่มือ ลิงก์ที่ Google ติดตามได้ ระบุว่า Google ติดตามลิงก์ได้แน่นอนเมื่อเป็นเอลิเมนต์ a ที่มี href ส่วนปุ่มที่ใช้ JavaScript พาไปหน้าอื่นอย่าง onclick บอทอาจตามไม่ได้
• ข้อความลิงก์ (anchor text) ควรบอกปลายทาง คำว่า “คลิกที่นี่” หรือ “อ่านเพิ่มเติม” ไม่ช่วยอะไรเลย
• alt ของรูป บอกว่ารูปคืออะไร Google ใช้ข้อความนี้ทำความเข้าใจรูป และถ้ารูปเป็นลิงก์ alt จะทำหน้าที่เป็นข้อความลิงก์ด้วย
• ข้อมูลโครงสร้าง (Schema) เป็นโค้ด JSON-LD ที่ฝังใน HTML เพื่ออธิบายว่าหน้านี้คือบทความ สินค้า หรือคำถามที่พบบ่อย ปลั๊กอิน SEO อย่าง Rank Math สร้างให้อัตโนมัติ

อีกเรื่องที่ควรรู้คือ URL ของแต่ละหน้าก็ผูกกับ HTML ผ่านลิงก์และแท็ก canonical ถ้ายังไม่แน่ใจว่า URL ที่ดีหน้าตาแบบไหน ลองอ่านเรื่อง ส่วนประกอบของ URL ประกอบได้ครับ

ใช้ WordPress แล้ว ยังต้องรู้ HTML อยู่ไหม

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

แต่ในงานจริง มีหลายจังหวะที่ความรู้ HTML นิดเดียวช่วยประหยัดเวลาได้เยอะ

• แปะโค้ดฝัง (embed) เช่นแผนที่ร้านจาก Google Maps ฟอร์มจากภายนอก หรือวิดีโอ ซึ่งมักต้องวางในบล็อก “HTML ที่กำหนดเอง” (Custom HTML) (ถ้ายังไม่ได้ปักหมุดร้าน ดูวิธี ปักหมุด Google Map ร้านค้า ได้)
• ข้อความที่ก๊อปมาจาก Word หรือเว็บอื่นแล้วรูปแบบเพี้ยน เปิดโหมด “แก้ไขแบบ HTML” ของบล็อกนั้นจะเห็นแท็กหรือ style แปลกๆ ที่ติดมา ลบออกได้ตรงจุด
• เลือกระดับหัวข้อให้ถูก ปุ่มเลือก H2/H3 ใน editor ก็คือการเลือกแท็ก HTML นั่นเอง
• คุยกับนักพัฒนาได้รู้เรื่องขึ้น เวลาแจ้งปัญหาว่า “รูปไม่มี alt” หรือ “ปุ่มนี้ไม่ใช่ลิงก์” จะชัดกว่าบอกว่า “ตรงนี้แปลกๆ”

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

เช็ก HTML ของเว็บตัวเองแบบง่ายๆ

ไม่ต้องติดตั้งอะไรเพิ่ม เบราว์เซอร์ที่ใช้อยู่ทุกวันก็ดูได้แล้ว ลองทำตามนี้

1. ดูซอร์สทั้งหน้า เปิดหน้าเว็บแล้วกด Ctrl+U (บน Mac ใช้ Option+Command+U) จะเห็น HTML ที่เซิร์ฟเวอร์ส่งมา ลองกด Ctrl+F หา <title> หรือ <h1 ดูว่ามีกี่ตัว
2. ตรวจทีละจุดด้วย Inspect คลิกขวาที่ข้อความหรือรูปแล้วเลือก “ตรวจสอบ” (Inspect) จะเห็นแท็กของจุดนั้นทันที เช่นรูปนี้มี alt ไหม หัวข้อนี้เป็น h2 หรือแค่ div ตัวใหญ่
3. ตรวจไวยากรณ์ด้วย W3C นำ URL ไปวางใน W3C Markup Validation Service ระบบจะไล่บอกจุดที่ผิดมาตรฐานพร้อมเลขบรรทัด

ผลจาก W3C อย่าเพิ่งตกใจถ้าเจอ error เยอะ ตอนลองตรวจหน้า what-is-url ของ ehowme.com เจอ error 52 รายการ แต่เกือบทั้งหมดมาจากแท็ก <style> ที่ปลั๊กอินแทรกไว้ใน body และ CSS รุ่นใหม่ที่ตัวตรวจยังไม่รู้จัก ส่วนที่เป็นเรื่องโครงสร้างจริงๆ มีไม่กี่จุด เช่น header ซ้อนอยู่ใน header และ ID ซ้ำกัน ซึ่งพวกนี้ถึงจะควรแก้

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

อยากเริ่มเรียน HTML ควรเริ่มยังไง

ถ้าแค่อยากดูแลเว็บตัวเองให้คล่องขึ้น ไม่จำเป็นต้องเรียนลึกเป็นคอร์ส ลองไล่ตามนี้ก็พอ

1. เริ่มจากโครงสร้างหน้าและแท็กในตารางด้านบน ลองเขียนหน้าเว็บง่ายๆ ในโปรแกรม Notepad แล้วบันทึกเป็นไฟล์ .html จากนั้นเปิดด้วยเบราว์เซอร์
2. เปิดดูซอร์สของเว็บที่ชอบ แล้วลองหาว่าหัวข้อ เมนู และฟุตเตอร์ใช้แท็กอะไร
3. อ่านบทเรียนของ MDN ซึ่งเป็นแหล่งอ้างอิงที่นักพัฒนาใช้กันอย่างแพร่หลาย และอัปเดตตามมาตรฐานปัจจุบัน
4. เมื่อคล่องแล้วค่อยต่อด้วย CSS เพื่อแต่งหน้าตา

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

คำถามที่พบบ่อยเกี่ยวกับ HTML