HTML (HyperText Markup Language), web sayfalarının iskeletini oluşturan temel işaretleme dilidir. HTML etiketleri (tags), içeriğin tarayıcı tarafından nasıl yapılandırılacağını ve görüntüleneceğini belirler. Her etiket belirli bir amaca hizmet eder: metin biçimlendirme, görsel yerleştirme, bağlantı oluşturma, form hazırlama, multimedya ekleme gibi.
Aşağıda görselde yer alan HTML etiketleri eksiksiz şekilde yazıya dökülmüş, ardından kategorilere ayrılarak profesyonel bir açıklama ile geliştirilmiştir.
Görselde Yer Alan HTML Etiketleri (Tam Liste)
<!-- --> <!DOCTYPE> <a> <abbr> <acronym>
<address> <applet> <area> <article> <aside>
<audio> <b> <base> <basefont> <bdi>
<bdo> <big> <blockquote><body> <br>
<button> <canvas> <caption> <cite> <code>
<col> <colgroup> <data> <datalist> <dd>
<del> <details> <dfn> <dialog> <dir>
<div> <dl> <dt> <em> <embed>
<fieldset> <figcaption> <figure> <font> <footer>
<form> <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> <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 Etiketlerinin Profesyonel Kategorik Açıklaması
HTML etiketlerini daha iyi anlamak için onları işlevlerine göre sınıflandırmak gerekir.
1️⃣ Belge Yapısı (Document Structure Tags)
Web sayfasının temel iskeletini oluşturur.
<html>→ Sayfanın kök etiketi<head>→ Meta bilgiler<title>→ Sekme başlığı<body>→ Görünen içerik<!DOCTYPE>→ HTML sürüm tanımı<meta>→ Karakter seti, SEO vb.<link>→ CSS bağlantıları<style>→ Dahili stil<script>→ JavaScript kodu
2️⃣ Semantik (Anlamlı) HTML5 Etiketleri
SEO ve erişilebilirlik için kritik öneme sahiptir.
<header><nav><main><section><article><aside><footer><figure><figcaption><details><summary><time><mark>
3️⃣ Metin Biçimlendirme Etiketleri
Metinleri vurgulamak ve anlam katmak için kullanılır.
<h1>–<h6><p><b><strong><i><em><small><sub><sup><u><s><blockquote><q><cite><code><pre><kbd><var><samp>
4️⃣ Liste Etiketleri
<ul>→ Sırasız liste<ol>→ Sıralı liste<li>→ Liste elemanı<dl>→ Tanım listesi<dt>→ Terim<dd>→ Açıklama
5️⃣ Tablo Etiketleri
<table><thead><tbody><tfoot><tr><td><th><caption><col><colgroup>
6️⃣ Form Etiketleri
Kullanıcıdan veri almak için kullanılır.
<form><input><textarea><select><option><optgroup><button><label><fieldset><legend><datalist><output>
7️⃣ Medya ve Grafik Etiketleri
<img><audio><video><source><track><picture><canvas><svg><iframe><embed><object><param>
8️⃣ Diğer Önemli Etiketler
<div>→ Blok kapsayıcı<span>→ Satır içi kapsayıcı<br>→ Satır sonu<hr>→ Yatay çizgi<template>→ Şablon içerik<dialog>→ Açılır pencere<map>ve<area>→ Görsel haritalama
⚠️ Kullanımdan Kalkan (Deprecated) Etiketler
Modern HTML5 ile kullanımı önerilmeyen bazı etiketler:
<acronym>
<applet>
<basefont>
<big>
<dir>
<font>
<frameset>
<noframes>
<strike>
<tt>
Bu etiketlerin yerine CSS ve modern HTML5 yapıları kullanılmalıdır.
Profesyonel Değerlendirme
Modern web geliştirmede:
- Semantik HTML kullanımı SEO açısından kritiktir.
- CSS ile tasarım ayrılmalı, HTML sadece yapı için kullanılmalıdır.
- Deprecated etiketlerden kaçınılmalıdır.
- Erişilebilirlik (Accessibility) standartları gözetilmelidir.
- Performans ve temiz kod prensipleri uygulanmalıdır.
HTML etiketleri yalnızca bir işaretleme aracı değil; doğru kullanıldığında güçlü, erişilebilir ve arama motoru dostu web projeleri üretmenin temelidir.
