ภาษามาร์กอัป HyperText หรือ HTML เป็นภาษามาร์กอัปมาตรฐานที่ใช้อธิบายโครงสร้างของเอกสารที่แสดงบนเว็บ HTML ประกอบด้วยชุดองค์ประกอบและแอตทริบิวต์ต่างๆ ที่ใช้ในการมาร์กอัปองค์ประกอบทั้งหมดของเอกสารเพื่อจัดโครงสร้างให้มีความหมาย
โดยพื้นฐานแล้ว เอกสาร HTML คือโครงสร้างของโหนด ซึ่งรวมถึงองค์ประกอบ HTML และโหนดข้อความ องค์ประกอบ HTML แสดงความหมายและการจัดรูปแบบของเอกสาร รวมถึงการสร้างย่อหน้า รายการและตาราง และการฝังรูปภาพและตัวควบคุมแบบฟอร์ม แต่ละองค์ประกอบอาจมีการระบุแอตทริบิวต์ไว้หลายรายการ องค์ประกอบหลายอย่างอาจมีเนื้อหาได้ ซึ่งรวมถึงองค์ประกอบอื่นๆ และข้อความ องค์ประกอบอื่นๆ ว่างเปล่า โดยที่แท็กและแอตทริบิวต์เป็นตัวกำหนดฟังก์ชัน
มีองค์ประกอบหลายหมวดหมู่ ได้แก่ ข้อมูลเมตา การแบ่งส่วน ข้อความ ความหมายในบรรทัด แบบฟอร์ม อินเทอร์แอกทีฟ สื่อ คอมโพเนนต์ และการเขียนสคริปต์ เราจะอธิบายเกือบทุกอย่างในซีรีส์นี้ แต่ก่อนอื่น องค์ประกอบคืออะไร
องค์ประกอบ
HTML ประกอบด้วยชุดองค์ประกอบที่คุณใช้เพื่อล้อมรอบหรือตัดส่วนต่างๆ ของเนื้อหาเพื่อให้ปรากฏหรือดำเนินการอย่างใดอย่างหนึ่ง องค์ประกอบ HTML แสดงด้วยแท็ก ซึ่งเขียนโดยใช้วงเล็บสามเหลี่ยม (< และ >)
ชื่อหน้าเว็บเป็นส่วนหัวระดับที่ 1 ซึ่งเราใช้แท็ก <h1> ชื่อจริงคือ "เวิร์กช็อปแมชชีนเลิร์นนิง" คือเนื้อหาขององค์ประกอบ โดยเนื้อหาจะอยู่ระหว่างแท็กเปิดและปิด องค์ประกอบทั้งหมดไม่ว่าจะเป็นแท็กเปิด แท็กปิด และเนื้อหา
แท็กปิดเป็นแท็กเดียวกับแท็กเปิด ซึ่งนำหน้าด้วยเครื่องหมายทับ
องค์ประกอบและแท็กไม่ใช่สิ่งเดียวกัน แม้ว่าหลายคนจะใช้คำนี้สลับกันไปก็ตาม ชื่อแท็กคือเนื้อหาในวงเล็บ แท็กจะมีวงเล็บ ในกรณีนี้คือ <h1> "องค์ประกอบ" คือแท็กเปิดและแท็กปิด และเนื้อหาทั้งหมดระหว่างแท็กเหล่านั้น รวมถึงองค์ประกอบที่ฝัง
<p>This paragraph has some
<strong><em>strongly emphasized</em></strong>
content</p>
องค์ประกอบย่อหน้านี้มีองค์ประกอบอื่นๆ ที่ซ้อนอยู่ เมื่อจะฝังองค์ประกอบ องค์ประกอบเหล่านั้นจะต้องได้รับการฝังอย่างถูกต้อง ควรปิดแท็ก HTML ในลำดับที่กลับกันเมื่อมีการเปิด ในตัวอย่างข้างต้น ให้สังเกตวิธีที่ <em> เปิดและปิดภายในแท็ก <strong> เปิดและปิด และ <strong> เป็นแบบเปิดและปิดภายในแท็ก <p>
เบราว์เซอร์ไม่แสดงแท็ก แท็กใช้เพื่อตีความเนื้อหาของหน้าเว็บ
HTML มีประโยชน์มากๆ เช่น หากเราไม่ใส่แท็กปิด </li> ระบบจะบอกเป็นนัยถึงแท็กปิด
<ul>
<li>Blendan Smooth
<li>Hoover Sukhdeep
<li>Toasty McToastface
</ul>
แม้ว่าจะสามารถปิด <li> ได้ แต่ก็ไม่ใช่แนวทางปฏิบัติที่ดี จำเป็นต้องใส่ </ul> เพื่อปิด หากไม่ใส่แท็กปิดของรายการที่ไม่ได้เรียงลำดับ เบราว์เซอร์จะพยายามพิจารณาว่ารายการของคุณจะสิ้นสุดที่จุดใด แต่คุณอาจไม่เห็นด้วยกับการตัดสิน
ข้อกำหนดขององค์ประกอบแต่ละรายการระบุว่าแท็กปิดเป็นสิ่งที่บังคับหรือไม่ "ไม่มีแท็กใดละเว้นได้" ในข้อกำหนดหมายความว่าต้องมีทั้งแท็กเปิดและแท็กปิด ข้อกำหนดจะระบุรายการแท็กปิดที่จำเป็นทั้งหมด
หาก <em> หรือ <strong> ในตัวอย่างก่อนหน้านี้ไม่ได้ปิดไป เบราว์เซอร์อาจปิดองค์ประกอบดังกล่าวให้คุณหรือไม่ก็ได้ การไม่ปิด <em> จะทําให้เนื้อหาอาจแสดงผลแตกต่างจากที่คุณตั้งใจไว้ หากไม่ใส่ </ul> และแท็กถัดไปเป็นแท็กปิดของคอนเทนเนอร์หลักของรายการ คุณก็โชคดีแล้ว ในทางกลับกัน หากแท็กเป็นแท็กเปิด <h1> เบราว์เซอร์จะถือว่าส่วนหัวเป็นส่วนหนึ่งของรายการ รวมถึงสไตล์ที่รับช่วงมา แท็กปิดที่ละไว้บางแท็กทำให้เกิดปัญหาใหญ่ นั่นคือ การไม่ปิดบางแท็ก เช่น <script>, <style>, <template>, <textarea> และ <title> ทำให้เนื้อหาต่อๆ ไปหยุดลง ดังที่แสดงในตัวอย่างต่อไปนี้
การมีเนื้อหาบางส่วนที่ตัวเอียงหรือเยื้องส่วนหัวโดยไม่ตั้งใจจะไม่ทำลายธุรกิจของคุณ การที่เนื้อหาส่วนใหญ่ปรากฏโดยไม่มีการจัดรูปแบบในพื้นที่ข้อความขนาด 200x300 เนื่องจากคุณลืมเพิ่ม </textarea> หรือไม่ปรากฏขึ้นเลยเนื่องจากคุณลืมปิด </style> จะทำให้เว็บไซต์ใช้งานไม่ได้
ในบางกรณี เบราว์เซอร์จะมีองค์ประกอบต่างๆ แม้ว่าแท็กจะไม่มีอยู่ในมาร์กอัปก็ตาม เนื่องจากองค์ประกอบสามารถบอกเป็นนัย องค์ประกอบหนึ่งๆ จึงอาจมีอยู่แม้ว่าแท็กจะไม่มีอยู่ก็ตาม เบราว์เซอร์จะเพิ่ม <body></body> คร่อมเนื้อหาและ <tbody></tbody> ไว้รอบแถวของตาราง แม้ว่าคุณจะไม่มีก็ตาม อย่างไรก็ตาม แม้ว่าจะถูกต้องสำหรับละเว้นแท็กได้ แต่อย่าใช้ และตามที่ได้กล่าวไปแล้ว ให้ตรวจสอบว่าคอลัมน์ทั้งสองซ้อนกันอย่างถูกต้อง ตัวคุณเองในอนาคตในฐานะผู้ดูแลรักษามาร์กอัป และใครก็ตามที่ทำงานในฐานโค้ดของคุณจะต้องขอบคุณ
องค์ประกอบมี 2 ประเภท คือ แทนที่และไม่แทนที่
องค์ประกอบที่ไม่มีการแทนที่
ย่อหน้า ส่วนหัว และรายการที่มาร์กอัปในส่วนก่อนหน้านี้จะไม่ถูกแทนที่ทั้งหมด องค์ประกอบที่ไม่มีการแทนที่จะมีแท็กเปิดและแท็กปิด (บางครั้งไม่บังคับ) อยู่รอบๆ องค์ประกอบเหล่านั้นและอาจมีข้อความและแท็กอื่นๆ เป็นองค์ประกอบย่อย แท็กที่ล้อมรอบเหล่านี้สามารถเปลี่ยนวลีหรือรูปภาพให้เป็นไฮเปอร์ลิงก์ รวมประโยคเป็นส่วนหัว เน้นคำ และอื่นๆ ได้
แทนที่องค์ประกอบและทำให้องค์ประกอบเป็นโมฆะ
องค์ประกอบที่ถูกแทนที่จะถูกแทนที่ด้วยวัตถุ ไม่ว่าจะเป็นวิดเจ็ตอินเทอร์เฟซผู้ใช้แบบกราฟิก (UI) ในกรณีของตัวควบคุมฟอร์มส่วนใหญ่ หรือแรสเตอร์หรือไฟล์ภาพที่รองรับการปรับขนาดในกรณีที่เป็นรูปภาพส่วนใหญ่ เมื่อมีการแทนที่โดยวัตถุ แต่ละวัตถุจะมาพร้อมรูปลักษณ์เริ่มต้น รูปแบบที่เกี่ยวข้องจะถูกจำกัด ทั้งนี้ขึ้นอยู่กับประเภทของออบเจ็กต์และเบราว์เซอร์ เช่น เบราว์เซอร์ส่วนใหญ่เปิดใช้การจัดรูปแบบวิดเจ็ต UI และองค์ประกอบเทียมที่เกี่ยวข้องแบบจำกัด ในกรณีของรูปภาพแรสเตอร์ ความสูง ความกว้าง การตัด และการกรองจะสามารถทำได้ง่ายๆ ด้วย CSS แต่ก็มีทางเลือกอื่นๆ มากมาย ในทางกลับกัน กราฟิกเวกเตอร์ที่ปรับขนาดได้ โดยใช้ภาษามาร์กอัปตาม XML ที่คล้ายกับ HTML จะสามารถปรับขนาดได้อย่างเต็มที่ (ยกเว้นในกรณีที่มีรูปภาพแรสเตอร์) ทั้งยังใส่สไตล์ได้เต็มที่ด้วย โปรดทราบว่าความสามารถในการจัดรูปแบบ SVG ที่ฝังจาก CSS ที่ลิงก์กับไฟล์ HTML ที่ฝังจะขึ้นอยู่กับวิธีตั้งค่า SVG
ในตัวอย่างนี้ องค์ประกอบ <img> และ <input> ที่แทนที่ 2 รายการถูกแทนที่ด้วยเนื้อหาที่ไม่ใช่ข้อความ ซึ่งได้แก่ รูปภาพและออบเจ็กต์อินเทอร์เฟซผู้ใช้แบบกราฟิก ตามลำดับ
<input type="range">
<img src="switch.svg" alt="light switch">
เอาต์พุตของ HTML ข้างต้น:
องค์ประกอบที่ถูกแทนที่และองค์ประกอบที่เป็นโมฆะมักทำให้เกิดความสับสน องค์ประกอบ Void เป็นองค์ประกอบแบบปิดตัวเองทั้งหมดและแสดงด้วยแท็กเดียว ซึ่งหมายความว่าไม่มีแท็กปิดสำหรับองค์ประกอบที่เป็นโมฆะ หรือคุณจะใส่เครื่องหมายทับต่อท้ายแท็กก็ได้ ซึ่งผู้ใช้หลายคนจะพบว่ามาร์กอัปนี้อ่านง่ายขึ้น สำหรับตัวอย่างนี้ เราปิดแท็กด้วยเครื่องหมายทับ ดังนี้
<input type="range"/>
<img src="switch.svg" alt="light switch"/>
เครื่องหมายทับปิดท้ายเป็นแบบดั้งเดิม ซึ่งเป็นวิธีบ่งบอกว่าองค์ประกอบปิดตัวเองอยู่ และจะไม่มีแท็กปิดท้ายหรือแท็กปิดที่ตรงกัน
องค์ประกอบ Void ต้องไม่มีเนื้อหาข้อความหรือองค์ประกอบที่ฝังไว้ องค์ประกอบของ Void ได้แก่ <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <source>, <track> และ <wbr> และอื่นๆ
องค์ประกอบที่ถูกแทนที่ส่วนใหญ่จะเป็นองค์ประกอบโมฆะ แต่ไม่ใช่ทั้งหมด ระบบจะแทนที่องค์ประกอบ video, picture, object และ iframe แต่ไม่ได้เป็นโมฆะ แท็กเหล่านี้มีองค์ประกอบหรือข้อความอื่นๆ ทั้งหมดได้ ดังนั้นจึงมีแท็กปิด
องค์ประกอบที่เป็นโมฆะส่วนใหญ่จะถูกแทนที่ แต่ไม่ใช่ทั้งหมดอย่างที่เราเห็นใน base, link, param และ meta เหตุใดจึงต้องมีองค์ประกอบที่เป็นโมฆะซึ่งไม่มีเนื้อหา ซึ่งไม่มีการแทนที่และไม่แสดงผลใดๆ ไปยังหน้าจอ เพื่อให้ข้อมูลเกี่ยวกับคอนเทนต์ ข้อมูลนี้ระบุโดยแอตทริบิวต์ขององค์ประกอบ
Attributes
คุณอาจสังเกตเห็นว่าตัวอย่าง <img> และ <input> มีมากกว่าประเภทองค์ประกอบในแท็กเปิด บิตเพิ่มเติมของคู่ชื่อ/ค่าที่คั่นด้วยการเว้นวรรคเหล่านี้ (แต่บางครั้งอาจไม่จำเป็นต้องใส่ค่า) จะเรียกว่าแอตทริบิวต์ แอตทริบิวต์คือสิ่งที่ทำให้ HTML มีประสิทธิภาพอย่างเหลือเชื่อ เราจะพูดถึงแอตทริบิวต์และค่าแอตทริบิวต์หลายร้อยรายการในชุดนี้ แต่จะพูดถึงข้อมูลทั่วไปและวิธีรวมแอตทริบิวต์เหล่านั้น
แอตทริบิวต์ให้ข้อมูลเกี่ยวกับองค์ประกอบ แอตทริบิวต์เช่นเดียวกับแท็กเปิดอื่นๆ จะไม่ปรากฏในเนื้อหา แต่จะช่วยกำหนดลักษณะที่เนื้อหาจะปรากฏต่อผู้ใช้ทั้งที่ผู้ใช้มองเห็นและผู้ที่มองไม่เห็น (เทคโนโลยีความช่วยเหลือและเครื่องมือค้นหา)
แอตทริบิวต์จะปรากฏในแท็กเปิดเท่านั้น แท็กเปิดจะขึ้นต้นด้วยประเภทองค์ประกอบเสมอ ประเภทอาจตามด้วยแอตทริบิวต์ 0 รายการขึ้นไป โดยคั่นด้วยการเว้นวรรคอย่างน้อย 1 ช่อง ชื่อแอตทริบิวต์ส่วนใหญ่จะตามด้วยเครื่องหมายเท่ากับ (=) เท่ากับค่าแอตทริบิวต์นั้น โดยคร่อมด้วยเครื่องหมายคำพูดเปิดและปิด
ในตัวอย่างนี้ เรามีลิงก์ Anchor ที่มีแอตทริบิวต์ 2 รายการ แอตทริบิวต์ 2 รายการนี้ได้แปลงเนื้อหา "การลงทะเบียน" เป็นลิงก์ Anchor ภายในที่เลื่อนไปยังแอตทริบิวต์ id="register" ในแท็บเบราว์เซอร์ปัจจุบันเมื่อมีการคลิกลิงก์ แตะ หรือเปิดใช้งานด้วยแป้นพิมพ์หรืออุปกรณ์อื่นๆ
แอตทริบิวต์เป็นตัวกำหนดพฤติกรรม การเชื่อมโยง และฟังก์ชันการทำงานขององค์ประกอบ เราจะกล่าวถึงแอตทริบิวต์เพิ่มเติมในส่วนแอตทริบิวต์ของชุดนี้ สำหรับตอนนี้ โปรดทราบว่าแอตทริบิวต์บางรายการเป็นแบบส่วนกลาง ซึ่งหมายความว่าแอตทริบิวต์เหล่านั้นจะปรากฏภายในแท็กเปิดขององค์ประกอบใดก็ได้ บางองค์ประกอบจะมีผลเฉพาะกับหลายองค์ประกอบ แต่ไม่ทั้งหมด ในขณะที่องค์ประกอบอื่นๆ จะใช้กับบางองค์ประกอบโดยเฉพาะและเกี่ยวข้องกับองค์ประกอบเดียวเท่านั้น
แอตทริบิวต์ส่วนใหญ่เป็นคู่ชื่อ/ค่า คุณใส่แอตทริบิวต์บูลีนที่มีค่าเป็นจริง เท็จ หรือเหมือนกับชื่อของแอตทริบิวต์ได้เป็นเพียงแอตทริบิวต์ โดยไม่จำเป็นต้องระบุค่า
<img src="switch.svg" alt="light switch" ismap />
รูปภาพนี้มีแอตทริบิวต์ 3 รายการ ได้แก่ src, alt และ ismap ระบบใช้แอตทริบิวต์ src เพื่อระบุตำแหน่งของชิ้นงานรูปภาพ SVG แอตทริบิวต์ alt มีข้อความสำรองที่อธิบายเนื้อหาของรูปภาพ ส่วนแอตทริบิวต์ ismap คือบูลีนและไม่ต้องระบุค่า ที่อธิบายมาว่าแอตทริบิวต์มีอะไรบ้าง เราจะอธิบายแอตทริบิวต์เหล่านี้โดยละเอียดในส่วนรูปภาพ
แม้ว่าแอตทริบิวต์จะไม่จำเป็นเสมอไป แต่ก็เป็นบางครั้ง หากค่ามีการเว้นวรรคหรือสัญลักษณ์พิเศษ ก็ต้องมีเครื่องหมายคำพูด ด้วยเหตุนี้เราจึงแนะนำให้ยกข้อความมาเสมอ การเว้นวรรคระหว่างแอตทริบิวต์อย่างน้อย 1 ช่องในกรณีที่ไม่ได้ใส่ค่าแอตทริบิวต์นั้นจริงๆ แต่ขอแนะนำให้ใส่เครื่องหมายคำพูดและเว้นวรรคเพื่อให้อ่านง่าย เพื่อความปลอดภัย และเพื่อให้อ่านได้ง่าย
HTML ไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ แต่ค่าแอตทริบิวต์บางค่าเป็นแบบ ค่าที่กำหนดไว้ในข้อกำหนดจะไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ โดยทั่วไปสตริงที่ไม่ได้กำหนดเป็นคีย์เวิร์ดจะคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ รวมถึงค่า id และ class
โปรดทราบว่า หากค่าแอตทริบิวต์ใน HTML คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ เมื่อใช้เป็นส่วนหนึ่งของตัวเลือกแอตทริบิวต์ใน CSS และ JavaScript
เราขอแนะนำให้มาร์กอัป HTML โดยใช้อักษรตัวพิมพ์เล็กสำหรับชื่อองค์ประกอบและชื่อแอตทริบิวต์ทั้งหมดภายในแท็ก โดยใส่เครื่องหมายคำพูดสำหรับค่าแอตทริบิวต์ทั้งหมด เพื่อทำให้มาร์กอัปอ่านง่ายขึ้น แต่ไม่จำเป็น ถ้าคุณได้ยินคำว่า "มาร์กอัปรูปแบบ XHTML" สิ่งนี้และองค์ประกอบว่างที่ปิดตัวเองด้วยเครื่องหมายทับในตอนท้ายหมายถึง
การปรากฏขององค์ประกอบ
ลักษณะเริ่มต้นขององค์ประกอบเชิงความหมายจะกำหนดโดยสไตล์ชีตของ User Agent เบราว์เซอร์ส่วนใหญ่ใช้สไตล์ชีตจริงเพื่อวัตถุประสงค์นี้ ขณะที่เบราว์เซอร์อื่นๆ จะจำลองการทำงานด้วยโค้ด ผลลัพธ์สุดท้ายจะเหมือนกัน แม้ว่าข้อจำกัดบางประการในสไตล์ชีตของ User Agent จะกำหนดโดยข้อกำหนด HTML แต่เบราว์เซอร์มีละติจูดจำนวนมาก ซึ่งหมายความว่าเบราว์เซอร์ทั้งสองจะมีความแตกต่างกันอยู่
องค์ประกอบที่คุณเลือกและแท็กที่คุณใช้ควรเหมาะสมกับเนื้อหาที่คุณแสดง เนื่องจากแท็กจะมีความหมายตามความหมาย ความหมายหรือ role ขององค์ประกอบมีความสำคัญต่อเทคโนโลยีความช่วยเหลือพิเศษ และเครื่องมือค้นหาในบางกรณี ควรใช้ HTML เพื่อจัดโครงสร้างเนื้อหา ไม่ใช่เพื่อกำหนดรูปลักษณ์ของเนื้อหา ลักษณะที่ปรากฏคือขอบเขตของ CSS แม้ว่าองค์ประกอบหลายอย่างที่เปลี่ยนแปลงลักษณะของเนื้อหา เช่น <h1>, <strong> และ <em> จะมีความหมายตามความหมาย แต่ลักษณะโดยทั่วไปสามารถเปลี่ยนแปลงได้โดยสไตล์ผู้เขียน
<h1>This header has both <strong>strong</strong> and <em>emphasized</em> content</h1>
องค์ประกอบ แอตทริบิวต์ และ JavaScript
Document Object Model (DOM) คือการนำเสนอข้อมูลของโครงสร้างและเนื้อหาของเอกสาร HTML ขณะที่เบราว์เซอร์แยกวิเคราะห์ HTML เบราว์เซอร์จะสร้างออบเจ็กต์ JavaScript สำหรับทุกองค์ประกอบและส่วนของข้อความที่พบ วัตถุเหล่านี้เรียกว่าโหนด ซึ่งคือโหนดองค์ประกอบและโหนดข้อความตามลำดับ
มีอินเทอร์เฟซสำหรับกำหนดฟังก์ชันการทำงานของทุกองค์ประกอบ HTML HTML DOM API ให้สิทธิ์เข้าถึงและควบคุมองค์ประกอบ HTML ทั้งหมดผ่าน DOM โดยมีอินเทอร์เฟซสำหรับองค์ประกอบ HTML และคลาส HTML ทั้งหมดที่รับค่ามา อินเทอร์เฟซ HTMLElement แสดงองค์ประกอบ HTML และโหนดสืบทอดทั้งหมด องค์ประกอบอื่นๆ ทั้งหมดจะติดตั้งใช้งานผ่านอินเทอร์เฟซที่รับช่วงมา อินเทอร์เฟซที่รับช่วงมาแต่ละรายการจะมีตัวสร้าง เมธอด และพร็อพเพอร์ตี้ คุณสามารถเข้าถึงแอตทริบิวต์ส่วนกลางทั้งหมด รวมถึงเหตุการณ์ input, pointer, transition และ animation ได้โดยใช้พร็อพเพอร์ตี้ HTMLElement ที่รับช่วงมา ด้วยการใช้ประเภทย่อยของแต่ละองค์ประกอบ เช่น HTMLAnchorElement และ HTMLImageElement คุณจะสามารถเข้าถึงเมธอดและค่าแอตทริบิวต์ที่เจาะจงองค์ประกอบได้
ทดสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับ HTML
องค์ประกอบ HTML ใช้สำหรับการจัดรูปแบบ
เลือกองค์ประกอบที่ถูกแทนที่
<img><p><ul><input>เลือกข้อความที่ถูกต้องทั้งหมด