En Çok Kullanılan HTML Kodları ve Açıklamaları

En Çok Kullanılan HTML Etiketleri ve Açıklamaları

HTML (HyperText Markup Language), web sayfalarının temel yapı taşıdır. Her web sitesi, kullanıcıya metin, görsel, bağlantı veya form gösterebilmek için HTML etiketlerinden yararlanır. Doğru etiket kullanımı hem ziyaretçi deneyimini artırır hem de arama motorlarının sayfayı daha iyi anlamasını sağlar. En yaygın kullanılan etiketlerin başında <h1>, <p>, <a>, <img>, <div>, <span> ve <form> gelir. Bu etiketler sayesinde web sayfası bölümlere ayrılır, içerik düzenlenir ve kullanıcı etkileşimi sağlanır. Örneğin başlık etiketleri içerik hiyerarşisini belirlerken, paragraf etiketleri metinleri okunabilir hale getirir. Linkler ziyaretçiyi başka sayfalara yönlendirir, görseller sayfayı zenginleştirir. Ayrıca tablolar, listeler ve formlar da veri düzeni ve kullanıcıdan bilgi toplamak için sıkça tercih edilir. HTML etiketlerini doğru sırada ve anlamına uygun biçimde kullanmak, profesyonel ve erişilebilir web siteleri oluşturmanın en temel adımıdır.

HTML Etiketlerinin Önemi

En çok kullanılan HTML etiketlerini öğrenmek, yeni başlayanlar için sağlam bir temel oluşturur. Özellikle <head> kısmındaki meta etiketleri SEO açısından, <body> kısmındaki içerik etiketleri ise kullanıcı deneyimi açısından büyük önem taşır. Başarılı bir web sayfası, hem kullanıcıya hem de arama motorlarına açık ve düzenli bilgi sunar.

<!DOCTYPE html>

HTML belgesinin sürümünü tarayıcıya bildirir. HTML5 için kullanılır.

<!DOCTYPE html>

<html>...</html>

Tüm HTML belgesini kapsayan ana etikettir.

<html lang="tr">
  <head></head>
  <body></body>
</html>

<head>...</head>

Sayfa hakkında meta bilgiler içerir.

<head>
  <meta charset="UTF-8">
  <title>Başlık</title>
</head>

<title>...</title>

Sayfanın başlığını belirler.

<title>En Çok Kullanılan HTML Etiketleri</title>

<meta>

Sayfa hakkında bilgiler içerir.

<meta charset="UTF-8">
<meta name="description" content="HTML etiketleri rehberi">

<link>

Harici dosyaları bağlar (ör. CSS).

<link rel="stylesheet" href="style.css">

<body>...</body>

Kullanıcıya görünen içerikler buraya yazılır.

<body>
  <h1>Merhaba Dünya</h1>
</body>

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

Başlıklar oluşturmak için kullanılır.

<h1>Ana Başlık</h1>
<h2>Alt Başlık</h2>

<p>

Paragraf oluşturur.

<p>Bu bir paragraf örneğidir.</p>

<a>

Bağlantı (link) oluşturur.

<a href="https://example.com">Siteye Git</a>

<img>

Resim eklemek için kullanılır.

<img src="resim.jpg" alt="Açıklama">

<br>

Satır sonu ekler.

Merhaba<br>Dünya

<hr>

Yatay çizgi çizer.

<hr>

<div>

Blok seviye bölüm oluşturur.

<div>Bir bölüm</div>

<span>

Satır içi küçük bölümler için kullanılır.

<p>Merhaba <span style="color:red">Dünya</span></p>

<ul>, <ol>, <li>

Listeler oluşturur.

<ul>
  <li>Elma</li>
  <li>Armut</li>
</ul>

<ol>
  <li>Birinci</li>
  <li>İkinci</li>
</ol>

<table>, <tr>, <td>, <th>

Tablo oluşturur.

<table border="1">
  <tr>
    <th>Ad</th><th>Yaş</th>
  </tr>
  <tr>
    <td>Ali</td><td>25</td>
  </tr>
</table>

<form>

Kullanıcıdan veri almak için form alanı oluşturur.

<form action="#" method="post">
  <input type="text" placeholder="Adınızı girin">
  <button type="submit">Gönder</button>
</form>

<input>

Form içinde alanlar ekler.

<input type="text" placeholder="Ad">
<input type="password" placeholder="Şifre">
<input type="email" placeholder="E-posta">

<textarea>

Çok satırlı metin kutusu oluşturur.

<textarea rows="4" cols="30">Yorumunuzu yazın...</textarea>

<button>

Buton ekler.

<button>Tıkla</button>

<select> ve <option>

Açılır liste oluşturur.

<select>
  <option>Seçenek 1</option>
  <option>Seçenek 2</option>
</select>

<strong> ve <b>

Metni kalın yapar.

<strong>Önemli</strong> ve <b>Kalın</b>

<em> ve <i>

Metni italik yapar.

<em>Vurgulu</em> ve <i>İtalik</i>

<blockquote>

Alıntı metinleri belirtir.

<blockquote>Bu bir alıntıdır.</blockquote>

<code>

Kod parçalarını göstermek için kullanılır.

<code>console.log("Merhaba");</code>

<abbr>

Kısaltmalar için açıklama ekler.

<abbr title="Cascading Style Sheets">CSS</abbr>

<section>

Belgede anlamlı bir bölüm tanımlar.

<section>
  <h2>Hakkımızda</h2>
</section>

<article>

Bağımsız içerik parçası tanımlar.

<article>
  <h2>Blog Yazısı</h2>
</article>

<header> ve <footer>

Üstbilgi ve altbilgi tanımlar.

<header>Logo ve Menü</header>
<footer>Telif © 2025</footer>

<nav>

Menü veya gezinme linklerini içerir.

<nav>
  <a href="#">Ana Sayfa</a> |
  <a href="#">İletişim</a>
</nav>

<aside>

Ana içerikten bağımsız yan içerik.

<aside>Reklam Alanı</aside>

<audio>

Ses dosyaları eklemek için kullanılır.

<audio controls>
  <source src="ses.mp3" type="audio/mpeg">
</audio>

<video>

Video eklemek için kullanılır.

<video controls width="320">
  <source src="video.mp4" type="video/mp4">
</video>

<iframe>

Başka bir sayfayı gömülü olarak gösterir.

<iframe src="https://example.com" width="400" height="300"></iframe>