HTML <meta> etiketi

Tanım ve Kullanım

<meta> etiketi, HTML belgesi hakkında meta verileri tanımlar. Meta veriler, veri hakkında verilerdir (bilgi).

<meta> etiketi her zaman <head> ögesi İçerisinde, genellikle karakter kümesi, sayfa açıklaması, anahtar kelimeler, belge yazarı ve görünüm ayarları için kullanılır:

Metaveriler sayfada görüntülenmez, ancak makinalar tarafından çözümlenebilir.

Tarayıcılar (içeriğin nasıl görüntüleneceği veya sayfanın yeniden yüklenmesi), arama motorları (anahtar kelimeler) ve diğer ağ hizmetleri metaverileri kullanır.

İpucu:meta ögesi çeşitli kullanımlara sahiptir ve bir HTML belgesinde birden fazla meta ögesi olabilir.

İpucu:Yoluyla <meta> Etiket, web tasarımcısının kullanıcı web sayfasında görebileceği alanı (yani kullanıcı alanını) kontrol etmesine olanak tanır (aşağıdaki "Görünümü Ayarlama" örneğine bakın).

Dikkat:Her meta ögesi yalnızca bir amaç için kullanılabilir. Kullanmak istediğiniz özellik birden fazla ise, head ögesine birden fazla meta ögesi eklemelisiniz.

Ayrıca bakınız:

HTML Eğitimi:HTML Başlığı

HTML DOM Referans Kılavuzu:Meta nesnesi

Örnek

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Ücretsiz Web Eğitimi">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Bill Gates">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Kişisel olarak deneyin

Özellik

Özellik Değer Açıklama
charset Karakter kümesi HTML belgesinin karakter kodunu belirtir.
content Metin Belirtilen değer, http-equiv veya name özellikleri ile ilişkilendirilen değerdir.
http-equiv
  • content-security-policy
  • content-type
  • default-style
  • refresh
 content özelliği için bilgi/değer bilgilerine HTTP başlık bilgisi sağlar.
name
  • application-name
  • author
  • description
  • generator
  • keywords
  • viewport
 meta verilerin adını belirler.

genel özellikleri

<meta> etiketi, HTML'deki genel özellikler.

meta elementi üç tipik kullanım şekli vardır:

  1. Ad/değer meta veri çiftlerini belirtme
  2. Karakter kodlaması beyan etme
  3. HTTP başlık alanlarını simüle etme

1: Çeşitli ad/değer meta veri çiftlerini belirtme

meta elementi, name ve content özelliklerini kullanarak meta verilerini tanımlayabilir. Bunu yapmak için name ve content özelliklerine ihtiyaç duyulur.

Arama motorları için anahtar kelimeleri tanımlayın:

<meta name="keywords" content="HTML, CSS, JavaScript">

Web sayfası hakkında bir açıklama tanımlayın:

<meta name="description" content="Free Web tutorials for HTML and CSS">

Sayfanın yazarını tanımlayın:

<meta name="author" content="John Doe">

Görünümü ayarlayarak, web sitesinin çeşitli cihazlarda nasıl görüneceğini iyileştirme:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2: Karakter kodlaması beyan etme

Bu sayfanın UTF-8 karakter kodlamasını beyan etmek için charset özelliğini kullanın:

<meta charset="UTF-8">

3: HTTP başlık alanlarını simüle etme

http-equiv özelliği ve content özelliği kullanarak, belgeyi 30 saniyede bir yenilemek için:

<meta http-equiv="refresh" content="30">

HTML5'teki değişiklikler

charset özelliği HTML5'te yeni eklenmiştir.

HTML4'te http-equiv özelliği herhangi bir sayıda farklı değer olabilir. HTML5'te ise sadece bu sayfada bahsedilen değerler kullanılabilir.

HTML4'teki scheme özelliği HTML5'te artık kullanılmaz.

Ayrıca, artık meta elementi ile web sayfasının dilini belirtmek için kullanılmaz.

görünüm ayarlamak için

HTML5, web tasarımcılarının <meta> etiketlerini içermelisiniz.

Tüm web sayfalarında aşağıdaki <meta> Görünüm elementi:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Tarayıcıya sayfa boyutunu ve ölçek oranını nasıl kontrol edeceğine dair talimatlar sağlar.

width=device-width sayfanın genişliğini cihaz ekranının genişliğine ayarlar (cihazına bağlı olarak).

Tarayıcı web sayfasını ilk kez yükleme sırasındainitial-scale=1.0 Bazı ayarlar başlangıç ölçek seviyesini belirler.

Aşağıda, görüntü alanı meta etiketi olmayan web sayfası ve görüntü alanı meta etiketi olan web sayfasının örnekleri verilmiştir:

İpucu:Bu sayfayı telefon veya tablet ile tarıyorsanız, farklılıkları görmek için aşağıdaki iki bağlantıyı tıklayabilirsiniz.



Görüntü Alanı Meta Etiketi Olmadan


Görüntü Alanı Meta Etiketi ile

Varsayılan CSS Ayarları

Yok.

Tarayıcı Desteği

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Destek Destek Destek Destek Destek