Başlık bölümünde kullanılan etiketler
Bu makale, head bölümünde kullanılan etiketleri açıklar.
Bu, <link>, <script>, <style> gibi head bölümünde kullanılan etiketleri açıklar.
YouTube Video
Başlık bölümünde kullanılan etiketler
<title> etiketi
1<title>Document Title</title><title>etiketi dökümanın başlığını tanımlar. Bu başlık tarayıcı sekmesinde görüntülenir ve yer imlerinde ve arama sonuçlarında kullanılır.
<link> etiketi
<link>etiketi, harici kaynakları mevcut dökümanla bağlamak için kullanılır. Genellikle harici CSS dosyalarını bağlamak için kullanılır, ancak simgeler ve diğer harici kaynaklar için de kullanılabilir.
<link> Etiketinin rel Özelliği
rel özelliği, <link> etiketinde bağlanan kaynak ile mevcut döküman arasındaki ilişkiyi belirtmek için kullanılır. rel özelliği için birçok değer türü vardır, ancak burada özellikle önemli ve sık kullanılanları açıklayacağız.
stylesheet
1<link rel="stylesheet" href="styles.css">stylesheet, harici bir stil sayfasını bağlamak için kullanılır.
icon
1<link rel="icon" href="favicon.ico" type="image/x-icon">rel="icon", tarayıcı sekmesinde veya yer iminde görüntülenen simgeyi tanımlar. Doğru favicon belirlenerek, sitenin marka kimliği ve görsel tanınırlığı artırılır.
preload
1<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">preload, sayfa render edilmeye başlamadan önce kaynakları önceden yüklemek için kullanılır. Zamanlamanın önemli olduğu yazı tipleri veya büyük görüntüler gibi kaynaklar için özellikle yararlıdır. Bu, performansı artırır ve kullanıcı deneyimini geliştirir.
canonical
1<link rel="canonical" href="https://example.com/page.html">canonical, arama motorlarını bir sayfanın kanonik versiyonu hakkında bilgilendirmek için kullanılır. Yinelenen içerik durumunda, kanonik URL'yi belirtmek, arama motoru sıralamasını birleştirmeye ve içeriğin doğru bir şekilde dizine eklenmesini sağlamaya yardımcı olur.
alternate
1<link rel="alternate" hreflang="en" href="https://example.com/en/">alternate, farklı dillerde veya formatlarda sayfaları arama motorlarına ve tarayıcılara belirtmek için kullanılır. Çok dilli sitelerde, her dil versiyonunun URL'sinihreflangözelliği ile birlikte belirterek kullanıcılara uygun dilde sayfalar sağlayabilirsiniz.
manifest
1<link rel="manifest" href="/manifest.json">manifest, tarayıcıya PWA (Progressive Web App) için yapılandırma bilgilerini içeren bir manifest dosyası sağlar. Bu dosya, uygulama simgesi, tema rengi ve görüntüleme modu gibi bilgileri içerir ve bu bilgiler, PWA'nın mobil cihazlarda kurulmasına ve çalıştırılmasına yardımcı olur.
dns-prefetch
1<link rel="dns-prefetch" href="//example.com">- Harici kaynaklara referans verirken, alan adının DNS çözümlemesini önceden yapmak sayfa yükleme hızını artırabilir. Bu, özellikle çok sayıda harici kaynağa sahip sayfalar veya hızlı bir kullanıcı deneyiminin istendiği durumlar için etkilidir.
<style> etiketi
1<style>
2 body {
3 font-family: Arial, sans-serif;
4 }
5</style><style>etiketi, dahili stil dosyalarını tanımlamak için kullanılır. Sayfadaki öğelere CSS stilleri uygulamak ve harici dosyalar kullanmadan CSS yazmak için kullanılır.
<script> etiketi
1<script>
2 console.log('Hello, World!');
3</script>
4<script src="script.js"></script><script>etiketi, bir HTML belgesine JavaScript kodu eklemek için kullanılır. Ayrıca harici JavaScript dosyalarına bağlantı vererek sayfanın dinamik davranışını kontrol edebilirsiniz. Script dosyasını belirtmek içinsrcözniteliğini kullanın.
async ve defer Öznitelikleri
<script> etiketi, script yükleme ve yürütme zamanlamasını etkileyen async ve defer olmak üzere iki niteliği destekler. Normalde, scriptler tarayıcı tarafından sıralı olarak işlenir, ancak bu nitelikleri kullanmak sayfa performansını ve yükleme deneyimini iyileştirebilir.
async Özniteliği
1<script src="script.js" async></script>asyncniteliğini kullanmak scriptin eşzamansız bir şekilde yüklenmesini sağlar. Tarayıcı, scripti diğer kaynaklarla paralel bir şekilde yükler ve yükleme tamamlandığında hemen yürütür.asyncgenellikle bağımsız scriptler için uygundur ve scriptin diğer scriptlerin veya DOM'un yüklenmesine bağlı olmadığı durumlarda kullanılır.
defer Özniteliği
1<script src="script.js" defer></script>deferniteliğini kullanmak scriptin eşzamansız olarak yüklenmesini ancak HTML çözümlemesi tamamlandıktan sonra yürütülmesini sağlar. Scriptin yürütülmesi sayfa görüntülenmesini engellemez, böylece kullanıcı deneyimini artırır.defer, scriptlerin DOM tamamen yüklendikten sonra yürütülmesi gerektiği durumlarda etkilidir. Örneğin, scriptin sayfanın tüm düzeni ve öğeleri yüklendikten sonra çalışmasını istediğiniz durumlar için uygundur.
CORS Politikası ve crossorigin Özniteliği
Harici scriptler yüklenirken, Aynı-Köken Politikası'na dayalı güvenlik kısıtlamaları uygulanabilir. Böyle durumlarda, kaynak paylaşımına izin vermek için crossorigin niteliği kullanılabilir.
1<script src="https://example.com/script.js" crossorigin="anonymous"></script>crossorigin özelliği aşağıdaki iki değerle ayarlanabilir:.
anonymous: Kimlik bilgileri içermeyen istekler gönderir.use-credentials: Kimlik bilgilerini içeren istekler gönderir.
type Özniteliği
<script> etiketi, script türünü belirtmek için type niteliğini kullanabilir. Varsayılan olarak JavaScript kullanılır, ancak belirli türde scriptleri (örneğin, modül türü JavaScript veya şablon dili) de belirtebilirsiniz.
JavaScript Modülleri
1<script type="module" src="module.js"></script>-
ECMAScript 2015 (ES6) itibariyle, JavaScript modülleri tanıtılmış ve kodun modüllere ayrılmasına olanak tanınmış, böylece yeniden kullanılabilirlik artırılmıştır.
type="module"belirterek scripti bir modül olarak ele alabilirsiniz. -
Modüller,
importveexportkullanarak diğer modüllere ayrılabilir.
JavaScript Dışı Scriptler
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>- JavaScript dışında diğer betikler de
<script>etiketi içinde belirtilebilir. Örneğin, JSON-LD gibi yapılandırılmış verileri tanımlarkentype="application/ld+json"kullanın. Burada JSON-LD, bir web sayfasındaki verileri yapılandıran ve arama motorlarının ve diğer uygulamaların verileri daha derin bir şekilde anlamasına olanak tanıyan bir formattır.
<script> Etiketi Kullanımıyla İlgili Notlar
- Betiklerin Sırası: Betiklerin bağımlı olduğu kütüphaneler, bağlı betiklerden önce yüklenmelidir. Örneğin, jQuery kullanan betikler, jQuery'nin kendisi yüklendikten sonra yüklenmelidir.
- Performans Optimizasyonu: Sayfa yükleme hızını etkilememek için yalnızca gerekli olduğunda betikler yüklenmeli ve gereksiz betiklerin çalıştırılmasından kaçınılmalıdır.
- Güvenlik Önlemleri: Harici betikler kullanılırken, kötü amaçlı betiklerin gömülmesini önlemek için güvenilir kaynaklardan yüklendiğinden emin olun.
<base> etiketi
1<base href="https://example.com/"><base>etiketi, belgedeki tüm göreceli URL'ler için temel URL'yi belirler.hrefözniteliğinde belirtilen URL, bağlantılarda ve görüntülerde göreceli yollar için temel olur. Genellikle sayfa başına bir kez kullanılır.
<noscript> etiketi
1<noscript>Your browser does not support JavaScript!</noscript><noscript>etiketi, tarayıcıda JavaScript devre dışı bırakıldığında görüntülenen içeriği tanımlar. JavaScript'in desteklenmediği ortamlar için alternatif içerik sunmak amacıyla kullanılır.
Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.