DCRUB

ใน HTML5, แท็ก <details> ใช้สำหรับการสร้างส่วนที่สามารถแสดงหรือซ่อนเนื้อหาได้เมื่อผู้ใช้งานคลิก โดยปกติจะแสดงข้อมูลเสริม หรือคำอธิบายเพิ่มเติมที่สามารถเปิด-ปิดได้โดยง่าย ซึ่งมักใช้ในการสร้าง FAQ, รายการแบบ collapsible หรือแสดงเนื้อหาที่เป็นทางเลือก โครงสร้างพื้นฐานของแท็ก <details> เมื่อคลิกที่ “วิธีทำเค้กช็อกโกแลต” เนื้อหาจะขยายออกมาแสดงขั้นตอนต่าง ๆ ในการทำเค้ก การใช้งาน <details> ในรูปแบบต่าง ๆ ใช้แสดง FAQ (คำถามที่พบบ่อย) แสดงโค้ดโปรแกรมหรือเนื้อหาที่ยาว ใช้ในแบบฟอร์ม ใช้กับ CSS เพื่อปรับแต่งสไตล์ สามารถเพิ่มสไตล์ให้กับแท็ก <details> หรือ <summary> ได้เช่นเดียวกับแท็ก HTML อื่น ๆ ในตัวอย่างนี้…

ใน HTML5 แท็ก <del> ถูกใช้เพื่อแสดงข้อความที่ถูกลบหรือยกเลิกการใช้งาน ซึ่งข้อความที่อยู่ภายในแท็กนี้จะมีการขีดฆ่า (strikethrough) เพื่อแสดงว่ามันไม่ถูกต้องหรือไม่เป็นปัจจุบันอีกต่อไป การใช้งานทั่วไปของ <del> ในตัวอย่างนี้ คำว่า “wrong” จะถูกขีดฆ่าแสดงให้เห็นว่าข้อมูลนี้ไม่ถูกต้องแล้ว การใช้งานร่วมกับแอตทริบิวต์ ใช้ร่วมกับแอตทริบิวต์ datetime : แอตทริบิวต์ datetime ช่วยให้ระบุวันที่และเวลาที่เนื้อหาถูกลบได้ในรูปแบบมาตรฐาน ISO 8601 เช่น ตัวอย่างนี้ระบุว่า “incorrect” ถูกลบออกในวันที่ 4 ตุลาคม 2024 การใช้งานร่วมกับ <ins> : <del> มักใช้ร่วมกับ <ins> ซึ่งแสดงข้อความที่ถูกเพิ่มเข้ามา แสดงให้เห็นการเปลี่ยนแปลงหรือการแก้ไขในเอกสาร ตัวอย่างเช่น คำว่า…

<dd> เป็นแท็กใน HTML5 ที่ใช้สำหรับกำหนดคำอธิบายหรือรายละเอียดของรายการใน <dl> (Description List) ซึ่งใช้ร่วมกับแท็ก <dt> ที่ใช้สำหรับรายการ (term) ที่ต้องการอธิบาย ความสัมพันธ์ระหว่าง <dt> กับ <dd> คือตัวรายการ (term) และคำอธิบาย (description) ตามลำดับ การใช้งาน <dd> ในรูปแบบต่าง ๆ การใช้งานพื้นฐาน ตัวอย่างการใช้งานเบื้องต้นของ <dl>, <dt>, และ <dd> ในตัวอย่างนี้ <dt> ใช้แสดงคำศัพท์ หรือหัวข้อที่ต้องการอธิบาย (HTML, CSS) และ <dd> ใช้อธิบายความหมายหรือคำอธิบายเพิ่มเติม…

แท็ก <datalist> ใน HTML5 ใช้เพื่อสร้างรายการตัวเลือก (option list) ที่สามารถกรอกหรือเลือกได้ในฟอร์ม โดยการใช้งานแท็ก <datalist> มักจะถูกใช้ร่วมกับอินพุต <input> ที่มีการกำหนดค่า list ให้ตรงกับค่า id ของ <datalist> เพื่อให้ผู้ใช้งานสามารถเลือกค่าจากรายการที่กำหนดไว้ หรือพิมพ์ค่าใหม่เองได้ การใช้งานพื้นฐานของ <datalist> ในตัวอย่างนี้ เมื่อผู้ใช้คลิกหรือพิมพ์ในช่องอินพุต ระบบจะเสนอรายการตัวเลือกที่มีอยู่ใน <datalist> ให้เลือก แต่ถ้าผู้ใช้ต้องการกรอกข้อมูลที่ไม่มีในรายการก็สามารถทำได้เช่นกัน การประยุกต์ใช้งาน <datalist> ค้นหาจากตัวเลือกที่มีมากมาย เมื่อรายการข้อมูลมีจำนวนมาก เช่น ชื่อประเทศ สกุลเงิน หรือภาษาต่างๆ การใช้ <datalist> จะช่วยกรองรายการที่ผู้ใช้สนใจและลดเวลาที่ใช้ในการพิมพ์ข้อมูล ฟังก์ชันแนะนำคำ…

ใน HTML5 แท็ก <data> ถูกใช้งานเพื่อเชื่อมโยงข้อมูลที่สามารถอ่านได้โดยมนุษย์กับข้อมูลในรูปแบบที่เครื่องสามารถอ่านได้ แท็กนี้มีประโยชน์เมื่อเราต้องการแสดงผลข้อมูลที่มนุษย์อ่านได้ เช่น คำหรือวลี และเชื่อมโยงกับข้อมูลในรูปแบบที่ระบบหรือโปรแกรมสามารถอ่านได้ เช่น รหัสตัวเลขหรือรหัสเฉพาะ รูปแบบการใช้งาน ตัวอย่างที่ 1: การใช้งานพื้นฐาน สมมติว่าเราต้องการแสดงชื่อสินค้าโดยมีรหัสสินค้าซึ่งเป็นข้อมูลที่เครื่องสามารถอ่านได้ ในตัวอย่างนี้ ผู้ใช้จะเห็นข้อความ “เมาส์ไร้สาย” แต่ระบบสามารถดึงข้อมูลรหัสสินค้า “123456” จากแอตทริบิวต์ value ได้ ตัวอย่างที่ 2: แสดงราคาพร้อมรูปแบบข้อมูลสำหรับเครื่อง สามารถใช้ในการแสดงราคาที่อ่านได้โดยมนุษย์ แต่เชื่อมโยงกับค่าที่สามารถนำไปประมวลผลได้ ผู้ใช้จะเห็นข้อความราคาเป็นคำ แต่ระบบสามารถดึงค่าเชิงตัวเลข 19.99 สำหรับการคำนวณได้ ตัวอย่างที่ 3: ใช้ <data> กับข้อมูลเวลา สามารถใช้แท็กนี้ในการแสดงผลข้อมูลเวลาที่อ่านได้ง่ายสำหรับมนุษย์ ขณะเดียวกันก็เชื่อมโยงกับค่าที่แม่นยำ…

<colgroup> เป็นแท็กใน HTML5 ที่ใช้ในการจัดกลุ่มและกำหนดคุณสมบัติให้กับคอลัมน์ในตาราง โดยเฉพาะอย่างยิ่งสำหรับการจัดรูปแบบคอลัมน์ เช่น การกำหนดความกว้าง (width) หรือการจัดตำแหน่ง (align) ของคอลัมน์เหล่านั้น รูปแบบการใช้งาน <colgroup> ใช้งาน <colgroup> เพียงอย่างเดียว สามารถใช้แท็ก <colgroup> โดยไม่ระบุแท็ก <col> ด้านใน เพื่อกำหนดกลุ่มของคอลัมน์ แต่ไม่กำหนดรายละเอียดเฉพาะในแต่ละคอลัมน์ Header 1 Header 2 Data 1 Data 2 ใช้งาน <colgroup> ร่วมกับ <col> เราสามารถระบุรายละเอียดเพิ่มเติมให้กับแต่ละคอลัมน์ด้วยแท็ก <col> เพื่อกำหนดคุณสมบัติเฉพาะ เช่น ความกว้างของคอลัมน์…

ใน HTML5, แท็ก <col> ใช้เพื่อกำหนดรูปแบบให้กับคอลัมน์ของตาราง โดยต้องใช้ร่วมกับแท็ก <colgroup> ซึ่งเป็นกลุ่มของคอลัมน์ที่สามารถจัดสไตล์หรือควบคุมลักษณะของคอลัมน์นั้น ๆ แท็ก <col> จะไม่มีเนื้อหาในตัวเอง แต่จะช่วยในการจัดรูปแบบคอลัมน์ทั้งหมดในครั้งเดียวโดยไม่จำเป็นต้องกำหนดสไตล์ให้แต่ละเซลล์ (cell) ทีละเซลล์ การใช้งาน <col> ใน HTML5 แท็ก <col> จะถูกใช้งานร่วมกับ <colgroup> และมีความสำคัญในการจัดรูปแบบตารางในด้านการจัดตำแหน่งหรือการกำหนดขนาดคอลัมน์ นอกจากนี้ ยังสามารถใช้งานร่วมกับ CSS เพื่อปรับสไตล์เช่นสีพื้นหลัง ขนาด หรือรูปแบบเส้นขอบของคอลัมน์ รูปแบบพื้นฐานของการใช้งาน <col> Header 1 Header 2 Data 1 Data 2…

ใน HTML5 แท็ก <code> ใช้สำหรับการแสดงโค้ดโปรแกรมหรือข้อความที่มีรูปแบบเป็นโค้ด ซึ่งเป็นส่วนหนึ่งของข้อความที่อยู่ในหน้าเว็บ แท็กนี้ช่วยในการจัดรูปแบบข้อความให้เหมาะสมสำหรับการแสดงโค้ด โดยส่วนใหญ่จะใช้เพื่อแสดงโค้ดที่มีลักษณะเป็นโค้ดโปรแกรม ไม่ว่าจะเป็นภาษาใดก็ตาม เช่น HTML, JavaScript, Python, PHP เป็นต้น รูปแบบการใช้งานของแท็ก <code> การใช้งานพื้นฐาน ใช้แท็ก <code> เพื่อใส่โค้ดโปรแกรมภายในบรรทัดเดียว ผลลัพธ์ Here is a simple HTML code: <p>Hello World</p> การใช้กับโค้ดหลายบรรทัด แม้ว่าแท็ก <code> จะสามารถใช้แสดงโค้ดหลายบรรทัดได้ แต่หากเป็นโค้ดที่ต้องการจัดเรียงในรูปแบบหลายบรรทัด ควรใช้แท็ก <pre> ร่วมด้วยเพื่อให้โค้ดมีการจัดรูปแบบและเว้นวรรคตามที่เขียนไว้ การใช้กับภาษาโปรแกรมต่างๆ แท็ก…

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

ใน HTML5 แท็ก <caption> ใช้สำหรับระบุคำอธิบายหรือตั้งชื่อให้กับตาราง (table) โดยต้องเป็นลูกของแท็ก <table> เท่านั้น คำอธิบายที่อยู่ในแท็ก <caption> มักจะถูกแสดงอยู่ด้านบนของตาราง แต่ตำแหน่งสามารถเปลี่ยนได้ตามการจัดรูปแบบโดย CSS รูปแบบการใช้งานแท็ก <caption> การปรับแต่งตำแหน่งของ <caption> โดยค่าเริ่มต้น คำอธิบายจะอยู่ด้านบนของตาราง แต่เราสามารถเปลี่ยนตำแหน่งด้วย CSS ได้ เช่น การแสดงที่ด้านล่างของตาราง ตัวเลือกเพิ่มเติมที่สามารถประยุกต์ใช้งานได้ สรุป การใช้ <caption> ใน HTML5 ช่วยให้เราสามารถเพิ่มคำอธิบายที่ชัดเจนให้กับตาราง ช่วยในเรื่องการเข้าถึง และยังสามารถปรับแต่งตำแหน่งและรูปแบบด้วย CSS เพื่อให้ตรงตามความต้องการ

canvas เป็นแท็กที่ถูกนำมาใช้ใน HTML5 เพื่อแสดงผลภาพกราฟิกแบบ 2 มิติหรือ 3 มิติ โดยสามารถวาดรูปต่างๆ เช่น เส้น รูปร่าง กราฟ หรือภาพเคลื่อนไหวได้ โดยใช้ JavaScript ในการควบคุมและจัดการกับการวาดกราฟิกภายในแท็กนี้ โครงสร้างพื้นฐานของแท็ก <canvas> ในตัวอย่างข้างต้น แท็ก canvas ถูกกำหนดขนาดความกว้าง (width) และความสูง (height) และมีเส้นขอบเพื่อให้เห็นพื้นที่ของมัน หากเบราว์เซอร์ไม่รองรับแท็กนี้ ข้อความ “Your browser does not support the HTML5 canvas tag.” จะแสดงขึ้นแทน การวาดกราฟิกลงบน…

ใน HTML5 แท็ก <button> ใช้สำหรับสร้างปุ่มบนหน้าเว็บ โดยปุ่มนี้สามารถนำไปใช้ในหลากหลายวัตถุประสงค์ เช่น การส่งฟอร์ม การคลิกเพื่อกระทำบางอย่าง หรือการโต้ตอบในแบบต่าง ๆ นอกจากนี้ แท็ก <button> ยังสามารถรองรับเนื้อหาภายในได้ ไม่ว่าจะเป็นข้อความหรือองค์ประกอบ HTML อื่นๆ เช่น รูปภาพ หรือไอคอน การใช้งานทั่วไปของแท็ก <button> ปุ่มส่งข้อมูลในฟอร์ม (Submit button) โดยค่าเริ่มต้นของ <button> หากไม่ได้กำหนดค่า type ปุ่มจะทำหน้าที่ส่งข้อมูลฟอร์มเหมือนกับ <input type=”submit”> ปุ่มรีเซ็ตข้อมูลในฟอร์ม (Reset button) เมื่อกำหนดค่า type=”reset” ปุ่มจะทำหน้าที่รีเซ็ตข้อมูลในฟอร์ม ปุ่มธรรมดา…

แท็ก <br> (ย่อมาจาก “break”) ใช้สำหรับขึ้นบรรทัดใหม่ในเนื้อหาโดยไม่มีการสร้างย่อหน้าใหม่หรือองค์ประกอบบล็อกเพิ่มเติม เหมาะกับการใช้งานเมื่อเราต้องการทำให้ข้อความแสดงผลในรูปแบบที่บรรทัดถูกแยกออกโดยไม่ต้องใช้ <p> หรือแท็กบล็อกอื่น ๆ รูปแบบการใช้งานแท็ก <br> การขึ้นบรรทัดใหม่ในเนื้อหาที่ต่อเนื่องกัน ใช้ในกรณีที่ต้องการทำให้บรรทัดต่อไปแสดงผลต่อเนื่องจากบรรทัดเดิม แต่แยกออกเป็นคนละบรรทัด การใช้งาน <br> ในฟอร์มที่มีข้อมูลหลายบรรทัด เหมาะสำหรับใช้ในแบบฟอร์มที่ต้องการแสดงผลข้อมูลหลายบรรทัด เช่น ที่อยู่ การสร้างบทกวีหรือข้อความที่มีรูปแบบคงที่ สำหรับเนื้อหาที่ต้องการให้แสดงผลตามบรรทัดที่กำหนด เช่น บทกวี การแยกข้อมูลที่เป็นที่อยู่และเบอร์โทรศัพท์ในเว็บไซต์ ในการแสดงผลที่อยู่และเบอร์โทรศัพท์ให้ชัดเจนขึ้นโดยการใช้ <br> เพื่อแยกบรรทัด การจัดการข้อมูลในอีเมลหรือบทความ การใช้ <br> สามารถช่วยให้การจัดเรียงข้อความเป็นไปตามที่ต้องการ โดยไม่ใช้แท็กย่อหน้า <p> สรุป แท็ก <br> มีประโยชน์ในการแบ่งบรรทัดของข้อความโดยไม่สร้างย่อหน้าใหม่ ช่วยในการจัดรูปแบบข้อความให้แสดงผลตามที่ต้องการ เช่น…

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

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

แท็ก <bdo> (Bi-Directional Override) ใน HTML5 ใช้สำหรับการกำหนดทิศทางการแสดงผลของข้อความ โดยปกติแล้ว ภาษาส่วนใหญ่จะถูกแสดงผลจากซ้ายไปขวา (Left-to-Right หรือ LTR) แต่ในบางภาษา เช่น ภาษาอาหรับหรือภาษาฮีบรู จะถูกแสดงผลจากขวาไปซ้าย (Right-to-Left หรือ RTL) ดังนั้นเมื่อมีการใช้งาน <bdo> จะช่วยควบคุมทิศทางของข้อความตามที่ผู้พัฒนาต้องการ คุณสมบัติของ <bdo> โครงสร้างแท็ก <bdo> ตัวอย่างการใช้งาน <bdo> การแสดงข้อความจากขวาไปซ้าย (RTL) ข้อความ “Hello, world!” จะถูกแสดงจากขวาไปซ้าย การแสดงข้อความจากซ้ายไปขวา (LTR) ในบริบทที่ทิศทางเริ่มต้นเป็น RTL ข้อความ “مرحبا…

<bdi> (Bidirectional Isolation) เป็นแท็กใน HTML5 ที่ใช้เพื่อควบคุมทิศทางการแสดงผลข้อความในเอกสาร HTML โดยเฉพาะในกรณีที่ต้องรองรับข้อความที่มีการใช้ภาษาที่มีทิศทางการเขียนต่างกัน เช่น ภาษาอังกฤษที่เขียนจากซ้ายไปขวา (LTR – Left to Right) และภาษาที่เขียนจากขวาไปซ้าย (RTL – Right to Left) เช่น ภาษาอาหรับหรือภาษาฮิบรู โดย <bdi> จะทำหน้าที่แยกส่วนของข้อความออกมาเพื่อให้เบราว์เซอร์จัดการกับทิศทางการแสดงผลโดยอัตโนมัติ ซึ่งเป็นประโยชน์เมื่อมีการแทรกข้อความที่มีทิศทางการเขียนที่แตกต่างกันเข้ามาภายในข้อความหลัก การใช้งาน <bdi> การประยุกต์ใช้งาน การแสดงข้อมูลผู้ใช้ที่มีภาษา RTL หากระบบที่ใช้รองรับผู้ใช้จากหลายประเทศที่มีภาษาเขียนต่างกัน เช่น ระบบที่แสดงชื่อผู้ใช้งานในฟิลด์ใดฟิลด์หนึ่ง เราสามารถใช้ <bdi> เพื่อให้แน่ใจว่าทิศทางการแสดงผลไม่สับสน เช่น แม้ว่าชื่อผู้ใช้จะเป็นภาษาฮิบรู…

ใน HTML5 แท็ก <base> ใช้เพื่อกำหนด URL พื้นฐานสำหรับลิงก์ทั้งหมดในเอกสารเว็บเพจ โดยจะถูกใช้ในกรณีที่ลิงก์ภายในเอกสารนั้นใช้ URL ที่สัมพันธ์กัน (Relative URL) เพื่อให้บราวเซอร์สามารถประมวลผลลิงก์เหล่านั้นได้ถูกต้องเมื่อมีการกำหนด URL พื้นฐานไว้ การใช้งาน <base> จะถูกวางไว้ในส่วน <head> ของเอกสาร และสามารถระบุค่าด้วยสองแอตทริบิวต์หลัก ได้แก่ การใช้งานแท็ก <base> การประยุกต์ใช้ในสถานการณ์ต่าง ๆ ใช้ URL พื้นฐานสำหรับลิงก์: เมื่อมีการตั้งค่า <base href=””> ทุกลิงก์ที่ใช้ URL แบบสัมพันธ์กัน (Relative URL) เช่น <a href=”page1.html”>…

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

การใช้งาน <audio> tag ใน HTML5 เป็นการแสดงเสียงหรือไฟล์เสียงในหน้าเว็บ โดยมีรูปแบบการทำงานที่หลากหลาย รวมถึงคุณสมบัติที่สามารถปรับแต่งได้ตามความต้องการของผู้พัฒนา พื้นฐานของ <audio> Tag <audio> tag ใช้สำหรับฝังไฟล์เสียงลงในหน้าเว็บ HTML ซึ่งสามารถใช้งานได้โดยการระบุแหล่งที่มาของไฟล์เสียงผ่านแอตทริบิวต์ src หรือใช้ <source> tag ภายในเพื่อระบุรูปแบบไฟล์เสียงหลายรูปแบบที่รองรับเบราว์เซอร์ได้ต่างกัน โครงสร้างพื้นฐาน แอตทริบิวต์ที่ใช้กับ <audio> controls: แสดงอินเทอร์เฟซควบคุมการเล่น เช่น ปุ่มเล่น หยุด และเลื่อนเสียง autoplay: ให้เสียงเล่นโดยอัตโนมัติเมื่อโหลดหน้าเว็บ loop: เล่นเสียงซ้ำโดยอัตโนมัติ muted: ปิดเสียงเริ่มต้นเมื่อโหลด preload: กำหนดว่าจะแคชไฟล์เสียงหรือไม่ โดยมีค่าดังนี้: การใช้งานหลายรูปแบบไฟล์…

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

<article> ใน HTML5 ใช้เพื่อระบุส่วนหนึ่งของเนื้อหาที่เป็นอิสระและมีความหมายในตัวเอง ซึ่งเนื้อหาเหล่านี้ควรเป็นข้อมูลที่สมบูรณ์หรือสามารถถูกนำไปแสดงในบริบทอื่น ๆ โดยไม่สูญเสียความหมาย เช่น บทความในข่าว บล็อกโพสต์ ความคิดเห็น ฯลฯ การใช้งานทั่วไปของ <article> บทความในเว็บบล็อก ในการสร้างบทความหรือโพสต์ในบล็อก <article> จะเป็นส่วนที่ใช้ครอบเนื้อหาของโพสต์แต่ละโพสต์ ข่าวสารในเว็บไซต์ข่าว แต่ละข่าวบนหน้าเว็บไซต์ข่าวสามารถถูกแยกออกเป็น <article> เพื่อให้แยกจากกันได้อย่างชัดเจน ความเห็นของผู้ใช้หรือคอมเมนต์ ความเห็นหรือรีวิวของผู้ใช้ก็สามารถใช้ <article> ได้ เพื่อให้สามารถแยกความเห็นออกจากเนื้อหาอื่น ๆ การใช้งานใน Blog Post ที่มีหลายบทความ ถ้ามีหลายบทความในหน้าเดียวกัน แต่ละบทความควรถูกห่อด้วย <article> การใช้ <article> ร่วมกับ <section> และ…

ใน HTML5 แท็ก <area> ใช้ร่วมกับแท็ก <map> เพื่อกำหนดพื้นที่ที่เป็นลิงก์หรือมีการโต้ตอบในรูปภาพที่ใช้แท็ก <img> โดยพื้นฐานการใช้งานของ <area> คือการสร้างพื้นที่บนภาพที่สามารถคลิกหรือทำการโต้ตอบได้ เช่น การนำไปยังลิงก์ที่กำหนดหรือแสดงข้อมูลเพิ่มเติม แท็ก <area> จะกำหนดรูปร่างของพื้นที่โดยใช้แอตทริบิวต์ต่าง ๆ เช่น shape, coords, และ href การใช้งานพื้นฐาน แอตทริบิวต์สำคัญของ <area> ตัวอย่างเพิ่มเติม สร้างลิงก์บนพื้นที่สี่เหลี่ยม สร้างลิงก์บนพื้นที่วงกลม สร้างลิงก์บนพื้นที่รูปหลายเหลี่ยม พื้นที่ที่ไม่ใช่ลิงก์ แต่ใช้ประโยชน์อื่นได้ (เช่น การใช้งาน JavaScript) การประยุกต์ใช้งาน

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