HTML (HyperText Markup Language) คือรากฐานสำคัญของการสร้างเว็บไซต์ เป็นเหมือนโครงกระดูกที่ช่วยให้หน้าเว็บแสดงผลได้อย่างถูกต้อง ในบทความนี้เราจะพาไปรู้จักโครงสร้างพื้นฐานของ HTML ตั้งแต่แท็กยอดนิยมอย่าง <div>, <h1>, <p>ไปจนถึงเรื่อง Metadata ที่ซ่อนอยู่ใน <head>พร้อมตัวอย่างการใช้งานแบบเข้าใจง่าย เหมาะกับ dev มือใหม่ หรือคนที่อยากปัดฝุ่นความรู้เก่า
HTML คืออะไร?
HTML ย่อมาจาก HyperText Markup Language เป็นภาษาสำหรับสร้างโครงสร้างของเว็บเพจ โดยทำงานคู่กับ CSS และ JavaScript HTML ช่วยให้เรากำหนดส่วนประกอบต่าง ๆ ของหน้าเว็บ เช่น หัวข้อ ย่อหน้า ลิงก์ รูปภาพ และอื่น ๆ
โครงสร้างพื้นฐานของ HTML
ไฟล์ HTML เริ่มต้นจะมีโครงสร้างคล้าย ๆ นี้
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Page</title>
</head>
<body>
<h1>ยินดีต้อนรับสู่โลกของ HTML!</h1>
<p>นี่คือย่อหน้าแรกของคุณ</p>
<a href="https://www.boychawin.com">Link</a>
<img src="boychawin.jpg" alt="boychawin.com" width="104" height="142">
</body>
</html>
อธิบายโค้ด
<!DOCTYPE html>: กำหนดว่าใช้ HTML5<html>: เป็นรากของโครงสร้าง HTML ทั้งหมด (Root Element)<head>: ใส่ข้อมูล Meta, ชื่อเว็บ (<title>), ลิงก์ CSS/JS<body>:: ส่วนที่แสดงผลจริงบนหน้าเว็บ เช่น ข้อความหรือรูปภาพ
แท็กพื้นฐานที่ Dev ทุกคนต้องรู้
แท็กข้อความ
<h1> ถึง<h6>: ใช้สำหรับหัวข้อ<p>: ใช้สำหรับย่อหน้า
แท็กลิงก์และรูปภาพ
<a href="URL">: ใช้สร้างลิงก์<img src="URL" alt="Description">: ใช้แทรกรูป
แท็กโครงสร้าง
<div>: ใช้แบ่งกลุ่มคอนเทนต์<span>: ใช้กับข้อความสั้น ๆ
แท็กฟอร์ม
- <form>: สำหรับสร้างฟอร์ม เช่น ปุ่มกดหรือช่องกรอกข้อมูล
เคล็ดลับ Dev มือใหม่
- ใช้ HTML Validator (เช่น validator.w3.org) เพื่อตรวจสอบว่าโค้ด HTML ที่คุณเขียนถูกต้องไหม
- เขียนโค้ด HTML ให้ semantic เช่น ใช้
<article>หรือ<section>แทน<div>เพื่อให้ search engine เข้าใจหน้าเว็บดีขึ้น - อย่าลืมตั้งค่า alt ใน
<img>เพื่อเพิ่มความสะดวกในการเข้าถึง (accessibility)
สรุป
HTML คือภาษาที่ Dev ทุกคนต้องเริ่มต้นรู้จัก เพราะมันเป็นพื้นฐานของทุกอย่างในสาย Frontend! ยิ่งคุณเข้าใจ HTML มากเท่าไหร่ การทำงานกับ CSS และ JavaScript ก็จะง่ายขึ้น อย่าลืมฝึกเขียนโค้ดบ่อย ๆ แล้วคุณจะเก่งขึ้นแน่นอนครับผมก็เหมือนกัน 🚀