HTML Biçimlendirici

HTML (Hiper Metin İşaretleme Dili), web sayfaları için standart işaretleme dilidir. Bu araç, HTML'yi uygun girintileme ile biçimlendirir, üretim için küçültür, meta verileri (başlık, açıklama, Open Graph etiketleri) çıkarır ve eksik alt özellikleri veya kullanımdan kaldırılmış etiketler gibi yaygın sorunları doğrular.

Spesifikasyonlar

Yaygin Kullanim Alanlari

Kaynak görüntüleme veya API yanıtlarından küçültülmüş HTML'yi biçimlendirme
Dağıtımdan önce HTML boyutunu optimize etme
SEO için sayfa meta verilerini denetleme (başlık, açıklama, OG etiketleri)
HTML yapısı ve iç içe geçme sorunlarını hata ayıklama
Erişilebilirlik temellerini doğrulama (alt özellikleri)
Belgeleme için HTML parçacıkları hazırlama

Ozellikler

Tutarlı girintileme ile HTML'yi düzgün yazdırma
Üretim için HTML'yi küçültme (boşlukları, yorumları kaldırma)
Sayfa meta verilerini çıkarma (başlık, açıklama, karakter seti)
Sosyal medya önizlemeleri için Open Graph etiketlerini ayrıştırma
Script ve stil dosyalarını sayma
Yaygın HTML sorunlarını doğrulama (eksik alt, kullanımdan kaldırılmış etiketler)
Orijinal ve küçültülmüş arasında boyut karşılaştırmasını gösterme

Ornekler

Meta Verili Web Sayfası

Deneyin →

Başlık meta verileri ve gövde içeriği olan eksiksiz bir HTML belgesi.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="A sample web page for testing">
  <meta property="og:title" content="Sample Page">
  <meta property="og:description" content="This is a sample page">
  <title>Sample Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Welcome</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>
  <main>
    <p>Hello, world!</p>
  </main>
  <script src="app.js"></script>
</body>
</html>

HTML Parçacığı

Deneyin →

Bir bileşen veya kısmi HTML parçası.

<div class="card">
  <img src="image.jpg" alt="Card image">
  <div class="card-body">
    <h2 class="card-title">Card Title</h2>
    <p class="card-text">Some description text here.</p>
    <button class="btn btn-primary">Learn More</button>
  </div>
</div>

Ipuclari

Sayfa yükleme süresini azaltmak için üretimde küçültülmüş sürümü kullanın.
Open Graph etiketleri, sayfanızın sosyal medyada paylaşıldığında nasıl göründüğünü kontrol eder.
Açıklama meta etiketi SEO ve arama sonucu parçacıkları için önemlidir.
Erişilebilirlik için görüntülere her zaman alt özellikleri ekleyin.
Daha iyi yapı için anlamsal HTML öğelerini (header, main, nav, article) kullanın.

Anlama HTML Biçimlendirici

HTML (Hiper Metin İşaretleme Dili), web'in temel dilidir. Her web sayfası bir HTML belgesidir — tarayıcıların ayrıştırıp milyarlarca insanın günlük etkileşimde bulunduğu görsel arayüzlere dönüştürdüğü bir öğe ağacı. WHATWG tarafından Canlı Standart olarak korunan mevcut sürüm, numaralı sürümler yerine sürekli olarak gelişir.

HTML, bir sayfanın anlamsal yapısını sağlar. <header>, <nav>, <main>, <article> ve <footer> gibi öğeler tarayıcılara, ekran okuyuculara ve arama motorlarına anlam iletir. <head> bölümü meta verileri içerir: belge başlığı, karakter kodlaması, görüntüleme alanı ayarları, stil dosyaları, script'ler, sosyal paylaşım için Open Graph etiketleri ve SEO için yapılandırılmış veriler. <body> görünür içeriği barındırır.

Modern HTML, basit işaretlemenin çok ötesine uzanır. <canvas> öğesi 2B ve 3B grafikleri mümkün kılar. <video> ve <audio> öğeleri yerel medya oynatma sağlar. Web Bileşenleri (<template>, <slot>, özel öğeler) yeniden kullanılabilir kapsüllenmiş widget'lar oluşturmaya olanak tanır. Form öğeleri, required, pattern, min ve max gibi özelliklerle istemci tarafı doğrulamayı destekler. Anlamsal öğeler, yardımcı teknolojilere net bir belge taslağı sunarak erişilebilirliği artırır.

Geliştiriciler için HTML, ölçekte nadiren elle yazılır. React, Vue, Svelte ve Astro gibi çerçeveler, bileşen şablonlarından HTML üretir. Sunucu tarafı işleme, daha hızlı ilk sayfa yüklemeleri için sunucuda HTML üretir. Statik site oluşturucular, dağıtım zamanında HTML'yi önceden oluşturur. Bu soyutlamaya rağmen, çıktı HTML'yi anlamak düzen sorunlarını hata ayıklama, performansı optimize etme, erişilebilirlik uyumluluğunu sağlama ve SEO sorunlarını teşhis etme için gereklidir.

HTML sözdizimi hatalarına karşı toleranslıdır — tarayıcılar kapatılmamış etiketleri ve eksik tırnakları ellerinden geldiğince işler. XHTML ise katı XML kuralları uygular: tüm etiketler kapatılmalı, özellik değerleri tırnak içinde olmalı ve öğeler düzgün iç içe geçirilmelidir. XHTML 2000'lerin başında popülerdi, ancak WHATWG HTML Canlı Standardı daha hoşgörülü HTML ayrıştırma modeline geri döndü. Bugün, tarayıcılar bunu gerektirmese de geçerli XHTML olabilecek düzgün biçimlendirilmiş HTML yazmak en iyi uygulama olarak kabul edilir.

Open Graph (og:) meta etiketleri, bir sayfanın Facebook, LinkedIn ve Twitter gibi sosyal medya platformlarında paylaşıldığında nasıl göründüğünü kontrol eder. Temel etiketler og:title, og:description, og:image ve og:url'yi içerir. Twitter'ın kendi twitter:card etiketleri mevcutsa Open Graph'ı geçersiz kılar. Bu etiketler olmadan, platformlar başlığı ve görüntüyü tahmin etmeye çalışır, genellikle kötü sonuçlarla. <nav>, <main>, <article> ve <aside> gibi anlamsal HTML öğeleri ilgili bir amaca hizmet eder — tarayıcılara, ekran okuyuculara ve arama motorlarına içeriğin yapısını ve anlamını iletir. Anlamsal öğeleri kullanmak, engelli kullanıcılar için erişilebilirliği artırır, arama motorlarının sayfa hiyerarşisini anlamasına yardımcı olur ve kod tabanını daha sürdürülebilir hale getirir.

HTML küçültme, işlevselliği değiştirmeden gereksiz karakterleri kaldırır: etiketler arasındaki boşluklar, HTML yorumları, isteğe bağlı kapanış etiketleri, gereksiz özellikler ve özellik değerleri etrafındaki gereksiz tırnak işaretleri. Bu, dosya boyutunu azaltır ve sayfa yükleme süresini iyileştirir; gzip sıkıştırmasından önce tipik olarak %10-30 tasarruf sağlar. html-minifier-terser gibi araçlar bunu derleme hatlarında otomatik olarak yapar ve üretim dağıtımları için kolay bir optimizasyon sağlar.

← Tum araclara don