HTML (HyperText Markup Language), web sayfalarının temel yapı taşıdır. Aşağıda görselde yer alan HTML etiketlerinin tamamını yazıya döktüm ve ardından profesyonel bir açıklama rehberi hazırladım.
📌 Görseldeki HTML Etiketleri Listesi
<!-- --> <!DOCTYPE> <a> <abbr> <acronym>
<address> <applet> <area> <article> <aside>
<audio> <b> <base> <basefont> <bdi>
<bdo> <big> <blockquote> <body> <br>
<button> <canvas> <caption> <center> <cite>
<code> <col> <colgroup> <data> <datalist>
<dd> <del> <details> <dfn> <dialog>
<dir> <div> <dl> <dt> <em>
<embed> <fieldset> <figcaption> <figure> <font>
<footer> <form> <frame> <frameset> <h1> to <h6>
<head> <header> <hr> <html> <i>
<iframe> <img> <input> <ins> <kbd>
<label> <legend> <li> <link> <main>
<map> <mark> <meta> <meter> <nav>
<noframes> <noscript> <object> <ol> <optgroup>
<option> <output> <p> <param> <picture>
<pre> <progress> <q> <rp> <rt>
<ruby> <s> <samp> <script> <section>
<select> <small> <source> <span> <strike>
<strong> <style> <sub> <summary> <sup>
<svg> <table> <tbody> <td> <template>
<textarea> <tfoot> <th> <thead> <time>
<title> <tr> <track> <tt> <u>
<ul> <var> <video> <wbr>
🚀 HTML Etiketleri Nedir?
HTML etiketleri, web sayfasının yapısını oluşturan kod bloklarıdır. Her etiket belirli bir işlevi yerine getirir:
- İçerik oluşturma
- Sayfa yapısını belirleme
- Form işlemleri
- Medya yerleştirme
- SEO optimizasyonu
- Stil ve script entegrasyonu
📂 HTML Etiketlerinin Kategorilere Ayrılmış Profesyonel Açıklaması
1️⃣ Temel Yapı Etiketleri
| Etiket | Açıklama |
|---|---|
<html> | Sayfanın ana kapsayıcısıdır. |
<head> | Meta bilgiler, CSS ve JS bağlantıları içerir. |
<body> | Kullanıcıya görünen içerik burada yer alır. |
<title> | Tarayıcı sekmesinde görünen başlık. |
<meta> | SEO ve karakter kodlaması için kullanılır. |
<!DOCTYPE> | HTML sürümünü belirtir. |
2️⃣ Metin ve Biçimlendirme Etiketleri
<p>, <br>, <hr>, <b>, <strong>, <i>, <em>, <mark>, <small>, <sub>, <sup>, <u>, <s>, <del>, <ins>, <blockquote>, <q>, <cite>, <code>, <pre>, <kbd>, <samp>, <var>
Örnek:
<p>Bu bir paragraf örneğidir.</p>
<strong>Kalın ve önemli metin</strong>
📌 <strong> SEO açısından önemlidir. <b> sadece görsel kalınlık verir.
3️⃣ Başlık Etiketleri
<h1> – <h6>
<h1>en önemli başlıktır (SEO için kritik)<h6>en küçük başlıktır
4️⃣ Liste Etiketleri
<ul> – Sırasız Liste<ol> – Sıralı Liste<li> – Liste Elemanı<dl>, <dt>, <dd> – Açıklama Listesi
5️⃣ Bağlantı ve Medya Etiketleri
| Etiket | Kullanım |
|---|---|
<a> | Link oluşturur |
<img> | Resim ekler |
<audio> | Ses dosyası |
<video> | Video dosyası |
<source> | Medya kaynağı |
<track> | Altyazı |
<iframe> | Harici sayfa gömme |
<svg> | Vektörel grafik |
<canvas> | JavaScript ile çizim |
6️⃣ Form Etiketleri
<form>, <input>, <textarea>, <button>, <select>, <option>, <optgroup>, <label>, <fieldset>, <legend>, <datalist>, <output>, <progress>, <meter>
Örnek:
<form>
<label>Ad:</label>
<input type="text">
<button>Gönder</button>
</form>
7️⃣ Semantik HTML5 Etiketleri (SEO için Önemli)
<header>, <footer>, <nav>, <section>, <article>, <aside>, <main>, <figure>, <figcaption>, <time>, <details>, <summary>
📌 Google ve arama motorları için yapısal anlam taşır.
8️⃣ Tablo Etiketleri
<table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>, <caption>, <col>, <colgroup>
9️⃣ Script ve Stil Etiketleri
<script> – JavaScript kodları<style> – CSS yazımı<link> – Harici CSS dosyası
🔴 Kullanımı Kaldırılan (Deprecated) Etiketler
Aşağıdaki etiketler modern HTML5’te önerilmez:
<applet>, <acronym>, <basefont>, <big>, <center>,
<dir>, <font>, <frame>, <frameset>, <noframes>,
<strike>, <tt>
📌 Bunların yerine CSS kullanılmalıdır.
🎯 HTML Etiketleri Neden Önemlidir?
✔ Web sitesinin iskeletini oluşturur
✔ SEO performansını etkiler
✔ Erişilebilirliği artırır
✔ Responsive tasarımın temelidir
✔ JavaScript ve CSS ile birlikte dinamik yapı sağlar
🏆 Sonuç
HTML etiketleri web geliştirmenin temelidir. Doğru etiket kullanımı:
- SEO performansını artırır
- Sayfa hızını optimize eder
- Daha temiz ve profesyonel kod yazmanızı sağlar
- Arama motorları tarafından daha iyi indekslenmenizi sağlar
