PAYLAŞ
HTML5 Etiketleri
HTML5 Etiketleri

HTML tarafından tanımlanan tüm html5 etiketleri JavaScript tarafında DOM (Document Object Model) IDL (Interface Definition Language, Arayüz tanımlama dili) ile tanımlanmış birer nesne olarak işlem görür. Yani aslında tanımladığınız etiketler çalışma (yorumlanma) anında kendileri için tanımlanmış DOM arayüzleri kullanılarak nesnelere dönüştürülür. JavaScript tarafında html5 etiketleri ya direk HTMLElement arayüzü ile ya da bu arayüzü miras alan kendi arayüzleri ile tanımlanmış birer nese olarak kullanılır. Arayüzler kendilerini kullanan elemanlar için özellikler, metotlar ve sabitler tanımlar.

ROOT

<html> etiketi ana (kapsayıcı) eleman olarak kullanılır. Tüm diğer etiketler bu etiket içerisinde tanımlanır. (<!DOCTYPE html> tanımlaması hariç).

Özellikleri : Standart özellikler,

manifest[HTML5]:{URL} Çevrimdışı kullanımlarda içeriğin ön belleğe alınma durumunu denetler.
DOM Arayüzü : HTMLhtmlElement
Varsayılan Görüntü Özellikleri : 
html{
display:block;}
html:focus{
outline:none;}

Kullanımı : Açılış ve kapanış etiketleri gereklidir.

HEAD

HTML belgesi için üst veri kaynaklarını tanımlayan head, title, base, link, meta ve style html5 etiketleri metadata elemanları olarak tanımlanır.

Diğer metadata etiketlerini kapsayan temel etikettir. Özet olarak sayfada gözükmeyen tanımlama bloklarının yer aldığı kısımdır.
Özellikleri : Standart özellikler,
DOM Arayüzü : HTMLHeadElement
Varsayılan Görüntü Özellikleri :
head {
display:none;}
Kullanımı : Açılış ve kapanış etiketleri gereklidir.

TITLE

HTML belgesi için üst veri kaynaklarını tanımlayan head, title, base, link, meta, style elemanları metadata eleman olarak tanımlanır.

Web sayfası görüntülenirken tarayıcı penceresi başlığında ve sekme başlığında gösterilecek metni tanımlar. Sayfa sık kullanılanlara eklendiğinde ya da arama motoru sonuçlarında sayfa için tanımlanan bu başlık kullanılır. Sadece head elemanı içerisinde kullanılabilir.

Özellikleri : Standart özellikler,
DOM Arayüzü : HTMLTitleElement
Varsayılan Görüntü Özellikleri :
title {
display:none;}
Kullanımı : Açılış ve kapanış etiketleri gereklidir.

BASE

HTML belgesi için üst veri kaynaklarını tanımlayan head, title, base, link, meta, style elemanları metadata eleman olarak tanımlanır.

Sayfadaki tüm göreceli URL (Uniform Resource Locator – Kaynak Tanımlayıcı / Bulucu)’ler için temel bir URL tanımlar. Sadece head elemanı içerisinde kullanılabilir.

Özellikleri : Standart özellikler,
href : {URL} Belge için temel URL adresini tanımlar.
target : {Browsing-context adı ya da keyword} Sayfadaki tüm linkler için target tanımlaması yapmaya yarar. Target özelliği, bağlantının (sayfanın) nerede gösterileceğini ayarlamak için kullanılır.
target özelliğine bir browsing-context (örneğin; pencere adı ya da iframe adı) atanabileceği gibi aşağıdaki anahtar kelimelerde atanabilir. (keyword özellik için önceden tanımlanan anahtar kelime demektir)

_blank : Bağlantılı sayfa yeni bir pencerede açılır.
_self : Bağlantılı sayfa aynı pencerede içinde açılır. (varsayılan)
_parent, _top : HTML5 frameset yapısını desteklemediğinden, bu iki değer çoğunlukla iframe’de içeriğin açılması için kullanılabilir.

DOM Arayüzü : HTMLBaseElement
Kullanımı : Void element olduğundan sadece açılış etiketine sahiptir. <base> ya da <base/> şeklinde kullanılabilir.

LINK

HTML belgesi için üst veri kaynaklarını tanımlayan head, title, base, link, meta, style elemanları metadata eleman olarak tanımlanır.

HTML bağlantı elemanı, web belgesi için dışarıdan harici kaynak bir dosya tanımlamaya yarar. Genelde harici bir CSS dosyasını sayfaya bağlamak için kullanılır.

Özellikleri : Standart özellikler,
href : {URL} Sayfaya bağlanacak kaynak dosyaların URL’sini tanımlamak için kullanılır. Bu adres mutlak ya da göreceli olabilir.
rel : {Keyword} Geçerli belge ile belgeye bağlanacak kaynak arasındaki ilişkiyi tanımlar. Örneğin; sayfa ile CSS dosyası arasındaki ilişkiyi tanımlamak için rel=”stylesheet” tanımlaması yapılması gerekli.
media : {Media query} Sayfaya bağlanan belgenin hangi ortam ya da aygıt için optimize edildiğini tanımlar. Bu özelliğe Media query (Medya sorgusu) tipinde bir ifade atanır. Medya sorguları önceden tanımlı devices bildirimlerinden ve değerlerinden oluşur. Bu özelliği kullanarak CSS kodlarının hangi ortamlarda çalışacağını deklare edebilirsiniz.
hreflang : {Dil kodu} Sayfaya bağlanan kaynak belgedeki metnin dilini tanımlamak için kullanılır.
type : {MIME_type} Sayfaya bağlanan belgenin içerik tipini tanımlamak için kullanılır.
sizes : [HTML5] {Height x Width ya da any} Sayfaya bağlanan kaynak belgenin boyutunu tanımlamak için kullanılır. Sadece rel=”icon” tanımlaması ile kullanılabilir.

DOM Arayüzü : HTMLLinkElement
Varsayılan Görüntü Özellikleri :
link {
display: none; }
Kullanımı : Void element olduğundan sadece açılış etiketine sahiptir. <link> yada <link/> şeklinde kullanılabilir.

META
HTML belgesi için üst veri kaynaklarını tanımlayan head, title, base, link, meta ve style html5 etiketleri metadata eleman olarak tanımlanır.

Bu etiket head elemanı içerisinde tanımlanır ve sayfa hakkında tarayıcılara ya da arama motorlarına bir takım bilgiler sunar.

Özellikleri : Standart özellikler,
name : {Alt özellik adı} Meta etiketi içerisinde değer atanacak önceden tanımlı ait özellikler isimlerini tanımlamak için kullanılır. bu özellik ile tanımlanan alt özelliğe değer için content özelliği kullanılır. name özelliğine atanabilecek alt özellik isimleri aşağıda verilmiştir.

  • application-name : Uygulama adını tanımlamak için kullanılır.
  • author : Web sayfasını oluşturan kişi hakkında bilgi yazmak için kullanılır.
  • description : Sayfa içeriği ile ilgili bilgi (açıklama) tanımlamak için kullanılır.
  • generator : Sayfanın oluşturulduğu program ile ilgili bilgi tanımlamak için kullanılır.
  • keywords : Arama motorları için virgülle ayrılmış anahtar kelimeler tanımlamak için kullanılır.

Yukarıdaki alt özellikler dışında WHATWG MetaExtensions ile tanımlanan creator, googlebot, publisher, robots, slurp, viewport alt özelliklerde kullanılabilir.
http-equiv : {Alt özellik adı} default-style, refresh alt özelliklerini değer atamak için tanımlar. Belirtilen alt özelliklere content özelliği ile değerleri atanır.

  • default-style : Alternatif stil tanımlaması yapmak için kullanılır.
  • refresh : Belirtilen süre sonunda sayfayı tekrar yüklemek ya da başka bir URL adresine yönlendirmek için kullanılır.

content : {Metin} name ya da http-equiv ile tanımlanan alt özelliklere değer atamak için kullanılır.
charset [HTML5] : {Karakter seti adı} Sayfada kullanılan karakter seti kümesini tanımlamak için kullanılır.
DOM Arüyüzü : HTMLMetaElement
Kullanımı : Void element olduğundan, sadece açılış etiketine sahiptir. <meta> ya da <meta/> şeklinde kullanılabilir.

STYLE

HTML belgesi için üst veri kaynaklarını tanımlayan head, title, base, link, meta ve style html5 etiketleri metadata eleman olarak tanımlanır.

head etiketi içerisinde CSS bildirimleri yazmak için kullanılır. head etiketi içerisinde birden fazla style tanımlaması yapılabilir. style etiketi seçici ismiyle etiketlendirilmiş bildirim bloklarını içerir.

Özellikleri : Standart Özellikler,
type : {text/css} style etiketi için içerik türü tanımlar.
media : {Media query} style etiketi içerisindeki bildirimlerin hangi ortam ya da aygıt için optimize edildiğini tanımlar. Bu özelliğe Media query (medya sorgusu) tipinde bir ifade atanır. Medya sorguları önceden tanımlı devices bildirimlerinden ve değerlerinden oluşur. Bu özelliği kullanarak CSS kodlarının hangi ortamlarda çalışacağını deklare edebilirsiniz.
scoped [HTML5] : {Boolean tipi bir özelliktir} Bir eleman içerisinde style tanımlaması yapılması durumunda CSS bildirimlerinin (seçici adına bağlı olarak) uygulanacağı elemanları tanımlar.
DOM Arayüzü : HTMLStyleElement
Varsayılan Görüntü Özellikleri : 
style {
display: none;}
Kullanımı : Açılış ve kapanış etiketleri gereklidir.

SCRIPT

Belgeye JavaScript gibi istemci taraflı çalışan kod blokları eklemeye yarar. head ya da body html5 etiketleri içerisinde tanımlanabilir.

<SCRIPT>

Özellikleri : Standart Özellikler,
src : {URL} Harici bir script dosyasını belgeye dahil etmek için kullanılır. Script tag’leri içinde src parametresi kullanılırsa, <script></script> blokları arasına kod yazılmaz.

async [HTML5] : {Boolean tipi bir özelliktir} Harici bir JavaScript dosyasındaki kodların sayfa yüklendikten sonra çalıştırılmasını sağlar. Bu özellik sadece src özelliği ile harici bir JavaScript dosyası tanımlandığı zaman kullanılabilir.

defer :{Boolean tipi bir özelliktir} Harici bir JavaScript dosyasındaki kodların sayfa yüklendikten sonra çalıştırılmasını sağlar. Bu özellik sadece src özelliği ile harici bir JavaScript dosyası tanımlandığı zaman kullanılabilir.

type :{MIME_type} Script elemanı içerik tipini tanımlamak için kullanılır. Script etiketleri içerisine JavaScript kodları yazacaksanız, type=”text/JavaScript” şeklinde tanımlanmalıdır.

charset : {Karakter seti adı} Karakter kümesinin tanımı için kullanılır.

DOM Arayüzü : HTMLScriptelement
Varsayılan Görüntü Özellikleri : 
script{
display:none;}
Kullanımı : Açılış ve kapanış etiketleri gereklidir.

<NOSCRIPT>

Bu etiket type özelliğinin aldığı değer ile beraber script etiketinin desteklenmemesi ya da JavaScript’in devre dışı bırakılması olasılığına karşı alternatif içerikler oluşturmak için kullanılır.
Özelikleri : Standart Özellikler,
DOM Arayüzü : HTMLElement
Kullanımı : Açılış ve kapanış etiketleri geçerlidir.