HTML: Web'in İskeleti - Kapsamlı Bir Öğrenme Rehberi

İnternet dünyasına adım attığınızda gördüğünüz her web sayfasının temelinde yatan bir dil vardır: HTML. HyperText Markup Language (Hiper Metin İşaretleme Dili) anlamına gelen HTML, web sayfalarının yapısını ve içeriğini tanımlamak için kullanılan standart işaretleme dilidir. Tıpkı bir binanın iskeleti gibi, HTML de bir web sayfasının başlıklarını, paragraflarını, resimlerini, bağlantılarını ve diğer tüm öğelerini organize eder. Bu rehber, HTML'in ne olduğundan başlayarak temel etiketlerden modern HTML5 özelliklerine kadar geniş bir yelpazede bilgi sunmayı amaçlamaktadır. İster web geliştirmeye yeni başlıyor olun, ister bilgilerinizi tazelemek isteyin, bu kaynak size yol gösterecektir.

HTML, bir programlama dili değildir; çünkü mantıksal işlemler veya algoritmalar içermez. Bunun yerine, bir işaretleme dilidir. Yani, metin içerisine eklenen özel "etiketler" (tags) aracılığıyla tarayıcıya içeriğin nasıl yorumlanacağını ve görüntüleneceğini söyler. Örneğin, bir metnin başlık olduğunu, bir kelimenin vurgulanması gerektiğini veya bir görselin sayfada nerede yer alacağını HTML etiketleri belirler. CSS (Cascading Style Sheets) ile birlikte sayfanın görünümünü (renkler, fontlar, yerleşim) ve JavaScript ile birlikte sayfanın etkileşimini (dinamik içerik, animasyonlar) kontrol etmek için temel bir yapı taşı görevi görür. Bu üç teknoloji (HTML, CSS, JavaScript), modern web geliştirmenin temelini oluşturur.

HTML'in tarihi, World Wide Web'in (WWW) doğuşuna kadar uzanır. İlk olarak 1991 yılında Tim Berners-Lee tarafından geliştirilen HTML, zaman içinde World Wide Web Consortium (W3C) ve Web Hypertext Application Technology Working Group (WHATWG) gibi kuruluşlar tarafından standartlaştırılarak geliştirilmiştir. HTML4 ile sağlam bir temel oluşturan dil, özellikle HTML5 sürümüyle birlikte multimedya desteği, semantik etiketler ve çeşitli API'lar gibi birçok yenilik kazanarak web'in yeteneklerini önemli ölçüde artırmıştır. Günümüzde HTML, yaşayan bir standarttır ve sürekli olarak güncellenmektedir. Bu rehberde, HTML'in temel prensiplerini, en sık kullanılan etiketleri ve modern web uygulamaları geliştirmek için bilmeniz gereken önemli kavramları adım adım keşfedeceğiz.

HTML Temelleri: Yapı ve Sözdizimi

Her HTML belgesi belirli bir temel yapı üzerine kurulur. Bu yapı, tarayıcının sayfayı doğru bir şekilde yorumlaması için gereklidir. Ayrıca, HTML etiketlerinin nasıl yazıldığına dair belirli kurallar (sözdizimi) bulunur.

Temel HTML Belge Yapısı Nasıldır?

Minimal bir HTML belgesi aşağıdaki temel öğeleri içerir: 


<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sayfa Başlığı</title>
</head>
<body>
    <!-- Sayfa içeriği buraya gelecek -->
    <h1>Ana Başlık</h1>
    <p>Bu bir paragraf.</p>
</body>
</html>
  • <!DOCTYPE html>: Belge türü bildirimidir. Tarayıcıya bunun bir HTML5 belgesi olduğunu söyler. Her HTML belgesinin en başında yer almalıdır.
  • <html>: HTML belgesinin kök (root) elemanıdır. Tüm diğer HTML elemanları bu etiket içinde yer alır. lang="tr" niteliği, sayfanın dilinin Türkçe olduğunu belirtir, bu SEO ve erişilebilirlik için önemlidir.
  • <head>: Sayfa hakkında meta bilgileri içerir. Bu bilgiler tarayıcıda doğrudan görüntülenmez (<title> hariç). Meta veriler, karakter kodlaması, sayfa açıklaması, anahtar kelimeler, CSS dosyalarının bağlantıları gibi bilgileri barındırır.
    • <meta charset="UTF-8">: Belgenin karakter kodlamasını belirtir. UTF-8, Türkçe karakterler de dahil olmak üzere dünya dillerinin çoğunu destekleyen evrensel bir standarttır.
    • <meta name="viewport" ...>: Mobil cihazlarda sayfanın nasıl görüntüleneceğini kontrol eder. width=device-width, sayfa genişliğini cihazın ekran genişliğine ayarlar. initial-scale=1.0, sayfanın ilk yüklenmedeki yakınlaştırma seviyesini belirler. Responsive tasarım için kritik bir etikettir.
    • <title>: Tarayıcı sekmesinde veya pencere başlığında görünen sayfa başlığını tanımlar. SEO için de çok önemlidir.
  • <body>: Sayfanın kullanıcı tarafından görülebilen tüm içeriğini (metinler, başlıklar, resimler, bağlantılar, tablolar, listeler vb.) içerir.

HTML Etiketleri (Tags) Nedir?

HTML etiketleri, içeriği işaretlemek ve yapılandırmak için kullanılan anahtar kelimelerdir. Genellikle küçüktür (<) ve büyüktür (>) işaretleri arasına yazılırlar. Çoğu etiket çiftler halinde gelir: bir açılış etiketi (örn: <p>) ve bir kapanış etiketi (örn: </p>). Kapanış etiketinde etiket adının önünde bir eğik çizgi (/) bulunur. Açılış ve kapanış etiketi arasındaki içerik, o etiketin etki ettiği alandır. 


<etiket_adı>İçerik buraya gelir</etiket_adı>

Bazı etiketler ise "boş" veya "kendiliğinden kapanan" etiketlerdir. Bunlar içerik barındırmazlar ve kapanış etiketleri yoktur (veya açılış etiketinin sonunda / ile belirtilebilir). Örnekler: <br> (satır atlama), <hr> (yatay çizgi), <img> (resim), <input> (form girişi). 


<br>
<hr>
<img src="resim.jpg" alt="Açıklama">
<input type="text" name="kullanici_adi">

<!-- XHTML uyumlu yazım (isteğe bağlı): -->
<br />
<hr />
<img src="resim.jpg" alt="Açıklama" />
<input type="text" name="kullanici_adi" />

HTML etiketleri büyük/küçük harfe duyarlı değildir (yani <p> ile <P> aynıdır), ancak genel kabul görmüş standart ve okunabilirlik açısından küçük harf kullanmak tavsiye edilir.

HTML Nitelikleri (Attributes) Nedir?

Nitelikler, HTML etiketlerine ek bilgiler veya özellikler katmak için kullanılır. Her zaman açılış etiketinin içinde yer alırlar ve genellikle isim="değer" çiftleri şeklinde yazılırlar. Değerler her zaman çift tırnak (") veya tek tırnak (') içine alınmalıdır (çift tırnak daha yaygındır). 


<a href="https://www.example.com">Örnek Siteye Git</a>
<img src="logo.png" alt="Şirket Logosu" width="150" height="50">
<p class="uyari" id="ilk-uyari">Bu önemli bir uyarıdır.</p>

Yukarıdaki örneklerde:

  • <a> etiketindeki href niteliği, bağlantının gideceği URL'yi belirtir.
  • <img> etiketindeki src niteliği resim dosyasının yolunu, alt niteliği resim yüklenemezse veya ekran okuyucu tarafından okunurken gösterilecek alternatif metni, width ve height nitelikleri ise resmin genişliğini ve yüksekliğini belirtir.
  • <p> etiketindeki class niteliği, CSS ile stil vermek veya JavaScript ile seçmek için kullanılan bir veya daha fazla sınıf adı tanımlar. id niteliği ise elemente benzersiz bir kimlik atar (sayfada her id sadece bir kez kullanılmalıdır).

Her etiketin kendine özgü desteklediği nitelikler vardır, ancak id, class, style (inline CSS için), title (ek bilgi için üzerine gelince çıkan tooltip) gibi bazı genel nitelikler çoğu etikette kullanılabilir.

HTML Yorumları Nasıl Yazılır?

HTML kodunuza açıklamalar veya notlar eklemek için yorumları kullanabilirsiniz. Yorumlar tarayıcı tarafından işlenmez ve sayfada görüntülenmez. Kodun belirli bölümlerini açıklamak veya geçici olarak kod parçalarını devre dışı bırakmak için kullanışlıdır. 


<!-- Bu bir tek satırlık yorumdur -->

<p>Bu paragraf görünecek.</p>

<!--
    Bu da çok satırlı
    bir yorum örneğidir.
    Aşağıdaki bölüm geçici olarak devre dışı bırakıldı.
<div class="eski-bolum">
    <p>Eski içerik...</p>
</div>
-->

<p>Bu paragraf da görünecek.</p>

Yorumlar <!-- ile başlar ve --> ile biter.

Metin İçeriğini Yapılandırma ve Biçimlendirme

HTML, metin içeriğini anlamlı bir şekilde yapılandırmak ve temel biçimlendirme uygulamak için çeşitli etiketler sunar.

Başlık Etiketleri (<h1> - <h6>)

Başlık etiketleri, belgenin veya bölümlerin başlıklarını tanımlamak için kullanılır. <h1> en önemli (genellikle sayfanın ana başlığı) ve en büyük başlığı temsil ederken, <h6> en az önemli ve en küçük başlığı temsil eder. Başlıklar sadece metni büyütmek için değil, aynı zamanda belgenin yapısını ve hiyerarşisini belirtmek için kullanılmalıdır. Arama motorları ve ekran okuyucular bu hiyerarşiyi anlar. 


<h1>Ana Sayfa Başlığı</h1>
<p>Giriş paragrafı...</p>
<h2>Bölüm 1 Başlığı</h2>
<p>Bölüm 1 içeriği...</p>
<h3>Bölüm 1 Alt Başlığı</h3>
<p>Alt bölüm içeriği...</p>
<h2>Bölüm 2 Başlığı</h2>
<p>Bölüm 2 içeriği...</p>

Genellikle bir sayfada yalnızca bir tane <h1> etiketi kullanılması önerilir.

Paragraf, Satır Atlama ve Yatay Çizgi
  • <p> (Paragraf): Metin bloklarını tanımlar. Tarayıcılar genellikle paragraflar arasına otomatik olarak bir miktar boşluk ekler.
  • <br> (Line Break): Yeni bir paragrafa başlamadan metin içinde satır atlaması yapar. Şiir veya adres gibi içeriklerde kullanışlıdır. Gereksiz yere paragraflar arası boşluk yaratmak için kullanılmamalıdır (bunun için CSS kullanılmalıdır).
  • <hr> (Horizontal Rule): Konu veya tema değişikliğini belirtmek için yatay bir çizgi çizer. Genellikle blok seviyesinde bir ayırıcı olarak kullanılır.

<p>Bu birinci paragraf. İçerik burada devam ediyor.</p>
<p>Bu ikinci paragraf. Adres örneği:<br>
123 Web Sokak,<br>
İnternet Şehri, WWW 98765</p>
<hr>
<p>Yatay çizgiden sonraki yeni konuyla ilgili paragraf.</p>

Temel Metin Biçimlendirme Etiketleri

Metin içinde belirli kısımlara vurgu yapmak veya farklı anlamlar katmak için kullanılırlar:

  • <strong> ve <b> (Kalın): <strong> metnin önemli olduğunu belirtirken (semantik anlam), <b> sadece metni stilistik olarak kalın yapar (anlamsal önemi yoktur). Genellikle <strong> tercih edilir.
  • <em> ve <i> (Eğik): <em> (emphasis) metne vurgu katarken (semantik anlam), <i> (italic) metni sadece eğik yapar (teknik terimler, yabancı kelimeler için kullanılabilir). Vurgu için <em> tercih edilir.
  • <u> (Altı Çizili): Metnin altını çizer. Genellikle bağlantılarla karıştırılabileceği için dikkatli kullanılmalıdır. Yanlış yazımları belirtmek gibi özel durumlar için düşünülebilir.
  • <s> (Üstü Çizili): (<strike> etiketi eskidir). Artık geçerli olmayan veya doğru olmayan metinleri belirtmek için kullanılır.
  • <sub> (Subscript): Alt simge metni oluşturur (örn: H2O).
  • <sup> (Superscript): Üst simge metni oluşturur (örn: x2).
  • <code>: Bilgisayar kodu parçacıklarını belirtmek için kullanılır. Genellikle tek aralıklı (monospace) bir fontla gösterilir.
  • <pre> (Preformatted Text): İçindeki metnin boşluklarını ve satır atlamalarını koruyarak, yazıldığı gibi gösterilmesini sağlar. Genellikle kod blokları için kullanılır (içine <code> etiketi yerleştirilebilir).
  • <blockquote>: Başka bir kaynaktan alıntılanan uzun metin bloklarını belirtir. Genellikle girintili olarak gösterilir. cite niteliği ile kaynak URL'si belirtilebilir.
  • <q>: Satır içi kısa alıntıları belirtir. Tarayıcılar genellikle otomatik olarak tırnak işareti ekler. cite niteliği burada da kullanılabilir.
  • <mark> (HTML5): Metnin belirli bir bölümünü vurgulamak veya işaretlemek için kullanılır (örneğin arama sonuçlarında eşleşen kelimeler).
  • <time> (HTML5): Tarih ve/veya saat bilgisini makine tarafından okunabilir formatta belirtmek için kullanılır. datetime niteliği standart formatta tarih/saat bilgisini içerir.

<p><strong>Önemli uyarı:</strong> Lütfen dikkatli olun.</p>
<p>Bu kelimeye <em>vurgu</em> yapılmıştır.</p>
<p>Kimyasal formül: H<sub>2</sub>O</p>
<p>Matematiksel ifade: E = mc<sup>2</sup></p>
<p>Bir kod parçası: <code>console.log('Merhaba');</code></p>
<pre><code class="language-javascript">
function selamVer(isim) {
  console.log('Merhaba, ' + isim + '!');
}
</code></pre>
<blockquote cite="kaynak_url">
  Bu uzun bir alıntı metnidir...
</blockquote>
<p>Atasözü der ki: <q>Damlaya damlaya göl olur.</q></p>
<p>Arama sonucu: metinde <mark>HTML</mark> kelimesi bulundu.</p>
<p>Toplantı <time datetime="2024-10-26T14:00">yarın saat 2'de</time> yapılacak.</p>

Listeler (<ul>, <ol>, <dl>)

HTML, bilgileri listelemek için üç tür liste sunar:

  • <ul> (Unordered List - Sırasız Liste): Öğelerin sırasının önemli olmadığı listelerdir. Öğeler genellikle madde işaretleri (•, -, *) ile gösterilir. Her liste öğesi <li> (List Item) etiketi içine alınır.
  • <ol> (Ordered List - Sıralı Liste): Öğelerin sırasının önemli olduğu listelerdir. Öğeler genellikle sayılar veya harflerle numaralandırılır. Her liste öğesi yine <li> etiketi içine alınır. type (1, a, A, i, I) ve start nitelikleri ile numaralandırma stili ve başlangıç değeri değiştirilebilir.
  • <dl> (Description List - Tanım Listesi): Terimler ve tanımlarını içeren listeler oluşturmak için kullanılır.
    • <dt> (Description Term): Tanımlanacak terimi belirtir.
    • <dd> (Description Details): Terimin tanımını veya açıklamasını belirtir.
    Bir <dt> birden fazla <dd> ile veya birden fazla <dt> tek bir <dd> ile ilişkilendirilebilir. 

<h4>Alışveriş Listesi (Sırasız)</h4>
<ul>
  <li>Elma</li>
  <li>Süt</li>
  <li>Ekmek</li>
</ul>

<h4>Yapılacaklar (Sıralı)</h4>
<ol type="1" start="1">
  <li>E-postaları kontrol et</li>
  <li>Raporu tamamla</li>
  <li>Toplantıya katıl</li>
</ol>

<h4>Web Terimleri (Tanım Listesi)</h4>
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language - Web sayfalarının yapısını tanımlar.</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets - Web sayfalarının görünümünü biçimlendirir.</dd>
  <dt>JS</dt>
  <dd>JavaScript - Web sayfalarına etkileşim ve dinamizm katar.</dd>
</dl>

Listeler iç içe de kullanılabilir (bir <li> içine yeni bir <ul> veya <ol> başlatılabilir).

Bağlantılar ve Görseller

Web'in temelini oluşturan bağlantılar (hyperlinks) ve sayfaları zenginleştiren görseller, HTML'in vazgeçilmez elemanlarındandır.

Bağlantı Oluşturma (<a> Etiketi)

<a> (anchor) etiketi, bir sayfadan diğerine veya aynı sayfa içindeki farklı bir bölüme bağlantı oluşturmak için kullanılır. En önemli niteliği href (Hypertext Reference)'dir ve bağlantının hedefini (URL veya sayfa içi ID) belirtir.

  • Dış Bağlantı: Başka bir web sitesine yönlendirir. URL tam olarak (http:// veya https:// ile) belirtilmelidir.
  • İç Bağlantı (Göreli URL): Aynı web sitesi içindeki başka bir sayfaya yönlendirir. Tam URL yerine dosya yolu belirtilir.
  • Sayfa İçi Bağlantı (Anchor Link): Aynı sayfa içindeki belirli bir bölüme atlamak için kullanılır. Hedef bölümün id niteliği href'te # işaretiyle belirtilir.
  • E-posta Bağlantısı: Kullanıcının varsayılan e-posta istemcisini açarak belirli bir adrese e-posta göndermesini sağlar (mailto: kullanılır).
  • Telefon Bağlantısı: Mobil cihazlarda doğrudan arama başlatır (tel: kullanılır).

target Niteliği: Bağlantının nerede açılacağını belirler.

  • _self: Bağlantıyı aynı pencerede/sekmede açar (varsayılan).
  • _blank: Bağlantıyı yeni bir pencerede/sekmede açar. Güvenlik nedeniyle genellikle rel="noopener noreferrer" ile birlikte kullanılır.
  • _parent: Bağlantıyı üst çerçevede açar (frameset kullanılıyorsa).
  • _top: Bağlantıyı pencerenin tamamında açar (tüm çerçeveleri kaldırır).

title Niteliği: Kullanıcı fare imlecini bağlantının üzerine getirdiğinde ek bilgi içeren bir araç ipucu gösterir.


<!-- Dış Bağlantı (yeni sekmede) -->
<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">Google'a Git</a>

<!-- İç Bağlantı -->
<a href="/hakkimizda.html">Hakkımızda Sayfası</a>
<a href="../iletisim.html">İletişim (Üst Klasörde)</a>

<!-- Sayfa İçi Bağlantı -->
<a href="#formlar">Formlar Bölümüne Git</a>
<!-- ... sayfanın ilerleyen kısmında ... -->
<h2 id="formlar">Formlar</h2>

<!-- E-posta Bağlantısı -->
<a href="mailto:info@example.com?subject=Bilgi%20Talebi&body=Merhaba,">Bize E-posta Gönderin</a>

<!-- Telefon Bağlantısı -->
<a href="tel:+905551234567">Bizi Arayın: 0555 123 4567</a>

<!-- Title Nitelikli Bağlantı -->
<a href="rapor.pdf" title="PDF Raporu İndir (5MB)">Raporu İndir</a>

Görsel Ekleme (<img> Etiketi)

<img> etiketi, web sayfalarına resim eklemek için kullanılır. Bu boş bir etikettir, yani kapanış etiketi yoktur.

  • src (Source): Görüntülenecek resim dosyasının yolunu (URL veya göreli yol) belirtir. Bu nitelik zorunludur.
  • alt (Alternative Text): Resim yüklenemediğinde veya ekran okuyucu kullanan kullanıcılar için gösterilecek alternatif bir metin sağlar. SEO ve erişilebilirlik için çok önemlidir ve zorunlu kabul edilmelidir. Eğer resim tamamen dekoratif ise ve içerikle ilgisi yoksa alt="" şeklinde boş bırakılabilir.
  • width ve height: Resmin genişliğini ve yüksekliğini piksel cinsinden belirtir. Bu nitelikleri eklemek, tarayıcının sayfa yüklenirken resim için yer ayırmasına yardımcı olur ve sayfa düzeninin kaymasını (layout shift) engeller. Ancak, CSS ile boyutlandırma yapmak genellikle daha esnektir (özellikle responsive tasarımda).
  • title: Resmin üzerine gelindiğinde ek bilgi gösterir.
  • loading="lazy" (Modern Nitelik): Tarayıcıya resmi hemen değil, kullanıcı sayfayı aşağı kaydırıp resmin görünür alana yaklaştığında yüklemesini söyler. Sayfa yükleme performansını artırabilir.

<img src="images/logo.png" alt="Şirket Logosu" width="200" height="80">

<img src="https://via.placeholder.com/150" alt="Yer Tutucu Resim">

<!-- Dekoratif Resim -->
<img src="images/arka-plan-deseni.jpg" alt="">

<!-- Geç Yükleme -->
<img src="images/buyuk-resim.jpg" alt="Detaylı Manzara Resmi" loading="lazy">

<!-- Bağlantılı Resim -->
<a href="ana-sayfa.html">
  <img src="images/ana-sayfa-butonu.gif" alt="Ana Sayfaya Dön">
</a>

Duyarlı Görseller (<picture> ve srcset)

Farklı ekran boyutları veya çözünürlükleri için farklı resimler sunarak performansı ve kullanıcı deneyimini iyileştirmek mümkündür.

  • srcset Niteliği (<img> içinde): Tarayıcının cihazın piksel yoğunluğuna veya ekran genişliğine göre seçebileceği farklı çözünürlükteki resim dosyalarını tanımlar.
    • Piksel Yoğunluğu (x tanımlayıcısı): srcset="image-1x.jpg 1x, image-2x.jpg 2x" (Normal ve yüksek çözünürlüklü ekranlar için).
    • Genişlik (w tanımlayıcısı) ve sizes Niteliği: Tarayıcıya farklı genişliklerdeki resimleri ve resmin farklı ekran boyutlarında ne kadar yer kaplayacağını bildirir. Tarayıcı en uygun olanı seçer. sizes="(max-width: 600px) 100vw, 50vw" (Ekran 600px'den darsa resim ekran genişliğinin %100'ünü, değilse %50'sini kaplar).
  • <picture> Etiketi: Daha gelişmiş kontrol sağlar. Farklı <source> elemanları kullanarak, ekran boyutu, yönlendirme veya tarayıcının desteklediği resim formatı (örn: WebP) gibi koşullara göre farklı resim kaynakları belirlemenizi sağlar. En sona her zaman bir <img> etiketi eklenmelidir (fallback olarak).

<!-- srcset ile Piksel Yoğunluğu -->
<img srcset="kucuk.jpg 480w, orta.jpg 800w, buyuk.jpg 1200w"
     sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 33vw"
     src="orta.jpg"
     alt="Uygun Boyutta Gösterilen Resim">

<!-- picture Etiketi ile Format ve Boyut Kontrolü -->
<picture>
  <source media="(min-width: 1200px)" srcset="buyuk.webp" type="image/webp">
  <source media="(min-width: 1200px)" srcset="buyuk.jpg" type="image/jpeg">
  <source media="(min-width: 768px)" srcset="orta.webp" type="image/webp">
  <source media="(min-width: 768px)" srcset="orta.jpg" type="image/jpeg">
  <source srcset="kucuk.webp" type="image/webp">
  <!-- Fallback Image -->
  <img src="kucuk.jpg" alt="Farklı Boyut ve Formatlarda Sunulan Resim">
</picture>

Tablolarla Veri Sunumu

HTML tabloları, satır ve sütunlardan oluşan yapılandırılmış verileri sunmak için kullanılır. Eskiden sayfa düzeni için kullanılsalar da, günümüzde bu amaçla CSS kullanılmalıdır. Tablolar sadece tabular veriler (istatistikler, karşılaştırmalar vb.) için uygundur.

Temel Tablo Yapısı

Bir tablo şu temel etiketlerle oluşturulur:

  • <table>: Tablonun tamamını kapsayan ana etikettir.
  • <tr> (Table Row): Tablo içinde bir satırı tanımlar.
  • <th> (Table Header): Bir başlık hücresini tanımlar. İçindeki metin genellikle kalın ve ortalanmış olarak gösterilir. Hem sütun başlıkları hem de satır başlıkları için kullanılabilir. scope niteliği ("col" veya "row") başlığın hangi hücrelere başlık yaptığını belirtmek için erişilebilirlik açısından önemlidir.
  • <td> (Table Data): Bir veri hücresini tanımlar. Normal tablo içeriği burada yer alır.
  • <caption>: Tabloya bir başlık veya açıklama ekler. Genellikle <table> etiketinden hemen sonra kullanılır ve tablonun içeriğini özetler. Erişilebilirlik için önemlidir.

<table border="1"> <!-- Not: border niteliği eskidir, CSS tercih edilmeli -->
  <caption>Aylık Satış Raporu</caption>
  <tr>
    <th scope="col">Ay</th>
    <th scope="col">Ürün A Satış</th>
    <th scope="col">Ürün B Satış</th>
  </tr>
  <tr>
    <th scope="row">Ocak</th>
    <td>150</td>
    <td>200</td>
  </tr>
  <tr>
    <th scope="row">Şubat</th>
    <td>180</td>
    <td>210</td>
  </tr>
  <tr>
    <th scope="row">Mart</th>
    <td>210</td>
    <td>250</td>
  </tr>
</table>

Not: Örnekteki border="1" niteliği HTML5'te geçerli olsa da, tablo kenarlıklarını ve diğer stilleri CSS ile tanımlamak modern yaklaşımdır.

Tablo Yapısını Gruplama (<thead>, <tbody>, <tfoot>)

Daha karmaşık veya uzun tablolarda, içeriği anlamsal olarak gruplamak için bu etiketler kullanılır:

  • <thead> (Table Head): Tablonun başlık satır(lar)ını gruplar. Bir tabloda en fazla bir tane bulunur.
  • <tbody> (Table Body): Tablonun ana veri satırlarını gruplar. Bir tabloda birden fazla <tbody> olabilir.
  • <tfoot> (Table Foot): Tablonun alt bilgi veya özet satır(lar)ını gruplar. Bir tabloda en fazla bir tane bulunur.

Bu etiketler, tarayıcının tabloyu daha iyi yorumlamasına yardımcı olur. Örneğin, uzun tablolarda sayfa kaydırıldığında başlık (thead) sabit tutulabilir veya yazdırma sırasında her sayfanın başında/sonunda thead/tfoot tekrarlanabilir. Ayrıca CSS ile farklı bölümleri kolayca biçimlendirmeyi sağlar.


<table>
  <caption>Detaylı Gider Tablosu</caption>
  <thead>
    <tr>
      <th scope="col">Kategori</th>
      <th scope="col">Açıklama</th>
      <th scope="col">Tutar (TL)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ofis</td>
      <td>Kira</td>
      <td>2500</td>
    </tr>
    <tr>
      <td>Ofis</td>
      <td>Faturalar</td>
      <td>450</td>
    </tr>
     <tr>
      <td>Pazarlama</td>
      <td>Reklam Gideri</td>
      <td>1200</td>
    </tr>
  </tbody>
   <tfoot>
    <tr>
      <td colspan="2"><strong>Toplam Gider</strong></td>
      <td><strong>4150</strong></td>
    </tr>
  </tfoot>
</table>

<thead>, <tbody>, ve <tfoot> etiketlerinin sırası HTML kodunda önemli değildir (genellikle thead, tfoot, tbody sırası da kullanılır), ancak tarayıcı her zaman başlık, gövde ve alt bilgi sırasında gösterir.

Hücreleri Birleştirme (colspan ve rowspan)

Bazen bir hücrenin birden fazla sütuna veya satıra yayılması gerekebilir.

  • colspan (Column Span): Bir hücrenin yatay olarak kaç sütunluk yer kaplayacağını belirtir. <th> veya <td> etiketine nitelik olarak eklenir.
  • rowspan (Row Span): Bir hücrenin dikey olarak kaç satırlık yer kaplayacağını belirtir. <th> veya <td> etiketine nitelik olarak eklenir.

<table border="1"> <!-- Not: border niteliği eskidir, CSS tercih edilmeli -->
  <caption>Zaman Çizelgesi</caption>
  <tr>
    <th>Saat</th>
    <th>Pazartesi</th>
    <th>Salı</th>
    <th>Çarşamba</th>
  </tr>
  <tr>
    <td>09:00 - 10:00</td>
    <td>Toplantı</td>
    <td rowspan="2">Proje Çalışması</td>
    <td>Eğitim</td>
  </tr>
  <tr>
    <td>10:00 - 11:00</td>
    <td>Mola</td>
    <!-- Salı sütunu rowspan nedeniyle burada boş -->
    <td>Eğitim</td>
  </tr>
  <tr>
    <td>11:00 - 12:00</td>
    <td colspan="3">Genel Sunum</td>
    <!-- Salı ve Çarşamba sütunları colspan nedeniyle burada boş -->
  </tr>
</table>

Bir hücre birleştirildiğinde, kapladığı alandaki diğer hücreler HTML kodundan çıkarılmalıdır.

HTML Formları ile Kullanıcı Etkileşimi

HTML formları, kullanıcılardan veri toplamak (giriş bilgileri, anketler, iletişim mesajları vb.) ve bu verileri sunucuya göndermek için temel mekanizmadır.

Form Oluşturma (<form> Etiketi)

Tüm form elemanları <form> etiketi içine alınır. Bu etiket, formun nasıl davranacağını belirleyen önemli niteliklere sahiptir:

  • action: Form verilerinin gönderileceği sunucu tarafı betiğin (örn: PHP, ASP.NET, Node.js script) URL'sini belirtir. Boş bırakılırsa veya belirtilmezse, form verileri aynı sayfaya gönderilir.
  • method: Verilerin sunucuya nasıl gönderileceğini belirleyen HTTP metodunu tanımlar.
    • GET: Form verilerini URL'nin sonuna ekleyerek gönderir (örn: sayfa.php?isim=Ali&yas=30). Kısa, hassas olmayan veriler (arama sorguları gibi) için uygundur. Veri URL'de göründüğü için güvensizdir ve gönderilebilecek veri miktarı sınırlıdır.
    • POST: Form verilerini HTTP isteğinin gövdesinde (body) gönderir. URL'de görünmez. Daha güvenlidir ve daha büyük miktarda veri göndermek için uygundur (dosya yükleme, giriş bilgileri vb.).
  • enctype (Encoding Type): Form verileri sunucuya gönderilmeden önce nasıl kodlanacağını belirtir. Genellikle method="POST" ile kullanılır.
    • application/x-www-form-urlencoded: Varsayılan değerdir. Boşluklar '+' ile, özel karakterler ASCII HEX değerleri ile değiştirilir.
    • multipart/form-data: Form dosya yükleme (<input type="file">) içeriyorsa bu değer kullanılmalıdır. Veriler parçalar halinde gönderilir.
    • text/plain: Verileri boşlukları '+'ya çevirmeden, basit metin olarak gönderir. Genellikle hata ayıklama dışında kullanılmaz.
  • name: Forma bir isim verir. JavaScript ile forma erişmek için kullanılabilir.
  • target: Form gönderildikten sonra sunucudan gelen yanıtın nerede görüntüleneceğini belirtir (_self, _blank vb.).
  • autocomplete: Tarayıcının form alanlarını otomatik olarak doldurup doldurmayacağını kontrol eder (on veya off).
  • novalidate: Form gönderilirken HTML5'in yerleşik doğrulama mekanizmalarını devre dışı bırakır.

<form action="/kayit-ol" method="post" enctype="multipart/form-data" name="kayitFormu" autocomplete="on">
  <!-- Form elemanları buraya gelecek -->
</form>

Giriş Elemanları (<input>)

<input> etiketi, formlardaki en yaygın kullanılan elemandır ve type niteliğine göre farklı türlerde veri girişi sağlar. Boş bir etikettir.

  • type="text": Tek satırlık metin girişi.
  • type="password": Şifre girişi (karakterler maskelenir).
  • type="email" (HTML5): E-posta adresi girişi (temel format kontrolü yapar).
  • type="number" (HTML5): Sayısal değer girişi (arttırma/azaltma okları gösterebilir). min, max, step nitelikleri kullanılabilir.
  • type="date" (HTML5): Tarih seçici gösterir.
  • type="tel" (HTML5): Telefon numarası girişi (belirli bir format zorlamaz ama mobil cihazlarda sayısal klavye açabilir).
  • type="url" (HTML5): URL girişi (temel format kontrolü yapar).
  • type="search" (HTML5): Arama alanı (görünümü text gibidir ama bazı tarayıcılarda temizleme butonu gösterebilir).
  • type="radio": Radyo düğmesi (bir grup içinden sadece bir seçeneğin seçilmesine izin verir). Aynı gruba ait radyo düğmelerinin name niteliği aynı olmalıdır. value niteliği, seçildiğinde sunucuya gönderilecek değeri belirtir. checked niteliği ile varsayılan olarak seçili gelebilir.
  • type="checkbox": Onay kutusu (birden fazla seçeneğin seçilmesine veya tek bir seçeneğin işaretlenip/kaldırılmasına izin verir). Aynı konseptteki checkbox'lar için name niteliği aynı olabilir (sunucu tarafında dizi olarak alınabilir). value ve checked nitelikleri bulunur.
  • type="file": Kullanıcının cihazından dosya seçmesini sağlar. Formun enctype="multipart/form-data" olması gerekir. accept niteliği ile kabul edilecek dosya türleri sınırlandırılabilir (örn: accept="image/png, image/jpeg").
  • type="submit": Formu gönderme düğmesi. value niteliği düğme üzerindeki metni belirler (varsayılanı "Gönder" veya "Submit").
  • type="reset": Formdaki tüm alanları varsayılan değerlerine sıfırlama düğmesi.
  • type="button": Genel amaçlı bir düğme. Varsayılan bir davranışı yoktur, genellikle JavaScript ile işlevsellik kazandırılır. value niteliği düğme üzerindeki metni belirler.
  • type="hidden": Kullanıcıya görünmeyen ancak formla birlikte sunucuya gönderilmesi gereken verileri (örn: kullanıcı ID, oturum bilgisi) tutmak için kullanılır.
  • type="range" (HTML5): Belirli bir aralıkta değer seçmek için kaydırıcı (slider) gösterir. min, max, step nitelikleri önemlidir.
  • type="color" (HTML5): Renk seçici gösterir.
  • type="datetime-local", type="month", type="week", type="time" (HTML5): Farklı tarih/saat formatları için seçiciler.

Ortak Nitelikler:

  • name: Alanın adını belirtir. Sunucu tarafında veriyi almak için kullanılır. Form gönderimi için zorunludur (submit, reset, button hariç).
  • value: Alanın başlangıç değerini veya gönderilecek değeri (radio, checkbox, submit, button için) belirtir.
  • id: Alana benzersiz bir kimlik atar. <label> etiketi ile ilişkilendirmek ve JavaScript/CSS ile seçmek için kullanılır.
  • placeholder: Alan boşken görünen ipucu metnini belirtir. Kullanıcı yazmaya başlayınca kaybolur.
  • required (HTML5): Alanın doldurulmasının zorunlu olduğunu belirtir. Form gönderilmeden önce tarayıcı kontrol yapar.
  • readonly: Alanın değerinin değiştirilemeyeceğini belirtir (ancak formla gönderilir).
  • disabled: Alanı tamamen devre dışı bırakır. Kullanıcı etkileşimde bulunamaz ve değeri formla gönderilmez. Görünümü genellikle soluktur.
  • maxlength: Metin tabanlı alanlara girilebilecek maksimum karakter sayısını belirler.
  • min, max, step: Sayısal veya tarih/saat/range türleri için minimum/maksimum değerleri ve artış adımını belirler.
  • pattern (HTML5): Alanın değerinin eşleşmesi gereken bir düzenli ifade (regular expression) tanımlar. Özel format kontrolü sağlar.
  • size: Metin tabanlı alanların görünür genişliğini karakter cinsinden belirler.
  • multiple (HTML5): type="email" veya type="file" için birden fazla değer/dosya seçimine izin verir.

<input type="text" id="ad" name="kullanici_adi" placeholder="Adınızı girin" required maxlength="50">
<br>
<input type="email" id="eposta" name="kullanici_eposta" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}">
<br>
<input type="password" id="sifre" name="kullanici_sifre" required minlength="8">
<br>
<input type="number" id="yas" name="kullanici_yas" min="18" max="99">
<br>
<input type="radio" id="erkek" name="cinsiyet" value="erkek" checked>
<label for="erkek">Erkek</label>
<input type="radio" id="kadin" name="cinsiyet" value="kadin">
<label for="kadin">Kadın</label>
<br>
<input type="checkbox" id="kvkk" name="kvkk_onay" value="1" required>
<label for="kvkk">KVKK metnini okudum, onaylıyorum.</label>
<br>
<input type="file" id="cv" name="cv_dosyasi" accept=".pdf,.doc,.docx">
<br>
<input type="hidden" name="form_id" value="kayit_formu_123">
<br>
<input type="submit" value="Kaydı Tamamla">
<input type="reset" value="Temizle">

Diğer Form Elemanları (<label>, <textarea>, <select>, <button>)
  • <label>: Bir form elemanı (genellikle <input>) için etiket tanımlar. Erişilebilirlik için çok önemlidir. for niteliği, ilişkilendirildiği form elemanının id'si ile aynı olmalıdır. Etikete tıklandığında ilişkili form elemanı odaklanır (özellikle radio ve checkbox'lar için kullanışlıdır). Alternatif olarak, form elemanını doğrudan <label> içine alabilirsiniz (bu durumda for ve id gerekmez).
  • <textarea>: Çok satırlı metin girişi alanı oluşturur. rows ve cols nitelikleri ile başlangıç boyutu belirlenebilir (CSS ile kontrol etmek daha yaygındır). name, id, required, readonly, disabled, maxlength, placeholder gibi nitelikleri destekler. Kapanış etiketi </textarea> gereklidir. Başlangıç değeri etiketler arasına yazılır.
  • <select>: Açılır liste (dropdown) oluşturur. İçindeki seçenekler <option> etiketleri ile tanımlanır.
    • <option>: Listedeki her bir seçeneği temsil eder. value niteliği, seçenek seçildiğinde sunucuya gönderilecek değeri belirtir. Etiketler arasındaki metin kullanıcıya görünen seçenektir. selected niteliği ile varsayılan olarak seçili gelebilir.
    • <optgroup>: Uzun listelerdeki seçenekleri gruplamak için kullanılır. label niteliği grup başlığını belirtir. Seçilemez bir öğedir.
    <select> etiketi name, id, required, disabled gibi nitelikleri alır. multiple niteliği eklenirse, kullanıcı birden fazla seçenek seçebilir (genellikle Ctrl/Cmd tuşu ile). size niteliği ile aynı anda görünecek seçenek sayısı belirlenebilir.
  • <button>: Tıklanabilir bir düğme oluşturur. <input type="button/submit/reset">'a göre daha esnektir çünkü içine metin dışında HTML içeriği (örn: <img>, <strong>) alabilir.
    • type Niteliği:
      • submit: Formu gönderir (varsayılan).
      • reset: Formu sıfırlar.
      • button: Varsayılan davranışı yoktur (JavaScript için).
    • name ve value: Form gönderildiğinde sunucuya gönderilecek adı ve değeri belirtir (özellikle birden fazla submit butonu varsa hangisine tıklandığını anlamak için).
    • disabled niteliği ile devre dışı bırakılabilir.
  • <fieldset> ve <legend>: Form içindeki ilgili elemanları gruplamak için kullanılır. <fieldset> grubu çevreler (genellikle etrafına bir çerçeve çizer), <legend> ise bu grubun başlığını belirtir (çerçevenin üzerine yerleşir). Erişilebilirlik ve formun okunabilirliği açısından faydalıdır.
  • <datalist> (HTML5): Bir <input> alanı için önceden tanımlanmış seçenekler listesi sunar. Kullanıcı yazmaya başladığında bu listeden öneriler gösterilir, ancak kullanıcı isterse listede olmayan bir değeri de girebilir (<select>'ten farkı budur). <input> elemanının list niteliği, <datalist>'in id'si ile eşleşmelidir. Seçenekler <option> ile tanımlanır.
  • <output> (HTML5): Bir hesaplama veya kullanıcı eyleminin sonucunu göstermek için kullanılır. Genellikle JavaScript ile değeri güncellenir. for niteliği ile hesaplamada kullanılan giriş elemanlarının ID'lerini listeleyebilir. name niteliği de alabilir.
    • 
<fieldset>
  <legend>Kişisel Bilgiler</legend>

  <label for="isim">Adınız:</label>
  <input type="text" id="isim" name="ad" required>
  <br><br>

  <label>
    Mesajınız:
    <textarea id="mesaj" name="mesaj_metni" rows="5" cols="30" placeholder="Buraya yazın..."></textarea>
  </label>
</fieldset>

<fieldset>
  <legend>Tercihler</legend>

  <label for="sehir">Şehir:</label>
  <select id="sehir" name="sehir_kodu" required>
    <option value="">-- Seçiniz --</option>
    <optgroup label="Marmara Bölgesi">
      <option value="34">İstanbul</option>
      <option value="16">Bursa</option>
    </optgroup>
    <optgroup label="Ege Bölgesi">
      <option value="35" selected>İzmir</option> <!-- Varsayılan -->
      <option value="09">Aydın</option>
    </optgroup>
  </select>
  <br><br>

  <label for="tarayici">Favori Tarayıcı:</label>
  <input list="tarayicilar" id="tarayici" name="favori_tarayici">
  <datalist id="tarayicilar">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Edge">
    <option value="Safari">
    <option value="Opera">
  </datalist>

</fieldset>

<!-- Hesaplama Örneği -->
<form oninput="sonuc.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" name="a" value="10"> +
  <input type="number" id="b" name="b" value="20"> =
  <output name="sonuc" for="a b">30</output>
</form>

<button type="submit" name="gonder" value="kaydet">
  <img src="kaydet-ikon.png" alt="" width="16" height="16"> Formu Gönder
</button>
<button type="button" onclick="alert('İptal edildi!')">İptal</button>

    HTML5 Form Doğrulama (Validation)

    HTML5, JavaScript'e gerek kalmadan temel form doğrulaması yapmak için yerleşik mekanizmalar sunar. Bu, kullanıcı deneyimini iyileştirir ve sunucu yükünü azaltır.

    • required Niteliği: Alanın boş bırakılamayacağını belirtir.
    • Tür Kontrolleri: type="email", type="url", type="number" gibi türler temel format kontrolü yapar.
    • min ve max Niteliği: Sayısal veya tarih türleri için minimum ve maksimum geçerli değerleri belirler.
    • minlength ve maxlength Niteliği: Metin tabanlı alanlar için minimum ve maksimum karakter uzunluğunu belirler.
    • pattern Niteliği: Belirtilen düzenli ifadeye (regex) uymayan girişleri geçersiz kılar. Karmaşık format kontrolleri için güçlü bir araçtır.

    Tarayıcı, form gönderilmeye çalışıldığında bu kuralları kontrol eder ve bir hata varsa kullanıcıya varsayılan bir hata mesajı göstererek formu göndermez. Bu varsayılan davranış ve mesajlar CSS ve JavaScript ile özelleştirilebilir (Constraint Validation API).

    Doğrulamayı tamamen devre dışı bırakmak için <form> etiketine novalidate niteliği veya gönder düğmesine formnovalidate niteliği eklenebilir.

    
<form action="/islem" method="post">
  <label for="k-adi">Kullanıcı Adı (En az 5 karakter):</label>
  <input type="text" id="k-adi" name="username" required minlength="5">
  <br><br>

  <label for="posta-kodu">Posta Kodu (5 haneli):</label>
  <input type="text" id="posta-kodu" name="zipcode" required pattern="\d{5}" title="Lütfen 5 haneli posta kodunu girin.">
  <br><br>

  <label for="onay">18 yaşından büyüğüm:</label>
  <input type="checkbox" id="onay" name="age_confirm" required>
  <br><br>

  <button type="submit">Gönder</button>
  <button type="submit" formnovalidate>Doğrulamasız Gönder (Test)</button>
</form>

    Unutmayın: İstemci tarafı (HTML5/JavaScript) doğrulama kullanıcı deneyimi için harikadır ancak asla tek başına yeterli değildir. Güvenlik ve veri bütünlüğü için sunucu tarafında da mutlaka doğrulama yapılmalıdır, çünkü istemci tarafı doğrulaması kolayca atlatılabilir.

    Semantik HTML: Anlamlı Yapı Kurmak

    HTML5 ile birlikte gelen semantik etiketler, web sayfasının farklı bölümlerinin anlamını ve amacını daha açık bir şekilde belirtmek için kullanılır. Bu, hem arama motorlarının (SEO) hem de yardımcı teknolojilerin (ekran okuyucular gibi, erişilebilirlik için) sayfa içeriğini daha iyi anlamasına yardımcı olur. Ayrıca kodun okunabilirliğini ve yönetilebilirliğini artırır.

    <div> ve <span> gibi genel amaçlı etiketler yerine, mümkün olduğunda daha spesifik semantik etiketleri kullanmak iyi bir pratiktir.

    Temel Sayfa Yapısı İçin Semantik Etiketler
    • <header>: Genellikle sayfanın veya bir bölümün (<article>, <section>) başlık bilgilerini içerir. Logo, ana başlık (<h1>), navigasyon menüsü gibi öğeleri barındırabilir. Bir sayfada birden fazla <header> olabilir.
    • <nav> (Navigation): Ana gezinme bağlantılarını (menüleri) içeren bölümü tanımlar. Genellikle sayfa başlığında (header) veya kenar çubuğunda (sidebar) bulunur. Sitedeki tüm bağlantı grupları için değil, sadece ana navigasyon blokları için kullanılmalıdır.
    • <main>: Belgenin veya uygulamanın ana içeriğini temsil eder. Sayfadaki benzersiz, temel içeriği kapsamalıdır. Bir belgede sadece bir tane <main> etiketi olmalıdır ve <article>, <aside>, <footer>, <header>, veya <nav> etiketlerinin içine yerleştirilemez.
    • <footer>: Genellikle sayfanın veya bir bölümün alt bilgi kısmını içerir. Telif hakkı bilgileri, yazar bilgisi, ilgili bağlantılar (gizlilik politikası, kullanım koşulları), iletişim bilgileri gibi öğeleri barındırabilir. Bir sayfada birden fazla <footer> olabilir.
    • <aside>: Ana içerikle dolaylı olarak ilgili olan içeriği temsil eder. Kenar çubukları (sidebar), reklamlar, ilgili yazılar listesi, yazar biyografisi gibi içerikler için kullanılır.
    
<body>
  <header>
    <img src="logo.png" alt="Site Logosu">
    <nav>
      <ul>
        <li><a href="/">Ana Sayfa</a></li>
        <li><a href="/hakkimizda">Hakkımızda</a></li>
        <li><a href="/iletisim">İletişim</a></li>
      </ul>
    </nav>
    <h1>Sayfanın Ana Başlığı</h1>
  </header>

  <main>
    <h2>Ana İçerik Başlığı</h2>
    <p>Sayfanın temel içeriği burada yer alır...</p>
    <!-- Diğer article, section vb. etiketler burada olabilir -->
  </main>

  <aside>
    <h3>Kenar Çubuğu</h3>
    <p>İlgili bağlantılar veya reklamlar.</p>
    <nav>
      <h4>Arşiv</h4>
      <ul>
        <li><a href="/arsiv/2024">2024</a></li>
        <li><a href="/arsiv/2023">2023</a></li>
      </ul>
    </nav>
  </aside>

  <footer>
    <p>Telif Hakkı © 2024 Site Adı. Tüm hakları saklıdır.</p>
    <nav>
      <ul>
        <li><a href="/gizlilik">Gizlilik Politikası</a></li>
        <li><a href="/kullanim">Kullanım Koşulları</a></li>
      </ul>
    </nav>
  </footer>
</body>

    İçerik Bölümlendirme Etiketleri (<article> ve <section>)
    • <article>: Sayfa içinde bağımsız, kendi kendine yetebilen ve potansiyel olarak yeniden dağıtılabilir (syndication) bir içerik parçasını temsil eder. Forum gönderisi, blog yazısı, gazete makalesi, kullanıcı yorumu gibi içerikler için uygundur. Genellikle kendi başlığını (<h2>-<h6>) içerir. <article>'lar iç içe olabilir (örn: yorumlar içeren bir blog yazısı).
    • <section>: Belge veya uygulama içinde genel, tematik bir bölümü temsil eder. Genellikle bir başlık (<h2>-<h6>) içerir. <article>'dan farkı, içeriğin bağımsız olarak anlamlı olmasının gerekmemesidir. Bir sayfanın "Giriş", "Özellikler", "İletişim Bilgileri" gibi mantıksal bölümlerini gruplamak için kullanılır. Eğer daha spesifik bir semantik etiket (<nav>, <aside>, <article>) uygun değilse ve içerik gruplanmaya ihtiyaç duyuyorsa <section> kullanılabilir. Sadece stil amacıyla gruplama yapmak için <div> daha uygundur.

    Ne zaman hangisini kullanmalı?

    • İçerik tek başına mantıklı ve başka bir yerde (örn: RSS akışı) yayınlanabilir mi? Evet ise <article>.
    • İçerik belgenin ana hatlarında (outline) mantıksal bir bölüm mü oluşturuyor ve genellikle bir başlığı var mı? Evet ise <section>.
    • Sadece stil veya script amacıyla bir gruplamaya mı ihtiyaç var? Evet ise <div>.
    
<main>
  <article>
    <header>
      <h2>Blog Yazısı Başlığı</h2>
      <p>Yayınlanma Tarihi: <time datetime="2024-03-15">15 Mart 2024</time></p>
    </header>
    <p>Blog yazısının içeriği...</p>

    <section id="yorumlar">
      <h3>Yorumlar</h3>
      <article class="yorum">
        <header>
          <h4>Yorumcu Adı</h4>
          <time datetime="2024-03-15T10:30">15 Mart 2024, 10:30</time>
        </header>
        <p>Bu harika bir yazı!</p>
      </article>
      <article class="yorum">
        <!-- Başka bir yorum -->
      </article>
    </section>

    <footer>
       <p>Kategori: Web Geliştirme</p>
    </footer>
  </article>

  <section>
      <h2>Hizmetlerimiz</h2>
      <p>Sunduğumuz hizmetler hakkında genel bilgi...</p>
      <ul>
          <li>Web Tasarım</li>
          <li>Yazılım Geliştirme</li>
      </ul>
  </section>
</main>

    Diğer Semantik Etiketler (<figure>, <figcaption>, <time>, <mark>)
    • <figure>: Genellikle bir resim, illüstrasyon, diyagram, kod örneği veya alıntı gibi kendi kendine yeten bir içerik birimini temsil eder. Belgenin ana akışından referans verilebilir ve ana akıştan bağımsız olarak taşınabilir (örn: sayfanın yanına, sonuna).
    • <figcaption>: <figure> elemanının başlığını veya açıklamasını sağlar. <figure> içinde ilk veya son eleman olarak yerleştirilebilir.
    • <time>: Daha önce bahsedildiği gibi, belirli bir zamanı veya tarih/saat aralığını temsil eder. datetime niteliği makine tarafından okunabilir formatı içerir.
    • <mark>: Metnin bir bölümünü, okuyucunun dikkatinin çekilmesi gereken bir referans veya işaretleme amacıyla vurgular (sarı arka plan gibi). Önem (<strong>) veya vurgu (<em>) belirtmez.
    • <details> ve <summary>: Kullanıcının isteğe bağlı olarak görüntüleyebileceği veya gizleyebileceği ek detaylar veya içerik oluşturur (bu rehberde sıkça kullanıldığı gibi). <summary> her zaman görünen başlığı veya etiketi içerir. Tıklandığında <details> içindeki diğer içerik görünür/gizlenir.
    • <address>: Belgenin veya bir <article>'ın yazarı/sahibi için iletişim bilgilerini (isim, adres, e-posta, telefon, sosyal medya bağlantıları vb.) içerir. Genellikle <footer> içinde kullanılır.
    
<figure>
  <img src="grafik.png" alt="Aylık Büyüme Grafiği">
  <figcaption>Şekil 1: Son 6 ayın aylık büyüme oranları.</figcaption>
</figure>

<p>Proje <time datetime="2025-01-15">15 Ocak 2025</time> tarihinde tamamlanacak.</p>

<p>Arama sonuçlarında ilgili terimler <mark>vurgulanmıştır</mark>.</p>

<details>
  <summary>Teknik Detayları Göster</summary>
  <p>Burada sadece ilgilenenlerin görmesi gereken teknik detaylar yer alır...</p>
</details>

<footer>
  <address>
    Yazar: Abdulkadir Güngör<br>
    İletişim: <a href="mailto:abdulkadirgungor.86@outlook.com">abdulkadirgungor.86@outlook.com</a><br>
    Web: <a href="https://abdulkadirgungor86.github.io/">abdulkadirgungor86.github.io</a>
  </address>
</footer>

    HTML5 ile Multimedya: Ses ve Video

    HTML5, harici eklentilere (Flash gibi) ihtiyaç duymadan web sayfalarına doğrudan ses ve video içeriği eklemeyi sağlayan <audio> ve <video> etiketlerini tanıttı.

    Ses Ekleme (<audio> Etiketi)

    <audio> etiketi, ses dosyalarını çalmak için kullanılır.

    • src Niteliği: Çalınacak ses dosyasının yolunu belirtir.
    • controls Niteliği: Tarayıcının varsayılan ses kontrol arayüzünü (oynat/duraklat, ses seviyesi, ilerleme çubuğu) gösterir. Bu nitelik olmazsa kullanıcı sesi kontrol edemez (JavaScript ile özel kontroller yapılmadıkça).
    • autoplay Niteliği: Sayfa yüklenir yüklenmez sesin otomatik olarak çalmaya başlamasını sağlar. Çoğu modern tarayıcı, kullanıcı etkileşimi olmadan otomatik oynatmayı engeller veya kısıtlar, bu yüzden dikkatli kullanılmalıdır.
    • loop Niteliği: Ses bittiğinde otomatik olarak tekrar başlamasını sağlar.
    • muted Niteliği: Sesin başlangıçta sessiz olmasını sağlar. Bazen autoplay'in çalışması için gereklidir.
    • preload Niteliği: Sayfa yüklenirken ses dosyasının nasıl yüklenmesi gerektiğini belirtir:
      • none: Ses dosyası önceden yüklenmez.
      • metadata: Sadece dosyanın meta verileri (süre vb.) yüklenir.
      • auto: Tarayıcı, ses dosyasının tamamını veya bir kısmını önceden yükleyebilir (varsayılan).

    Farklı Format Desteği (<source>): Tüm tarayıcılar aynı ses formatlarını desteklemez (yaygın formatlar: MP3, Ogg Vorbis, WAV). Farklı formatlarda aynı ses dosyasını sunarak tarayıcı uyumluluğunu artırmak için <audio> içine birden fazla <source> etiketi eklenir. Tarayıcı desteklediği ilk <source>'u kullanır. <source> etiketi src ve type (MIME türü, örn: audio/mpeg, audio/ogg) niteliklerini alır.

    <audio> etiketleri arasına, tarayıcının ses etiketini hiç desteklemediği durumlar için bir fallback metni veya bağlantı eklenebilir.

    
<!-- Basit Ses Oynatıcı -->
<audio controls src="muzik.mp3">
  Tarayıcınız audio etiketini desteklemiyor.
  <a href="muzik.mp3">Müziği İndir</a>
</audio>

<br><br>

<!-- Farklı Formatlarla ve Otomatik Oynatma (Sessiz) -->
<audio controls autoplay muted loop preload="auto">
  <source src="bildirim.ogg" type="audio/ogg">
  <source src="bildirim.mp3" type="audio/mpeg">
  Tarayıcınız audio etiketini desteklemiyor.
</audio>

    Video Ekleme (<video> Etiketi)

    <video> etiketi, web sayfalarına video içeriği gömmek için kullanılır. <audio> etiketiyle aynı temel niteliklerin çoğunu paylaşır: src, controls, autoplay, loop, muted, preload.

    Ek olarak şu nitelikler önemlidir:

    • width ve height: Video oynatıcının boyutlarını piksel cinsinden belirler. CSS ile boyutlandırmak daha esnektir.
    • poster: Video yüklenmeden veya kullanıcı oynat tuşuna basmadan önce gösterilecek bir resmin (kapak resmi) URL'sini belirtir.

    Farklı Format Desteği (<source>): Ses gibi, videolar için de tarayıcı uyumluluğu önemlidir (yaygın formatlar: MP4 (H.264 codec ile), WebM (VP8/VP9 codec ile), Ogg Theora). Farklı formatları <source> etiketleri ile sunmak en iyi yaklaşımdır. type niteliği MIME türünü ve bazen codec bilgisini içerir (örn: video/mp4; codecs="avc1.42E01E, mp4a.40.2").

    Yine, desteklenmeyen tarayıcılar için fallback içeriği etiketler arasına eklenebilir.

    
<!-- Basit Video Oynatıcı -->
<video controls width="640" height="360" poster="video-kapak.jpg" preload="metadata">
  <source src="tanitim.mp4" type="video/mp4">
  <source src="tanitim.webm" type="video/webm">
  <source src="tanitim.ogv" type="video/ogg">
  Tarayıcınız video etiketini desteklemiyor veya sağlanan formatları oynatamıyor.
  <a href="tanitim.mp4">Videoyu İndir (MP4)</a>
</video>

<br><br>

<!-- Otomatik Oynayan, Sessiz, Döngüde Arka Plan Videosu (Kontrolsüz) -->
<video autoplay muted loop playsinline width="100%" height="auto" poster="arka-plan-kapak.jpg">
  <!-- playsinline mobil cihazlarda tam ekran olmadan oynatmayı deneyebilir -->
  <source src="arka-plan.mp4" type="video/mp4">
  <source src="arka-plan.webm" type="video/webm">
  Tarayıcınız video etiketini desteklemiyor.
</video>

    Altyazı ve Açıklama Eklemek (<track> Etiketi)

    <track> etiketi, <audio> veya <video> elemanları için zamanlanmış metin parçaları (altyazılar, başlıklar, açıklamalar, bölümler) eklemek için kullanılır. Erişilebilirlik (işitme engelliler için) ve farklı dillerde içerik sunmak için çok önemlidir.

    • kind Niteliği: Metin parçasının türünü belirtir:
      • subtitles: Ana dil konuşmasından farklı bir dildeki çeviri altyazıları.
      • captions: Ana dildeki konuşmanın transkripsiyonu ve önemli ses efektlerinin açıklamaları (işitme engelliler için).
      • descriptions: Videodaki görsel içeriğin sesli açıklaması (görme engelliler için).
      • chapters: Kullanıcının medyada gezinmesine yardımcı olmak için bölüm başlıkları.
      • metadata: Scriptler tarafından kullanılacak zamanlanmış meta veriler (kullanıcıya görünmez).
    • src Niteliği: Metin parçasını içeren dosyanın (genellikle WebVTT formatında, .vtt uzantılı) URL'sini belirtir.
    • srclang Niteliği: Metin parçasının dil kodunu belirtir (örn: "en", "tr", "es"). kind="subtitles" için zorunludur.
    • label Niteliği: Tarayıcının kullanıcıya göstereceği metin parçasının başlığını (örn: "Türkçe Altyazı", "English Captions") belirtir.
    • default Niteliği: Kullanıcı başka bir tercih yapmazsa varsayılan olarak etkinleştirilecek metin parçasını işaretler. Her kind için sadece bir track default olabilir.
    
<video controls poster="film-kapak.jpg">
  <source src="film.mp4" type="video/mp4">
  <source src="film.webm" type="video/webm">
  <!-- Altyazılar ve Açıklamalar -->
  <track kind="subtitles" src="altyazi_tr.vtt" srclang="tr" label="Türkçe">
  <track kind="subtitles" src="altyazi_en.vtt" srclang="en" label="English" default>
  <track kind="captions" src="aciklama_en.vtt" srclang="en" label="English Captions">
  <track kind="descriptions" src="betimleme_en.vtt" srclang="en" label="Audio Descriptions">
  <track kind="chapters" src="bolumler_en.vtt" srclang="en" label="Chapters">
  <!-- Fallback -->
  Tarayıcınız video etiketini desteklemiyor.
</video>

    WebVTT (.vtt) dosyaları, zaman damgaları ile birlikte metinleri içeren basit metin dosyalarıdır.

    İleri HTML Konuları ve En İyi Uygulamalar

    HTML'in temellerini öğrendikten sonra, daha gelişmiş konulara ve kod kalitesini artıracak en iyi uygulamalara göz atmak faydalıdır.

    HTML ve CSS/JavaScript İlişkisi

    Modern web geliştirme, HTML, CSS ve JavaScript'in birlikte çalışmasına dayanır. Bu üç katmanın görev ayrımı şöyledir:

    • HTML (Yapı - Structure): Sayfanın içeriğini ve anlamsal yapısını tanımlar (başlıklar, paragraflar, listeler, formlar, resimler vb.). Sayfanın iskeletidir.
    • CSS (Sunum - Presentation): HTML elemanlarının nasıl görüneceğini (renkler, fontlar, boyutlar, konumlandırma, animasyonlar vb.) kontrol eder. Sayfanın görsel stilidir.
    • JavaScript (Davranış - Behavior): Sayfaya etkileşim ve dinamizm katar. Kullanıcı eylemlerine tepki verme, içeriği değiştirme, sunucuyla iletişim kurma, animasyonları kontrol etme gibi işlevleri yerine getirir. Sayfanın beynidir.

    Bu görev ayrımını korumak önemlidir:

    • HTML'i sadece yapı için kullanın: Görsel biçimlendirme için HTML nitelikleri (örn: <font>, bgcolor, align - çoğu artık geçersizdir) veya gereksiz <br> etiketleri yerine CSS kullanın.
    • CSS'i sadece sunum için kullanın: İçerik eklemek (CSS content özelliği dikkatli kullanılmalı) veya önemli yapısal bilgileri sadece CSS ile belirtmekten kaçının.
    • JavaScript'i davranış için kullanın: HTML yapısını veya temel CSS stillerini tamamen JavaScript ile oluşturmaktan kaçının (performans ve erişilebilirlik sorunları olabilir).

    CSS dosyaları <link rel="stylesheet" href="stiller.css"> ile, JavaScript dosyaları ise genellikle <body> kapanmadan önce <script src="script.js"></script> ile HTML'e dahil edilir.

    HTML Doğrulama (Validation) Neden Önemlidir?

    Yazdığınız HTML kodunun W3C standartlarına uygun olup olmadığını kontrol etme işlemidir. Doğrulama araçları (örn: W3C Markup Validation Service) kodunuzdaki hataları (yanlış kapatılmış etiketler, geçersiz nitelikler vb.) bulmanıza yardımcı olur.

    Neden önemlidir?

    • Tarayıcı Uyumluluğu: Geçerli HTML, farklı tarayıcıların sayfanızı daha tutarlı bir şekilde yorumlama olasılığını artırır. Geçersiz kod, tarayıcıların hataları tahmin ederek düzeltmeye çalışmasına neden olur, bu da beklenmedik görüntüleme sorunlarına yol açabilir.
    • Erişilebilirlik: Ekran okuyucular ve diğer yardımcı teknolojiler, sayfayı doğru yorumlamak için geçerli ve anlamsal olarak doğru HTML'e güvenirler.
    • SEO: Arama motoru botları da sayfaları tararken ve indekslerken geçerli HTML'i tercih eder. Yapısal hatalar, içeriğin doğru anlaşılmasını engelleyebilir.
    • Bakım Kolaylığı: Standartlara uygun, temiz kodun okunması, anlaşılması ve gelecekte güncellenmesi daha kolaydır.
    • Profesyonellik: Geçerli kod yazmak, detaylara dikkat ettiğinizi ve profesyonel standartlara uyduğunuzu gösterir.

    Tarayıcılar genellikle hatalı HTML kodunu "affedici" bir şekilde işlemeye çalışsa da, bu davranışa güvenmek yerine kodunuzu doğrulamak her zaman en iyi yaklaşımdır.

    HTML En İyi Uygulamaları (Best Practices)
    • Doğru DOCTYPE Kullanın: Her zaman belgenin başına <!DOCTYPE html> ekleyerek HTML5 modunu etkinleştirin.
    • Anlamlı (Semantik) Etiketler Kullanın: <div> ve <span> yerine mümkün olduğunda <header>, <nav>, <main>, <article>, <section>, <footer>, <aside> gibi etiketleri tercih edin.
    • Mantıklı Başlık Hiyerarşisi Kurun: <h1>-<h6> etiketlerini içeriğin yapısını yansıtacak şekilde, atlama yapmadan kullanın (örn: <h1>'den sonra <h3> gelmemeli). Sayfada genellikle tek bir <h1> olmalıdır.
    • alt Niteliğini Her Zaman Kullanın: Tüm <img> etiketlerinde açıklayıcı alt metinleri sağlayın. Dekoratif resimler için alt="" kullanın.
    • Formlarda <label> Kullanın: Her form kontrolünü (input, textarea, select) ilişkili bir <label> ile eşleştirin (for ve id kullanarak).
    • Küçük Harf Kullanın: Etiket ve nitelik adlarında tutarlılık ve okunabilirlik için küçük harf kullanın (örn: <img src="..." alt="...">).
    • Nitelik Değerlerini Tırnak İçine Alın: Tüm nitelik değerlerini çift (") veya tek (') tırnak içine alın (örn: class="button", id='main-nav'). Çift tırnak daha yaygındır.
    • Kodunuzu Girintileyin (Indent): Okunabilirliği artırmak için iç içe geçmiş etiketleri tutarlı bir şekilde girintileyin.
    • Gereksiz Etiketlerden Kaçının: Yapıyı veya anlamı gerektirmiyorsa fazladan <div> veya <span> kullanmaktan kaçının.
    • HTML Yorumlarını Akıllıca Kullanın: Kodun karmaşık bölümlerini açıklamak veya geçici notlar almak için yorumları kullanın, ancak aşırıya kaçmayın.
    • Kodunuzu Doğrulayın: Düzenli olarak W3C doğrulayıcı gibi araçlarla kodunuzu kontrol edin ve hataları düzeltin.
    • Karakter Kodlamasını Belirtin: <head> içinde <meta charset="UTF-8"> etiketini kullanın.
    • Dil Belirtin: <html> etiketinde lang niteliğini kullanın (örn: lang="tr").
    • CSS ve JavaScript'i Ayrı Dosyalarda Tutun: Inline stillerden (style niteliği) ve inline scriptlerden (onclick vb. veya <script> içinde doğrudan kod) mümkün olduğunca kaçının. Kodun ayrıştırılması, bakımı ve önbelleğe alınması daha kolay olur.

    Kısa Bir Bakış: HTML5 API'ları ve Diğer Özellikler

    HTML5 sadece yeni etiketler değil, aynı zamanda JavaScript ile kullanılabilecek birçok güçlü API (Application Programming Interface) ve özellik de getirmiştir:

    • Canvas API: JavaScript kullanarak 2D grafikler (çizimler, animasyonlar, oyunlar) oluşturmak için bir yüzey sağlar.
    • SVG (Scalable Vector Graphics): XML tabanlı vektörel grafik formatıdır. HTML içine doğrudan gömülebilir (<svg> etiketi) ve CSS/JavaScript ile manipüle edilebilir. Kalite kaybı olmadan ölçeklenebilir.
    • Geolocation API: Kullanıcının coğrafi konumunu (izin verirse) almak için kullanılır.
    • Web Storage (localStorage ve sessionStorage): Kullanıcının tarayıcısında veri depolamak için localStorage (kalıcı) ve sessionStorage (oturum süresince) mekanizmalarını sunar. Çerezlerden (cookies) daha fazla depolama alanı sunar ve veriler sunucuya otomatik gönderilmez.
    • Web Workers: Arka planda JavaScript kodları çalıştırmak için kullanılır, böylece ana kullanıcı arayüzü (UI) thread'i kilitlenmez ve sayfa yanıt vermeye devam eder.
    • Drag and Drop API: Sayfa içindeki elemanları sürükleyip bırakma işlevselliği eklemeyi sağlar.
    • Server-Sent Events (SSE): Sunucudan istemciye tek yönlü, otomatik veri akışı sağlar (bildirimler, canlı güncellemeler için).
    • WebSockets: Sunucu ve istemci arasında çift yönlü, kalıcı bir iletişim kanalı açar (gerçek zamanlı uygulamalar, sohbet, oyunlar için).

    Bu API'lar, modern, etkileşimli ve zengin web uygulamaları oluşturmak için HTML, CSS ve JavaScript'in birlikte nasıl çalıştığının harika örnekleridir.

    Sonuç: HTML'in Sürekli Gelişimi

    HTML, web'in temel taşı olmaya devam ediyor ve sürekli gelişiyor. WHATWG (Web Hypertext Application Technology Working Group) tarafından yönetilen "Yaşayan Standart" (Living Standard) modeli sayesinde, HTML artık büyük, periyodik sürümler yerine sürekli olarak güncelleniyor ve yeni özellikler ekleniyor.

    Bu rehber, HTML'in temellerini ve önemli kavramlarını kapsamayı amaçladı. Ancak web teknolojileri dinamik bir alan olduğundan, sürekli öğrenmeye devam etmek, yeni etiketleri ve en iyi uygulamaları takip etmek önemlidir. W3Schools, MDN Web Docs (Mozilla Developer Network) gibi kaynaklar, güncel bilgiler ve detaylı referanslar için mükemmel yerlerdir.

    Sağlam bir HTML bilgisi, web geliştirme yolculuğunuzda atacağınız en önemli adımlardan biridir. CSS ve JavaScript ile birleştiğinde, hayalinizdeki web sitelerini ve uygulamalarını hayata geçirmeniz için size güçlü bir temel sağlayacaktır.