HTML Etiketleri Rehberi: Web Sayfalarının Temel Taşları

Yazar: Kutay Utku
Tarih: 28.06.2025
Kategori: Web Tasarım
Yorumlar: Yorum yok

Bu yazıda, HTML’de en çok kullanılan etiketleri işlevlerine göre açıklamalarıyla birlikte derledim. Web geliştiriciliğe yeni başlayanlar veya bilgilerini tazelemek isteyen herkes için sade ama kapsamlı bir kaynak sunuyorum. Etiketlerin her biri, bir web sayfasında içerikleri düzenlemekten biçimlendirmeye, bağlantılardan formlara kadar çeşitli işlevler üstlenir. Haydi birlikte inceleyelim.

1. Yapısal (Structural) Etiketler

Açıklama:
Bu etiketler, bir web sayfasının iskeletini oluşturur. Her HTML belgesi bu temel yapı ile başlar:

<!DOCTYPE> – Belge türünü tanımlar (HTML5 için zorunlu)
<html> – Tüm HTML içeriğini kapsayan ana etiket
<body> – Sayfada görünen içerikleri barındırır

2. Başlık ve Paragraf Etiketleri

Açıklama:
Başlık etiketleri sayfanın içeriğini bölümlere ayırmak için kullanılır. <h1> en büyük, <h6> en küçük başlıktır.

<h1> – Birinci düzey başlık
<h2> – İkinci düzey başlık (ve devamı <h3> … <h6> şeklinde)
<p> – Paragraf
<br/> – Satır sonu
<hr/> – Yatay çizgi

3. Biçimlendirme Etiketleri

Açıklama:
Metinleri vurgulamak ya da stil katmak için bu etiketler kullanılır:

<b> – Kalın
<i> – İtalik
<em> – Vurgu
<strong> – Önemli içerik (genellikle kalın)
<mark> – Vurgulanan metin
<del> – Üzeri çizili metin
<sub> – Alt simge
<sup> – Üst simge
<code> – Kod bloğu
<pre> – Biçimlendirilmiş metin

4. Alıntı ve Açıklama Etiketleri

Açıklama:
Metne anlam katmak veya bilgi notu eklemek için kullanılır:

<q> – Kısa alıntı
<abbr> – Kısaltma
<address> – Yazar ya da organizasyon bilgisi

5. Bağlantı ve Link Etiketleri

Açıklama:
Sayfa içi ya da dışı bağlantılar için kullanılır:

<a> – Bağlantı (hyperlink)
<link> – Dış kaynaklara bağlantı (CSS gibi)

6. Liste Etiketleri

Açıklama:
Madde madde bilgi vermek için farklı liste türleri vardır:

<ul> – Sırasız liste
<ol> – Sıralı liste
<li> – Liste öğesi
<dl> – Tanım listesi
<dt> – Tanımlanan terim
<dd> – Tanım açıklaması

7. Tablo Etiketleri

Açıklama:
Verileri düzenli sunmak için tablolar kullanılır:

<table> – Tablo
<caption> – Tablonun başlığı
<thead> – Tablo başlığı bölümü
<tbody> – Tablo gövdesi
<tfoot> – Tablo alt bölümü
<tr> – Satır
<th> – Başlık hücresi
<td> – Standart hücre

8. Form Etiketleri

Açıklama:
Kullanıcılardan veri almak için kullanılan yapıların etiketleri:

<form> – Form tanımı
<input> – Giriş alanı
<label> – Girişe etiket
<textarea> – Çok satırlı metin kutusu
<button> – Düğme
<select> – Açılır menü
<option> – Açılır menü seçeneği
<optgroup> – Seçenek grubu
<fieldset> – Form öğelerini gruplar
<legend> – Fieldset başlığı

Yazının Sonu ve Genel Açıklama

Bu yazıda temel HTML etiketlerini ve işlevlerini açıklamalarıyla birlikte ele aldık. Web geliştirme sürecinde HTML etiketleri kodun okunabilirliğini ve yapısını belirler. Bu etiketleri öğrendikçe hem statik hem de dinamik web sayfaları tasarlamak daha kolay hale gelecektir. İçeriğinizi zenginleştirmek ve kullanıcı etkileşimini artırmak için formlar, tablolar ve bağlantılar gibi öğeleri nasıl kullanacağınızı bilmek büyük avantaj sağlar. Bu bilgiler, HTML’yi daha bilinçli ve düzenli kullanmanızı sağlayacak temeli oluşturur.