ย้อนวัยดู tag HTML ภาคต่อ04 June 2021Programing

ย้อนวัยดู tag HTML ภาคต่อ

คราวที่แล้วเราให้ดูไปแล้วส่วนนึง วันนี้เดี๋ยวเอามาให้ดูเพิ่มเติม คือคิดถึงจริง ๆ แหละ 555555555555555

<meter> หรือ Meter element

เป็นแท็กที่แสดงค่าสเกลภายในที่เป็นช่วงหรือเศษส่วน เราจะไม่ใช่แท็ก <meter> เพื่อระบุความคืบหน้าของการทำงานต่างๆ เป็นแทบ progressbar สำหรับการทำงานส่วนนั้นเราจะใช้แท็ก <progress> แทน ดังตัวอย่างข้างล่าง ย้ำว่าเป็นการแสดงข้อมูลเช่นพื้นที่ฮาร์ดดิสในเครื่องคุณมีขนาด 256GB คุณใช้ไปแล้ว 60GB เป็นต้น

<cite> หรือ Citation element

ใช้ในการอ้างอิงถึงผลงานสร้างสรรค์ เช่น หนังสือ บทกวี เพลงภาพยนต์ ภาพวาดปะติมากรรม และอื่นๆ ตัวอย่างการใช้งานจะเป็นรูปแบบของการที่เราเขียนรายงาน หรือบทความต่างๆ และต้องอ้างอิงว่า เราเอาข้อมูลส่วนนี้มาจากไหนใส่ในส่วนของชื่อหนังสือ ข้อความภายในแท็กจะเป็นตัวเอียงในอัตโนมัติ

<q> หรือ  Inline Quotation element

เป็นแท็กใช้กับข้อความสั้นๆ ไม่ต้องมีการแบ่งย่อหน้า ที่ต้องการใช้ในการอ้างอิงถึงข้ความในหนังสือ บทความ หรือบุคคลว่าเป็นของใคร มักจะมีเครื่องหมายอัญประกาศหรือ  double quotes (“…”) ให้กับข้อความในแท็ก <q> เหมือนกับตัว <blockquote> ที่ใช้อ้างอิงกับข้อความที่ยาวๆ

<strike> หรือ Strikethrough Element

เป็นแท็กที่ใช้ขีดเส้นแนวนอนบนข้อความ แบบขีดฆ่าข้อความ แบบเดียวกับแท็ก <s> ใน html5 ปัจจุบันแท็ก <strike> เลิกใช้งานแล้ว

<kbd> หรือ Keyboard Input element

เป็นแท็กที่ใช้สำหรับใส่ครอบปุ่ม Keyboard ข้อความในแท็กจะใช้ฟอนต์ของเริ่มต้นของบราวเซอร์ monospace และการใช่งานแท็กนี้ให้ถูกต้องมันจะต้องถูกกำหนดอยู่ภายใต้แท็ก <samp> ที่จะอธิบายในหัวข้อถัดไป  ตัวอย่างการทำงานตามภาพด้านล่าง

หมายเหตุ: ปัจจุบันแท็กนี้เลิกใช้งานแล้ว อย่างไรก็ตามการที่มันจะถูกแสดงให้ข้อความภายในแท็กสวยงามก็ยังต้องพึงพาเอฟเฟกต์จาก css อยู่

<samp> หรือ Sample Output element

ใช้เพื่อแสดงว่าเป็นคำสั่ง หรือคีย์ลัดต่างๆ จากโปรแกรมคอมพิวเตอร์ ที่คุณยกขึ้นมาแสดงเพื่อประกอบบทความที่เขียนบนเว็บ เนื้อหาภายในแท็กจะเป็นฟอนต์เริ่มต้นจากบราวเซอร์ monospace แท็กนี้ไม่ได้จำกัดว่าจะต้องใช้คู่กับ <kbd> อย่างเดียว แท็กนี้จะใช้กับแท็ก <em>  ก็ได้ เพราะแท็กนี้ใช้คุมสิ่งที่คุณต้องการยกเป็นตัวอย่างเช่น

หรือ

<p>When the process is complete, the utility will output the text

<samp>Scan complete. Found <em>N</em> results.</samp> You can then

proceed to the next step.</p>

หรือ

หมายเหตุ: ปัจจุบันแท็กนี้เลิกใช้งานแล้ว

<wbr>

เป็นแท็กที่ใช้ในการแบ่งคำ ซึ่งข้อความที่ถูกแบ่งจะตัดหายไปไม่มีการตกขึ้นบรรทัดใหม่ ถ้าเทียบกับ css ก็เหมือนเราเขียน overflow: hidden ลงไปทำให้ข้อความที่ควรยาวเกินถูกตัดออกไป แต่ไม่ได้หมายความว่ามันถูกตัดหายไปจากแท็กที่เราเขียน มันแค่ไม่แสดงบนหน้าเว็บเท่านั้น

<dfn> หรือ Definition element

ใช้เพื่อระบุคำจำกัดความภายในแท็ก หรือคำอธิบายสำหรับคำศัพท์นั้น ตัวอย่างเช่น เราจะบอกว่า html เป็นโค้ดสำหรับเขียนเว็บ แล้วใส่ชื่อเต็มลงไปข้างใน ดังตัวอย่างด้านล่าง

หรือ

<rb> หรือ Ruby Base element

ใช้เพื่อคั่นข้อความประกอบเป็นคำอธิบายในแท็ก <ruby> ใช้ใส่สำหรับแสดงการออกเสียงของตัวอักษร ปัจจุบันแท็ก <rb> เลิกใช้งานแล้ว

<var> หรือ Variable element

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

แถมอีกแท็ก

<applet> หรือ Embed Java Applet element

ใช้งานการกำหนดค่า embed ที่ใช้งาน Java ปัจจุบันไม่ใช้งานแล้ว ตัวอย่างการใช้งาน

จากที่ยกตัวอย่างมาทั้งหมดอีก 10 แท็กในบทความนี้เรียกได้ว่าเป็นแท็กที่เราไม่คุ้นตาหรืออาจจะเคยเห็นหรือเคยรู้มาบ้าง แต่บางคนอาจจะยังไม่รู้ว่ามันใช้ทำอะไรหรือมีการแสดงผลแบบไหนบนเว็บ บางแท็กก็ถูกตัดออกจากมาตราฐาน html ถึงแม้บางบราวเซอร์ยังอาจจะรองรับการทำงานของแท็กนี้อยู่ก็อย่างไรก็ตามควรหลีกเลี่ยงที่จะใช้แท็กนี้ เพราะอาจจะเกิดปัญหาการไม่รองรับการใช้งานในอนาคต

ทุกคนสามารถหาอ่านเพิ่มเติมได้อีก มีแท็กอีกเยอะมากที่ไม่เคยเห็นซึ่งส่วนหนึ่งมาจากเว็บที่เราเขียนในปัจจุบันไม่ค่อยได้ใช้งานแท็กพวกนี้ หรือแท็กพวกนี้ไม่ตรงตามความต้องการที่เราจะนำมาใช้งาน หรือส่วนหนึ่งอาจจะเพราะการสอนหรือตัวอย่างต่างๆที่มีบนเว็บไซต์ไม่ได้มีการใช้แท็กให้ถูกต้องก็เป็นได้ แต่ละแท็กที่เราเลือกใช้งานสื่อความหมายว่ามันทำหน้าที่อะไร นั่นเป็นหน้าที่ของเราเองที่จะต้องเลือกใช้ให้เหมาะสม และการใช้งานที่ผิดก็มีผลต่อ SEO เหมือนกันนะ เช่น การใส่ h1 – h6 หรือ การใส่ button คุม div หรือ img เราควรเลือกให้ดีว่าเราจะใช้แท็กไหน

ก่อนหน้า
ถัดไป