HTML Basics: ปูพื้นฐาน Dev สาย Frontend

Nov. 22, 2024 · boychawin

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 ก็จะง่ายขึ้น อย่าลืมฝึกเขียนโค้ดบ่อย ๆ แล้วคุณจะเก่งขึ้นแน่นอนครับผมก็เหมือนกัน 🚀

Tags: html