7 HTML Elements สุดเจ๋งที่ไม่มีใครใช้

HTML Elements เจ๋งๆ ที่นักพัฒนาไม่ใช้งาน และยังไม่รู้ว่าใช้ยังไงหรืออาจไม่รู้ว่ามันมีอยู่ด้วยซ้ำ HTML Elements เหล่านั้น มีอะไรที่น่าทึ่งมากๆ หากเรารู้และใช้งานได้อย่างมีประสิทธิภาพ เราจะมาดูกันว่ามันใช้งานอย่างไร หลังจากที่ผมค้นหา HTML Elements ที่ไม่ได้ใช้ก็มีอยู่มากมายเลยทีเดียว แต่ผมจะพูดถึง 7 HTML Elements ที่คิดว่าน่าใช้งาน ไปดูกันเลยครับ

1. meter & progress

<meter> แท็กกำหนดวัดค่าหรือสเกลภายในช่วง นอกจากนี้ยังเป็นที่รู้จักกันเป็นมาตรวัด
<progress> แท็กแสดงให้เห็นถึงความคืบหน้าของงาน

// แท็ก meter
<meter> value="2" min="0" max="10">2 out of 10</meter><br>
<meter> value="0.6">60%</meter>

// แท็ก progress
<progress> value="22" max="100"></progress>

2. sup & sub

แท็ก <sup> คุณสามารถเพิ่มตัวยก (เช่น x²) หรือแท็ก <sub> คุณสามารถเพิ่มตัวห้อย (เช่น x₀) กับเอกสารของคุณได้

<p>This text contains <sub>subscript</sub> text.</p>
<p>This text contains <sup>superscript</sup> text.</p>

3. datalist

แท็ก <datalist> ถูกนำมาใช้เพื่อให้มีคุณสมบัติ "เติมข้อความอัตโนมัติ" ในแท็ก <input> ผู้ใช้จะเห็นรายการของตัวเลือกที่กำหนดไว้ล่วงหน้าสำหรับการป้อนข้อมูลของพวกเขา

4. map & area

แท็ก map และ area ทำให้คุณสร้างแผนที่รูปภาพให้มีลิงค์ต่างๆบนรูปภาพที่สามารถคลิกได้ โดยแบ่งเป็นพื้นที่สำหรับลิงค์นั้นๆ

<img
  src="work.jpg"
  alt="Work"
  usemap="#workmap"
  width="400"
  height="379"
/>
<map> name="workmap">
  <area
    shape="rect"
    coords="34,44,270,350"
    alt="Computer"
    href="computer.html"
  />
  <area
    shape="rect"
    coords="290,172,333,250"
    alt="Phone"
    href="phone.html"
  />
  <area
    shape="circle"
    coords="337,300,44"
    alt="Printer"
    href="printer.html"
  />
</map>

5. details & summary

แท็ก <details> และ <summary> กำหนดหัวข้อที่มองเห็นรายบะเอียด ส่วนหัวสามารถคลิกเพื่อดูหรือซ่อนรายละเอียดได้

<details>
  <summary>Copyright 1999-2014.</summary>
  <p> - by Refsnes Data. All Rights Reserved.</p>
  <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

6. object

แท็ก object ช่วยให้คุณสามารถฝังไฟล์ได้หลากหลาย เช่น PDF, รูปภาพ, วิดีโอ, เสียงและแม้แต่วิดีโอ Youtube

<object> data="picture.jpg" width="300" height="200"></object>

7. abbr

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

<p>The <abbr> title="World Health Organization">WHO</abbr> was founded in 1948.</p>

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