HTML (HyperText Markup Language), web sayfalarının iskeletini oluşturan işaretleme dilidir. HTML etiketleri sayesinde metinler, görseller, formlar, videolar ve daha fazlası tarayıcıya nasıl gösterileceğini anlatır.
Bu yazıda HTML’de bulunan tüm etiketleri, kategorilere ayırarak açıklamalarıyla birlikte bulacaksın.
1. Temel (Root & Metadata) Etiketleri
<html>
<head>
<title>
<base>
<link>
<meta>
<style>
| Etiket | Açıklama |
|---|---|
<html> | HTML belgesinin kök etiketi |
<head> | Meta bilgilerin bulunduğu alan |
<title> | Sekme başlığı |
<base> | Varsayılan URL |
<link> | Harici dosya bağlama (CSS vb.) |
<meta> | SEO, charset, viewport |
<style> | Dahili CSS |
2. Sayfa Yapısı (Layout & Sectioning)
<body>
<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>
| Etiket | Açıklama |
|---|---|
<body> | Görünen içerik |
<header> | Üst alan |
<nav> | Menü |
<main> | Ana içerik |
<section> | Bölüm |
<article> | Makale |
<aside> | Yan içerik |
<footer> | Alt alan |
3. Metin (Text Content) Etiketleri
<h1> – <h6>
<p>
<br>
<hr>
<pre>
<blockquote>
<ol>
<ul>
<li>
<dl>
<dt>
<dd>
| Etiket | Açıklama |
|---|---|
<h1>-<h6> | Başlıklar |
<p> | Paragraf |
<br> | Satır sonu |
<hr> | Ayırıcı çizgi |
<pre> | Önceden biçimlendirilmiş metin |
<blockquote> | Alıntı |
<ol> | Sıralı liste |
<ul> | Sırasız liste |
<li> | Liste elemanı |
<dl> | Tanım listesi |
<dt> | Terim |
<dd> | Açıklama |
4. Inline (Metin İçi) Etiketler
<a>
<span>
<strong>
<em>
<b>
<i>
<u>
<mark>
<small>
<sub>
<sup>
<code>
| Etiket | Açıklama |
|---|---|
<a> | Link |
<span> | Inline kapsayıcı |
<strong> | Kalın (anlamlı) |
<em> | Vurgu |
<b> | Kalın |
<i> | İtalik |
<u> | Altı çizili |
<mark> | Vurgulu |
<small> | Küçük metin |
<sub> | Alt simge |
<sup> | Üst simge |
<code> | Kod |
5. Medya Etiketleri
<img>
<audio>
<video>
<source>
<track>
<figure>
<figcaption>
| Etiket | Açıklama |
|---|---|
<img> | Resim |
<audio> | Ses |
<video> | Video |
<source> | Medya kaynağı |
<track> | Altyazı |
<figure> | Medya kapsayıcı |
<figcaption> | Açıklama |
6. Form Etiketleri
<form>
<input>
<textarea>
<button>
<label>
<select>
<option>
<optgroup>
<fieldset>
<legend>
<datalist>
<output>
| Etiket | Açıklama |
|---|---|
<form> | Form |
<input> | Girdi |
<textarea> | Çok satırlı metin |
<button> | Buton |
<label> | Etiket |
<select> | Açılır liste |
<option> | Seçenek |
<optgroup> | Grup |
<fieldset> | Alan grubu |
<legend> | Başlık |
<datalist> | Otomatik tamamlama |
<output> | Çıktı |
7. Tablo Etiketleri
<table>
<caption>
<thead>
<tbody>
<tfoot>
<tr>
<th>
<td>
<colgroup>
<col>
colspan: Bir tablo hücresinin yatayda kaç sütunu kaplayacağını belirtir.rowspan: Bir tablo hücresinin dikeyde kaç satırı kaplayacağını belirtir.
Kullanım:
<td colspan="2"></td>
<td rowspan="3"></td>
8. Gömme & Grafik Etiketleri
<iframe>
<embed>
<object>
<param>
<canvas>
<svg>
9. Script & Etkileşim
<script>
<noscript>
<template>
<slot>
10. Global & Yardımcı Etiketler
<div>
<span>
<details>
<summary>
<dialog>
<menu>
11. Artık Kullanılmayan (Deprecated) Etiketler ⚠️
Kullanılması önerilmez ama bilmek faydalıdır.
<font>
<center>
<marquee>
<big>
<strike>
<frame>
<frameset>
<noframes>
<applet>
Sonuç
Bu yazıda:
- ✅ Güncel HTML etiketleri
- ✅ Semantik yapı
- ✅ Form, tablo, medya etiketleri
- ✅ Artık kullanılmayan etiketler
tek bir yerde toplandı.
📌 Not: HTML sürekli güncellenir, ancak bu liste modern web geliştirme için gereken neredeyse tüm HTML etiketlerini kapsar.
İstersen:
- ✔️ PDF / tablo formatı
- ✔️ Sadece güncel etiketler
- ✔️ Örnekli anlatım
- ✔️ SEO uyumlu blog versiyonu
hazırlayabilirim. Hangisini istiyorsun? 😊
