บทความ IT เจ๋งๆ
HTML5 Tags น่าสนใจ ที่แนะนำให้ลองใช้
23-พ.ค.-18
คัมภีร์เทพ IT
หากคุณเป็นคนไอทีที่ทำงานเกี่ยวกับการพัฒนาหรือเกี่ยวข้องกับ Website อยากให้อ่านบทความนี้ เพราะเป็นการแนะนำ HTML5 Tags ที่น่าสนใจ ที่คุณสามารถนำไปใช้ได้ จะมี Tags อะไรบ้าง ลองไปอ่านกันได้เลยครับ
<!DOCTYPE html> ได้รับการเผยแพร่ตั้งแต่เดือนตุลาคม ปี 2014 โดย World Wide Web Consortium (W3C) เพื่อปรับปรุงภาษาด้วยการสนับสนุนพวก Multimedia ขณะเดียวกัน ผู้ใช้งานก็ยังคงอ่านได้ง่าย (Readable) อีกทั้งพวก Computer และ Device ต่างๆ (เช่น web browsers, parsers เป็นต้น) ก็ยังคงเข้าใจได้ด้วย เชื่อว่าหลายคนก็คงใช้ HTML5 กันแล้ว ซึ่ง Tags หลักๆ ก็คงหนีไม่พ้น <header>, <section>, <article> และ <footer> เป็นต้น แต่ก็มี HTML5 Tags ส่วนหนึ่งที่หลายคนมองข้ามหรือใช้งานไม่ตรงกับ semantic ของภาษา เรามาดูกันว่ามีอะไรบ้าง
1. <details>
<details> เป็น Tag ที่ให้ User สามารถ เห็น หรือ ซ่อนมันไว้ก็ได้ เรามักใช้มันเพื่อสร้าง Interactive Widget ที่ User สามารถเปิดและปิดได้ ภายใน Tag คุณสามารถใช้ content ประเภทใดก็ได้และไม่ควรถูกมองเห็นเว้นแต่ว่าจะ set ค่าเป็น open attribute
ตัวอย่าง <details open><p>Credit card required at time of booking.</p></details>
2. <dialog>
<details> เป็นการ Tag ที่ใช้ในเรื่องที่เกี่ยวกับ dialog box element หรือ window
ตัวอย่าง <dialog open><p>Welcome do our hotel.</p></dialog>
3. <mark>
<mark> เป็น Tag ที่ใช้ในการ mark หรือ highlight พื้นหลังข้อความ (text) ที่ต้องการได้
ตัวอย่าง <p>Credit card required at time of <mark>booking.</mark></p>
4. <summary>
<summary> เป็น Tag ที่ใช้แสดงส่วนของหัวข้อ (Heading) ของ Tag <details> โดยเราสามารถคลิก Heading เพื่อให้เห็น หรือ ซ่อน detail ได้
ตัวอย่าง <details><summary>Payment conditions</summary><p>Credit card required at time of booking.</p></details>
5. <time> and <datetime>
<time> เป็น Tag ที่ใช้แสดง วันที่ / เวลา โดย element นี้ถูกใช้ในการ encode วันที่ / เวลา
ตัวอย่าง <p>Breakfast buffet starts at<time> 7.00 AM</time>at the restaurant.</p>
<p>Concert at the lobby in<time datetime="2018-06-20T19:00"> June 20th 7.00 PM</time></p>
6. <small>
<small> เป็น Tag ที่ใช้ในการแสดงข้อความ (text) ให้มีขนาดที่เล็กลง
ตัวอย่าง <p>Cancelations must be canceled up to 48h, <small>to avoid penalty of one night per room.</small></p>
7. <datalist>
เราใช้ <datalist> ในการแสดง Drop down list ซึ่งมักใช้คู่กับ Tag <input> นั่นเอง ลองดูการแสดงผลใน Codepen ที่นี่
ตัวอย่าง <datalist><option value="Master Card"><option value="Visa"><option value="American Express"></datalist>
8. <progress>
ใช้ <progress> Tag เมื่อต้องการแสดงผลว่า งานนั้นสำเร็จไปกี่ % แล้ว โดยทั่วไปมักใช้กับ Progress bar นั่นเอง
ตัวอย่าง <progress value="70" max="100">70 %</progress>
เชื่อว่า บทความนี้น่าจะเป็นประโยชน์กับ Website Developer/Programmer ลองนำไปใช้กันดูนะครับ
ที่มา: https://codeburst.io/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความที่เกี่ยวข้อง