HTML5 İzin Verilen Attribute Değerleri a EtiketiBildiğiniz üzere HTML5 HTML’in son sürümüdür ve HTML5 yazarken w3c’nin belirlediği standartlar ile yazmamız gerekmek. HTML5 İzin Verilen Attribute Değerleri adı altında tüm etiketleri inceleyeceğiz.
Eğer yeni makalelerim’den anında haberdar olmak istiyorsanız Facebook Sayfamı beğenebilir veya bildirimleri açabilirsiniz çok uzatmadan konumuza geçelim.
Makale İçeriği
- HTML5 a (Anchor) Etiketi Nedir?
- HTML5 a Etiketin’de Hangi Attribute Değerlerine İzin Verilmekte
- HTML5 a Etiketi href Özniteliği(Attributes)
- HTML5 a Etiketi download Özniteliği(Attributes)
- HTML5 a Etiketi hreflang Özniteliği(Attributes)
- HTML5 a Etiketi media Özniteliği(Attributes)
- HTML5 a Etiketi ping Özniteliği(Attributes)
- HTML5 a Etiketi referrerpolicy Özniteliği(Attributes)
- HTML5 a Etiketi rel Özniteliği(Attributes)
- HTML5 a Etiketi target Özniteliği(Attributes)
- HTML5 a Etiketi type Özniteliği(Attributes)
HTML5 a etiketi site içerisinde kullanıcıların daha rahat dolaşması ve istediklerini bulması için site için link(url) vermemize veyahut başka sitelere link vermemize olanak sağlayan bir etikettir.
Aşağıdaki şekilde kullanılmaktadır.
<a href="https://www.halilbeycan.com">Link'e Vereceğiniz İsim</a>HTML5 a Etiketin’de Hangi Attribute Değerlerine İzin Verilmekte
Öncelikle neden HTML yerine HTML5 diye nitelendiriyorum çünkü eski HTML sürümlerinde kullanılan “Attribute”değerlerine bakmayacağız HTML5 sürümündekilere bakacağız.
- href
- download
- hreflang
- media
- ping
- referrerpolicy
- rel
- target
- type
Diğer türlü kafanıza göre bir kullanım yaptığınızda W3C HTML VALİDATOR adresinden tarama yaparsanız izin verilmeyen kullanım hatasını aldığınızı görürsünüz.
Şimdi yukarıda listelediğimiz değerlerin ne işe yaradıklarına göz atalım isterseniz.
HTML5 a Etiketi href Özniteliği(Attributes)
href özniteliği bağlantının hedefini yani url adresini belirtmemize olanak tanır yukarıda da gösterdiğim ve aşağıda da göreceğiniz gibi bir kullanımı bulunmaktadır.
<a href="https://www.halilbeycan.com">Link'e Vereceğiniz İsim</a>NOT: Arkadaşlar öncelikle şunu belirtmek isterim konumuz ile alakası yok ama var html’de iki attribute arasında mutlaka boşluk olmalıdır. Eğer boşluk yoksa bir bozulma sorun teşkil etmez lakin. W3C Gözünde bu bir sorundur.
Örnek olarak aşağıdaki gibi olmalıdır.
Yanlış kullanım:
<a href="https://www.halilbeycan.com"target="_blank">Link'e Vereceğiniz İsim</a>Doğru kullanım:
<a href="https://www.halilbeycan.com" target="_blank">Link'e Vereceğiniz İsim</a>Yukarı da gördüğünüz gibi href = çift tırnaklardan sonra boşluk bırakmadan target yazılmış bu yanlış bir kullanımdır buna dikkat etmenizi öneririm.
HTML5 a Etiketi download Özniteliği(Attributes)
download özniteliği ise linkin bir indirme bağlantısı olduğunu belirtir misal örnek olarak href özniteliğine bir resim adresi verdiğiniz aşağıdaki gibi.
<a href="https://www.halilbeycan.com/wp-content/uploads/2020/01/wordpress-listeleme-donguleri-ve-fonksiyonlari.jpg">Link'e Vereceğiniz İsim</a>Eğer yukarıda ki şekilde kullanırsanız resim’in bulunduğu adrese gider ama siz bu linke tıklayınca resmi indirmesini istiyor iseniz o zaman yardımınıza downland özniteliği koşmakta.
<a href="https://www.halilbeycan.com/wp-content/uploads/2020/01/wordpress-listeleme-donguleri-ve-fonksiyonlari.jpg" download>Link'e Vereceğiniz İsim</a>Yukarı daki gibi download eklediğiniz’de adrese gitmek yerine adres teki dosyayı indirmenizi sağlar.
HTML5 a Etiketi hreflang Özniteliği(Attributes)
hreflang özniteliği ise bağlantıdaki dosyanın dilini belirtir aşağıda ki şekilde kullanılmaktadır.
<a href="https://www.halilbeycan.com/wp-content/uploads/2020/01/wordpress-listeleme-donguleri-ve-fonksiyonlari.jpg" hreflang="tr">Link'e Vereceğiniz İsim</a>HTML5 a Etiketi media Özniteliği(Attributes)
media özniteliği kullanılan a etiketinin hangi cihaz için platform için optimize edildiğini belirtir örnek olarak iphone gibi konuşma basılı tutma vb. Media özniteliği birden fazla değer kabul edebilir.
Ama bu değerler biraz fazla olduğundan onları başka bir makalede detaylı olarak anlatacağım.
Aşağıda ki şekilde kullanımı mevcuttur.
<a href="https://www.halilbeycan.com/wp-content/uploads/2020/01/wordpress-listeleme-donguleri-ve-fonksiyonlari.jpg" media="print and (resolution:300dpi)">Link'e Vereceğiniz İsim</a>HTML5 a Etiketi ping Özniteliği(Attributes)
ping özniteliği ise kullanıcı oluşturduğunuz bağlantıya tıkladığında bildirilecek bir url tanımanıza olanak sağlar. Örnek vermek gerekirse misal kaç kişi bu bağlantıya tıkladı bunu saymak istiyorsunuz diyelim.
Aşağıda ki şekilde kullanım yapabilirsiniz.
<a href="https://www.halilbeycan.com" ping="https://www.halilbeycan.com/izleme.php">Link'e Vereceğiniz İsim</a>Kullanıcı yukarıda ki bağlantıya tıkladığında “https://www.halilbeycan.com/izleme.php” adresine bir HTTP POST isteği gönderir siz bu izleme.php dosyasında bu post isteiğini kontrol ederek değeri arttırabilirsiniz.
Böylece kaç kişi adrese tıklamış bunu kolayca öğrenebilirsiniz.
HTML5 a Etiketi referrerpolicy Özniteliği(Attributes)
referrerpolicy özniteliği url’i yönlendirenin bilgisini girmenize izin verir yine bu özniteliğin aldığı değerleri başka bir makalede detaylıca anlatacağım. Aşağıda ki gibi kullanımı mevcuttur.
<a href="https://www.halilbeycan.com" referrerpolicy="origin">Link'e Vereceğiniz İsim</a>HTML5 a Etiketi rel Özniteliği(Attributes)
rel özniteliği url’in kullanıldığı sayfa ile url’in hedef sayfasında ki ilişkiyi belirtmektedir. Aşağıda ki şekilde kullanabilirsiniz.
<a href="https://www.halilbeycan.com" rel="nofollow">Link'e Vereceğiniz İsim</a>Şimdi soran olur belki aldığı değerleri neden başka makalede anlatacaksın diye bu öznitelikler sadece a etiketi için geçerli değil diğer etiketlerde de kullanılmakta yani kendimi tekrar etmemek için bu yolu izliyorum.
HTML5 a Etiketi target Özniteliği(Attributes)
target özniteliği verilen adresin nasıl açılacağını belirtmenize yarar örnek olarak bulunduğunuz sayfada yeni sekmede yeni bir pencerede.
Aldığı değerler ise şöyledir.
_blank
Bağlantının yeni sekmede açılacağını bildirir.
_self
Bağlantının bulunduğunuz pencerede açılacağını belirtir. Ayrıca varsayılan değerdir.
_parent
Bağlantının üst pencerede açılmasını sağlar.
_top
Bağlantının pencerenin tüm gövdesinde açılmasını sağlar.
Aşağıda ki şekilde kullanımı mevcuttur.
<a href="https://www.halilbeycan.com" target="_blank">Link'e Vereceğiniz İsim</a>HTML5 a Etiketi type Özniteliği(Attributes)
type özniteliği bağlantının türünü belirtir misal bir web sayfasımı resimmi bunun gibi. Aşağıdaki şekilde kullanımı mevcuttur değerlerine yine ayrı bir konuda değineceğim.
<a href="https://www.halilbeycan.com" type="text/html">Link'e Vereceğiniz İsim</a>Eğer makalemin yararı dokunduysa bu beni çok mutlu eder destek olmak ve daha çok kişinin bilinçli bir şekilde html kodlama yapmasına yardım etmek için paylaşabilirsiniz.
Ayrıca merak ettiğiniz ve aklınıza takılan yerleri yorum yaparak bana iletebilirsiniz.
Bir sonraki HTML5 İzin Verilen Attribute Değerleri konusunda görüşmek üzere selamet ile kalın. Ayrıca eğer wordpress blog teması arayışın var ise kendi geliştirmişim olduğum MikiBLOG WordPress Teması na göz atabilirsin.
Kaynak: https://www.halilbeycan.com/html5/html5-izin-verilen-attribute-degerleri.html
