Tag yang digunakan di bagian kepala

Artikel ini menjelaskan tag yang digunakan di bagian kepala.

Ini menjelaskan tag yang digunakan di bagian head, seperti <link>, <script>, <style>.

YouTube Video

Tag yang digunakan di bagian kepala

Tag <title>

1<title>Document Title</title>

• Tag <title> mendefinisikan judul dokumen. Judul ini ditampilkan di tab browser dan digunakan dalam penanda dan hasil pencarian.

Tag <link>

• Tag <link> digunakan untuk menautkan sumber daya eksternal ke dokumen saat ini. Ini biasanya digunakan untuk menautkan file CSS eksternal tetapi juga dapat digunakan untuk ikon dan sumber daya eksternal lainnya.

Atribut rel dari Tag <link>

Atribut rel digunakan untuk menentukan hubungan antara sumber daya yang ditautkan dan dokumen saat ini dalam tag <link>. Ada banyak jenis nilai untuk atribut rel, tetapi di sini kami akan menjelaskan yang sangat penting dan sering digunakan.

stylesheet

1<link rel="stylesheet" href="styles.css">

• stylesheet digunakan untuk menautkan stylesheet eksternal.

icon

1<link rel="icon" href="favicon.ico" type="image/x-icon">

• rel="icon" mendefinisikan ikon yang ditampilkan di tab atau penanda browser. Dengan menentukan favicon yang tepat, branding situs dan pengenalan visual ditingkatkan.

preload

1<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

• preload digunakan untuk memuat sumber daya terlebih dahulu sebelum rendering halaman dimulai. Ini sangat berguna untuk sumber daya di mana waktu sangat penting, seperti font atau gambar besar. Ini meningkatkan kinerja dan memperbaiki pengalaman pengguna.

canonical

1<link rel="canonical" href="https://example.com/page.html">

• canonical digunakan untuk memberi tahu mesin pencari tentang versi kanonik dari sebuah halaman. Dalam kasus konten duplikat, menunjukkan URL kanonik membantu mengkonsolidasikan peringkat mesin pencari dari perspektif SEO dan memastikan konten diindeks dengan benar.

alternate

1<link rel="alternate" hreflang="en" href="https://example.com/en/">

• alternate digunakan untuk menunjukkan halaman dari bahasa atau format yang berbeda kepada mesin pencari dan browser. Dalam situs multibahasa, Anda dapat menentukan URL untuk setiap versi bahasa dengan kombinasi atribut hreflang untuk menyediakan halaman kepada pengguna dalam bahasa yang sesuai.

manifest

1<link rel="manifest" href="/manifest.json">

• manifest memberikan file manifest kepada browser yang berisi informasi konfigurasi untuk PWA (Progressive Web App). File ini berisi informasi seperti ikon aplikasi, warna tema, dan mode tampilan, yang membantu dalam menginstal dan menjalankan PWA di perangkat seluler.

dns-prefetch

1<link rel="dns-prefetch" href="//example.com">

• Saat merujuk sumber daya eksternal, melakukan resolusi DNS domain sebelumnya dapat meningkatkan kecepatan pemuatan halaman. Ini sangat efektif untuk halaman dengan banyak sumber daya eksternal atau di mana pengalaman pengguna yang cepat diinginkan.

Tag <style>

1<style>
2  body {
3    font-family: Arial, sans-serif;
4  }
5</style>

• Tag <style> digunakan untuk mendefinisikan lembar gaya internal. Ini digunakan untuk menerapkan gaya CSS ke elemen-elemen di halaman, memungkinkan Anda menulis CSS tanpa menggunakan file eksternal.

Tag <script>

1<script>
2    console.log('Hello, World!');
3</script>
4<script src="script.js"></script>

• Tag <script> digunakan untuk menyematkan kode JavaScript ke dalam dokumen HTML. Anda juga dapat menghubungkan file JavaScript eksternal, mengontrol perilaku dinamis dari halaman. Gunakan atribut src untuk menentukan file skrip.

Atribut async dan defer

Tag <script> mendukung dua atribut, async dan defer, yang memengaruhi waktu pemuatan dan eksekusi skrip. Biasanya, skrip diproses secara berurutan oleh browser, tetapi menggunakan atribut ini dapat meningkatkan kinerja halaman dan pengalaman pemuatan.

Atribut async

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

• Menggunakan atribut async memungkinkan skrip dimuat secara asinkron. Browser memuat skrip secara paralel dengan sumber daya lainnya dan menjalankannya segera setelah pemuatan selesai.
• async terutama cocok untuk skrip independen dan digunakan saat skrip tidak bergantung pada pemuatan skrip lain atau DOM.

Atribut defer

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

• Menggunakan atribut defer memungkinkan skrip dimuat secara asinkron tetapi dijalankan setelah parsing HTML selesai. Eksekusi skrip tidak menghalangi tampilan halaman, sehingga meningkatkan pengalaman pengguna.
• defer efektif ketika skrip perlu dijalankan setelah DOM sepenuhnya dimuat. Sebagai contoh, ini cocok ketika Anda ingin skrip berjalan setelah seluruh tata letak dan elemen halaman telah dimuat.

Kebijakan CORS dan Atribut crossorigin

Saat memuat skrip eksternal, pembatasan keamanan mungkin diberlakukan berdasarkan Kebijakan Same-Origin. Dalam kasus seperti itu, atribut crossorigin dapat digunakan untuk memungkinkan berbagi sumber daya.

1<script src="https://example.com/script.js" crossorigin="anonymous"></script>

Atribut crossorigin dapat diatur dengan dua nilai berikut:.

• anonymous: Mengirimkan permintaan tanpa menyertakan kredensial.
• use-credentials: Mengirimkan permintaan yang menyertakan kredensial.

Atribut type

Tag <script> dapat menggunakan atribut type untuk menentukan jenis skrip. Secara default, JavaScript digunakan, tetapi Anda juga dapat menentukan jenis skrip tertentu (misalnya, JavaScript tipe modul atau bahasa template).

Modul JavaScript

1<script type="module" src="module.js"></script>

• Sejak ECMAScript 2015 (ES6), modul JavaScript telah diperkenalkan, memungkinkan kode dibagi menjadi modul-modul, meningkatkan kegunaannya kembali. Dengan menentukan type="module", Anda dapat memperlakukan skrip sebagai modul.

• Modul dapat dibagi ke dalam modul lain menggunakan import dan export.

Skrip Non-JavaScript

1<script type="application/ld+json">
2{
3  "@context": "https://schema.org",
4  "@type": "Organization",
5  "name": "Example Inc.",
6  "url": "https://www.example.com"
7}
8</script>

• Skrip selain JavaScript juga dapat ditentukan di dalam tag <script>. Sebagai contoh, gunakan type="application/ld+json" saat mendeskripsikan data terstruktur seperti JSON-LD. Di sini, JSON-LD adalah format yang menyusun data pada halaman web, memungkinkan mesin pencari dan aplikasi lain untuk memahami data dengan lebih mendalam.

Catatan tentang Penggunaan Tag <script>

• Urutan Skrip: Pustaka yang bergantung pada skrip harus dimuat sebelum skrip yang bergantung. Sebagai contoh, skrip yang menggunakan jQuery harus dimuat setelah jQuery itu sendiri.
• Optimasi Kinerja: Untuk menghindari mempengaruhi kecepatan pemuatan halaman, hanya muat skrip saat diperlukan dan hindari menjalankan skrip yang tidak perlu.
• Langkah-langkah Keamanan: Saat menggunakan skrip eksternal, pastikan mereka dimuat dari sumber yang terpercaya untuk mencegah tersematnya skrip berbahaya.

Tag <base>

1<base href="https://example.com/">

• Tag <base> menetapkan URL dasar untuk semua URL relatif dalam dokumen. URL yang ditentukan dalam atribut href menjadi dasar untuk jalur relatif dalam tautan dan gambar. Biasanya digunakan hanya sekali per halaman.

Tag <noscript>

1<noscript>Your browser does not support JavaScript!</noscript>

• Tag <noscript> mendefinisikan konten yang ditampilkan saat JavaScript dinonaktifkan di browser. Digunakan untuk menyediakan konten alternatif untuk lingkungan di mana JavaScript tidak didukung.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video