DCRUB

ใน HTML5 แท็ก <rp> ถูกใช้ในโครงสร้างของข้อความแนวตั้งที่ใช้สำหรับการแสดง ruby annotations ซึ่งเป็นการเขียนคำอธิบายประกอบข้อความ เช่น การเขียนคำอ่านคันจิในภาษาญี่ปุ่น หรือคำอธิบายการออกเสียงอื่น ๆ แท็ก <rp> จะทำงานร่วมกับแท็ก <ruby> และ <rt> โครงสร้างทั่วไปของ ruby annotation: บทบาทของ <rp> แท็ก <rp> มีประโยชน์สำหรับการรองรับเบราว์เซอร์ที่ไม่สามารถแสดงผลแท็ก <ruby> และ <rt> ได้ แท็กนี้จะถูกใช้เพื่อแสดงผลในลักษณะของการใช้เครื่องหมายวงเล็บ เช่น () หรือ [] รอบๆ คำอธิบาย ตัวอย่างการใช้งาน ตัวอย่างที่ 1:…

ใน HTML5 แท็ก <q> ใช้เพื่อใส่ข้อความอ้างอิงสั้น ๆ หรือ “quotation” ภายในเอกสาร HTML โดยข้อความภายใน <q> มักจะถูกล้อมรอบด้วยเครื่องหมายคำพูด (quotation marks) อัตโนมัติตามสไตล์ของเบราว์เซอร์แต่ละตัว การใช้งานทั่วไปของ <q> ในตัวอย่างนี้ เบราว์เซอร์จะเพิ่มเครื่องหมายคำพูดรอบ ๆ ข้อความ “วันนี้อากาศดีมาก” อัตโนมัติ โดยที่เราไม่จำเป็นต้องใส่เครื่องหมายคำพูดเอง การใส่แหล่งที่มาของคำอ้างอิงด้วย cite attribute HTML5 เพิ่มความสามารถในการใส่แหล่งที่มาของคำอ้างอิงโดยใช้แอตทริบิวต์ cite เพื่อระบุ URL ที่อ้างอิงมาจาก ในตัวอย่างนี้ คำอ้างอิงสามารถเชื่อมโยงกลับไปยังแหล่งข้อมูลต้นฉบับได้หากต้องการ การใช้งาน <q> ภายใน <blockquote>…

แท็ก <progress> ใน HTML5 ถูกใช้เพื่อแสดงความก้าวหน้าของงานหรืองานที่ต้องทำให้เสร็จ เช่น การดาวน์โหลดไฟล์หรือการประมวลผลใดๆ โดยจะแสดงเป็นแถบความคืบหน้าที่ผู้ใช้งานสามารถมองเห็นได้ แต่ไม่สามารถแก้ไขได้ คุณสมบัติหลักของ <progress> โครงสร้างพื้นฐานของ <progress> ในตัวอย่างนี้ จะได้แถบความคืบหน้าที่แสดงให้เห็นว่าเสร็จสิ้นไปแล้ว 70% จากทั้งหมด 100% คุณสมบัติที่สำคัญ การใช้งาน <progress> แบบต่างๆ 1. แถบความคืบหน้าแบบระบุค่า ในตัวอย่างนี้ แสดงแถบความคืบหน้า 40% ของทั้งหมด 100% 2. แถบความคืบหน้าแบบกำลังดำเนินการ (Indeterminate) ในกรณีที่ไม่สามารถระบุค่าความคืบหน้าได้อย่างชัดเจน เช่น การรอโหลดข้อมูลจากเซิร์ฟเวอร์ ซึ่งยังไม่ทราบเวลาเสร็จสิ้นแน่นอน สามารถใช้ <progress> โดยไม่ต้องใส่ค่า value…

แท็ก <pre> ใน HTML5 ใช้สำหรับการแสดงข้อความหรือเนื้อหาที่จัดรูปแบบไว้ล่วงหน้า (Preformatted Text) โดยข้อความในแท็กนี้จะรักษาช่องว่าง (spaces), การขึ้นบรรทัดใหม่ (new lines) และการจัดรูปแบบอื่น ๆ ที่ถูกใส่ไว้ในตัวโค้ด HTML โดยไม่ถูกปรับเปลี่ยนตามปกติที่เบราว์เซอร์จะแปลงตัวหนังสือ การใช้งานพื้นฐานของ <pre> เมื่อเราใช้แท็ก <pre>, เนื้อหาภายในจะถูกแสดงผลตามที่เราเขียนไว้ในโค้ด HTML โดยเบราว์เซอร์จะไม่ปรับรูปแบบเพิ่มเติม เช่น การตัดช่องว่างส่วนเกิน หรือการรวมหลายบรรทัดให้เป็นบรรทัดเดียว ผลลัพธ์: เบราว์เซอร์จะแสดงผลข้อความตามที่เราเขียนไว้ในแท็ก <pre> โดยรักษาช่องว่างและการขึ้นบรรทัด การประยุกต์ใช้งาน การแสดงผลโค้ดโปรแกรม: ใช้สำหรับแสดงผลโค้ดที่ต้องการให้รักษารูปแบบต้นฉบับ เช่น โค้ด HTML, CSS หรือโค้ดโปรแกรมภาษาอื่น ๆ…

ใน HTML5, <picture> tag ถูกใช้เพื่อสร้าง responsive images โดยให้ผู้พัฒนาเว็บสามารถระบุแหล่งที่มา (source) ของรูปภาพที่แตกต่างกันได้ตามเงื่อนไข เช่น ขนาดหน้าจอ ความละเอียดของอุปกรณ์ ฯลฯ <picture> ทำงานร่วมกับ <source> tag และ <img> tag เพื่อสร้างระบบภาพที่สามารถตอบสนองต่อเงื่อนไขที่ระบุได้อย่างยืดหยุ่น โครงสร้างของ <picture> tag การทำงาน: การใช้งาน <picture> tag ในรูปแบบต่างๆ 1. เปลี่ยนภาพตามประเภทของไฟล์ ใช้ <picture> เพื่อรองรับรูปแบบไฟล์ที่แตกต่างกันในเบราว์เซอร์ที่ต่างกัน เช่น WebP ที่มีขนาดไฟล์เล็กกว่า แต่บางเบราว์เซอร์อาจไม่รองรับ 2.…

แท็ก <param> ใน HTML5 ใช้สำหรับกำหนดค่าพารามิเตอร์สำหรับวัตถุ (object) เช่น media player, applet หรือ plug-in ที่อยู่ภายใน <object> แท็ก ซึ่ง <param> จะไม่แสดงผลต่อผู้ใช้โดยตรง แต่จะส่งค่าพารามิเตอร์ที่จำเป็นให้กับปลั๊กอินหรือวัตถุภายในนั้น ใน HTML5 แท็ก <param> สามารถมีการประยุกต์ใช้งานได้ในหลายลักษณะ ดังตัวอย่างต่อไปนี้ การใช้งานกับแท็ก <object> สำหรับไฟล์มัลติมีเดีย แท็ก <param> มักถูกใช้ภายใน <object> เพื่อระบุค่าพารามิเตอร์สำหรับเนื้อหามัลติมีเดีย เช่น การตั้งค่าการเล่นไฟล์วิดีโอหรือเสียง การใช้งานกับปลั๊กอินหรือแอปเพลต ในบางกรณีที่เว็บเบราว์เซอร์รองรับปลั๊กอินหรือแอปเพลต (applet) เช่น Flash…

แท็ก <p> ใน HTML5 ใช้เพื่อสร้าง ย่อหน้า (paragraph) ภายในเอกสาร HTML เป็นหนึ่งในแท็กที่สำคัญที่สุดและใช้บ่อยมากในการจัดรูปแบบเนื้อหา โดยแท็กนี้ทำหน้าที่แยกกลุ่มข้อความออกจากกันเพื่อให้อ่านง่ายขึ้น โดยไม่ต้องเว้นบรรทัดหรือเพิ่มช่องว่างด้วยการใช้โค้ด HTML เพิ่มเติม โครงสร้างพื้นฐานของแท็ก <p> ผลลัพธ์ที่ได้คือจะเป็นการแสดงข้อความในรูปแบบย่อหน้า โดยเบราว์เซอร์ส่วนใหญ่จะมีการเว้นบรรทัดอัตโนมัติระหว่างย่อหน้า ตัวอย่างการใช้งานพื้นฐาน การใช้แท็ก <p> ในรูปแบบต่าง ๆ การแทรกเนื้อหาข้อความปกติ การใช้งานภายในฟอร์แมตอื่นๆ การจัดการช่องว่างระหว่างย่อหน้า การใส่รูปภาพหรือมัลติมีเดีย การใช้ CSS กับแท็ก <p> การใช้แท็ก <p> ร่วมกับ JavaScript การใช้แท็ก <p> ในการทำงานกับเนื้อหาแบบ dynamic ข้อควรระวัง…

แท็ก <output> ใน HTML5 ถูกใช้เพื่อแสดงผลลัพธ์ของการคำนวณหรือการกระทำของผู้ใช้ในแบบฟอร์ม มักใช้ร่วมกับองค์ประกอบแบบฟอร์มเช่น <input>, <select> หรือ <textarea> โดยปกติจะใช้ JavaScript เพื่ออัปเดตค่าผลลัพธ์ตามอินพุตของผู้ใช้หรือผลการคำนวณอย่างไดนามิก ไวยากรณ์พื้นฐาน แท็ก <output> มีแอตทริบิวต์หลายอย่างที่สามารถใช้งานได้ ตัวอย่างที่ 1: การคำนวณอย่างง่าย ตัวอย่างนี้แสดงให้เห็นว่าเราสามารถใช้แท็ก <output> เพื่อแสดงผลลัพธ์ของการคำนวณการบวกอย่างง่าย เมื่อผู้ใช้ป้อนค่าเข้าไป ตัวอย่างที่ 2: การใช้ for ในแท็ก <output> เราสามารถใช้แอตทริบิวต์ for เพื่อระบุว่าผลลัพธ์มาจากองค์ประกอบใดบ้าง ตัวอย่างเช่น ตัวอย่างที่ 3: ใช้ในแบบฟอร์มเพื่อส่งค่า แท็ก <output> ยังสามารถถูกส่งไปพร้อมกับการส่งแบบฟอร์ม…

ใน HTML5, แท็ก <option> ใช้ในการสร้างตัวเลือก (option) ภายในแท็ก <select> หรือใช้ร่วมกับ <datalist> เพื่อสร้างรายการตัวเลือกที่ผู้ใช้สามารถเลือกได้ ตัวเลือกเหล่านี้จะปรากฏเป็นเมนูดรอปดาวน์เมื่อใช้ <select> และเป็นการแนะนำตัวเลือกอัตโนมัติเมื่อใช้กับ <datalist> รูปแบบการใช้งาน <option> 1. ใช้งานร่วมกับ <select> ในกรณีที่มีรายการตัวเลือกและให้ผู้ใช้เลือกจากตัวเลือกเหล่านั้น เราจะใช้ <select> ครอบ <option> แต่ละตัว เลือกยี่ห้อรถ: VolvoSaabMercedesAudi 2. การกำหนดค่าเริ่มต้นที่ถูกเลือก หากต้องการให้ตัวเลือกถูกเลือกเริ่มต้นเมื่อหน้าถูกโหลด สามารถใช้แอตทริบิวต์ selected ในตัวอย่างนี้ “Banana” จะถูกเลือกเมื่อโหลดหน้าเว็บ AppleBananaOrange 3. การปิดใช้งานตัวเลือก สามารถใช้แอตทริบิวต์…

<optgroup> เป็นแท็กใน HTML5 ที่ใช้เพื่อจัดกลุ่มตัวเลือกภายใน <select> ให้เป็นกลุ่มๆ เพื่อให้การเลือกตัวเลือกเป็นระเบียบและเข้าใจง่ายขึ้น โดยทั่วไปแล้วจะใช้ในกรณีที่ต้องการจัดกลุ่มข้อมูลที่มีความสัมพันธ์กัน เช่น เมนูเลือกประเทศ เมนูเลือกหมวดหมู่ เป็นต้น การใช้งาน <optgroup> เบื้องต้น แท็ก <optgroup> จะต้องอยู่ภายใน <select> และแต่ละ <optgroup> จะประกอบด้วย <option> ที่เป็นตัวเลือกจริงๆ ของเรา โดยมีแอตทริบิวต์ label เพื่อระบุชื่อกลุ่ม ในตัวอย่างข้างต้น ตัวเลือกของเราจะแบ่งออกเป็น 2 กลุ่ม: “ผลไม้เขตร้อน” และ “ผลไม้เขตหนาว” โดยที่ผู้ใช้งานสามารถเลือกจากผลไม้ในแต่ละกลุ่มได้ เลือกผลไม้ที่ชอบ: มะม่วงสับปะรด แอปเปิลเชอร์รี่ การใช้งานแอตทริบิวต์…

<ol> (Ordered List) ใน HTML5 ใช้สำหรับสร้างรายการที่เรียงลำดับ โดยจะแสดงหมายเลข หรือตัวอักษรนำหน้ารายการ ซึ่งสามารถกำหนดรูปแบบและการจัดลำดับได้หลายแบบตามความต้องการของผู้ใช้งาน รูปแบบการใช้งาน <ol> ใน HTML5 การสร้างลิสต์แบบเรียงลำดับพื้นฐาน แต่ละรายการจะเริ่มต้นด้วย <li> (List Item) ผลลัพธ์ Item 1 Item 2 Item 3 การกำหนดลำดับที่เริ่มต้น สามารถใช้แอตทริบิวต์ start เพื่อเริ่มต้นจากหมายเลขที่ต้องการได้ ผลลัพธ์ Item 1 Item 2 Item 3 การกำหนดประเภทตัวอักษรที่ใช้ในลิสต์ ใช้แอตทริบิวต์ type เพื่อเปลี่ยนรูปแบบการเรียงลำดับ…

<object> ใน HTML5 เป็นแท็กที่ใช้ในการฝังทรัพยากรภายนอกต่าง ๆ ในหน้าเว็บ เช่น ไฟล์ PDF, วิดีโอ, รูปภาพ หรือเนื้อหาจากเว็บไซต์อื่น ๆ นอกจากนี้ยังใช้สำหรับการฝังแอปพลิเคชัน เช่น Java applet หรือ Flash (แม้ว่าจะล้าสมัยไปแล้วในปัจจุบัน) ข้อดีของแท็ก <object> คือความยืดหยุ่นในการใช้งานร่วมกับประเภทของเนื้อหาที่หลากหลาย รูปแบบการใช้งานของ <object> ฝังเอกสาร (PDF) สามารถฝังไฟล์ PDF ให้ผู้ใช้งานสามารถดูเอกสารในหน้าเว็บได้โดยตรง ฝังไฟล์รูปภาพ สามารถใช้แทน <img> ได้หากต้องการแสดงรูปภาพในรูปแบบ <object> ฝังวิดีโอ สามารถฝังวิดีโอด้วย <object> เช่นเดียวกับแท็ก <video>…

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

<nav> tag ใน HTML5 ใช้เพื่อกำหนดกลุ่มของลิงก์นำทาง (navigation links) ในเว็บไซต์ โดยปกติจะใช้สำหรับเมนูหลักของเว็บไซต์หรือในส่วนที่มีการเชื่อมโยงไปยังหน้าอื่น ๆ ภายในเว็บไซต์ เช่น header, footer, หรือ sidebar เป็นต้น การใช้งาน <nav> จะช่วยให้ทั้งนักพัฒนาและเครื่องมือเช่น screen reader เข้าใจว่าเนื้อหานี้เป็นส่วนหนึ่งของการนำทาง การใช้งานพื้นฐานของ <nav> ตัวอย่างพื้นฐานของการใช้งาน <nav> ในตัวอย่างนี้ <nav> ถูกใช้ครอบรายการของลิงก์นำทาง ซึ่งภายในนั้นใช้ <ul> และ <li> เพื่อสร้างลิสต์ของลิงก์ในเมนู ตัวอย่างการใช้งาน <nav> แบบต่างๆ เมนูหลักที่ส่วนหัวของเว็บไซต์ ในตัวอย่างนี้…

แท็ก <meter> ใน HTML5 ใช้เพื่อแสดงข้อมูลที่เป็นค่าตัวเลขเชิงปริมาณ (quantitative value) โดยทั่วไปจะใช้ในการแสดงค่าความก้าวหน้า (progress) หรือระดับของสิ่งใดสิ่งหนึ่ง โดยค่าที่แสดงจะต้องเป็นค่าที่อยู่ในขอบเขตที่กำหนด เช่น คะแนน, เปอร์เซ็นต์, หรือระดับการใช้งานต่างๆ แท็กนี้จะทำให้ผู้ใช้เห็นข้อมูลในลักษณะของกราฟหรือแถบแสดงผลแบบสเกล การใช้งานเบื้องต้นของ <meter> โครงสร้างพื้นฐานในการใช้งาน <meter> มีดังนี้ ตัวอย่างการใช้งาน แสดงระดับแบตเตอรี่ ในตัวอย่างนี้แสดงว่าค่าแบตเตอรี่เหลืออยู่ 60% (หรือ 0.6 ในระบบสัดส่วน 0-1) แสดงคะแนนสอบ แสดงคะแนนสอบ 75 จากคะแนนเต็ม 100 แสดงความจุพื้นที่เก็บข้อมูล แสดงให้เห็นว่าใช้พื้นที่เก็บข้อมูลไปแล้ว 30 GB จากความจุสูงสุด 100…

Meta tags ใน HTML5 ใช้สำหรับการให้ข้อมูลเพิ่มเติมเกี่ยวกับเว็บเพจ โดยเฉพาะสำหรับเครื่องมือค้นหา (SEO) และเบราว์เซอร์ต่าง ๆ เพื่อกำหนดค่าที่เกี่ยวข้องกับการทำงานและลักษณะการแสดงผลของเว็บไซต์ Meta tags มักอยู่ใน <head> ของเอกสาร HTML และมีหลายประเภทที่สามารถนำไปประยุกต์ใช้ได้ รูปแบบและการใช้งาน Meta Tag ใน HTML5 1. Charset Declaration (กำหนดชุดตัวอักษร) 2. Viewport Settings (การตั้งค่า viewport) 3. Description (คำอธิบายเว็บเพจ) 4. Keywords (คำค้นหา) 5. Author (ชื่อผู้เขียน)…

<menu> ใน HTML5 เป็นแท็กที่ใช้เพื่อกำหนดรายการเมนู (menu) หรือกลุ่มของคำสั่ง (commands) ที่ผู้ใช้สามารถเลือกปฏิบัติได้ อย่างไรก็ตาม การใช้งาน <menu> นั้นมีการพัฒนาและปรับเปลี่ยนไปเรื่อย ๆ ในหลายเบราว์เซอร์ปัจจุบัน บางส่วนของการใช้งานจึงอาจจะไม่ได้รับการสนับสนุนอย่างเต็มที่แล้ว การใช้งานหลักของ <menu> ใน HTML5 การใช้ <menu> สร้างคอนเท็กซ์เมนู ในตัวอย่างนี้ เมื่อผู้ใช้คลิกขวาที่ข้อความ “Right-click on this text to see the menu” จะปรากฏเมนูบริบทขึ้นมา โดยมีคำสั่ง “Copy” และ “Paste” ที่ผู้ใช้สามารถเลือกได้ การใช้ <menu>…

<mark> tag ใน HTML5 ใช้ในการเน้นข้อความเพื่อแสดงให้ผู้ใช้ทราบว่าข้อความที่อยู่ภายในนั้นมีความสำคัญหรือเกี่ยวข้องกับสิ่งที่ผู้ใช้งานกำลังค้นหา โดยทั่วไปจะใช้เพื่อทำให้ข้อความที่ถูกเน้นมีพื้นหลังเป็นสีเหลือง คล้ายกับการใช้ปากกาไฮไลท์เน้นข้อความในหนังสือ การใช้งาน <mark> Tag การใช้งาน <mark> นั้นค่อนข้างตรงไปตรงมา เพียงแค่ครอบข้อความที่ต้องการเน้นด้วยแท็ก <mark> ในตัวอย่างนี้ข้อความ “สำคัญมาก” จะถูกเน้นด้วยพื้นหลังสีเหลือง รูปแบบการประยุกต์ใช้งาน <mark> เน้นคำที่ค้นหาในผลลัพธ์การค้นหา การใช้ <mark> มักจะถูกนำมาใช้ในการแสดงผลลัพธ์การค้นหาบนเว็บ โดยเน้นคำที่ตรงกับคำค้นหาของผู้ใช้ ใช้ร่วมกับ CSS เพื่อปรับแต่งสไตล์ สามารถใช้ CSS เพื่อปรับเปลี่ยนสีพื้นหลังของ <mark> ให้เข้ากับสไตล์ของเว็บไซต์ได้ ในตัวอย่างนี้ แทนที่พื้นหลังจะเป็นสีเหลือง จะถูกเปลี่ยนเป็นสีเขียวอ่อน ใช้ในการแสดงข้อมูลจากระบบอัตโนมัติ สามารถใช้ <mark> เพื่อเน้นคำหรือประโยคที่ถูกแสดงจากระบบ…

ใน HTML5, <map> เป็นแท็กที่ใช้ในการสร้างแผนที่ภาพ (image map) ซึ่งเป็นวิธีการทำให้บางส่วนของรูปภาพเป็นพื้นที่คลิกได้ โดยกำหนดพิกัดบนรูปภาพเพื่อสร้างจุดเชื่อมโยงไปยังลิงก์หรือการกระทำต่าง ๆ แท็ก <map> จะทำงานร่วมกับแท็ก <area> ซึ่งใช้กำหนดพื้นที่คลิกได้บนภาพ โดยรูปภาพที่จะใช้กับ <map> ต้องมีแอตทริบิวต์ usemap ที่อ้างถึงชื่อของแผนที่ภาพ โครงสร้างพื้นฐานของ <map> และ <area> อธิบายการใช้งานแท็ก <area> shape=”rect” ใช้กำหนดพื้นที่เป็นรูปสี่เหลี่ยม โดย coords จะเป็นพิกัด x และ y ของมุมซ้ายบนและมุมขวาล่างของพื้นที่ shape=”circle” ใช้กำหนดพื้นที่เป็นรูปวงกลม โดย coords จะเป็นพิกัด x,…

น HTML5 แท็ก <main> ถูกนำมาใช้เพื่อระบุเนื้อหาหลักของหน้าเว็บเพจ โดยเนื้อหานั้นต้องเป็นข้อมูลที่มีความสำคัญที่สุดในเอกสาร และมีความเป็นเอกลักษณ์ในแต่ละหน้า แท็ก <main> ช่วยให้เครื่องมือค้นหา (เช่น Google) และเทคโนโลยีที่สนับสนุนการเข้าถึง (เช่น screen readers) เข้าใจว่าเนื้อหาส่วนนี้คือจุดสนใจหลักของเพจ ซึ่งเป็นส่วนที่ไม่มีการซ้ำกับส่วนอื่นๆ เช่น header, footer, navigation เป็นต้น รูปแบบการใช้งานแท็ก <main> ใช้งานเพื่อห่อหุ้มเนื้อหาหลักของหน้าเว็บ แท็ก <main> สามารถใช้เพื่อกำหนดส่วนที่เป็นเนื้อหาหลักของหน้า โดยไม่มีส่วนของ header, footer, หรือ navigation ห่อหุ้มหลายๆ ส่วนที่เป็นเนื้อหาหลัก ในกรณีที่หน้าเว็บมีหลายส่วนที่เป็นเนื้อหาหลัก เช่น บทความหรือโพสต์หลายอันในหน้าเดียว แท็ก…

ใน HTML5 แท็ก <link> เป็นแท็กที่ใช้สำหรับเชื่อมต่อไฟล์ภายนอกกับหน้าเว็บ โดยเฉพาะอย่างยิ่งไฟล์สไตล์ชีต (CSS) หรือไฟล์ประเภทอื่น ๆ เช่น ไอคอนของเว็บ (favicon) หรือเชื่อมโยงกับรูปแบบการพิมพ์ (print stylesheet) แท็กนี้เป็นส่วนหนึ่งของส่วน <head> ของเอกสาร HTML และไม่ได้แสดงผลออกมาบนหน้าจอผู้ใช้งานโดยตรง การใช้งาน <link> Tag และตัวอย่างในรูปแบบต่าง ๆ 1. การเชื่อมต่อกับไฟล์ CSS ตัวอย่างที่พบบ่อยที่สุดคือการใช้ <link> เพื่อเชื่อมต่อไฟล์ CSS เข้ากับ HTML 2. การใช้งานสำหรับ Icon ของเว็บไซต์ (Favicon) สำหรับการกำหนดไอคอนที่แสดงบนแท็บของเบราว์เซอร์…

ใน HTML5 แท็ก <li> (list item) ใช้สำหรับกำหนดรายการในรายการแบบลำดับ (ordered list) หรือไม่มีลำดับ (unordered list) โดยสามารถนำไปใช้ร่วมกับแท็ก <ul> (unordered list) และ <ol> (ordered list) ได้ตามลักษณะของรายการที่ต้องการแสดงผล การใช้ <li> กับ <ul> (รายการที่ไม่มีลำดับ) แท็ก <ul> ใช้สำหรับแสดงรายการที่ไม่ต้องเรียงลำดับ เช่น รายการสิ่งของหรือข้อมูลที่ไม่มีลำดับก่อนหลัง โดยรายการแต่ละรายการจะอยู่ภายในแท็ก <li> ผลลัพธ์จะแสดงรายการที่มีเครื่องหมายจุดกลม (bullet points) การใช้ <li> กับ <ol>…

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

ใน HTML5, แท็ก <label> ถูกใช้เพื่อเชื่อมโยงกับฟอร์มอินพุต (form input) เช่น ปุ่มหรือฟิลด์กรอกข้อมูล โดยวัตถุประสงค์หลักของ <label> คือทำให้การใช้งานฟอร์มสะดวกและเข้าถึงได้ง่ายขึ้น ทั้งนี้ <label> ช่วยให้ผู้ใช้สามารถคลิกที่ข้อความของฟอร์มเพื่อเน้น (focus) หรือเลือก input ได้โดยตรง โครงสร้างพื้นฐานของ <label> ในตัวอย่างนี้ มีการเชื่อมโยงข้อความ “Label Text” กับช่องกรอกข้อมูลโดยใช้แอตทริบิวต์ for ใน <label> และแอตทริบิวต์ id ใน <input> วิธีการใช้งาน <label> มี 2 รูปแบบหลัก 1. การใช้งานแบบเชื่อมโยงด้วยแอตทริบิวต์…