HTML คืออะไร?
HTML ย่อมาจาก HyperText Markup Language เป็นภาษาที่ใช้สร้างโครงสร้างของเว็บไซต์ เช่น หัวข้อ, ย่อหน้า, รูปภาพ, ลิงก์, ตาราง และองค์ประกอบต่าง ๆ บนหน้าเว็บ
โครงสร้าง HTML พื้นฐาน
<!DOCTYPE html> <html> <head> <title>เว็บไซต์แรกของฉัน</title> </head> <body> <h1>สวัสดีโลก</h1> <p>นี่คือหน้าเว็บแรกของฉัน</p> </body> </html>
1. <!DOCTYPE html>
<!DOCTYPE html>
บอกเบราว์เซอร์ว่าเอกสารนี้ใช้ HTML5
ต้องอยู่บรรทัดแรกเสมอ
2. <html>
<html> </html>
คือ Tag หลักของเอกสาร HTML
ทุกอย่างบนเว็บจะอยู่ภายใน Tag นี้
เปรียบเหมือน "บ้านทั้งหลัง"
3. <head>
<head> </head>
เก็บข้อมูลเกี่ยวกับหน้าเว็บ
ข้อมูลในส่วนนี้จะไม่แสดงบนหน้าเว็บโดยตรง
เช่น
ชื่อเว็บ
CSS
JavaScript
SEO
Meta Tags
4. <title>
<title>เว็บไซต์แรกของฉัน</title>
กำหนดชื่อที่แสดงบนแท็บเบราว์เซอร์
ตัวอย่าง
<title>สอน HTML เบื้องต้น</title>
ผลลัพธ์
[สอน HTML เบื้องต้น]
บนแท็บ Chrome
5. <body>
<body> </body>
คือส่วนที่ผู้เข้าชมเห็นจริง
เช่น
ข้อความ
รูปภาพ
วิดีโอ
ปุ่ม
ตาราง
หัวข้อ (Heading)
h1
<h1>หัวข้อใหญ่ที่สุด</h1>
ผลลัพธ์
หัวข้อใหญ่ที่สุด
h2
<h2>หัวข้อรอง</h2>
h3
<h3>หัวข้อย่อย</h3>
มีถึง
<h1> ถึง <h6>
โดย
h1 ใหญ่สุด
h6 เล็กสุด
ย่อหน้า
<p>นี่คือข้อความย่อหน้า</p>
ผลลัพธ์
นี่คือข้อความย่อหน้า
ขึ้นบรรทัดใหม่
<br>
ตัวอย่าง
สวัสดี<br> ประเทศไทย
ผลลัพธ์
สวัสดี
ประเทศไทย
เส้นคั่น
<hr>
ผลลัพธ์
ตัวหนา
<b>ตัวหนา</b>
หรือ
<strong>ตัวหนา</strong>
ตัวเอียง
<i>ตัวเอียง</i>
หรือ
<em>ตัวเอียง</em>
ลิงก์
<a href="https://example.com"> คลิกที่นี่ </a>
ผลลัพธ์
คลิกที่นี่
เมื่อคลิกจะไปยังเว็บไซต์ที่กำหนด
รูปภาพ
<img src="รูป.jpg">
ตัวอย่าง
<img src="cat.jpg">
กำหนดขนาด
<img src="cat.jpg" width="300">
รายการแบบมีจุด
<ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul>
ผลลัพธ์
HTML
CSS
JavaScript
รายการแบบมีลำดับ
<ol> <li>ติดตั้ง</li> <li>เขียนโค้ด</li> <li>ทดสอบ</li> </ol>
ผลลัพธ์
ติดตั้ง
เขียนโค้ด
ทดสอบ
ตาราง
<table border="1"> <tr> <th>ชื่อ</th> <th>อายุ</th> </tr> <tr> <td>สมชาย</td> <td>25</td> </tr> </table>
ผลลัพธ์
ชื่ออายุสมชาย25
ฟอร์มกรอกข้อมูล
<form> ชื่อ: <input type="text"> <input type="submit"> </form>
ปุ่ม
<button> กดที่นี่ </button>
คอมเมนต์
<!-- ข้อความนี้จะไม่แสดงบนหน้าเว็บ -->
ใช้เขียนหมายเหตุในโค้ด
HTML Semantic Tags (สำคัญมาก)
HTML5 มี Tag ที่ช่วยให้ Google เข้าใจเว็บได้ดีขึ้น
<header> </header> <nav> </nav> <main> </main> <section> </section> <article> </article> <footer> </footer>
ความหมาย
Tagหน้าที่headerส่วนหัวเว็บnavเมนูmainเนื้อหาหลักsectionหมวดหมู่articleบทความfooterส่วนท้าย
ตัวอย่างหน้าเว็บจริง
<!DOCTYPE html>
<html> <head> <title>สอน HTML</title> </head> <body> <header> <h1>เรียน HTML ฟรี</h1> </header> <nav> <a href="#">หน้าแรก</a> <a href="#">บทความ</a> <a href="#">ติดต่อ</a> </nav> <main> <section> <h2>HTML คืออะไร</h2> <p> HTML คือภาษาที่ใช้สร้างโครงสร้างเว็บไซต์ </p> </section> </main> <footer> <p>Copyright 2026</p> </footer> </body> </html>
สรุป Tag สำคัญที่ควรรู้ก่อน
Tagความหมายhtmlเริ่มต้นเอกสาร HTMLheadข้อมูลเบื้องหลังเว็บtitleชื่อหน้าเว็บbodyเนื้อหาที่แสดงh1-h6หัวข้อpย่อหน้าaลิงก์imgรูปภาพul / olรายการtableตารางformฟอร์มbuttonปุ่มdivกล่องจัดกลุ่มsectionส่วนเนื้อหาarticleบทความfooterส่วนท้าย
