DCRUB

แท็ก <kbd> ใน HTML5 ใช้เพื่อระบุข้อความที่แสดงถึงการกดแป้นพิมพ์ (keyboard input) ซึ่งเป็นวิธีหนึ่งที่นักพัฒนาเว็บไซต์ใช้เพื่อเน้นข้อความที่เกี่ยวข้องกับการกดปุ่มคีย์บอร์ด โดยทั่วไปจะใช้ในการแสดงคู่มือการใช้งานหรือขั้นตอนที่ต้องการการกดแป้นพิมพ์ เช่น การแสดงปุ่มลัด (shortcuts) หรือคำสั่งที่ผู้ใช้ต้องกดบนคีย์บอร์ด รูปแบบการใช้งาน <kbd> การใช้แท็ก <kbd> แบบพื้นฐาน ตัวอย่างนี้จะแสดงปุ่มคีย์บอร์ดที่ต้องกดในเนื้อหาของเว็บ การใช้งานร่วมกับแท็กอื่นๆ แท็ก <kbd> สามารถใช้งานร่วมกับแท็กอื่น ๆ เพื่อสร้างรูปแบบที่ซับซ้อนมากขึ้น เช่น การใช้ร่วมกับแท็ก <samp> เพื่อแสดงผลลัพธ์ของการกดแป้นพิมพ์ หรือแท็ก <code> เพื่อแสดงรหัสโปรแกรม การแสดงการกดหลายปุ่มพร้อมกัน หากต้องการแสดงว่าผู้ใช้ต้องกดหลายปุ่มพร้อมกัน เช่น ปุ่มคีย์ลัดที่มีการกดมากกว่า 1 ปุ่ม แท็ก <kbd>…

แท็ก <ins> ใน HTML5 ใช้สำหรับการระบุข้อความที่ถูก “เพิ่ม” เข้าไปในเอกสาร โดยจะใช้แสดงข้อความที่เพิ่มใหม่ หรือใช้เมื่อมีการเปลี่ยนแปลงเนื้อหาภายในเอกสาร โดยทั่วไปเว็บเบราว์เซอร์จะแสดงข้อความภายใน <ins> ด้วยการขีดเส้นใต้ รูปแบบการใช้งาน คุณสมบัติ (Attributes) ของแท็ก <ins> การใช้งานทั่วไป การเน้นข้อความที่เพิ่มเข้ามา: ใช้เมื่อต้องการแสดงข้อความใหม่ที่ถูกเพิ่มเข้ามา เช่นในการแก้ไขบทความหรือเอกสาร การติดตามการเปลี่ยนแปลงในเอกสาร: แท็ก <ins> มักใช้ร่วมกับแท็ก <del> ซึ่งใช้ระบุข้อความที่ถูกลบออกไป การใช้ทั้งสองแท็กนี้ช่วยให้เราสามารถติดตามการแก้ไขเวอร์ชันของเอกสารได้ การเพิ่มข้อความพร้อมระบุแหล่งที่มา (Citation): การใช้แอตทริบิวต์ cite สามารถเชื่อมโยงไปยังแหล่งที่มาหรืออธิบายสาเหตุของการเพิ่มข้อความได้ การเพิ่มข้อความพร้อมระบุวัน/เวลา: แอตทริบิวต์ datetime ใช้เพื่อระบุวันที่และเวลาที่มีการเพิ่มข้อความ ซึ่งช่วยในการติดตามเวลาแก้ไขหรือการเพิ่มข้อมูล การใช้แอตทริบิวต์ทั้งสองร่วมกัน: สามารถใช้ทั้งแอตทริบิวต์…

ใน HTML5 แท็ก <input> ใช้สำหรับรับข้อมูลจากผู้ใช้ในหลายรูปแบบ ไม่ว่าจะเป็นการพิมพ์ข้อความ การเลือกวันที่ การอัปโหลดไฟล์ และอื่น ๆ โดยมีประเภท (type) หลายแบบที่สามารถประยุกต์ใช้ได้ตามความต้องการ รูปแบบการใช้งาน <input> ทั่วไป แท็ก <input> ไม่มีการปิดแท็ก (self-closing tag) และมักถูกใช้ในฟอร์มเพื่อรับข้อมูลจากผู้ใช้ ประเภทของ <input> ใน HTML5 พร้อมตัวอย่าง 1. Text (type=”text”) ใช้รับข้อความแบบธรรมดา 2. Password (type=”password”) ใช้รับข้อมูลรหัสผ่าน โดยข้อความจะถูกซ่อนเป็นจุดหรือดอกจัน 3. Email (type=”email”) รับข้อมูลอีเมลและมีการตรวจสอบรูปแบบเบื้องต้น…

ใน HTML5 แท็ก <img> ใช้ในการแทรกรูปภาพลงในหน้าเว็บ โดยเป็นแท็กที่ไม่ต้องมีแท็กปิด (self-closing tag) และจะต้องมีแอตทริบิวต์ src เพื่อระบุที่อยู่ของรูปภาพ นอกจากนี้ยังมีแอตทริบิวต์ต่างๆ ที่สามารถใช้ในการปรับแต่งหรือปรับปรุงการแสดงผลของรูปภาพได้ รูปแบบการใช้งานแท็ก <img> การใช้งานพื้นฐาน การแทรกรูปภาพทั่วไปสามารถทำได้โดยการใช้แอตทริบิวต์ src และ alt การปรับขนาดของรูปภาพ สามารถใช้แอตทริบิวต์ width และ height เพื่อกำหนดขนาดของรูปภาพ การใช้งานรูปภาพแบบ Responsive การใช้ srcset และ sizes เพื่อให้แสดงรูปภาพที่มีความละเอียดเหมาะสมกับหน้าจออุปกรณ์ที่ต่างกัน การแทรกรูปภาพผ่าน URL ภายนอก สามารถแทรกรูปภาพจากเว็บไซต์อื่นได้โดยการระบุ URL ในแอตทริบิวต์ src…

<iframe> (Inline Frame) ใน HTML5 ใช้สำหรับฝังเนื้อหาจากเว็บอื่น ๆ หรือเนื้อหาภายในเว็บไซต์เดียวกันโดยไม่ต้องออกจากหน้าเว็บที่กำลังเปิดอยู่ เช่น การฝังวิดีโอจาก YouTube, แผนที่จาก Google Maps หรือเว็บเพจอื่น ๆ ลงในหน้าเว็บของเรา การใช้งาน <iframe> Tag โครงสร้างพื้นฐานของ <iframe> มีลักษณะดังนี้ แอตทริบิวต์สำคัญของ <iframe> src: ระบุ URL ของเนื้อหาที่ต้องการฝัง width และ height: กำหนดความกว้างและความสูงของ iframe (เป็นพิกเซลหรือเปอร์เซ็นต์) title: ใช้เพื่ออธิบายเนื้อหาภายใน iframe เพื่อช่วยเรื่อง SEO…

ใน HTML5 แท็ก <i> ใช้เพื่อแสดงข้อความเป็น italic (ตัวเอียง) หรือเพื่อเน้นการแสดงผลในเชิงความหมายมากกว่าการเปลี่ยนรูปลักษณ์เพียงอย่างเดียว การใช้งาน <i> ใน HTML5 การเน้นคำแบบเชิงสัญลักษณ์: ใช้เพื่อแสดงคำที่มีความสำคัญในเชิงสัญลักษณ์ เช่น ชื่อเรื่อง ชื่อภาษา หรือวลีที่มีความสำคัญทางวัฒนธรรม คำศัพท์ภาษาต่างประเทศ: ใช้เมื่อต้องการแสดงคำหรือวลีจากภาษาต่างประเทศ การแสดงคำที่ต้องการเน้น: ใช้เพื่อเน้นคำหรือข้อความในบริบทที่ไม่ควรใช้แท็ก <em> (emphasis) เช่น การแสดงชื่อหนังสือหรือชื่อบทความ ใช้สำหรับไอคอนในเว็บ: ในการใช้ร่วมกับไลบรารีเช่น Font Awesome เพื่อแสดงไอคอนผ่านแท็ก <i> การประยุกต์ใช้งาน <i> ในเอกสารหรือบทความ: ใช้แท็ก <i> สำหรับแสดงชื่อเรื่อง หรือข้อความที่ต้องการให้เป็นตัวเอียง เพื่อแยกแยะความหมาย…

html> tag เป็น tag ที่สำคัญมากในเอกสาร HTML ซึ่งเป็นตัวกำหนดจุดเริ่มต้นของเอกสาร HTML ทั้งหมด การใช้งาน <html> ใน HTML5 นั้นมีการปรับปรุงหลายด้าน เช่น การระบุภาษาของเอกสารและการรองรับลักษณะพิเศษเพิ่มเติม การใช้งานพื้นฐานของ <html> <html> เป็น tag ที่ห่อหุ้มทุกเนื้อหาของเอกสาร HTML โดยใช้เป็น container สำหรับส่วนอื่นๆ เช่น <head> และ <body> โดยตัวอย่างการใช้งานพื้นฐานจะมีโครงสร้างดังนี้ การระบุภาษาใน <html> HTML5 สนับสนุนการกำหนดภาษาเริ่มต้นของเอกสารผ่าน lang attribute เพื่อช่วยให้เครื่องมือค้นหา (search engine)…

ใน HTML5 แท็ก <hr> ใช้สำหรับการสร้างเส้นคั่น (horizontal rule) ซึ่งมักใช้เพื่อแบ่งส่วนของเนื้อหาหรือเพื่อแยกกลุ่มของเนื้อหาในหน้าเว็บให้ดูชัดเจนขึ้น โดยแท็กนี้เป็นแท็กที่ไม่มีการปิด (self-closing) และไม่ต้องใส่ข้อความใดๆ ภายใน คุณสมบัติพื้นฐานของ <hr> ตัวอย่างการใช้งานพื้นฐานของ <hr> การประยุกต์ใช้งาน <hr> ด้วยการปรับแต่ง CSS ใน HTML5 เราสามารถปรับแต่งรูปแบบของเส้นคั่น <hr> ได้หลากหลายด้วยการใช้ CSS เช่น การกำหนดสี ความหนา สไตล์เส้น และความยาวของเส้นคั่น การกำหนดสีและความหนา เราสามารถใช้ CSS เพื่อกำหนดสีและความหนาของเส้นคั่นได้ เช่น การเปลี่ยนสไตล์เส้นให้เป็นจุดประ การใช้เส้นประ (dashed) หรือจุด…

ใน HTML5 แท็ก <hgroup> ถูกใช้เพื่อจัดกลุ่มหัวเรื่อง (headings) ที่เกี่ยวข้องกันเป็นกลุ่มเดียว เช่น การจัดกลุ่ม <h1>, <h2> หรือ <h3> เพื่อให้เบราว์เซอร์และเครื่องมือการเข้าถึง (เช่น screen readers) เข้าใจว่าหัวข้อเหล่านั้นเป็นส่วนหนึ่งของกลุ่มเดียวกัน จุดประสงค์การใช้งานแท็ก <hgroup> แท็ก <hgroup> ใช้เพื่อแก้ปัญหาที่เกิดขึ้นเมื่อมีการใช้หัวเรื่องหลายระดับที่เป็นหัวข้อหลักและหัวข้อรองในหน้าเดียวกัน โดยไม่ต้องการให้แต่ละระดับของหัวเรื่องถูกนับแยกกัน ตัวอย่างเช่น หากต้องการให้ <h1> และ <h2> เป็นหัวข้อหลักและหัวข้อย่อยในส่วนเดียวกัน เราสามารถใช้ <hgroup> เพื่อจัดกลุ่มหัวเรื่องเหล่านั้น ตัวอย่างการใช้งาน <hgroup> ในตัวอย่างข้างต้น <h1> และ <h2> ถูกจัดกลุ่มเป็นส่วนเดียวกัน…

ใน HTML5 แท็ก <header> ใช้สำหรับกำหนดส่วนหัวของหน้าเว็บหรือส่วนหนึ่งของเนื้อหา ซึ่งมักประกอบด้วยข้อมูลอย่างเช่น โลโก้ ชื่อเรื่อง หรือเมนูนำทาง โดยสามารถใช้ได้ทั้งในระดับของหน้าเว็บ (global header) หรือในส่วนย่อยๆ ของเนื้อหา (sectional header) เช่น ภายในบทความ หรือส่วนย่อยอื่นๆ ของหน้า คุณสมบัติหลักของ <header> ตัวอย่างการใช้งาน <header> ในหลายบริบท ส่วนหัวหลักของหน้าเว็บ (Global Header) ส่วนนี้คือส่วนหัวของทั้งหน้าเว็บ มักอยู่ด้านบนสุดและแสดงผลอยู่ในทุกๆ หน้าของเว็บไซต์ ในตัวอย่างนี้ <header> ถูกใช้เพื่อสร้างส่วนหัวหลักของเว็บไซต์ โดยมีชื่อเว็บไซต์และเมนูนำทาง ส่วนหัวภายในบทความ (Article Header) สามารถใช้ <header>…

<head> tag ใน HTML5 ใช้สำหรับเก็บข้อมูลที่เกี่ยวข้องกับ metadata ของเว็บเพจ เช่น ชื่อเว็บเพจ การเชื่อมโยงไปยังไฟล์ CSS, JavaScript, ไอคอน, และข้อมูลอื่นๆ ที่ไม่แสดงผลบนหน้าเว็บโดยตรง แต่จะเป็นข้อมูลที่สำคัญสำหรับการทำงานของเบราว์เซอร์และการแสดงผลเว็บเพจอย่างเหมาะสม โครงสร้างทั่วไปของ <head> ตัวอย่างการใช้งาน <head> tag และองค์ประกอบต่างๆ <title> <meta> ตัวอย่าง กำหนด character encoding การกำหนดคำอธิบายเว็บเพจ การกำหนด viewport สำหรับการทำงานกับ responsive design <link> ตัวอย่าง การเชื่อมโยงไฟล์ CSS การเชื่อมโยงฟอนต์จาก Google…

ใน HTML5 แท็ก <h1> ถึง <h6> ใช้สำหรับแสดงหัวข้อ (heading) ของหน้าเว็บ โดยมีระดับความสำคัญจากมากไปน้อย เริ่มจาก <h1> ซึ่งเป็นหัวข้อที่สำคัญที่สุด และลดลงเรื่อย ๆ จนถึง <h6> ที่มีความสำคัญน้อยที่สุด การใช้งานและโครงสร้างพื้นฐาน ตัวอย่างการใช้งาน การประยุกต์ใช้งาน <h1> ถึง <h6> การใช้แท็กเหล่านี้อย่างเหมาะสมจึงเป็นสิ่งสำคัญทั้งในด้านการแสดงผลและการปรับปรุงคุณภาพ SEO ของเว็บไซต์

<form> ใน HTML5 เป็นแท็กที่ใช้สร้างฟอร์มสำหรับการกรอกข้อมูล โดยจะใช้ส่งข้อมูลไปยังเซิร์ฟเวอร์หรือใช้สำหรับการประมวลผลข้อมูลในฝั่งไคลเอนต์ รูปแบบและการทำงานของฟอร์มมีหลายแบบที่สามารถนำไปประยุกต์ใช้งานได้หลากหลายขึ้นอยู่กับความต้องการของผู้ใช้ โครงสร้างพื้นฐานของ <form> อธิบายแอตทริบิวต์หลัก ตัวอย่างการใช้งาน ฟอร์มพื้นฐานสำหรับส่งข้อมูล ฟอร์มนี้จะส่งชื่อผู้ใช้และรหัสผ่านไปที่ URL /submit โดยใช้วิธี POST ซึ่งเป็นวิธีที่ปลอดภัยกว่าสำหรับการส่งข้อมูลที่สำคัญ เช่น รหัสผ่าน ฟอร์มแบบ GET สำหรับการค้นหา ในฟอร์มนี้ เมื่อผู้ใช้กดปุ่ม submit ข้อมูลการค้นหาจะถูกส่งผ่าน URL เช่น /search?query=keyword ซึ่งวิธีนี้เหมาะสำหรับการค้นหาหรือส่งข้อมูลที่ไม่เป็นความลับ ฟอร์มอัปโหลดไฟล์ การใช้งานฟอร์มนี้เหมาะสำหรับการอัปโหลดไฟล์ โดยจะใช้ enctype=”multipart/form-data” เพื่อให้สามารถส่งข้อมูลไฟล์ได้ ฟอร์มที่มีการตรวจสอบข้อมูล (Validation) HTML5 มาพร้อมกับคุณสมบัติการตรวจสอบข้อมูล (form…

น HTML5 แท็ก <footer> ใช้สำหรับกำหนดส่วนท้ายของเอกสารหรือส่วนประกอบต่าง ๆ ของหน้าเว็บ เช่น บทความ หัวข้อหลัก หรือส่วนย่อย ๆ ของเนื้อหา แท็กนี้มักประกอบไปด้วยข้อมูล เช่น ลิขสิทธิ์ (copyright), ลิงก์ไปยังหน้าต่าง ๆ, ข้อมูลการติดต่อ หรือข้อมูลที่เกี่ยวข้องกับผู้เขียนหรือผู้ดูแลเนื้อหา ลักษณะการใช้งาน <footer> ใช้ <footer> สำหรับส่วนท้ายของหน้าเว็บ การใช้งานทั่วไปของแท็ก <footer> คือการกำหนดส่วนท้ายของหน้าเว็บ ซึ่งมักจะมีข้อมูลเกี่ยวกับลิขสิทธิ์ ลิงก์ไปยังหน้าอื่น ๆ หรือข้อมูลการติดต่อ ในตัวอย่างนี้ <footer> ใช้กำหนดส่วนท้ายของหน้าเว็บไซต์ โดยมีข้อความลิขสิทธิ์และลิงก์ไปยังหน้าอื่น ๆ เช่น หน้า…

ใน HTML5, แท็ก <figure> ถูกนำมาใช้เพื่อห่อหุ้มเนื้อหาที่เกี่ยวกับสื่อ เช่น รูปภาพ แผนภูมิ ตาราง หรือโค้ด เพื่อบอกว่าเนื้อหานั้นเป็นเนื้อหาที่สามารถมีคำบรรยายได้ (caption) ผ่านแท็ก <figcaption> การใช้งาน <figure> ตัวอย่างการใช้งาน <figure> รูปแบบต่างๆ รูปภาพพร้อมคำบรรยาย ในตัวอย่างนี้ <figure> ถูกใช้เพื่อครอบ <img> และมี <figcaption> ที่ให้คำบรรยายภาพ ตารางข้อมูล ในตัวอย่างนี้ <figure> ใช้สำหรับตารางข้อมูลพร้อมคำอธิบายภายใต้ <figcaption> โค้ดโปรแกรม ตัวอย่างนี้แสดงการใช้ <figure> กับโค้ดที่มีการบรรยายด้วย <figcaption> วีดีโอ ในกรณีนี้ เราใช้…

แท็ก <figcaption> ใน HTML5 ถูกใช้เพื่อกำหนดคำอธิบายสำหรับองค์ประกอบ <figure> ซึ่งมักใช้ร่วมกับรูปภาพ วิดีโอ แผนภูมิ หรือเนื้อหาอื่นๆ ที่ต้องการการอธิบายเพิ่มเติม แท็ก <figcaption> จะช่วยให้สามารถเพิ่มคำอธิบายหรือคำบรรยายที่เชื่อมโยงกับเนื้อหาภายใน <figure> ทำให้การแสดงผลมีความสมบูรณ์และให้ข้อมูลชัดเจนมากขึ้น โครงสร้างพื้นฐานของ <figure> และ <figcaption> การใช้งาน <figcaption> ในรูปแบบต่างๆ การใส่ <figcaption> ไว้ใน <figure> หลังเนื้อหา การใส่ <figcaption> ไว้ก่อนเนื้อหา การใช้งานร่วมกับเนื้อหาอื่นๆ เช่น วิดีโอ การใช้งานกับแผนภูมิหรือกราฟ การใส่เนื้อหาหลายอย่างใน <figure> ประโยชน์ของ <figcaption> ตัวอย่างการใช้งานร่วมกับ…

<fieldset> เป็นแท็กที่ใช้ใน HTML5 เพื่อจัดกลุ่มของฟอร์มควบคุม (form controls) หรือองค์ประกอบต่าง ๆ ที่เกี่ยวข้องในฟอร์มเดียวกัน ช่วยในการแยกข้อมูลที่เกี่ยวข้องกันเป็นหมวดหมู่ให้ดูมีระเบียบและเข้าใจง่ายขึ้น การใช้งาน <fieldset> ตัวอย่างการใช้งาน จัดกลุ่มแบบฟอร์มที่เกี่ยวข้องกัน ในตัวอย่างนี้เราใช้ <fieldset> เพื่อแบ่งส่วนของข้อมูลออกเป็น “Personal Information” และ “Account Details” เพื่อทำให้ฟอร์มดูเป็นระเบียบ การใช้ <fieldset> ซ้อนกัน เราสามารถใช้ <fieldset> ซ้อนกันได้ ถ้าต้องการจัดกลุ่มย่อยภายในกลุ่มใหญ่ ตัวอย่างนี้แสดงการใช้งาน <fieldset> ซ้อนกัน โดยกลุ่มข้อมูลย่อยภายในกลุ่มข้อมูลใหญ่จะเกี่ยวกับวิธีการชำระเงิน ใช้สำหรับกลุ่มปุ่มควบคุม นอกจากฟอร์มข้อมูลแล้ว <fieldset> ยังสามารถใช้ในการจัดกลุ่มปุ่มควบคุมต่าง ๆ ได้…

ใน HTML5 แท็ก <embed> ใช้ในการฝังหรือแสดงเนื้อหาภายนอก เช่น ไฟล์วิดีโอ ไฟล์เสียง ไฟล์ PDF และแอปพลิเคชันที่สร้างจากปลั๊กอิน (เช่น Flash) ลงในหน้าเว็บ แท็กนี้เป็นแบบ self-closing (ไม่มีแท็กปิด) และมีแอตทริบิวต์หลักคือ src และ type ที่ใช้กำหนดแหล่งที่มาและประเภทของไฟล์ที่จะแสดง การใช้งาน <embed> และตัวอย่าง การฝังไฟล์ PDF ใช้ฝังไฟล์ PDF เพื่อให้ผู้ใช้สามารถดูหรือดาวน์โหลดเอกสารได้ ในตัวอย่างนี้จะฝังไฟล์ PDF ชื่อ document.pdf ในหน้าเว็บ ซึ่งผู้ใช้สามารถเลื่อนอ่านเนื้อหาในเอกสารได้ การฝังไฟล์วิดีโอ ใช้ฝังวิดีโอในรูปแบบไฟล์ต่างๆ เช่น MP4…

แท็ก <em> ใน HTML5 ใช้เพื่อเน้นความสำคัญของข้อความ โดยทั่วไปการเน้นแบบนี้จะถูกตีความโดยเบราว์เซอร์ว่าเป็นการเน้นด้วยตัวเอียง (italic) ซึ่งจะให้ความหมายทางด้านเนื้อหาว่าคำหรือข้อความนี้ควรได้รับความสนใจหรือมีความสำคัญมากขึ้น ไม่ใช่แค่เรื่องของสไตล์อย่างเดียวเหมือนแท็ก <i> ที่เน้นเรื่องการแสดงผลแบบตัวเอียงอย่างเดียว การใช้งานของ <em> มีหลายกรณีขึ้นอยู่กับบริบทที่ต้องการเน้นความสำคัญของข้อความ ตัวอย่างการประยุกต์ใช้งานต่างๆ มีดังนี้ เน้นข้อความในบทความ การเน้นคำหรือวลีที่สำคัญในประโยคเพื่อให้ผู้อ่านทราบว่าควรให้ความสำคัญกับส่วนนี้เป็นพิเศษ ผลลัพธ์: “This is a very important message.” (คำว่า very important จะเป็นตัวเอียง) การเน้นหลายระดับ หากมีการเน้นข้อความที่ซ้อนกันหรือหลายระดับ <em> สามารถใช้ซ้อนกันได้ โดยการซ้อนกันแต่ละครั้งจะเพิ่มระดับการเน้นความสำคัญมากขึ้นเรื่อยๆ ในประโยคที่สอง “pay attention” จะเน้นมากกว่า “really need…

แท็ก <dt> ใน HTML5 เป็นส่วนหนึ่งของการสร้างรายการคำศัพท์ (Description List) ซึ่งใช้งานคู่กับแท็ก <dl> (Description List) และ <dd> (Description Definition) โดยแท็ก <dt> ใช้กำหนดรายการคำศัพท์หรือหัวข้อ ส่วนแท็ก <dd> ใช้กำหนดคำอธิบายหรือรายละเอียดของคำศัพท์หรือหัวข้อที่ระบุในแท็ก <dt> การใช้งานพื้นฐาน แท็ก <dt> จะถูกใช้ร่วมกับ <dl> และ <dd> ในการสร้างรายการคำศัพท์และคำอธิบายดังนี้ รูปแบบการประยุกต์ใช้งาน การใช้ <dt> และ <dd> หลายรายการใน <dl> เดียวกัน ในบางกรณี หนึ่งคำศัพท์อาจมีคำอธิบายหลายคำอธิบายได้…

แท็ก <dl> ใน HTML5 ใช้สำหรับสร้าง Description List หรือรายการที่ใช้ในการจับคู่ระหว่างคำศัพท์และคำอธิบาย แท็กนี้เหมาะสำหรับแสดงข้อมูลที่มีความสัมพันธ์แบบ “คำศัพท์-คำอธิบาย” โดยมีการใช้แท็กย่อยสองชนิด ได้แก่ โครงสร้างพื้นฐาน ตัวอย่างการใช้งานพื้นฐาน รูปแบบการใช้งานต่างๆ ใช้หลาย ๆ คำศัพท์กับคำอธิบายเดียวกัน ในกรณีที่มีหลายคำศัพท์ที่มีคำอธิบายร่วมกัน เราสามารถใช้แท็ก <dt> หลายๆ อัน แล้วใช้ <dd> เพียงครั้งเดียว เช่น คำศัพท์หนึ่งมีหลายคำอธิบาย ในบางกรณีคำศัพท์หนึ่งอาจมีหลายคำอธิบายได้ เราสามารถใช้แท็ก <dd> หลาย ๆ ครั้งหลัง <dt> อันเดียวได้ การซ้อนรายการคำศัพท์ ถ้าต้องการสร้างรายการคำศัพท์ที่มีความซับซ้อน เราสามารถซ้อนรายการใน <dd>…

ใน HTML5 แท็ก <div> (ย่อมาจาก division) ใช้ในการจัดกลุ่มเนื้อหาหรือองค์ประกอบต่าง ๆ บนหน้าเว็บ โดยไม่มีความหมายเชิงเนื้อหาเหมือนแท็กอื่น ๆ เช่น <header> หรือ <article> มักถูกใช้ร่วมกับ CSS และ JavaScript เพื่อควบคุมการแสดงผลและการทำงานของเนื้อหาในกลุ่มนั้น ๆ การใช้งานทั่วไปของ <div> จัดกลุ่มเนื้อหา <div> มักใช้ในการจัดกลุ่มเนื้อหาที่เกี่ยวข้องกัน เช่น ข้อความ ภาพ หรือลิงก์ เพื่อให้จัดรูปแบบได้ง่ายขึ้น เช่นจัดให้อยู่ในบล็อกเดียวกัน ใช้กับ CSS เพื่อจัดรูปแบบ ใช้ <div> ร่วมกับ CSS เพื่อจัดตำแหน่งหรือกำหนดสไตล์เฉพาะ…

แท็ก <dialog> ใน HTML5 ถูกใช้สำหรับการสร้างกล่องสนทนา (dialog box) เช่น หน้าต่างแจ้งเตือน (alert), หน้าต่างยืนยัน (confirmation dialog), หรือฟอร์มป๊อปอัป (popup form) โดยแท็กนี้สามารถแสดงผลได้ทั้งแบบป๊อปอัปในหน้าเว็บไซต์หรือฝังอยู่ในหน้าเว็บได้เช่นกัน ซึ่ง <dialog> ถูกนำมาใช้เพื่อช่วยให้การสร้างและจัดการกล่องสนทนามีมาตรฐานและง่ายขึ้นใน HTML5 การใช้งานเบื้องต้นของ <dialog> อธิบายการใช้งาน การใช้รูปแบบต่าง ๆ ของ <dialog> กล่องสนทนาแบบ Modal กล่องสนทนาแบบ Non-Modal กล่องยืนยัน (Confirmation Dialog) ฟอร์มในกล่องสนทนา (Form in Dialog) ในตัวอย่างนี้…

<dfn> (definition) tag ใน HTML5 ถูกใช้เพื่อระบุว่าคำหรือวลีที่อยู่ภายในแท็กนั้นเป็นคำศัพท์หรือคำที่กำลังถูกนิยามหรืออธิบาย โดยทั่วไปมักใช้ในบทความที่อธิบายคำเฉพาะทางหรือเทคนิคต่าง ๆ การใช้แท็กนี้ช่วยเพิ่มความหมายทางเชิงโครงสร้าง (semantic) ให้กับเอกสาร HTML ซึ่งมีประโยชน์สำหรับเครื่องมือค้นหาและเครื่องมือช่วยเหลือสำหรับการเข้าถึง (เช่น โปรแกรมอ่านหน้าจอ) การใช้งานทั่วไป แท็ก <dfn> สามารถใช้งานได้หลายรูปแบบ ขึ้นอยู่กับบริบทของเนื้อหาที่เราต้องการสร้าง ตัวอย่าง 1: การใช้งานพื้นฐาน ในตัวอย่างนี้ <dfn> ใช้เพื่อระบุคำศัพท์ที่กำลังนิยาม ในตัวอย่างนี้คำว่า “HTML” เป็นคำที่ถูกนิยาม จากนั้นอธิบายต่อว่า HTML ย่อมาจากอะไร ตัวอย่าง 2: การใช้งานร่วมกับ title attribute เราสามารถใช้แอตทริบิวต์ title เพื่อให้ข้อมูลเพิ่มเติมเกี่ยวกับคำศัพท์ที่นิยาม…