HTML, modern web tasarımının temel taşıdır ve web sayfalarının yapılandırılmasında en kritik rolü oynar. Bu rehberde, HTML etiketlerinin temel özelliklerini, kullanım alanlarını ve ipuçlarını detaylı bir şekilde inceleyeceğiz. HTML öğrenmek isteyenler veya HTML etiketleri konusunda bilgilerini derinleştirmek isteyenler için bu yazı rehber niteliğinde olacaktır.
HTML etiketler, web tarayıcılarına içeriklerin nasıl görüntüleneceğini belirtir. HTML etiketler genellikle <etiket> biçiminde başlar ve </etiket> ile sonlandırılır.
Temel HTML İskeleti
Bir HTML sayfasının temel yapısı şu şekildedir:
1 2 3 4 5 6 7 8 9 10 11 | <html> <head> <title>Sayfa Başlığı</title> </head> <body> <p>Bu bir örnek HTML iskeletidir.</p> </body> <footer> <p>Copyright © 2025</p> </footer> </html> |
<html> Etiketi
1 2 3 | <html lang="tr"> <!-- HTML kodlarının tamamı buraya yazılır --> </html> |
<html>etiketi, bir HTML dokümanının en dış kapsayıcı etiketidir.- Tarayıcı, bu etiketin içindekileri yorumlar ve ekrana yansıtır.
<head> Etiketi
1 2 3 | <head> <!-- Meta bilgiler, başlık, CSS ve JavaScript dosyaları buraya eklenir --> </head> |
- Sayfanın görünmeyen ancak önemli olan bilgilerinin bulunduğu kısımdır.
- Bu etikette
<title>,<meta>,<link>ve<script>gibi diğer etiketler kullanılır.
<title> Etiketi
1 | <title>Sayfa Başlığı</title> |
- Web sayfasının başlığını belirler.
- Tarayıcı sekmesinde görüntülenir.
<body> Etiketi
1 2 3 | <body> <!-- Kullanıcıya gösterilecek içerikler buraya yazılır --> </body> |
- Web sayfasında görünen tüm içeriklerin bulunduğu bölümdür.
- Metinler, resimler, videolar, listeler, tablolar gibi tüm öğeler burada yer alır.
<footer> Etiketi
1 2 3 | <footer> <p>Copyright © 2025</p> </footer> |
- Sayfa veya bölümün alt kısmını tanımlar.
- Genellikle telif hakkı bilgileri veya iletişim bilgileri içerir.
<style> Etiketi
1 2 3 4 5 6 7 8 9 | <style> body { background-color: lightblue; } h1 { color: darkblue; text-align: center; } </style> |
- HTML dosyasının içine CSS kodları eklemek için kullanılır.
<style>etiketi genellikle<head>bölümünde yer alır ve bir sayfanın görünümünü düzenlemek için kullanılır.
<script> Etiketi
1 2 3 | <script> echo('Merhaba Dünya!'); </script> |
- Web sayfasına JavaScript eklemek için kullanılır.
- Dinamik işlemler (örneğin bir butona tıklandığında bir mesaj gösterme) için idealdir.
<script>etiketi hem<head>bölümünde hem de<body>içinde kullanılabilir.
<link> Etiketi
1 | <link rel="stylesheet" href="styles.css"> |
- Harici kaynakları (örneğin CSS dosyaları) HTML’e bağlar.
relözelliği, bağlantının türünü belirtir.
<main> Etiketi
1 2 3 4 | <main> <h2>Öne Çıkan Yazı</h2> <p>Bu bölüm, ana içeriği temsil eder.</p> </main> |
- Sayfanın ana içeriğini tanımlar.
- Birden fazla
<main>etiketi kullanılmaz.
<section> Etiketi
1 2 3 4 | <section> <h2>Hakkımızda</h2> <p>Şirketimiz 2024 yılında kurulmuştur.</p> </section> |
- Tematik bir içerik grubunu tanımlar.
- Her
<section>belirli bir bölümü temsil eder.
<article> Etiketi
1 2 3 4 | <article> <h2>Son Blog Yazısı</h2> <p>Bu bir blog yazısı örneğidir.</p> </article> |
- Bağımsız, kendi başına anlam ifade eden içerikleri temsil eder.
- Örneğin blog yazıları veya haber makaleleri için idealdir.
<aside> Etiketi
1 2 3 4 | <aside> <h3>Yan Bilgi</h3> <p>Bu bölüm ek bilgiler içindir.</p> </aside> |
- Ana içeriğe ek bilgiler sağlar.
- Genellikle bir kenar çubuğu olarak kullanılır.
<nav> Etiketi
1 2 3 4 5 6 | <nav> <ul> <li><a href="#ana">Ana Sayfa</a></li> <li><a href="#iletisim">İletişim</a></li> </ul> </nav> |
- Gezinme bağlantıları grubu oluşturur.
<meta> Etiketi
1 2 3 4 | <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Web sayfası açıklaması"> <meta name="author" content="Kodkampusu"> |
- Meta veriler sağlar.
charset: Sayfanın karakter setini belirtir. (UTF-8 en yaygın olanıdır.)namevecontent: Arama motorları ve tarayıcılar için bilgi sağlar (örneğin, açıklama, yazar bilgisi).viewport: Sayfanın mobil cihazlarda nasıl görüntüleneceğini ayarlar.
<table> Etiketi
1 2 3 4 5 6 7 8 9 10 11 12 | <table border="1"> <tr> <th>Ad</th> <th>Soyad</th> <th>Yaş</th> </tr> <tr> <td>Ali</td> <td>Yılmaz</td> <td>25</td> </tr> </table> |
- Tablo oluşturmak için kullanılır.
borderözelliği, tabloya kenarlık ekler.- İçinde
<tr>(satır),<th>(başlık hücresi),<td>(hücre) etiketleri bulunur.
<form> Etiketi
1 2 3 4 5 | <form action="/submit" method="post"> <label for="isim">İsim:</label> <input type="text" id="isim" name="isim"> <button type="submit">Gönder</button> </form> |
- Kullanıcıdan veri almak için form alanı oluşturur.
actionözelliği, verinin gönderileceği adresi belirtir.methodözelliği, HTTP metodunu belirler (GET veya POST).
<iframe> Etiketi
1 | <iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315" frameborder="0" allowfullscreen></iframe> |
- Bir başka HTML sayfasını veya içeriği mevcut sayfaya gömer.
src: Gömülecek içeriğin URL’sini belirtir.allowfullscreen: Videolar için tam ekran özelliğini etkinleştirir.
<embed> Etiketi
1 | <embed src="dosya.pdf" width="600" height="400" type="application/pdf"> |
- Harici bir kaynağı (örneğin, bir PDF dosyası veya medya) gömer.
src: Kaynak dosyasının yolunu belirtir.type: Kaynağın türünü tanımlar (örneğin,application/pdf).
<object> Etiketi
1 | <object data="animasyon.swf" width="400" height="300"></object> |
- Harici bir kaynağı (örneğin, Flash animasyonu) gömer.
data: Kaynağın yolunu belirtir.type: İçeriğin türünü tanımlar.
<h1> – <h6> Etiketleri
1 2 3 4 5 6 | <h1>Başlık 1</h1> <h2>Başlık 2</h2> <h3>Başlık 3</h3> <h4>Başlık 4</h4> <h5>Başlık 5</h5> <h6>Başlık 6</h6> |
<h1>: En büyük ve en önemli başlık.<h6>: En küçük ve en az önemli başlık.- Başlık etiketleri, içeriği hiyerarşik bir yapıya oturtmak için kullanılır.
<p> Etiketi
1 | <p>Bu bir paragraf örneğidir. HTML öğrenmek oldukça eğlencelidir!</p> |
- Bir paragraf metni oluşturur.
<p>etiketleri arasında boşluklar, satır başı ve hizalama otomatik olarak eklenir.- Paragraflar, metni düzenlemek ve okunabilirliği artırmak için kullanılır.
<br> Etiketi
1 | Birinci satır<br>İkinci satır |
- Metinde bir satır sonu oluşturur.
<br>tek başına bir etikettir ve kapanış etiketi yoktur.
<hr> Etiketi
1 2 3 | <p>Birinci paragraf</p> <hr> <p>İkinci paragraf</p> |
- İçerik arasında yatay bir çizgi ekler.
- Bölümleri görsel olarak ayırmak için kullanılır.
- Çizginin kalınlığı ve rengi CSS ile düzenlenebilir.
<b> Etiketi (Kalın Metin Etiketi)
1 | <p>Bu metin <b>kalın</b> yazılmıştır.</p> |
- Metni kalın yapar.
- Anlam veya vurgu olmadan sadece görsel olarak kalınlık sağlar.
<strong> Etiketi
1 | <p>Bu metin <strong>önemli</strong> bir bilgiyi vurgular.</p> |
- Metni kalın yapar ve vurgulu olduğunu belirtir.
- Arama motorları bu etiketi, metnin önemli olduğu şeklinde algılar.
<i> Etiketi
1 | <p>Bu metin <i>italik</i> olarak yazılmıştır.</p> |
- Metni eğik yazı (italik) yapar.
- Genellikle yabancı kelimeler, düşünceler veya vurgular için kullanılır.
<em> Etiketi
1 | <p>Bu metin <em>önemli</em> bir vurguyu ifade eder.</p> |
- Metni italik yapar ve anlamına vurgu ekler.
- Ekran okuyucular genellikle bu metni vurgulu bir şekilde okur.
<u> Etiketi
1 | <p>Bu metin <u>altı çizili</u> bir örnektir.</p> |
- Metnin altını çizer.
- Altı çizili metin genellikle bağlantı metni ile karıştırılmamalıdır.
<small> Etiketi
1 | <p>Bu metin <small>küçük</small> boyutta yazılmıştır.</p> |
- Metni daha küçük bir yazı tipiyle gösterir.
- Dipnotlar veya önemsiz bilgiler için kullanılabilir.
<sup> ve <sub> Etiketleri
1 2 | <p>Üst simge örneği: 10<sup>2</sup></p> <p>Alt simge örneği: H<sub>2</sub>O</p> |
<sup>: Metni üst simgeye taşır (örneğin, üst indisli ifadeler).<sub>: Metni alt simgeye taşır (örneğin, kimyasal formüller).
<pre> Etiketi
1 2 3 4 | <pre> Bu metin önceden biçimlendirilmiştir. </pre> |
- Metni olduğu gibi (boşluklar, satır başları dahil) gösterir.
- Kod parçaları veya sabit genişlikte metinler için kullanılır.
<blockquote> Etiketi
1 2 3 | <blockquote cite="https://example.com"> Bu bir alıntı metindir. </blockquote> |
- Uzun alıntılar için kullanılır.
cite: Alıntının kaynağını belirtir (isteğe bağlıdır).
<cite> Etiketi
1 | <p>Bu ifade <cite>HTML Belgesi</cite> adlı bir kaynaktan alınmıştır.</p> |
- Bir kaynağı, başlığı veya eseri belirtmek için kullanılır.
- Metni genellikle italik olarak gösterir.
<code> Etiketi
1 | <p>Bir Python örneği: <code>print("Merhaba Dünya")</code></p> |
- Kod parçalarını göstermek için kullanılır.
- Sabit genişlikte yazı tipi ile görüntülenir.
<span> Etiketi
1 | <p>Bu metnin <span style="color:red;">kırmızı</span> kısmı.</p> |
- Belirli bir metin parçasını gruplamak veya biçimlendirmek için kullanılır.
<div>‘in satır içi karşılığıdır.
<mark> Etiketi
1 | <p>Bu bir <mark>vurgulanmış</mark> metin örneğidir.</p> |
- Metni vurgular ve sarı arka plan ile işaretler.
- Önemli veya dikkat çekmesi gereken metinleri belirtmek için kullanılır.
<del> Etiketi
1 | <p>Bu metin <del>geçersiz</del> kabul edilmiştir.</p> |
- Metni üzeri çizili şekilde gösterir.
- Eski, iptal edilmiş veya silinmiş içerikler için kullanılır.
<ins> Etiketi
1 | <p>Bu metin <ins>eklenmiştir</ins>.</p> |
- Metni altı çizili şekilde gösterir ve yeni eklenmiş olduğunu belirtir.
<del>etiketiyle birlikte değişiklik göstermek için kullanılabilir.
<abbr> Etiketi
1 | <p><abbr title="HyperText Markup Language">HTML</abbr> öğrenmek faydalıdır.</p> |
- Kısaltmaların tam anlamını belirtmek için kullanılır.
titleözelliği, üzerine gelindiğinde tam metni gösterir.
<address> Etiketi
1 2 3 4 | <address> Yazar: Oktay Ala<br> E-posta: <a href="mailto:oktay@hotmail.com">oktay@example.com</a> </address> |
- İletişim bilgilerini belirtir.
- Genellikle yazar adı, e-posta, adres gibi bilgiler için kullanılır.
<bdi> Etiketi
1 | <p>Bu metin: <bdi>مثال</bdi> sağdan sola yazılmıştır.</p> |
- Metnin yönünü belirler.
- Sağdan sola veya soldan sağa yazı yazıldığında metin akışını bozmadan görüntüler.
<bdo> Etiketi
1 | <p><bdo dir="rtl">Bu metin sağdan sola yazılmıştır.</bdo></p> |
- Metin yönünü sağdan sola (rtl) veya soldan sağa (ltr) değiştirmek için kullanılır.
<q> Etiketi
1 | <p><q>HTML öğrenmek harikadır!</q></p> |
- Kısa alıntılar için kullanılır.
- Tarayıcılar, alıntıyı otomatik olarak çift tırnak içinde gösterir.
<time> Etiketi
1 | <p>Etkinlik tarihi: <time datetime="2024-12-10">10 Aralık 2024</time></p> |
- Tarih ve saatleri belirtir.
datetimeözelliği, makine tarafından okunabilir tarih formatı sağlar.
<s> Etiketi
1 | <p>Bu metin <s>artık geçersiz</s> kabul edilmektedir.</p> |
- Metni üzeri çizili şekilde gösterir ve artık geçersiz olduğunu belirtir.
- Genellikle fiyat değişikliklerinde veya eski bilgilerde kullanılır.
<var> Etiketi
1 | <p>Formül: <var>x</var> = <var>y</var> + 2</p> |
- Matematiksel ifadelerde veya kodlarda değişkenleri belirtmek için kullanılır.
- Metni genellikle italik olarak gösterir.
<kbd> Etiketi
1 | <p>Klavye kısayolu: <kbd>Ctrl + C</kbd></p> |
- Klavye girdilerini göstermek için kullanılır.
- Sabit genişlikte yazı tipi ile görüntülenir.
<samp> Etiketi
1 | <p>Program çıktısı: <samp>Merhaba Dünya!</samp></p> |
- Program veya komut çıktısını göstermek için kullanılır.
<details> Etiketi
1 2 3 4 | <details> <summary>Detayları göster</summary> Bu metin detaylara tıklandığında görünür. </details> |
- Açılır kapanır bölümler oluşturur.
<summary>etiketi, başlığı belirtir.
<ruby>, <rt>, <rp> Etiketleri
1 2 3 | <ruby> 漢 <rt>Kanji</rt> </ruby> |
<ruby>: Fonetik rehber içerir.<rt>: Fonetik açıklama.<rp>: Eski tarayıcılar için alternatif içerik sağlar.
