thml. พื้นฐานการทำเว็ปไซต์

หลายคนเริ่มทำเว็บแล้วงงว่า “HTML คืออะไร” จริงๆ HTML (HyperText Markup Language) คือ “ภาษามาร์กอัป” ที่ใช้บอกโครงสร้างของหน้าเว็บ เช่น หัวข้อ ย่อหน้า รูปภาพ ปุ่ม ลิงก์ ตาราง ฯลฯ พูดง่ายๆ คือ HTML เป็นโครงกระดูกของเว็บไซต์ ส่วน CSS คือเสื้อผ้าหน้าตา/สไตล์ และ JavaScript คือระบบการโต้ตอบ/ความฉลาดของหน้าเว็บ ถ้าให้เห็นภาพ เวลาคุณเปิดเว็บ 1 หน้า เบราว์เซอร์จะอ่านไฟล์ HTML แล้วค่อย “เรนเดอร์” ออกมาเป็นหน้าเว็บที่เราเห็น โดยทั่วไปหน้า HTML จะมีโครงสร้างประมาณนี้: - <html> ครอบทั้งเอกสาร - <head> ส่วนข้อมูลสำคัญ เช่น <title> ชื่อหน้า, meta description, การเชื่อม CSS - <body> ส่วนที่ผู้ใช้เห็นจริง เช่น ข้อความ รูป ปุ่ม แท็ก (tag) คือคำสั่งที่อยู่ในเครื่องหมาย < > เพื่อบอกชนิดขององค์ประกอบ เช่น <p> คือย่อหน้า, <h1> คือหัวข้อใหญ่, <a> คือลิงก์ เป็นต้น มือใหม่ควรรู้ว่าแท็กมี “เปิด-ปิด” เช่น <p>…</p> แต่บางแท็กเป็นแบบตัวเดียว (self-closing) อย่าง <img> ตัวอย่างแท็กที่ใช้บ่อยจากภาพในโพสต์: 1) ปุ่ม <button> - ใช้สร้างปุ่มกด เช่น “ซื้อเลย”, “ส่งข้อความ” - แนะนำใส่ข้อความบนปุ่มให้ชัด และถ้าใช้กับฟอร์มควรระบุ type เช่น type="button" หรือ type="submit" เพื่อกันพฤติกรรมผิดพลาด 2) รูปภาพ <img> - โครงสร้างหลักคือ src และ alt - alt สำคัญมากทั้งเรื่องการเข้าถึง (คนใช้โปรแกรมอ่านหน้าจอ) และช่วย SEO ให้ Google เข้าใจรูป ตัวอย่างแนวคิด: ถ้าเป็นรูปสินค้าเสื้อผ้า alt ควรบอกว่าเป็น “เสื้อยืดสีขาวคอกลม” มากกว่าคำกว้างๆ เช่น “รูปภาพ” ถ้าคุณอยากให้ HTML “เป็นมิตรกับ SEO” แบบทำได้ทันที ลองเช็ก 5 ข้อนี้: 1) ใช้ <h1> แค่ 1 อันต่อหน้า และจัดลำดับหัวข้อเป็น <h2>, <h3> ตามโครงเรื่อง 2) เขียนเนื้อหาเป็นย่อหน้าด้วย <p> และใช้รายการ <ul><li> เมื่อเป็นข้อๆ เพื่อให้อ่านง่าย 3) ใส่ alt ให้รูปภาพทุกภาพ โดยอธิบายสิ่งที่อยู่ในรูปจริงๆ 4) ตั้ง <title> ให้สื่อความหมาย และเขียน meta description ให้ชวนคลิก (เหมือนสรุปหน้าเว็บ) 5) โครงสร้างโค้ดอ่านง่าย ไม่ซ้อนมั่ว จะช่วยทั้งคนดูแลเว็บและบอทค้นหา จากประสบการณ์ส่วนตัว ถ้าเริ่มจาก HTML ให้เข้าใจ “โครงสร้าง” ก่อน ไม่ต้องท่องทุกแท็ก พอทำหน้าเล็กๆ ได้ เช่น หน้าโปรไฟล์/หน้าสินค้า ที่มีหัวข้อ รูป ปุ่ม และลิงก์ แล้วค่อยต่อยอดไป CSS และ JavaScript จะเรียนสนุกและเห็นผลเร็วมาก