ในบทความนี้ผมจะมาแชร์เคล็ดลัดในภาษา HTML ที่คุณอาจจะไม่เคยรู้มาก่อนให้รู้จักกัน

ก่อนอื่นเลย ภาษา HTML คืออะไร?

Hypertext Markup Language (HTML) เป็นภาษา Mark Up ที่เราใช้กันบนเว็บไซต์เพื่อให้แสดงผลได้บนเว็บเบราเซอร์ เราสามารถใช้ CSS เพื่อจัดรูปแบบการแสดงผลของเนื้อหา HTML และใช้ Javascript เพื่อเพื่มการทำงานบนหน้าเว็บไซต์

เริ่มเลย

1. แอตทริบิวต์ loading=lazy

เราสามาถเพิ่ม attribute loading="lazy" ใน Tag img ได้เพื่อชลอการโหลดรูปภาพบนหน้าเวปเราถ้ารูปนั้นยังไม่ถูกนำมาแสดงบนหน้าจอ ถ้าบนเวปไซต์เรามีการแสดงรูปจำนวนมากจะช่วยลดแบนวิดธ์และเพิ่มประสิทธิภาพบนเวปของเราให้แสดงผลได้เร็วขึ้น

 <img src='image.jpg' 
      loading='lazy' 
      alt='Alternative Text'
/>           

โดยปัจจุบัน attribute นี้รองรับบน Chrome, Firefox และ Edge ยกเว้น Safari โดยสามารถดูการรองรับจาก Browser ได้ที่ Can I use แต่หากเราต้องการให้ lazy load สามารถใช้งานได้บน Safari ตั้งแต่ตอนนี้เราสามารถใช้ javascript library มาช่วยได้เช่น vanilla-lazyload

ดูเพิ่มเติมเกี่ยวกับ Lazy Loading Image

• https://web.dev/browser-level-image-lazy-loading/
• https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading

2. ใช้ link <a> เพื่อ Email, โทร, และส่ง SMS

ใน Tag <a> นอกจากจะ ระบุ href เพื่อไปยัง link เว็บไซต์ตามปกติแล้ว เรายังสามารถระบุ prefix ของ href เพื่อใช้งานต่อไปนี้ได้

mailto: ส่งอีเมล์

<a href="mailto:{email}?subject={subject}&body={content}">
    ส่งอีเมล์
</a>

tel: โทรออก

<a href="tel:{phone}">
    โทรมาหาเรา
</a>

sms: ส่ง SMS

<a href="sms:{phone}?body={content}">
    ส่ง SMS มาได้เลย
</a>               

โดย tel: และ sms: จะมีประโยชน์มากเมื่อผู้ใช้กด link จากบนมือถือ โดยหน้าเวปจะไปยัง App โทรศัพท์พร้อมโทรออกหรือส่ง SMS ตาม เบอร์โทรและข้อความที่เราระบุไว้ใน link ได้ทันที

ดูเพิ่มเติม

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

3. เริ่มลำดับเลขถัดไปใน Order List (<ol>) ด้วย attribute start

ใช้ attribute start ใน tag <ol> เพื่อระบุตัวลำดับเลขที่เราต้องการให้เริ่มต้น

4. Tag <meter>

เราสามารถใช้ tag <meter> เพื่อแสดง ปริมาณได้ โดยไม่ต้องพึ่ง Javascript หรือ CSS เลย

5. Search โดยใช้ HTML แบบเพียว ๆ

เราสามารถใช้ tag <input list="" /> และ <datalist id=""> เพื่อเพิ่มการ search ใน web ของเราได้ เหมาะกับ form ที่มีจำนวนข้อมูลไม่มากเรารู้ค่าที่ต้องการกรอกล่วงหน้าอยู่แล้ว

6. tag <fieldset>

เราสามารถใช้ tag <fieldset> เพื่อจัด element ใน form ให้อยู่ในกลุ่มเดียวกันได้ เราสามารถใช้ attribute disabled ที่ fieldset เพื่อให้ form control ใน fieldset disabled ทั้งหมดโดยไม่ต้อง กำหนดที่ input แต่ละตัว

<!-- element ทั้งหมดใน fieldset ถูก disabled -->
<fieldset disabled>

    <input type="text" />
    <select>...</select>
    <textarea>....</textarea>
    <input type="checkbox" />

</fieldset>

7. Window.opener

หน้าเวปที่ถูกเปิดด้วย  target="_blank" จะอนุญาตให้หน้าใหม่นั้นเข้าถึงหน้าเวปตั้งต้นได้ผ่านทาง window.opener ตรงนี้อาจทำให้เกิดความไม่ปลอดภัยและส่งผลต่อประสิทธิภาพของหน้าเวปเราได้

วิธีการป้องกันคือระบุ attribute rel="noopener" หรือ rel="noreferrer" ที่ tag <a> เพื่อป้องกันปัญหานี้

<a href="https://phattarachai.dev/" target="_blank" rel="noopener">
	Phattarachai.dev
</a>           

9. tag `mark`

ใช้ Tag <mark> เพื่อ ไฮไลท์ข้อความได้

<p>ตัวอย่างข้อความที่ต้องการ<mark>ไฮไลท์</mark>บน HTML</p>

ตัวอย่างข้อความที่ต้องการไฮไลท์บน HTML

10. attribute `download` บน tag <a>

เราสามารถระบุ attribute download บน tag <a> ได้เพื่อบอก Browser ให้ทำการ Download ไฟล์แทนที่จะเปิดหน้าใหม่เพื่อไปยังไฟล์นั้น

<a href='path/to/file' download>
    Download
</a>