HTML Kodlama Yapısı: Temel Kurallar ve Etiketler

HTML Nedir ve Neden Önemlidir?

HTML (HyperText Markup Language), web sayfalarının temel yapısını oluşturan işaretleme dilidir. İnternet üzerindeki her web sitesi, mobil uygulama ve dijital içerik platformu HTML ile şekillendirilir. Web geliştirme öğrenmek isteyen herkes için HTML bilgisi vazgeçilmez bir temeldir.

HTML, tarayıcılara içeriğin nasıl görüntüleneceğini söyleyen etiketler sistemi kullanır. Bu etiketler, metinleri, görselleri, linkleri ve diğer multimedya öğelerini yapılandırır. Modern web tasarımında HTML5 standardı kullanılmakta ve bu standart semantik etiketler ile daha anlamlı kod yazımına olanak tanımaktadır.

Bir HTML dokümanı oluşturmak için herhangi bir metin editörüne ihtiyaç duyarsınız. Notepad++, Visual Studio Code, Sublime Text gibi popüler editörler HTML kodlama için yaygın olarak tercih edilir. HTML dosyaları .html veya .htm uzantısıyla kaydedilir ve tüm modern tarayıcılarda açılabilir.

HTML öğrenmek, frontend geliştirici olmak için atılması gereken ilk adımdır. CSS ile stil verme ve JavaScript ile dinamik özellikler ekleme işlemleri HTML temeli üzerine inşa edilir. Bu nedenle sağlam bir HTML bilgisi, profesyonel web geliştirme kariyeri için kritik öneme sahiptir.

Web standartlarına uygun HTML kodu yazmak, arama motorları tarafından daha iyi indekslenmesini sağlar. SEO uyumlu bir web sitesi için doğru HTML yapısı kullanmak, Google ve diğer arama motorlarında üst sıralarda yer almanıza yardımcı olur. Semantik HTML kullanımı hem erişilebilirliği artırır hem de SEO performansını güçlendirir.

HTML etiketleri açılış ve kapanış etiketleri şeklinde çalışır. Örneğin bir paragraf başlatmak için açılış etiketi, bitirmek için kapanış etiketi kullanılır. Bazı etiketler ise tekli olarak çalışır ve kapanış etiketine ihtiyaç duymaz. Bu yapısal mantığı kavramak HTML öğreniminin temelidir.

Modern web geliştirmede responsive tasarım kritik önem taşır. HTML5 ile gelen yeni etiketler ve özellikler, mobil uyumlu web siteleri oluşturmayı kolaylaştırır. Viewport meta etiketi kullanımı, farklı ekran boyutlarında optimize görünüm sağlar ve kullanıcı deneyimini iyileştirir.

HTML kodlarken girinti (indentation) kullanmak okunabilirliği artırır. İç içe geçmiş etiketleri düzgün şekilde hizalamak, kod bakımını kolaylaştırır ve hata ayıklama sürecini hızlandırır. Profesyonel geliştiriciler her zaman temiz ve düzenli kod yazımına önem verirler.

Web erişilebilirliği konusunda ARIA (Accessible Rich Internet Applications) özellikleri kullanmak önemlidir. Görme engelli kullanıcılar için ekran okuyucuların web sayfanızı doğru yorumlayabilmesi, uygun HTML semantiği ile mümkün olur. Alt özellikleri, başlık hiyerarşisi ve form etiketleri erişilebilirlik için kritiktir.

HTML5 ile birlikte gelen yeni API'ler ve özellikler, web uygulamalarının yeteneklerini önemli ölçüde genişletmiştir. Canvas elementi ile grafik çizimi, video ve audio etiketleri ile multimedya oynatma, geolocation ile konum tespiti gibi modern özellikler artık HTML'in standart parçalarıdır.

Temel HTML Doküman Yapısı

DOCTYPE bildirimi, HTML dokümanının hangi sürümle yazıldığını tarayıcıya bildirir. HTML5 için kullanılan modern DOCTYPE bildirimi son derece basittir ve her HTML dokümanının en üstünde yer almalıdır. Bu bildirim olmadan tarayıcılar uyumluluk moduna geçerek beklenmeyen görüntüleme sorunlarına neden olabilir.

HTML elementi, tüm diğer HTML etiketlerini kapsayan kök elementtir. Lang özelliği ile sayfanın dilini belirtmek SEO ve erişilebilirlik açısından çok önemlidir. Türkçe içerikler için lang özelliği mutlaka belirtilmelidir ki arama motorları ve ekran okuyucular içeriği doğru yorumlayabilsin.

Head bölümü, sayfanın meta verilerini içerir ve kullanıcıya doğrudan görünmez. Karakter kodlaması, sayfa başlığı, anahtar kelimeler, açıklama ve harici dosya bağlantıları bu bölümde tanımlanır. Doğru yapılandırılmış bir head bölümü, arama motoru optimizasyonu için hayati önem taşır.

Meta charset etiketi, karakter kodlamasını belirler ve Türkçe karakterlerin doğru görüntülenmesi için UTF-8 kullanılmalıdır. Bu etiket olmadan özel karakterler hatalı gösterilir ve kullanıcı deneyimi olumsuz etkilenir. Modern web standartlarında UTF-8 evrensel olarak kabul edilmiş karakter kodlamasıdır.

Viewport meta etiketi, mobil uyumluluk için kritik bir bileşendir. Width ve initial-scale özellikleri ile farklı cihazlarda sayfanın nasıl ölçekleneceği kontrol edilir. Responsive web tasarımının temel taşlarından biri olan bu etiket, her modern web sitesinde mutlaka bulunmalıdır.

Title etiketi, tarayıcı sekmesinde görünen başlığı belirler ve SEO için en önemli HTML elementlerinden biridir. Arama motoru sonuçlarında gösterilen başlık buradan gelir. İyi yazılmış bir title etiketi hem kullanıcıları hem de arama motorlarını bilgilendirir, tıklama oranlarını artırır.

Meta description etiketi, arama motorlarında sayfa açıklaması olarak görünür ve tıklama oranını doğrudan etkiler. 150-160 karakter uzunluğunda, ilgi çekici ve anahtar kelime içeren bir description yazılmalıdır. Bu etiket doğrudan sıralamayı etkilemese de kullanıcı davranışı üzerinden dolaylı SEO etkisi yaratır.

Body elementi, kullanıcıya görünen tüm içeriği kapsar. Metinler, görseller, linkler, formlar ve diğer tüm görsel elementler body içinde yer alır. Semantik HTML kullanarak body içeriğini yapılandırmak, hem okunabilirliği hem de SEO performansını iyileştirir.

HTML5 ile gelen semantik etiketler, sayfanın farklı bölümlerini anlamlı şekilde ayırır. Header, nav, main, article, section, aside ve footer gibi etiketler, içeriğin yapısını hem geliştiricilere hem de arama motorlarına net şekilde iletir. Div kullanımı yerine semantik etiketler tercih edilmelidir.

Doğru HTML yapısı oluşturmak, kod validasyonu açısından da önemlidir. W3C Markup Validation Service kullanarak HTML kodunuzun standartlara uygunluğunu kontrol edebilirsiniz. Geçerli HTML kodu, tarayıcılar arası uyumluluk sorunlarını minimize eder ve profesyonel bir web sitesinin temel gereksinimlerindendir.

Başlık Etiketleri ve Hiyerarşi

Başlık etiketleri (h1-h6), içeriğin hiyerarşik yapısını oluşturan temel HTML elementleridir. H1 etiketi sayfanın ana başlığını temsil eder ve her sayfada sadece bir kez kullanılmalıdır. Arama motorları h1 etiketindeki içeriği sayfa konusunu anlamak için kullanır, bu nedenle hedef anahtar kelimeler h1 içinde mutlaka bulunmalıdır.

H2 etiketleri, ana konunun alt başlıklarını belirtir ve içeriği mantıksal bölümlere ayırır. Uzun yazılarda h2 kullanımı okuyucu için gezinmeyi kolaylaştırır ve arama motorlarına içerik yapısı hakkında bilgi verir. Her h2, ana başlıkla ilgili farklı bir yönü veya alt konuyu ele almalıdır.

H3 ve daha alt seviye başlıklar, detaylı alt bölümler oluşturmak için kullanılır. Başlık hiyerarşisini doğru kullanmak, içeriğin mantıksal akışını korur ve okuyucuların bilgiye daha kolay ulaşmasını sağlar. Başlık atlamamak önemlidir; h2'den h4'e geçmek yerine sıralı ilerlemelisiniz.

Başlık etiketlerinde anahtar kelime optimizasyonu yaparken doğal bir dil kullanılmalıdır. Anahtar kelimeleri zorla yerleştirmek yerine, okuyucu için anlamlı ve bilgilendirici başlıklar yazın. Arama motorları yapay anahtar kelime yığma (keyword stuffing) uygulamalarını cezalandırır.

Başlıkların görsel hiyerarşisi CSS ile sağlanmalıdır ancak HTML'deki yapısal sıralama korunmalıdır. H4 etiketini daha büyük göstermek için CSS kullanabilirsiniz ama mantıksal sıralamayı bozmamalısınız. Ekran okuyucular ve arama motorları görsel değil yapısal hiyerarşiye odaklanır.

Uzun içeriklerde başlık içindekiler tablosu oluşturarak kullanıcı deneyimini iyileştirebilirsiniz. Başlıklara ID özelliği ekleyerek sayfa içi navigasyon (anchor links) sağlanabilir. Bu özellik özellikle uzun kılavuzlar ve dokümantasyon sayfaları için çok kullanışlıdır.

Başlık metinleri kısa ve öz olmalıdır ancak konuyu net şekilde ifade etmelidir. Çok uzun başlıklar mobil cihazlarda görüntüleme sorunlarına neden olabilir. İdeal başlık uzunluğu genellikle 60-70 karakter arasındadır ancak bu katı bir kural değildir.

SEO açısından başlıklarda uzun kuyruk anahtar kelimeler kullanmak etkili bir stratejidir. "HTML öğrenme" yerine "HTML nasıl öğrenilir başlangıç rehberi" gibi daha spesifik ifadeler niche aramalardan trafik çekmenize yardımcı olur.

Başlık etiketlerini sadece büyütme amacıyla kullanmak yanlış bir yaklaşımdır. Görsel boyutlandırma için CSS kullanılmalı, HTML etiketleri anlamsal amaçlarına uygun seçilmelidir. Bir metni büyütmek için h3 kullanmak yerine span veya strong ile CSS uygulamak doğru yöntemdir.

Modern web tasarımında başlıklar için ikonlar kullanmak popülerdir ancak bu ikonların dekoratif olması durumunda aria-hidden özelliği eklenmelidir. Anlamlı ikonlar için ise uygun alt text veya aria-label kullanılmalıdır ki ekran okuyucular bu bilgiyi aktarabilsin.

Paragraf ve Metin Formatlama

Paragraf etiketi (p), HTML'deki en temel metin konteynerıdır. Her paragraf kendi başına bir düşünce veya bilgi birimini temsil etmeli ve mantıksal olarak tamamlanmış olmalıdır. Çok uzun paragraflar okuyucuyu yorar, çok kısa paragraflar ise içeriği parçalı gösterir.

Strong etiketi, önemli metinleri vurgular ve varsayılan olarak kalın görüntülenir. Semantik olarak önem taşıyan kelimeleri strong ile işaretlemek, hem görsel vurgu sağlar hem de arama motorlarına bu kelimelerin önemini bildirir. B etiketi sadece görsel kalınlık için kullanılırken strong anlamsal önem taşır.

Em etiketi, vurgu gerektiren metinler için kullanılır ve genellikle italik görüntülenir. Cümle içinde tonlama farkı yaratmak istediğiniz kelimeleri em ile işaretleyebilirsiniz. İtalik etiketi (i) görsel amaçlı iken em anlamsal vurgu içerir.

Mark etiketi, metinde vurgulama veya işaretleme yapmak için kullanılır. Arama sonuçlarında bulunan kelimeleri vurgulamak veya kullanıcının dikkatini çekmek istediğiniz metinleri işaretlemek için idealdir. Modern tarayıcılarda sarı arka plan ile görüntülenir.

Small etiketi, ince baskı veya yan notlar için kullanılır. Telif hakkı bildirimleri, yasal uyarılar veya dipnotlar için uygundur. Ancak sadece metin boyutunu küçültmek için kullanılmamalı, bunun yerine CSS tercih edilmelidir.

Del ve ins etiketleri, silinmiş ve eklenmiş içeriği gösterir. Özellikle dokümantasyon, değişiklik geçmişi ve karşılaştırma sayfalarında kullanışlıdır. Bu etiketler datetime özelliği ile değişiklik zamanını da belirtebilir.

Sub ve sup etiketleri, _{alt simge} ve ^{üst simge} oluşturur. Kimyasal formüller (H₂O), matematiksel ifadeler (x²) ve dipnot referansları için kullanılır. Bilimsel içerik üreten web siteleri için vazgeçilmezdir.

Abbr etiketi, HTML gibi kısaltmaların açılımını sağlar. Title özelliği ile tam açıklama verilir ve kullanıcı fare ile üzerine geldiğinde gösterilir. Bu etiket erişilebilirlik ve kullanıcı deneyimi için önemlidir.

Blockquote etiketi,

uzun alıntılar ve referanslar

Pre ve code etiketleri, kod örnekleri ve

önceden formatlanmış metin

Listeler ve Yapılandırılmış İçerik

Sırasız listeler (ul), madde işaretli listeler oluşturur ve öğelerin sırası önemli olmayan durumlar için kullanılır. Navigasyon menüleri, özellik listeleri ve madde madde açıklamalar için idealdir. Liste öğeleri (li) ul içinde tanımlanır.

Sıralı listeler (ol), numaralı listeler oluşturur ve adımların veya sıralamanın önemli olduğu durumlarda tercih edilir. Tarifler, talimatlar, sıralamalar ve prosedürler için uygundur. Type ve start özellikleri ile numaralandırma stili özelleştirilebilir.

Liste öğeleri iç içe kullanılabilir ve alt listeler oluşturulabilir. Alt liste ana liste öğesinin içinde tanımlanır ve girinti ile otomatik olarak gösterilir. Derin hiyerarşik yapılar kurmak için bu özellik kullanılır ancak çok derin hiyerarşilerden kaçınılmalıdır.

Description list (dl), tanım listeleri oluşturur. Dt (definition term) terimi, dd (definition description) açıklamayı tanımlar. Sözlük, SSS bölümleri ve terim açıklamaları için semantik olarak en uygun liste türüdür.

Listeleri sadece görsel liste oluşturmak için değil anlamsal amaçlarına uygun kullanmak önemlidir. Navigasyon menüsü liste olarak işaretlenmeli, ilgisiz öğeler liste içine zorlanmamalıdır. Semantik HTML kullanımı erişilebilirlik ve SEO için kritiktir.

Liste stilleri CSS ile özelleştirilmelidir. Liste işareti türü, konumu, rengi ve boyutu CSS ile kontrol edilir. List-style özelliği ile nokta, daire, kare veya özel ikonlar kullanılabilir.

Karmaşık içeriklerde liste kombinasyonları kullanılabilir. Örneğin bir sıralı liste içinde madde işaretli alt listeler veya tanım listeleri yer alabilir. Bu esnek yapı zengin içerik organizasyonu sağlar.

Navigasyon menüleri genellikle sırasız liste şeklinde işaretlenir. Nav elementi içinde ul ve li kullanımı, semantik HTML standartlarına uygundur. Bu yapı hem erişilebilirlik araçları hem de arama motorları için anlam taşır.

Liste öğelerine ID ve class özellikleri ekleyerek hedeflenebilir hale getirilebilirler. JavaScript ile dinamik liste manipülasyonu yapmak veya belirli öğelere stil uygulamak için bu özellikler kullanılır.

Responsive tasarımda listeler esnek şekilde düzenlenir. Mobil cihazlarda yatay menüler dikey listeye dönüşebilir. Flexbox ve Grid ile liste öğelerinin düzeni kolayca kontrol edilir ve farklı ekran boyutlarına adapte olur.

Bağlantı (Link) Etiketleri ve Kullanımı

Anchor (a) etiketi, HTML'in en temel ve önemli elementlerinden biridir. Web'in birbirine bağlı yapısını oluşturan linkler, kullanıcıların sayfalar arasında gezinmesini sağlar. Href özelliği link hedefini belirtir ve mutlaka tanımlanmalıdır, aksi takdirde link işlevsiz kalır.

İç linkler, aynı web sitesi içindeki sayfalara yönlendirme yapar. Göreceli URL kullanımı tercih edilir çünkü site taşındığında linkler kırılmaz. İyi bir iç linkleme stratejisi SEO için kritik önem taşır ve site mimarisini güçlendirir.

Dış linkler, başka web sitelerine yönlendirme yapar. Mutlak URL kullanılmalı ve genellikle rel="noopener noreferrer" özellikleri eklenmelidir. Target="_blank" ile yeni sekmede açılacaksa güvenlik için bu özellikler gereklidir.

Link metinleri (anchor text) açıklayıcı ve anlamlı olmalıdır. "Buraya tıklayın" yerine "HTML eğitim serisine göz atın" gibi ifadeler hem kullanıcı deneyimi hem de SEO açısından tercih edilir. Arama motorları link metinlerini hedef sayfanın içeriğini anlamak için kullanır.

Email linkleri için mailto: protokolü kullanılır. Konu satırı, bilgi (cc) ve gizli bilgi (bcc) alanları da URL parametreleri olarak eklenebilir. Telefon numaraları için tel: protokolü mobil cihazlarda doğrudan arama başlatır.

Sayfa içi linkler (anchor links), aynı sayfanın farklı bölümlerine atlamayı sağlar. Hedef elementin ID özelliği tanımlanır ve link href özelliğinde # ile referans edilir. Uzun sayfalar için içindekiler tablosu oluşturmada kullanılır.

Download özelliği, dosya indirmeyi tetikler. Kullanıcı linke tıkladığında dosya tarayıcıda açılmak yerine indirilir. PDF dökümanlar, ZIP arşivler ve diğer dosya türleri için kullanışlıdır.

Rel özelliği, link ilişki türünü tanımlar. Nofollow değeri arama motorlarına linki takip etmemelerini söyler, sponsored ücretli içerik belirtir, ugc kullanıcı tarafından oluşturulan içeriği işaretler. Bu özellikler SEO stratejisi için önemlidir.

Title özelliği, link üzerine gelindiğinde tooltip olarak gösterilir. Ek bilgi vermek için kullanılabilir ancak erişilebilirlik açısından kritik bilgiler title'a konmamalı çünkü mobil cihazlarda ve ekran okuyucularda sorun yaratabilir.

Link stilleri CSS pseudo-class'ları ile kontrol edilir. Link, visited, hover, active ve focus durumları ayrı şekilde stillendirilmelidir. Özellikle focus durumu klavye navigasyonu yapan kullanıcılar için çok önemlidir.

Görsel Elementleri ve Optimizasyon

Image (img) etiketi, web sayfalarına görsel eklemeyi sağlar. Src özelliği görsel dosyasının konumunu belirtir ve zorunludur. Modern web'de görseller içeriği zenginleştirir, kullanıcı ilgisini artırır ve mesajı güçlendirir.

Alt özelliği, alternatif metin sağlar ve SEO ile erişilebilirlik için kritik öneme sahiptir. Görsel yüklenemediğinde veya ekran okuyucular kullanıldığında bu metin gösterilir. Arama motorları görselleri anlamak için alt text'i kullanır.

Width ve height özellikleri, görsel boyutlarını piksel cinsinden belirtir. Bu özellikler tanımlandığında tarayıcı görseller yüklenmeden önce alan ayırır ve sayfa kayması (layout shift) önlenir. Core Web Vitals metrikleri için bu özellikler önemlidir.

Responsive görseller için srcset özelliği kullanılır. Farklı ekran boyutları ve çözünürlükleri için uygun görsel versiyonları tanımlanır. Böylece mobil cihazlarda küçük, masaüstünde büyük görseller yüklenir ve performans optimize edilir.

Picture elementi, daha gelişmiş responsive görsel kontrolü sağlar. Farklı medya sorguları için farklı görseller tanımlanabilir. WebP formatını destekleyen tarayıcılara WebP, diğerlerine JPG sunmak gibi modern teknikler için kullanılır.

Loading="lazy" özelliği, görsellerin geç yüklenmesini (lazy loading) sağlar. Görünüm alanına girdiklerinde yüklenirler ve sayfa yüklenme hızı önemli ölçüde artar. Sayfa başındaki hero görseli dışında tüm görseller için önerilir.

Görsel formatı seçimi performans için kritiktir. WebP formatı daha küçük dosya boyutu sunar, PNG şeffaflık gerektiğinde kullanılır, JPEG fotoğraflar için uygundur, SVG vektörel grafikler için idealdir. Doğru format seçimi sayfa hızını artırır.

Figure ve figcaption etiketleri, görselleri açıklamaları ile gruplar. Semantik olarak görselin içeriğe nasıl dahil olduğunu belirtir. İnfografikler, diyagramlar ve açıklamalı görseller için bu yapı kullanılmalıdır.

Dekoratif görseller için alt özelliği boş bırakılmalıdır (alt=""). Bu görsellerin içeriksel değeri yoksa ekran okuyucular tarafından atlanması gerekir. Her görsele alt text eklemek zorunlu değildir, anlamlı olması önemlidir.

Görsel sıkıştırma, web performansı için zorunludur. TinyPNG, ImageOptim gibi araçlarla görseller kalite kaybı minimum seviyede tutularak küçültülür. Optimize edilmemiş büyük görseller sayfa yüklenme süresini dramatik şekilde artırır.

Base64 kodlama ile küçük görseller doğrudan HTML veya CSS içine gömülebilir. Bu yöntem HTTP isteklerini azaltır ancak sadece icon ve logo gibi çok küçük görseller için uygundur. Büyük görseller için uygun değildir.

CDN (Content Delivery Network) kullanımı, görsellerin kullanıcıya en yakın sunucudan servis edilmesini sağlar. Cloudflare, AWS CloudFront gibi CDN'ler görsel yüklenme hızını artırır ve sunucu yükünü azaltır.

Video ve Audio Multimedya

Video etiketi, HTML5 ile gelen native video oynatma özelliğidir. Flash eklentisine ihtiyaç kalmadan tarayıcılar doğrudan video oynatır. Controls özelliği oynatma kontrollerini gösterir, autoplay otomatik başlatır, loop döngüsel oynatma sağlar.

Video kaynakları için source etiketleri kullanılır. MP4, WebM ve OGG formatlarında videolar tanımlanarak tarayıcı uyumluluğu sağlanır. Tarayıcı desteklediği ilk formatı otomatik olarak seçer ve oynatır.

Poster özelliği, video oynatılmadan önce görünecek kapak görseli belirtir. İlk frame yerine özel tasarlanmış bir görsel kullanarak kullanıcı deneyimini iyileştirebilirsiniz. Bu görsel video yüklenene kadar placeholder olarak işlev görür.

Autoplay kullanırken muted özelliği eklemek önemlidir. Modern tarayıcılar sessiz olmayan autoplay videolarını engellemektedir. Ayrıca beklenmedik sesler kullanıcı deneyimini olumsuz etkiler ve bounce rate'i artırır.

Track etiketi, video altyazıları eklemek için kullanılır. VTT (WebVTT) formatında altyazı dosyaları tanımlanır. Erişilebilirlik açısından kritik önem taşır ve işitme engelli kullanıcıların videodan faydalanmasını sağlar.

Audio etiketi, ses dosyaları için kullanılır. Podcast, müzik veya ses efektleri oynatmak için kullanışlıdır. Video etiketine benzer şekilde controls, autoplay, loop özellikleri desteklenir.

Video hosting için YouTube veya Vimeo gibi platformlar kullanmak bandwidth tasarrufu sağlar. Iframe ile gömme kodu eklenir ancak sayfa yüklenme hızını etkileyebilir. Lazy loading teknikleri ile bu etki minimize edilebilir.

HTML5 Media API ile JavaScript kontrolü mümkündür. Play, pause, seek işlemleri programatik olarak yapılabilir. Özel video oynatıcılar oluşturmak için bu API kullanılır.

Video SEO için schema markup eklenmesi önerilir. VideoObject schema'sı ile video başlığı, açıklaması, thumbnail ve diğer metadata arama motorlarına iletilir. Bu sayede videolar arama sonuçlarında rich snippet olarak görünebilir.

Adaptive bitrate streaming teknolojileri, kullanıcının internet hızına göre video kalitesini ayarlar. HLS (HTTP Live Streaming) ve DASH protokolleri ile kesintisiz video deneyimi sağlanır. Özellikle uzun videolar için kritik öneme sahiptir.

Form Yapısı ve Temel Elementler

Form etiketi, kullanıcı girdilerini toplamak için kullanılan kapsayıcı elementtir. Action özelliği formun nereye gönderileceğini, method özelliği HTTP metodunu (GET veya POST) belirtir. Web sitelerinde iletişim formları, kayıt formları, arama kutuları form elementi ile oluşturulur.

Input etiketi, çeşitli veri girişleri için kullanılan çok amaçlı elementtir. Type özelliği ile metin, email, şifre, sayı, tarih gibi farklı giriş türleri tanımlanır. Her input türü farklı doğrulama kuralları ve mobil klavye davranışları sağlar.

Label etiketi, form alanlarını etiketler ve erişilebilirlik için zorunludur. For özelliği ile ilişkili input'un ID'si belirtilir. Label'a tıklandığında ilgili input odaklanır ve ekran okuyucular form alanlarını doğru şekilde tanımlar.

Name özelliği, form verilerinin sunucuya gönderilirken anahtar olarak kullanılır. Her input'a benzersiz bir name verilmelidir. Form submit edildiğinde name-value çiftleri olarak veri iletilir.

Placeholder özelliği, örnek metin gösterir ancak label yerine geçmez. Placeholder sadece ipucu sağlar ve form alanı doldurulduğunda kaybolur. Erişilebilirlik açısından mutlaka label da kullanılmalıdır.

Required özelliği, zorunlu alan belirtir. Form gönderilmeden önce tarayıcı otomatik doğrulama yapar. Bu client-side doğrulama kullanıcı deneyimini iyileştirir ancak sunucu tarafı doğrulama mutlaka yapılmalıdır.

Input türleri arasında email, tel, url önemli yer tutar. Bu türler mobil cihazlarda uygun klavye düzenini gösterir ve tarayıcı otomatik doğrulama sağlar. Email girişi @ işareti gerektirirken, tel sayısal klavye açar.

Textarea etiketi, çok satırlı metin girişi için kullanılır. Rows ve cols özellikleri boyutları belirtir ancak CSS ile kontrol daha esnektir. Yorum alanları, mesaj kutuları ve uzun açıklamalar için idealdir.

Select ve option etiketleri, açılır menü oluşturur. Multiple özelliği ile çoklu seçim yapılabilir, size özelliği görünür seçenek sayısını belirler. Optgroup ile seçenekler gruplanabilir.

Checkbox ve radio input türleri, seçenek işaretleme sağlar. Checkbox çoklu seçim, radio tek seçim için kullanılır. Aynı name özelliğine sahip radio butonları grup oluşturur ve sadece biri seçilebilir.

Gelişmiş Form Özellikleri

HTML5 input türleri, form işlevselliğini önemli ölçüde genişletmiştir. Number, range, date, time, color, search gibi yeni türler native tarayıcı desteği ile gelir. Bu türler JavaScript kütüphanesi kullanmadan gelişmiş özellikler sunar.

Date input türü, tarih seçici gösterir. Min, max ve step özellikleri ile tarih aralığı sınırlandırılabilir. Rezervasyon formları, doğum tarihi girişleri için kullanışlıdır ve mobil uyumlu native picker'lar sağlar.

Range input türü, kaydırıcı (slider) oluşturur. Min, max, step ve value özellikleri ile yapılandırılır. Fiyat filtreleme, hacim kontrolü, yıldız değerlendirme gibi senaryolar için uygundur.

Pattern özelliği, regex ile doğrulama sağlar. Özel format gereksinimleri olan alanlar için kullanılır. Telefon numarası, posta kodu, kimlik numarası gibi belirli formata uygun girişler zorlanabilir.

Autocomplete özelliği, tarayıcı otomatik tamamlama davranışını kontrol eder. "on", "off" veya spesifik değerler (name, email, tel) alabilir. Doğru autocomplete değerleri kullanmak form doldurma hızını artırır.

Datalist etiketi, otomatik öneri listesi sağlar. Input ile ilişkilendirilir ve kullanıcı yazmaya başladığında öneriler gösterilir. Hem serbest giriş hem de seçim imkanı sunar, combo box benzeri işlevsellik sağlar.

Fieldset ve legend etiketleri, form alanlarını gruplar. İlgili alanlar görsel ve semantik olarak bir araya getirilir. Disabled özelliği ile tüm grup devre dışı bırakılabilir, kullanışlı bir organizasyon aracıdır.

Button etiketi, çeşitli buton türleri oluşturur. Type özelliği submit, reset veya button olabilir. Input type="submit" yerine button tercih edilirse içinde HTML kullanılabilir ve daha esnek tasarımlar yapılabilir.

Form validation API, JavaScript ile özel doğrulama mantığı eklemeyi sağlar. SetCustomValidity metodu ile özel hata mesajları tanımlanır. CheckValidity ve reportValidity metodları doğrulama durumunu kontrol eder.

Novalidate özelliği, tarayıcı doğrulamasını devre dışı bırakır. JavaScript ile tamamen özel doğrulama yapılacaksa kullanılır. Ancak erişilebilirlik açısından native doğrulama tercih edilmeli, sadece gerektiğinde devre dışı bırakılmalıdır.

Form Güvenliği ve Best Practices

CSRF koruması, form güvenliği için kritik önem taşır. Token sistemi ile sadece kendi sitenizden gönderilen formlar kabul edilir. Her form için benzersiz token üretilmeli ve doğrulanmalıdır.

POST metodu, hassas veri gönderirken kullanılmalıdır. Şifreler, kişisel bilgiler ve ödeme bilgileri asla GET ile gönderilmemelidir. GET metodunda veriler URL'de görünür ve güvenlik riski oluşturur.

Input sanitization, kötü niyetli girişleri önlemek için zorunludur. XSS (Cross-Site Scripting) saldırılarına karşı sunucu tarafında tüm girdiler temizlenmeli ve escape edilmelidir. Client-side doğrulama asla güvenlik önlemi olarak görülmemelidir.

Rate limiting, spam ve otomatik form gönderimlerini önler. Aynı IP'den belirli sürede yapılabilecek form gönderimi sınırlandırılmalıdır. Honeypot alan ekleme de bot koruması için etkili bir tekniktir.

CAPTCHA veya reCAPTCHA, bot koruması sağlar. Ancak kullanıcı deneyimini olumsuz etkileyebilir, bu nedenle sadece gerekli durumlarda kullanılmalıdır. Modern reCAPTCHA v3 görünmez çalışır ve daha az rahatsız edicidir.

HTTPS kullanımı, form verilerinin şifreli iletilmesi için zorunludur. SSL sertifikası olmayan sitelerde şifre veya ödeme bilgisi toplanmamalıdır. Modern tarayıcılar HTTP formlarda güvenlik uyarısı gösterir.

Error handling, kullanıcı dostu olmalıdır. Hangi alanda hata olduğu net gösterilmeli, düzeltme için ipuçları verilmelidir. Genel hata mesajları yerine spesifik ve yardımcı mesajlar kullanılmalıdır.

Form accessibility, herkes için erişilebilir olmalıdır. Klavye navigasyonu çalışmalı, ekran okuyucular tüm alanları tanıyabilmelidir. ARIA özellikleri ile dinamik form davranışları da erişilebilir hale getirilmelidir.

Progress indicator, çok adımlı formlarda kullanıcıyı bilgilendirir. Kullanıcı hangi adımda olduğunu ve kaç adım kaldığını görebilmelidir. Bu özellik form tamamlama oranını artırır.

Success feedback, form başarıyla gönderildiğinde net geri bildirim sağlamalıdır. Onay mesajı göstermek, teşekkür sayfasına yönlendirmek veya email onayı göndermek kullanıcıyı bilgilendirir ve güven oluşturur.

Semantik Etiketler ve Sayfa Yapısı

Semantik HTML, kod elementlerinin anlamını açıkça ifade etmesini sağlar. Div ve span gibi genel elementler yerine header, nav, main, article, section gibi anlamlı etiketler kullanılır. Bu yaklaşım hem kod okunabilirliğini artırır hem de SEO ve erişilebilirlik sağlar.

Header elementi, sayfa veya bölüm başlığını içerir. Logo, başlık ve ana navigasyon genellikle burada yer alır. Sadece sayfa tepesinde değil, article veya section içinde de kullanılabilir, her bağlam kendi header'ına sahip olabilir.

Nav elementi, navigasyon linklerini gruplar. Ana menü, yan menü, breadcrumb ve footer linkleri için kullanılır. Ekran okuyucular nav elementi sayesinde navigasyon bölümlerini kolayca bulur ve kullanıcılar hızlıca gezinir.

Main elementi, sayfanın ana içeriğini kapsar ve her sayfada sadece bir kez kullanılmalıdır. Arama motorları ve erişilebilirlik araçları main içindeki içeriği sayfanın merkez konusu olarak yorumlar. Yan çubuklar, navigasyon ve footer main dışında kalmalıdır.

Article elementi, bağımsız içerik parçalarını temsil eder. Blog yazıları, haber makaleleri, forum gönderileri, yorum blokları article ile işaretlenir. İçerik başka bir bağlamda da anlamlı oluyorsa article kullanılmalıdır.

Section elementi, tematik içerik gruplarını oluşturur. Bir article içinde farklı bölümler veya bir sayfadaki farklı konular section ile ayrılır. Genellikle kendi başlığına sahip olmalı ve mantıksal bir bölüm oluşturmalıdır.

Aside elementi, yan içerik için kullanılır. Sidebar'lar, ilgili linkler, reklamlar ve ana içerikle dolaylı ilgili bilgiler aside ile işaretlenir. Ana akışın dışında kalan destekleyici içerikler için semantik olarak doğru seçimdir.

Footer elementi, sayfa veya bölüm altbilgisini içerir. Telif hakkı bilgileri, iletişim bilgileri, sosyal medya linkleri ve site haritası genellikle footer'da yer alır. Article veya section içinde de kullanılabilir, yazar bilgisi veya makale meta verisi için uygundur.

Figure ve figcaption, görselleri açıklamaları ile anlamsal olarak ilişkilendirir. Diyagramlar, fotoğraflar, kod örnekleri ve alıntılar figure içinde, açıklamaları figcaption ile verilir. Bu yapı içeriğin anlaşılmasını kolaylaştırır.

Time elementi, tarih ve saat bilgilerini işaretler. Datetime özelliği ile makine tarafından okunabilir format sağlanır. Arama motorları yayın tarihlerini anlar, takvim entegrasyonları kolaylaşır ve zaman damgası ekleme semantik hale gelir.

Tablo Yapıları ve Veri Gösterimi

Table elementi, tablo verilerini yapılandırır ancak sadece gerçek tablo verileri için kullanılmalıdır. Sayfa düzeni için tablo kullanmak eski ve yanlış bir pratiktir. CSS Grid ve Flexbox modern layout ihtiyaçları için kullanılmalıdır.

Thead, tbody ve tfoot elementleri, tablo bölümlerini semantik olarak ayırır. Thead başlık satırlarını, tbody veri satırlarını, tfoot özet satırlarını içerir. Bu yapı özellikle uzun tablolarda yazdırma ve erişilebilirlik için önemlidir.

Th elementi, başlık hücrelerini tanımlar. Scope özelliği ile satır veya sütun başlığı olduğu belirtilir. Ekran okuyucular th elementlerini kullanarak tablo yapısını anlar ve kullanıcılara bağlamı sağlar.

Caption elementi, tablo başlığı ekler. Tablonun ne hakkında olduğunu açıklar ve erişilebilirlik için önemlidir. Görsel olarak gizlenmek istenirse CSS kullanılmalı ancak semantik olarak tabloda bulunmalıdır.

Colspan ve rowspan özellikleri, hücre birleştirme yapar. Karmaşık tablo düzenleri için kullanılır ancak aşırı kullanımdan kaçınılmalıdır. Ekran okuyucular için anlaşılır kalacak şekilde tasarlanmalıdır.

Responsive tablolar için çeşitli stratejiler mevcuttur. Yatay kaydırma, sütun gizleme, kartlara dönüştürme gibi yaklaşımlar mobil uyumluluk sağlar. Overflow-x kullanımı en basit çözümdür ancak kullanıcı deneyimi açısından ideal olmayabilir.

Zebra striping, alternatif satır renklendirme ile okunabilirliği artırır. CSS :nth-child kullanılarak uygulanır. Büyük tablolarda kullanıcıların satırları takip etmesini kolaylaştırır.

Sorting ve filtering özellikleri, büyük tablolarda gezinmeyi kolaylaştırır. JavaScript ile implement edilir ancak server-side pagination büyük veri setleri için daha performanslıdır. Kullanıcı dostu arama ve sıralama araçları sunulmalıdır.

Sticky headers, aşağı kaydırırken başlıkların görünür kalmasını sağlar. Position sticky CSS özelliği ile kolayca uygulanır. Uzun tablolarda bağlam kaybını önler ve kullanıcı deneyimini iyileştirir.

Accessible tables için ARIA özellikleri eklenebilir. Role, aria-label ve aria-describedby karmaşık tablolarda ek bağlam sağlar. Ancak doğru semantik HTML kullanımı genellikle yeterlidir, ARIA sadece gerektiğinde eklenmelidir.

Meta Etiketler ve SEO Optimizasyonu

Meta etiketler, arama motorlarına ve sosyal medya platformlarına sayfa hakkında bilgi verir. Head bölümünde yer alır ve sayfa içeriğini tanımlar. Doğru meta etiket kullanımı SEO başarısının temel taşlarından biridir.

Description meta etiketi, arama sonuçlarında görünen açıklamayı belirler. 150-160 karakter uzunluğunda, ilgi çekici ve anahtar kelime içeren bir açıklama yazılmalıdır. Click-through rate (CTR) üzerinde doğrudan etkisi vardır.

Keywords meta etiketi, günümüzde önemsizdir. Google ve diğer büyük arama motorları bu etiketi dikkate almaz. Keyword stuffing yapılmamalı, içerik kalitesine odaklanılmalıdır. Doğal anahtar kelime kullanımı tercih edilir.

Viewport meta etiketi, mobil responsive tasarım için zorunludur. Width=device-width ve initial-scale=1 değerleri standart ayarlardır. Bu etiket olmadan mobil cihazlarda sayfa yanlış ölçeklenir.

Open Graph meta etiketleri, sosyal medya paylaşımlarını optimize eder. Facebook, LinkedIn ve diğer platformlar bu etiketleri kullanır. Og:title, og:description, og:image gibi özellikler paylaşım görünümünü kontrol eder.

Twitter Card meta etiketleri, Twitter'da zengin önizleme sağlar. Summary, summary_large_image gibi farklı kart türleri mevcuttur. Twitter:card, twitter:site ve twitter:creator özellikleri tanımlanır.

Canonical tag, duplicate content sorununu önler. Aynı içeriğin farklı URL'lerde bulunması durumunda tercih edilen versiyonu belirtir. SEO açısından kritik önem taşır ve sayfa otoritesinin bölünmesini engeller.

Robots meta etiketi, arama motoru tarama davranışını kontrol eder. Index/noindex, follow/nofollow değerleri ile sayfanın indekslenme durumu yönetilir. Gizli sayfa veya test siteleri için noindex kullanılır.

Hreflang etiketi, çok dilli sitelerde dil ve bölge belirtir. Arama motorları kullanıcının konumuna göre doğru dil versiyonunu gösterir. Uluslararası SEO stratejisi için vazgeçilmezdir.

Structured data (Schema.org), zengin sonuçlar (rich snippets) elde etmek için kullanılır. JSON-LD formatında sayfa tipi, yazar, tarih, puanlama gibi bilgiler arama motorlarına iletilir. Arama görünürlüğünü ve tıklama oranlarını artırır.