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.
Bir yanıt yazın