HTML คืออะไร
HTML ไม่ใช่ text สำหรับคนอ่าน แต่เป็น text ที่ browser แปลงเป็นโครงต้นไม้ (DOM) รู้จัก tags ที่ใช้จริง + attributes ที่มีความหมาย และทำไม indent ยังไงก็ได้
ตอนเปิด Google เห็นช่องค้นหา เปิด YouTube เห็น thumbnail เรียงกัน เปิด ChatGPT เห็นกล่องพิมพ์ข้อความ ทั้งหมดที่มองเห็นบนหน้าเว็บคือ HTML สั่งให้ browser แสดงออกมา
HTML ย่อมาจาก HyperText Markup Language คือภาษา markup ที่เราเขียนเพื่อบอก browser ว่าในหน้ามีอะไรอยู่ตรงไหน หัวข้อวางตรงนี้ รูปวางตรงนั้น ลิงก์กดแล้วไปไหน บทนี้จะอธิบายก่อนว่า HTML จริงๆ แล้วคืออะไร และทำไม browser ถึงเข้าใจมันได้
HTML คือต้นไม้ ไม่ใช่ข้อความ
ข้อแรกที่ต้องเข้าใจคือ HTML ไม่ใช่ text ที่เขียนให้คนอ่าน แต่เป็น text ที่ browser รับเข้าไปแล้วแปลงเป็นโครงสร้างต้นไม้ก่อน จากนั้นค่อยวาดออกมาเป็นหน้าเว็บที่คนเห็น
ลองกดสลับดู 3 แบบ ว่า HTML ที่เขียนในช่องซ้าย browser แปลงเป็น tree ตรงกลาง แล้ววาดออกมาเป็นหน้าเว็บในช่องขวาอย่างไร
หัวข้อ + ย่อหน้า + ลิงก์ พื้นฐานที่สุด
<h1>สวัสดีชาวโลก</h1>
<p>นี่คือหน้าเว็บแรกของฉัน</p>
<a href="/">กลับหน้าหลัก</a>ต้นไม้ตัวนี้มีชื่อเรียกว่า DOM (Document Object Model) เวลาพี่ในทีมพูดคำว่า "แก้ DOM" หรือ "query DOM" ก็หมายถึงต้นไม้ตัวนี้ ในบทสุดท้ายของ topic เราจะกลับมาใช้ JS แก้ต้นไม้ตัวนี้จริง แต่ตอนนี้แค่เข้าใจก่อนว่า HTML คือต้นไม้ก็พอแล้ว
Indent ยังไงก็ได้ browser ไม่สน
เพราะ browser ไม่ได้อ่าน HTML แบบคน แต่สร้างต้นไม้จาก tag ที่เจอ ดังนั้นไม่ว่าจะเคาะ space ใส่ tab หรือเว้นบรรทัดไว้ตรงไหน browser ก็ไม่สนใจ ขอแค่ tag ถูกต้อง จะได้ต้นไม้เดียวกันเสมอ
เว้นบรรทัด + indent ให้คนอ่านง่าย
<h1>ขอต้อนรับ</h1>
<p>
สามแบบนี้เหมือนกันทุกอย่าง
ทั้งสามอันเห็นเป็นต้นไม้เดียวกัน
ในสายตา browser
</p>
<a href="/">กลับหน้าหลัก</a>แต่ถึงแม้ browser ไม่สน คนในทีมยังต้องอ่านโค้ดของเราอยู่ เขียน indent ให้เรียบร้อยตามที่ editor จัดให้ก็เป็นมารยาทที่ดีอยู่แล้ว
Tag ที่ใช้จริงทุกวัน
HTML มี tag หลายร้อยแบบ แต่จริงๆ เว็บส่วนใหญ่ถึง 90% ใช้แค่ประมาณ 15 tag ต่อไปนี้เท่านั้น เรียนพวกนี้ก่อนก็พอใช้งาน ที่เหลือไปเจอตอนจำเป็นค่อยเปิดดูใน MDN
- หัวข้อกับข้อความ:
<h1>ถึง<h6>(ใหญ่ไปเล็ก),<p>(ย่อหน้า),<strong>(เข้ม),<em>(เอียง) - ลิงก์กับรูป:
<a>(ลิงก์ไปที่อื่น),<img>(รูปภาพ) - ปุ่มกับ form:
<button>(ปุ่มกดได้),<input>(ช่องกรอก),<form>(ห่อ input ไว้ submit ด้วยกัน) - รายการ:
<ul>(bullet list),<ol>(เรียงตามหมายเลข),<li>(แต่ละ item) - กล่องห่อของ:
<div>(block ทั่วไป),<span>(inline ทั่วไป),<section>,<article>,<nav>,<header>,<footer>
Attributes ใส่รายละเอียดให้ tag
Tag เฉยๆ ไม่พอ บางตัวต้องบอกข้อมูลเพิ่มด้วย อย่าง <a> ถ้าไม่บอก browser ก็ไม่รู้ว่าลิงก์ไปไหน ต้องใส่ href เพิ่ม หรือ <img> ต้องใส่ src บอกว่ารูปอยู่ที่ path ไหน ข้อมูลเสริมแบบนี้เรียกว่า attributes เขียนเป็นคู่ key="value" ใส่ไว้ใน opening tag
Attributes ที่เจอบ่อยที่สุด:
hrefใช้ใน<a>เพื่อบอกว่าลิงก์ไปที่ไหนsrcใช้ใน<img>เพื่อบอกว่ารูปอยู่ที่ path ไหนaltใช้ใน<img>เป็นข้อความสำรองกรณีรูปโหลดไม่ขึ้น (และ screen reader ก็ใช้ตัวนี้)classตั้งชื่อให้ CSS กับ JS เรียกใช้ได้ เจอทุกวันในทุกไฟล์idตั้งชื่อเฉพาะแบบ unique ในหน้า คล้าย class แต่ใช้เดี่ยวเท่านั้น
Self-closing tag: tag ที่ไม่มีข้างใน
ปกติ tag จะมีทั้ง opening กับ closing เช่น <p>ข้อความ</p> แต่มี tag บางตัวไม่มีเนื้อหาข้างในเลย ใส่แค่ attributes ก็พอ tag พวกนี้เขียนแล้วไม่ต้องมี closing
<img src="..." alt="...">รูปภาพ<br>ขึ้นบรรทัดใหม่<hr>เส้นคั่น<input type="text">ช่องกรอก<meta charset="utf-8">ข้อมูลหน้า (อยู่ใน head)
เวลาอ่าน HTML คนอื่นอาจเห็นเขียน <img /> หรือ <br /> มี slash ก่อน > ทั้งสองแบบ browser รับได้หมด เป็น style เก่าที่มาจาก XHTML ไม่ได้ผิดอะไร
Semantic HTML: tag ที่มีความหมาย
ทำไมต้องมี <nav>, <article>, <section> ในเมื่อ <div> ก็ทำได้เหมือนกัน คำตอบคือเรื่องของ "ความหมาย"
<nav> สื่อว่า "ตรงนี้คือเมนู" ส่วน <article> สื่อว่า "ตรงนี้คือบทความ 1 ชิ้น" ไม่ได้ช่วยเรื่องหน้าตา (มันดูเหมือน div ทุกประการ) แต่ช่วยในเรื่องต่อไปนี้:
- Screen reader: คนตาบอดใช้ screen reader อ่านหน้าเว็บ ถ้าเจอ
<nav>จะบอก user ได้เลยว่า "นี่คือส่วนเมนู" แต่ถ้าเจอ<div>ก็บอกแค่ "div" เฉยๆ ไม่ช่วยอะไร - SEO: Google crawler ชอบ semantic HTML มากกว่า อันดับในผลค้นหา Google มีโอกาสดีขึ้น
- คนในทีม: อ่าน code แล้วเข้าใจทันทีว่าส่วนไหนทำหน้าที่อะไร
สรุป
- HTML ไม่ใช่ text สำหรับให้คนอ่าน browser จะแปลงเป็นต้นไม้ (DOM) ก่อน แล้วค่อยวาดหน้าเว็บ
- Indent ยังไงก็ได้ browser ไม่สน ขอแค่เขียนให้คนในทีมอ่านง่ายก็พอ
- Tag ที่ใช้จริงในเว็บส่วนใหญ่มีแค่ประมาณ 15 แบบ รู้พวกนี้ก่อนก็พอเริ่มได้
- Attributes ใส่ข้อมูลเสริมให้ tag เช่น href, src, alt, class, id
- Self-closing tag ไม่มีเนื้อหาข้างใน ไม่ต้องปิด tag อย่าง img, br, input
- Semantic HTML ใช้ tag ที่มีความหมาย (nav, article) ช่วยทั้ง accessibility และ SEO
ใน lesson ถัดไปจะต่อด้วย CSS ซึ่งเป็นภาษาที่บอก browser ว่า HTML ต้นไม้ที่เราเขียนมาจะแต่งยังไง สี font ขนาด ตำแหน่ง ทุกอย่างที่ทำให้เว็บดูไม่เหมือน document Word เริ่มต้นที่ CSS นี่เอง