SRC Itu Apa Sih? Panduan Lengkap dan Mudah Dipahami!

Table of Contents

Dalam dunia web development, terutama saat kita berurusan dengan HTML, seringkali kita menemukan istilah-istilah teknis yang mungkin terdengar asing di telinga. Salah satu istilah yang cukup sering muncul adalah SRC. Mungkin kamu pernah melihatnya dalam kode HTML dan bertanya-tanya, sebenarnya apa sih maksud dari SRC ini? Nah, artikel ini akan membahas tuntas mengenai apa itu SRC, fungsinya, dan bagaimana cara menggunakannya dengan benar.

Mengenal Lebih Dekat Atribut SRC¶

SRC adalah singkatan dari Source atau sumber. Dalam konteks HTML, src adalah sebuah atribut yang digunakan untuk menentukan alamat atau lokasi dari sumber daya (resource) yang ingin kita sematkan atau tampilkan dalam halaman web. Sumber daya ini bisa bermacam-macam, mulai dari gambar, video, audio, hingga file script dan dokumen eksternal lainnya.

Image just for illustration

Secara sederhana, bayangkan kamu ingin menampilkan sebuah foto di dinding rumahmu. Foto tersebut adalah sumber daya yang ingin kamu tampilkan, dan dinding rumahmu adalah halaman web. Untuk menempelkan foto tersebut, kamu perlu tahu di mana foto itu berada, kan? Nah, atribut src dalam HTML berfungsi seperti alamat foto tersebut. Ia memberi tahu browser di mana ia bisa menemukan sumber daya yang ingin ditampilkan.

Di Tag HTML Mana Saja SRC Digunakan?¶

Atribut src tidak bisa digunakan di sembarang tag HTML. Ia secara khusus digunakan pada beberapa tag tertentu yang memang membutuhkan sumber daya eksternal. Berikut adalah beberapa tag HTML yang paling umum menggunakan atribut src:

1. <img> (Tag Gambar)¶

Tag <img> adalah tag yang paling sering menggunakan atribut src. Tag ini digunakan untuk menyematkan gambar ke dalam halaman web. Atribut src pada tag <img> berfungsi untuk menentukan lokasi file gambar yang ingin ditampilkan. Lokasi ini bisa berupa URL gambar yang berada di server lain, atau path file gambar yang berada di server yang sama dengan halaman web.

<img src="gambar/logo-website.png" alt="Logo Website">

Pada contoh di atas, src="gambar/logo-website.png" memberitahu browser bahwa file gambar yang ingin ditampilkan adalah logo-website.png dan lokasinya berada di dalam folder gambar yang relatif terhadap lokasi file HTML.

Image just for illustration

Fakta Menarik: Tag <img> adalah salah satu tag self-closing atau tag tunggal dalam HTML. Artinya, ia tidak memiliki tag penutup seperti </img>. Semua informasi yang dibutuhkan tag <img> sudah terkandung dalam tag pembuka itu sendiri, termasuk melalui atribut src dan atribut-atribut lainnya seperti alt, width, dan height.

2. <script> (Tag Script)¶

Tag <script> digunakan untuk menyematkan kode JavaScript ke dalam halaman web. Kode JavaScript ini bisa ditulis langsung di dalam tag <script>, atau bisa juga diambil dari file eksternal. Jika kode JavaScript diambil dari file eksternal, maka atribut src digunakan untuk menentukan lokasi file JavaScript tersebut.

<script src="js/script.js"></script>

Pada contoh di atas, src="js/script.js" memberitahu browser untuk mengambil file JavaScript yang bernama script.js yang berada di dalam folder js.

Image just for illustration

Penting untuk diingat: Ketika browser membaca tag <script> dengan atribut src, browser akan mengunduh file JavaScript tersebut terlebih dahulu sebelum melanjutkan parsing HTML. Hal ini bisa mempengaruhi performa halaman web, terutama jika file JavaScript berukuran besar atau server tempat file tersebut berada lambat. Oleh karena itu, penting untuk mengoptimalkan ukuran file JavaScript dan mempertimbangkan penggunaan teknik asynchronous atau deferred loading untuk meningkatkan performa.

3. <iframe> (Tag Inline Frame)¶

Tag <iframe> digunakan untuk menyematkan halaman web lain ke dalam halaman web saat ini. Halaman web lain ini bisa berasal dari domain yang sama atau domain yang berbeda. Atribut src pada tag <iframe> digunakan untuk menentukan URL halaman web yang ingin disematkan.

<iframe src="https://www.example.com" width="800" height="600"></iframe>

Pada contoh di atas, src="https://www.example.com" memberitahu browser untuk menyematkan halaman web yang beralamat di https://www.example.com ke dalam halaman web saat ini.

Image just for illustration

Perhatian: Penggunaan <iframe> perlu diperhatikan karena dapat mempengaruhi performa dan keamanan halaman web. Jika halaman web yang disematkan berasal dari sumber yang tidak terpercaya, hal ini bisa menimbulkan risiko keamanan. Selain itu, terlalu banyak <iframe> juga dapat memperlambat loading halaman.

4. <audio> dan <video> (Tag Media)¶

Tag <audio> dan <video> digunakan untuk menyematkan file audio dan video ke dalam halaman web. Meskipun tag-tag ini juga bisa menggunakan tag <source> di dalamnya untuk menentukan berbagai format file media, atribut src juga bisa digunakan langsung pada tag <audio> dan <video> untuk menentukan lokasi file media utama.

<audio controls src="audio/musik.mp3"></audio>

<video controls width="640" height="360" src="video/film.mp4"></video>

Pada contoh di atas, src="audio/musik.mp3" pada tag <audio> menentukan lokasi file audio musik.mp3, dan src="video/film.mp4" pada tag <video> menentukan lokasi file video film.mp4. Atribut controls ditambahkan agar browser menampilkan kontrol pemutar audio/video secara default.

Image just for illustration

Tips Tambahan: Untuk tag <audio> dan <video>, sebaiknya gunakan tag <source> di dalamnya untuk menyediakan berbagai format file media. Hal ini akan memastikan bahwa media dapat diputar di berbagai browser dan perangkat yang berbeda. Contohnya:

<video controls width="640" height="360">
  <source src="video/film.mp4" type="video/mp4">
  <source src="video/film.webm" type="video/webm">
  Browser Anda tidak mendukung tag video.
</video>

Dengan menggunakan tag <source>, browser akan mencoba memutar format file pertama yang didukungnya. Jika tidak ada format yang didukung, pesan “Browser Anda tidak mendukung tag video” akan ditampilkan.

5. <embed> (Tag Embed)¶

Tag <embed> adalah tag generik yang digunakan untuk menyematkan berbagai jenis konten eksternal, seperti Flash, PDF, atau konten multimedia lainnya. Atribut src pada tag <embed> digunakan untuk menentukan lokasi file konten yang ingin disematkan.

<embed src="dokumen/presentasi.pdf" type="application/pdf" width="800" height="600">

Pada contoh di atas, src="dokumen/presentasi.pdf" memberitahu browser untuk menyematkan file PDF yang bernama presentasi.pdf yang berada di dalam folder dokumen. Atribut type="application/pdf" memberitahu browser jenis MIME dari konten yang disematkan.

Image just for illustration

Catatan Penting: Penggunaan tag <embed> semakin jarang digunakan seiring dengan perkembangan web dan munculnya teknologi web standar yang lebih modern seperti HTML5. Untuk konten multimedia, tag <audio> dan <video> lebih disarankan. Untuk dokumen seperti PDF, sebaiknya di-link saja daripada disematkan langsung.

Perbedaan SRC dengan HREF¶

Seringkali atribut src tertukar dengan atribut href. Keduanya memang berfungsi untuk menentukan lokasi sumber daya, namun digunakan dalam konteks yang berbeda.

SRC (Source):

• Digunakan untuk menyematkan atau menampilkan sumber daya langsung di halaman web.
• Sumber daya yang ditunjuk oleh src menjadi bagian integral dari halaman web.
• Contoh penggunaan: <img>, <script>, <iframe>, <audio>, <video>, <embed>.

HREF (Hypertext Reference):

• Digunakan untuk membuat link atau tautan ke sumber daya lain.
• Sumber daya yang ditunjuk oleh href tidak langsung ditampilkan di halaman web, tetapi pengguna perlu mengklik link untuk mengaksesnya.
• Contoh penggunaan: <a> (untuk link), <link> (untuk stylesheet), area (untuk image map).

Analogi Sederhana:

• SRC seperti menempelkan foto di dinding (foto langsung terlihat di dinding).
• HREF seperti memberikan alamat rumah teman (alamat diberikan, tapi rumah teman tidak langsung muncul di dinding).

Tabel Perbedaan SRC dan HREF:

Fitur	SRC (Source)	HREF (Hypertext Reference)
Fungsi	Menyematkan/Menampilkan sumber daya	Membuat link/tautan ke sumber daya
Penggunaan	<img>, <script>, dll.	<a>, <link>, dll.
Tampilan	Sumber daya langsung ditampilkan	Sumber daya diakses melalui link
Kata Kunci	Sumber, sumber daya, sematkan	Referensi, tautan, link

Tips Menggunakan Atribut SRC dengan Efektif¶

Berikut adalah beberapa tips yang bisa kamu terapkan agar penggunaan atribut src lebih efektif dan optimal:

1. Gunakan Path Relatif Sebisa Mungkin: Jika sumber daya (gambar, script, dll.) berada di server yang sama dengan halaman web, gunakan path relatif daripada path absolut. Path relatif lebih fleksibel dan tidak akan bermasalah jika struktur folder website berubah. Contoh path relatif: gambar/logo.png, js/script.js. Contoh path absolut: /websiteku/gambar/logo.png, http://www.domainku.com/js/script.js.

2. Optimalkan Ukuran File Sumber Daya: Pastikan ukuran file gambar, video, atau script yang digunakan dioptimalkan agar loading halaman web tidak lambat. Kompres gambar, minimalkan kode JavaScript dan CSS, dan gunakan format file yang efisien.

3. Gunakan CDN (Content Delivery Network): Untuk file-file statis seperti gambar, script, dan stylesheet, pertimbangkan untuk menggunakan CDN. CDN adalah jaringan server yang tersebar di berbagai lokasi geografis. Dengan menggunakan CDN, file-file statis akan di-serve dari server CDN terdekat dengan lokasi pengguna, sehingga loading halaman menjadi lebih cepat.

4. Perhatikan Keamanan Sumber Daya Eksternal: Jika kamu menggunakan sumber daya dari domain eksternal (misalnya gambar dari website lain atau script dari CDN pihak ketiga), pastikan sumber daya tersebut berasal dari sumber yang terpercaya. Sumber daya dari sumber yang tidak terpercaya bisa berpotensi membahayakan keamanan website dan pengguna.

5. Gunakan Atribut alt pada Tag <img>: Selalu sertakan atribut alt pada tag <img>. Atribut alt digunakan untuk memberikan teks alternatif untuk gambar. Teks alternatif ini akan ditampilkan jika gambar gagal dimuat, dan juga penting untuk aksesibilitas (misalnya untuk pembaca layar bagi pengguna tunanetra).

6. Pertimbangkan Lazy Loading untuk Gambar dan Iframe: Untuk meningkatkan performa loading halaman, terutama halaman yang memiliki banyak gambar atau iframe di bagian bawah halaman, pertimbangkan untuk menggunakan teknik lazy loading. Lazy loading adalah teknik untuk menunda pemuatan sumber daya (gambar atau iframe) hingga sumber daya tersebut benar-benar dibutuhkan (misalnya saat pengguna scroll ke bawah dan sumber daya mulai terlihat di viewport).

Kesimpulan¶

Atribut src adalah atribut penting dalam HTML yang digunakan untuk menentukan sumber daya eksternal yang ingin disematkan atau ditampilkan dalam halaman web. Memahami fungsi dan cara penggunaan atribut src dengan benar adalah fundamental bagi setiap web developer. Dengan menggunakan src secara efektif dan optimal, kita dapat membuat halaman web yang kaya konten, interaktif, dan memiliki performa yang baik.

Semoga artikel ini memberikan pemahaman yang lebih jelas tentang apa itu src dan bagaimana cara menggunakannya. Jika kamu memiliki pertanyaan atau pengalaman menarik terkait penggunaan atribut src, jangan ragu untuk berbagi di kolom komentar di bawah ini!