6 สิ่งสุดเจ๋ง ที่ HTML สามารถทำได้

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

1. โหลดล่วงหน้าและแคชเนื้อหา

สงสัยว่าจะโหลดล่วงหน้าและแคชเนื้อหาได้อย่างไร เพียงแค่ต้องการรหัสบรรทัดเดียวและคุณทำเสร็จแล้ว

<link 
  rel="preload" 
  href="https://example.com/image.png" 
  as="image" 
/>

2. เพิ่มตัวอย่างลิงค์ที่กำหนดเองสำหรับหน้าเว็บ

หากคุณต้องการสร้างตัวอย่างลิงค์ของหน้าเว็บเวลาแชร์ลิงค์ จะทำได้อย่างไร สิ่งที่ต้องมีคือแท็ก meta  ในแท็ก head ด้านบนโดยใช้ Open Graph Protocol เพื่อสร้างแท็กสำหรับแพลตฟอร์ม ตามตัวอย่างด้านล่าง

<meta property="og:title" content="Page title" />
<meta property="og:description" content="Page description" />
<meta property="og:image" content="https://example.com/asset.png" />

3. เปลี่ยนเส้นทางไปยังลิงค์อื่น

การเปลี่ยนเส้นทางผู้ใช้ไปยังลิงค์อื่นๆ (ที่ใช้กันทั่วไปหลังการยืนยันการชำระเงิน) เป็นเพียงโค้ดบรรทัดเดียว ตามตัวอย่างโค๊ดข้างต้นจะเปลี่ยนเส้นทางผู้ใช้ไปยัง Google หลังจาก 3 วินาที

<meta 
  http-equiv="refresh"
  content="3; url=https://google.com/" 
/>

4. ใส่ลิงค์โทรหรือเมลล์

ต้องการลิงค์เพื่อโทรหรือส่งอีเมลโดยการคลิกที่ลิงค์ได้ในทันที

<a href="tel:0623456789">โทร</a>
<a href="mailto:[email protected]">>เมล</a>

5. เพิ่มตัวเลือกสี

ต้องการเพิ่มตัวเลือกสีในฟอร์มเว็บไซต์ของคุณหรือไม่? แค่บรรทัดเดียวก็เพียงพอแล้ว ไม่ต้องใช้ไลบรารี่ หรูหรา หรือแม้แต่จาวาสคริปต์เลย 

<input type="color" name="your_color" />

6. เนื้อหาที่แก้ไขได้

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

<p contenteditable="true">
  This is an editable paragraph
</p>