Web Sayfası Anatomisi ve HTML

Web sayfasının içerik ve yapısını tanımlayan işaretleme dili.

DOCTYPE, html, head ve body bölümlerinden oluşan tam web belgesi.

Tarayıcıya belgenin modern HTML standardında yorumlanacağını bildirir.

Belgedeki tüm HTML içeriğini kapsayan kök eleman.

Metadata, stil, script bağlantıları ve SEO bilgilerini taşıyan bölüm.

Kullanıcıya görünen sayfa içeriğinin bulunduğu bölüm.

HTML elemanını başlatan veya sonlandıran işaret.

Açılış etiketi, içerik ve kapanış etiketinden oluşan HTML birimi.

Bir HTML elemanına id, class, href veya alt gibi ek bilgi veren özellik.

HTML elemanlarının kurallı biçimde birbirinin içine yerleştirilmesi.

İçeriğin anlamını nav, main, article ve footer gibi doğru elemanlarla ifade etme.

Sayfanın veya bölümün üst kısmındaki logo, başlık, navigasyon ve araçları içeren alan.

Header üstünde kampanya, iletişim veya kısa bildirim gösteren ince alan.

Kullanıcının sayfalar arasında geçiş yapmasını sağlayan menü bölümü.

Sitenin birincil sayfa ve kategorilerine erişim sağlayan ana navigasyon.

Çok sayıda kategori ve bağlantıyı geniş panel içinde sunan menü.

Küçük ekranlarda açılıp kapanan mobil navigasyon.

Mobil menüyü açan üç çizgili yaygın ikon butonu.

Kullanıcının site hiyerarşisindeki konumunu gösteren bağlantı zinciri.

Ana içeriğin yanında filtre, menü veya ek bilgiler taşıyan yan alan.

Sayfanın birincil bilgi veya işlem alanı.

Sayfadaki tematik içerik grubunu temsil eden semantik bölüm.

Tek başına anlamlı ve dağıtılabilir içerik birimi.

Ana içerikle ilişkili ancak ikincil bilgi bölümü.

Sayfanın altındaki iletişim, yasal bağlantı, menü ve telif bilgileri alanı.

Sayfanın üstünde ana mesajı, görseli ve çağrıyı öne çıkaran geniş bölüm.

Kampanya, duyuru veya yönlendirme için kullanılan dikkat çekici yatay alan.

Başlık, görsel, metin ve aksiyonları tek görsel blokta sunan bileşen.

İçerik kartlarını satır ve sütun düzeninde yerleştiren yapı.

Benzer içerikleri alt alta veya madde biçiminde gösteren yapı.

Satır ve sütunlardan oluşan yapılandırılmış veri gösterimi.

Tablonun sütun başlıklarını içeren bölümü.

Tablonun ana veri satırlarını içeren bölümü.

Tablonun özet veya toplam satırlarını içeren bölümü.

Uzun listenin birden fazla sayfaya bölünüp gezilmesini sağlayan bileşen.

Kullanıcı aşağı indikçe yeni kayıtları otomatik yükleyen listeleme biçimi.

Kullanıcı tıkladıkça listeye ek kayıt getiren buton.

Aynı alanda farklı içerik panelleri arasında geçiş sağlayan bileşen.

Başlığa tıklanınca içeriği açılıp kapanan bölüm.

Ana sayfanın üzerinde işlem veya bilgi gösteren odaklanmış pencere.

Kullanıcıyla etkileşimli mesaj veya karar alan semantik pencere.

Ekranın kenarından açılan menü veya panel.

Bir öğe üzerine gelince veya odaklanınca kısa açıklama gösteren baloncuk.

Bir elemana bağlı, tooltip'ten daha zengin geçici içerik paneli.

İşlem sonucu gibi kısa süre görünen bildirim.

Önemli bilgi, uyarı, hata veya başarı mesajı.

Durum veya sayıyı küçük etiket biçiminde gösteren bileşen.

Filtre, kategori veya seçimi kompakt etiket biçiminde gösteren bileşen.

Kullanıcı veya kurum profilini temsil eden küçük görsel.

Bir eylem veya kavramı görsel sembolle ifade eden öğe.

Markayı temsil eden görsel işaret.

Tarayıcı sekmesinde ve yer imlerinde görünen küçük site ikonu.

h1-h6 seviyeleriyle içerik hiyerarşisini belirleyen başlık.

Sayfanın birincil konusunu tanımlayan en üst seviye başlık.

Metin paragrafı oluşturan p elemanı.

Başka sayfa, kaynak veya sayfa bölümüne yönlendiren a elemanı.

Bağlantının hedef URL'sini belirleyen attribute.

Bağlantının aynı veya yeni sekmede açılma davranışını belirler.

Bağlantının hedefle ilişkisini ve güvenlik/SEO davranışını açıklar.

Sayfaya görsel ekleyen img elemanı.

Görsel yüklenmediğinde veya ekran okuyucuda görseli açıklayan alternatif metin.

Görsel, grafik veya kod gibi bağımsız içeriği gruplar.

Figure içeriğinin açıklamasını verir.

Ekran veya format koşuluna göre farklı görsel kaynakları sunar.

Picture, audio veya video için alternatif medya kaynağı tanımlar.

Web sayfasında video oynatır.

Web sayfasında ses oynatır.

Başka bir web belgesini mevcut sayfa içine gömer.

JavaScript ile piksel tabanlı çizim yapılabilen alan.

Ölçeklenebilir vektör grafikleri XML tabanlı olarak tanımlar.

Kullanıcıdan veri toplamak ve göndermek için alanları gruplar.

Metin, sayı, tarih, dosya ve çeşitli veri giriş alanı.

Bir form alanının ne olduğunu açıklayan ve erişilebilirliğini artıran etiket.

Çok satırlı metin girişi alanı.

Seçenek listesinden bir değer seçtiren form elemanı.

Select içindeki seçilebilir değer.

Birden fazla bağımsız seçime izin veren kutu.

Aynı gruptan yalnızca bir seçim yapılmasını sağlayan kontrol.

Form gönderme veya kullanıcı eylemi başlatan tıklanabilir eleman.

Form verisini sunucuya veya JavaScript işleyicisine gönderir.

Form alanlarını başlangıç değerlerine döndürür.

Boş form alanında örnek veya kısa yönlendirme gösterir.

Form alanının boş bırakılamayacağını belirtir.

Bir form veya etkileşim elemanını kullanılamaz duruma getirir.

Alan değerinin görüntülenip kullanıcı tarafından değiştirilememesini sağlar.

Geçersiz veya eksik girişin nedenini kullanıcıya açıklar.

İlişkili form alanlarını semantik grupta toplar.

Fieldset grubunun başlığını verir.

data-* biçiminde özel metadata saklayan HTML attribute'ü.

Sayfa içinde tekil eleman kimliği.

Bir veya birden fazla elemana ortak stil veya davranış grubu verir.

HTML belgesinin tarayıcı tarafından düğüm ağacı olarak temsil edilmesi.

Tarayıcı sekmesi ve arama sonuçlarında kullanılan sayfa başlığı.

Arama sonucunda sayfanın özetini etkileyebilen açıklama metni.

Mobil cihazlarda sayfanın ölçekleme ve genişlik davranışını ayarlar.

Benzer sayfalar arasından tercih edilen asıl URL'yi belirtir.

Sosyal medya paylaşım önizlemesi için başlık, açıklama ve görsel metadata'sı.

X/Twitter paylaşım önizlemesini belirleyen metadata.

Sayfa içeriğini makinelerin anlayacağı standart şemalarla açıklayan veri.

Structured data'yı JSON biçiminde HTML içine ekleme yöntemi.

Görsel veya iframe'in ihtiyaç anına kadar yüklenmesini erteleme.

Kritik bir kaynağın tarayıcı tarafından erken indirilmesini isteme.

Yakında gerekebilecek kaynağın düşük öncelikle önceden alınması.