Dalam artikel ini, kami akan menunjukkan beberapa trik keren yang dapat anda gunakan untuk membuat halaman web anda menjadi lebih seru dan interaktif.

1. Preload & Cache Assets

"Preload" dan "Cache" dalam HTML digunakan untuk meningkatkan performa pemuatan halaman web. "Preload" biasanya digunakan untuk memuat aset sebelum mereka benar-benar dibutuhkan, sementara "cache" membantu menyimpan aset di perangkat pengguna untuk mengurangi waktu pemuatan di kunjungan berikutnya.

Contohnya:

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

2. Add Custom Link Previews for the page

"Add Custom Link Previews for the page" dalam HTML biasanya merujuk pada pengaturan meta tags untuk mengontrol tampilan pratinjau tautan (link previews) ketika sebuah halaman web dibagikan di media sosial atau platform lainnya. Anda dapat menggunakan meta tags seperti dibawah ini:

<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. Redirect to another link

Untuk melakukan pengalihan (redirect) ke link lain dalam HTML, Anda dapat menggunakan elemen <meta> dengan atribut http-equiv dan content. Berikut contoh penggunaannya:

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

4. Add a Color Picker

"Add a Color Picker" dalam HTML merujuk pada penggunaan elemen 'input' khusus yang memungkinkan pengguna memilih warna. Anda dapat menggunakan elemen input dengan tipe 'color' untuk menciptakan color picker. Contoh penggunaannya seperti berikut:

<input type="color"/>

5. Make a call or mail dalam HTML

"Make a call or mail dalam HTML" merujuk pada penambahan elemen HTML dalam kode sumber suatu halaman web yang memungkinkan pengguna untuk dengan mudah melakukan panggilan telepon atau mengirim surel (email). Ini umumnya dilakukan dengan menambahkan tautan yang bersifat interaktif. Contohnya:

<a href="tel: +628764312">Hubungi Kami</a>
<a href="mailto:user@email.com">Kirim Email</a>

Dengan menambahkan elemen-elemen seperti ini, pengguna dapat dengan mudah berinteraksi dengan informasi kontak seperti nomor telepon atau alamat surel pada halaman web tersebut.