{"id":32566,"date":"2025-10-23T09:41:24","date_gmt":"2025-10-23T06:41:24","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=32566"},"modified":"2025-10-23T09:41:24","modified_gmt":"2025-10-23T06:41:24","slug":"html-ogesi-nedir-web-sayfalarinin-temel-yapi-tasi-ve-anatomisi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/html-ogesi-nedir-web-sayfalarinin-temel-yapi-tasi-ve-anatomisi\/","title":{"rendered":"HTML \u00d6\u011fesi Nedir? Web Sayfalar\u0131n\u0131n Temel Yap\u0131 Ta\u015f\u0131 ve Anatomisi"},"content":{"rendered":"<p><body><\/p>\n<h2>HTML \u00d6\u011fesi Nedir? Web Sayfalar\u0131n\u0131n Temel Yap\u0131 Ta\u015f\u0131 ve Anatomisi<\/h2>\n<h3>Giri\u015f: Web&#8217;in Temel Yap\u0131 Ta\u015f\u0131<\/h3>\n<p>\u0130nternet d\u00fcnyas\u0131n\u0131n temelini olu\u015fturan web sayfalar\u0131, milyonlarca bilginin, g\u00f6rselin ve etkile\u015fimin bir araya geldi\u011fi dijital platformlard\u0131r. Bu sayfalar\u0131n arkas\u0131nda yatan yap\u0131sal iskelet ise HyperText Markup Language (HTML) ad\u0131 verilen i\u015faretleme dilidir. HTML, bir web sayfas\u0131n\u0131n i\u00e7eri\u011fini ve yap\u0131s\u0131n\u0131 tan\u0131mlamak i\u00e7in kullan\u0131lan bir dizi i\u015faretleme kodu veya &#8220;etiket&#8221;den olu\u015fur. Ancak bu etiketlerin \u00f6tesinde, her bir web sayfas\u0131n\u0131n ger\u00e7ek yap\u0131 ta\u015flar\u0131 &#8220;HTML \u00d6\u011feleri&#8221;dir. Bir HTML \u00f6\u011fesi, sadece bir etiket \u00e7ifti olmaktan \u00e7ok daha fazlas\u0131d\u0131r; web i\u00e7eri\u011finin anlam\u0131n\u0131, yap\u0131s\u0131n\u0131 ve taray\u0131c\u0131lar taraf\u0131ndan nas\u0131l yorumlanaca\u011f\u0131n\u0131 belirleyen kapsaml\u0131 bir yap\u0131d\u0131r.<\/p>\n<p>Bu makalede, HTML \u00f6\u011felerinin ne oldu\u011funu, nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, farkl\u0131 t\u00fcrlerini, niteliklerini ve web geli\u015ftirme s\u00fcrecindeki kritik rol\u00fcn\u00fc detayl\u0131 bir \u015fekilde inceleyece\u011fiz. HTML&#8217;in temel prensiplerini anlamak, etkili, eri\u015filebilir ve arama motoru dostu web sayfalar\u0131 olu\u015fturman\u0131n ilk ad\u0131m\u0131d\u0131r.<\/p>\n<h3>HTML \u00d6\u011fesi Nedir? Temel Tan\u0131m ve Yap\u0131<\/h3>\n<p>Bir HTML \u00f6\u011fesi, bir web sayfas\u0131n\u0131n i\u00e7eri\u011finin en temel yap\u0131 ta\u015f\u0131d\u0131r. Genellikle bir a\u00e7\u0131l\u0131\u015f etiketi, bir kapan\u0131\u015f etiketi ve bu iki etiket aras\u0131nda yer alan i\u00e7erikten olu\u015fur. Ancak baz\u0131 \u00f6\u011feler kendi kendine kapanan (bo\u015f) yap\u0131da olabilir ve i\u00e7erik bar\u0131nd\u0131rmazlar.<\/p>\n<h4>A\u00e7\u0131l\u0131\u015f Etiketi, \u0130\u00e7erik ve Kapan\u0131\u015f Etiketi<\/h4>\n<p>Bir HTML \u00f6\u011fesinin standart yap\u0131s\u0131 \u015fu \u015fekildedir:<\/p>\n<pre><code class=\"language-html\"><etiket_ad\u0131>Bu, \u00f6\u011fenin i\u00e7eri\u011fidir.<\/etiket_ad\u0131><\/code><\/pre>\n<p>*   <strong>A\u00e7\u0131l\u0131\u015f Etiketi (<code><etiket_ad\u0131><\/code>):<\/strong> \u00d6\u011fenin ba\u015flad\u0131\u011f\u0131n\u0131 belirtir. Etiketin ad\u0131, k\u00fc\u00e7\u00fckt\u00fcr (<code><<\/code>) ve b\u00fcy\u00fckt\u00fcr (<code>><\/code>) i\u015faretleri aras\u0131na yaz\u0131l\u0131r. \u00d6rne\u011fin, bir paragraf i\u00e7in <code><\/p>\n<p><\/code>, bir ba\u015fl\u0131k i\u00e7in `<code>.<\/p>\n<p><strong>\u00d6rnek:<\/strong><\/p>\n<pre><code class=\"language-html\"><p>Bu bir paragraf \u00f6\u011fesidir.<\/p><\/code><\/pre>\n<p>Burada <\/code><\/p>\n<p><code> a\u00e7\u0131l\u0131\u015f etiketi, <\/code><\/p>\n<p><code> kapan\u0131\u015f etiketi ve \"Bu bir paragraf \u00f6\u011fesidir.\" ifadesi \u00f6\u011fenin i\u00e7eri\u011fidir. Bu yap\u0131, taray\u0131c\u0131ya bu metnin bir paragraf olarak yorumlanmas\u0131 gerekti\u011fini bildirir.<\/p>\n<h4>Bo\u015f (Void) veya Kendi Kendine Kapanan \u00d6\u011feler<\/h4>\n<p>Baz\u0131 HTML \u00f6\u011feleri, i\u00e7erik bar\u0131nd\u0131rmazlar ve bu nedenle bir kapan\u0131\u015f etiketine ihtiya\u00e7 duymazlar. Bu t\u00fcr \u00f6\u011felere \"bo\u015f \u00f6\u011feler\" veya \"kendi kendine kapanan \u00f6\u011feler\" denir. Genellikle tek bir etiketle temsil edilirler.<\/p>\n<p><strong>\u00d6rnekler:<\/strong><\/p>\n<p>*   <\/code><img decoding=\"async\" src=\"resim.jpg\" alt=\"A\u00e7\u0131klama\"><code>: Bir g\u00f6rsel ekler. \u0130\u00e7eri\u011fi yoktur, sadece nitelikler arac\u0131l\u0131\u011f\u0131yla kayna\u011f\u0131n\u0131 ve a\u00e7\u0131klamas\u0131n\u0131 belirtir.<br \/>\n*   <\/code><br \/><code>: Bir sat\u0131r sonu (break) ekler.<br \/>\n*   <\/code><\/p>\n<hr>\n<p><code>: Yatay bir \u00e7izgi (horizontal rule) ekler.<br \/>\n*   <\/code><input type=\"text\"><code>: Bir giri\u015f alan\u0131 olu\u015fturur.<br \/>\n*   <\/code><link rel=\"stylesheet\" href=\"style.css\"><code>: Harici bir stil dosyas\u0131n\u0131 ba\u011flar.<br \/>\n*   <\/code><meta charset=\"UTF-8\"><code>: Belge hakk\u0131nda meta bilgiler sa\u011flar.<\/p>\n<p>Bu \u00f6\u011feler, i\u00e7eri\u011fi do\u011frudan bar\u0131nd\u0131rmak yerine, genellikle nitelikleri (attributes) arac\u0131l\u0131\u011f\u0131yla i\u015flevselliklerini veya bilgilerini tan\u0131mlarlar. XHTML'de bu \u00f6\u011felerin sonuna bir e\u011fik \u00e7izgi eklemek yayg\u0131n bir uygulamayd\u0131 (\u00f6rn. <\/code><img \/><code>), ancak HTML5'te bu iste\u011fe ba\u011fl\u0131d\u0131r ve genellikle kullan\u0131lmaz.<\/p>\n<h4>\u00d6\u011felerin Semantik Anlam\u0131<\/h4>\n<p>HTML \u00f6\u011feleri sadece yap\u0131sal bir g\u00f6rev \u00fcstlenmekle kalmaz, ayn\u0131 zamanda semantik (anlamsal) bir anlam da ta\u015f\u0131rlar. Semantik HTML, bir \u00f6\u011fenin i\u00e7eri\u011finin ne anlama geldi\u011fini net bir \u015fekilde ifade eden HTML kodunu ifade eder. \u00d6rne\u011fin:<\/p>\n<p>*   <\/code><\/p>\n<p><code>: Bir paragraf\u0131 temsil eder. Taray\u0131c\u0131, ekran okuyucu ve arama motorlar\u0131 bunun d\u00fcz metin blo\u011fu oldu\u011funu anlar.<br \/>\n*   <\/code><\/p>\n<nav>\n<ul>\n<li><a href=\"\/\">Ana Sayfa<\/a><\/li>\n<li><a href=\"\/hakkimizda\">Hakk\u0131m\u0131zda<\/a><\/li>\n<\/ul>\n<\/nav>\n<\/header>\n<p>    <main><\/p>\n<section>\n<h2>B\u00f6l\u00fcm Ba\u015fl\u0131\u011f\u0131<\/h2>\n<p>Bu bir paragraft\u0131r. \u0130\u00e7inde <strong>\u00f6nemli<\/strong> bir kelime var.<\/p>\n<\/section>\n<p>    <\/main><br \/>\n<\/body><\/p>\n<pre><code class=\"language-\">Bu \u00f6rnekte:\n\n*   <code><body><\/code> \u00f6\u011fesi, <code><header><\/code> ve <code><main><\/code> \u00f6\u011felerinin ebeveynidir.\n*   <code><header><\/code> \u00f6\u011fesi, <code>\n    <p class=\"metin\">Bu bir paragraf.<\/p>\n  <\/body>\n<\/html><\/code><\/pre>\n<p>Bu HTML kodu, DOM'da a\u015fa\u011f\u0131daki gibi bir a\u011fa\u00e7 yap\u0131s\u0131 olu\u015fturur:<\/p>\n<pre><code class=\"language-\">Document\n\u2514\u2500\u2500 html\n    \u251c\u2500\u2500 head\n    \u2502   \u2514\u2500\u2500 title\n    \u2502       \u2514\u2500\u2500 \"Sayfa Ba\u015fl\u0131\u011f\u0131\"\n    \u2514\u2500\u2500 body\n        \u251c\u2500\u2500 h1 (id=\"anaBaslik\")\n        \u2502   \u2514\u2500\u2500 \"Merhaba D\u00fcnya\"\n        \u2514\u2500\u2500 p (class=\"metin\")\n            \u2514\u2500\u2500 \"Bu bir paragraf.\"<\/code><\/pre>\n<p>Her bir kutu, DOM'daki bir d\u00fc\u011f\u00fcm\u00fc temsil eder. HTML \u00f6\u011feleri \"element d\u00fc\u011f\u00fcmleri\", metinler \"metin d\u00fc\u011f\u00fcmleri\", nitelikler ise \"attribute d\u00fc\u011f\u00fcmleri\" olarak kabul edilir.<\/p>\n<h4>JavaScript ile \u00d6\u011felerle Etkile\u015fim<\/h4>\n<p>JavaScript, DOM API'sini kullanarak bu d\u00fc\u011f\u00fcmlere eri\u015febilir ve onlar\u0131 de\u011fi\u015ftirebilir. Bu, web sayfalar\u0131n\u0131 dinamik ve etkile\u015fimli hale getirmeyi m\u00fcmk\u00fcn k\u0131lar.<\/p>\n<p><strong>Yayg\u0131n JavaScript DOM Metotlar\u0131:<\/strong><\/p>\n<p>*   <\/code>document.getElementById('id-degeri')<code>: Belirli bir <\/code>id<code>'ye sahip \u00f6\u011feyi se\u00e7er.<br \/>\n*   <\/code>document.getElementsByClassName('class-degeri')<code>: Belirli bir <\/code>class<code>'a sahip t\u00fcm \u00f6\u011feleri bir HTML koleksiyonu olarak se\u00e7er.<br \/>\n*   <\/code>document.getElementsByTagName('etiket-adi')<code>: Belirli bir etiket ad\u0131na sahip t\u00fcm \u00f6\u011feleri se\u00e7er.<br \/>\n*   <\/code>document.querySelector('css-selector')<code>: Belirli bir CSS se\u00e7iciye uyan ilk \u00f6\u011feyi se\u00e7er.<br \/>\n*   <\/code>document.querySelectorAll('css-selector')<code>: Belirli bir CSS se\u00e7iciye uyan t\u00fcm \u00f6\u011feleri se\u00e7er.<br \/>\n*   <\/code>element.innerHTML<code>: Bir \u00f6\u011fenin HTML i\u00e7eri\u011fini al\u0131r veya ayarlar.<br \/>\n*   <\/code>element.textContent<code>: Bir \u00f6\u011fenin metin i\u00e7eri\u011fini al\u0131r veya ayarlar.<br \/>\n*   <\/code>element.setAttribute('nitelik-adi', 'deger')<code>: Bir \u00f6\u011feye nitelik ekler veya var olan\u0131 g\u00fcnceller.<br \/>\n*   <\/code>element.style.property = 'deger'<code>: Bir \u00f6\u011fenin stilini do\u011frudan de\u011fi\u015ftirir.<br \/>\n*   <\/code>element.addEventListener('event', function)<code>: Bir \u00f6\u011feye olay dinleyicisi ekler (\u00f6rn. t\u0131klama, fare \u00fczerine gelme).<br \/>\n*   <\/code>document.createElement('etiket-adi')<code>: Yeni bir HTML \u00f6\u011fesi olu\u015fturur.<br \/>\n*   <\/code>parentNode.appendChild(childNode)<code>: Bir \u00f6\u011feyi ba\u015fka bir \u00f6\u011fenin \u00e7ocu\u011fu olarak ekler.<\/p>\n<p>JavaScript'in DOM ile etkile\u015fimi, dinamik i\u00e7erik y\u00fckleme, kullan\u0131c\u0131 etkile\u015fimlerine yan\u0131t verme, form do\u011frulama, animasyonlar ve \u00e7ok daha fazlas\u0131 gibi modern web uygulamalar\u0131n\u0131n temelini olu\u015fturur. HTML \u00f6\u011felerini do\u011fru bir \u015fekilde yap\u0131land\u0131rmak, JavaScript'in bu \u00f6\u011felerle kolayca ve g\u00fcvenilir bir \u015fekilde etkile\u015fim kurabilmesi i\u00e7in elzemdir.<\/p>\n<h3>HTML \u00d6\u011felerinin \u00d6nemi: Neden Do\u011fru Kullanmal\u0131y\u0131z?<\/h3>\n<p>HTML \u00f6\u011felerinin do\u011fru ve semantik olarak kullan\u0131lmas\u0131, sadece kodun \"do\u011fru\" olmas\u0131ndan \u00f6teye ge\u00e7er. Bu, web sayfas\u0131n\u0131n genel kalitesini, performans\u0131n\u0131 ve kullan\u0131c\u0131 deneyimini do\u011frudan etkileyen kritik bir fakt\u00f6rd\u00fcr.<\/p>\n<h4>Eri\u015filebilirlik (Accessibility)<\/h4>\n<p>Web eri\u015filebilirli\u011fi, engelli bireylerin (g\u00f6rme, i\u015fitme, motor, bili\u015fsel engelliler) web i\u00e7eri\u011fine eri\u015febilmesini ve web'i kullanabilmesini sa\u011flamak anlam\u0131na gelir. Do\u011fru HTML \u00f6\u011feleri bu konuda kilit rol oynar:<\/p>\n<p>*   <strong>Semantik Yap\u0131:<\/strong> <\/code><\/p>\n<nav>...<\/nav>\n<\/header>\n<p><main><\/p>\n<article>...<\/article>\n<p><\/main><\/p>\n<footer>...<\/footer>\n<pre><code class=\"language-\"><h4>Gereksiz <code>div<\/code> Kullan\u0131m\u0131 (Divitis)<\/h4>\n\nHer k\u00fc\u00e7\u00fck b\u00f6l\u00fcm i\u00e7in <code>div<\/code> kullanmak, kodu \u015fi\u015firir ve okunabilirli\u011fi azalt\u0131r.\n\n<strong>Hata:<\/strong><\/code><\/pre>\n<p>html<\/p>\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-6\">\n<div class=\"card\">\n<div class=\"card-header\">\n<div class=\"card-title\">Ba\u015fl\u0131k<\/div>\n<\/p><\/div>\n<div class=\"card-body\">\n<div class=\"text\">Metin<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<pre><code class=\"language-\"><strong>\u00c7\u00f6z\u00fcm:<\/strong> CSS ile gruplama ve d\u00fczenleme yaparken m\u00fcmk\u00fcn oldu\u011funca az <code>div<\/code> kullan\u0131n ve semantik \u00f6\u011feleri tercih edin. Bazen bir <code>div<\/code> gereklidir, ancak her yere koymaktan ka\u00e7\u0131n\u0131n.\n\n<h4>Eksik veya Yanl\u0131\u015f Nitelikler<\/h4>\n\n\u00d6zellikle <code>alt<\/code> niteli\u011finin <code><img><\/code> \u00f6\u011felerinde eksik olmas\u0131 veya yanl\u0131\u015f kullan\u0131lmas\u0131 ciddi bir eri\u015filebilirlik sorunudur.\n\n<strong>Hata:<\/strong><\/code><\/pre>\n<p>html<br \/>\n<img decoding=\"async\" src=\"logo.png\"><br \/>\n<input type=\"text\"><\/p>\n<pre><code class=\"language-\"><strong>\u00c7\u00f6z\u00fcm:<\/strong> Her zaman <code>alt<\/code> niteli\u011fini kullan\u0131n. Anlams\u0131z g\u00f6rseller i\u00e7in <code>alt=\"\"<\/code> (bo\u015f alt) kullan\u0131n, ancak anlaml\u0131 g\u00f6rselleri a\u00e7\u0131klay\u0131n. Form \u00f6\u011feleri i\u00e7in <code><label><\/code> kullan\u0131n ve <code>for<\/code> niteli\u011fi ile <code>id<\/code>'yi e\u015fle\u015ftirin.<\/code><\/pre>\n<p>html<br \/>\n<img decoding=\"async\" src=\"logo.png\" alt=\"\u015eirket Logosu\"><br \/>\n<label for=\"kullaniciAdi\">Kullan\u0131c\u0131 Ad\u0131:<\/label><br \/>\n<input type=\"text\" id=\"kullaniciAdi\"><\/p>\n<pre><code class=\"language-\"><h4>Inline Stillerin A\u015f\u0131r\u0131 Kullan\u0131m\u0131<\/h4>\n\n<code>style<\/code> niteli\u011fini her yere yazmak, CSS'i y\u00f6netmeyi zorla\u015ft\u0131r\u0131r ve kod tekrar\u0131na yol a\u00e7ar.\n\n<strong>Hata:<\/strong><\/code><\/pre>\n<p>html<\/p>\n<p style=\"color: red; font-size: 14px;\">K\u0131rm\u0131z\u0131 metin<\/p>\n<p><span style=\"color: red; font-size: 14px;\">Ba\u015fka k\u0131rm\u0131z\u0131 metin<\/span><\/p>\n<pre><code class=\"language-\"><strong>\u00c7\u00f6z\u00fcm:<\/strong> CSS s\u0131n\u0131flar\u0131 (<code>class<\/code>) veya harici stil sayfalar\u0131 kullan\u0131n.<\/code><\/pre>\n<p>html<\/p>\n<style>\n    .kirmizi-metin {\n        color: red;\n        font-size: 14px;\n    }\n<\/style>\n<p class=\"kirmizi-metin\">K\u0131rm\u0131z\u0131 metin<\/p>\n<p><span class=\"kirmizi-metin\">Ba\u015fka k\u0131rm\u0131z\u0131 metin<\/span><br \/>\n``<code><\/p>\n<h4>HTML Do\u011frulamay\u0131 \u0130hmal Etme<\/h4>\n<p>HTML kodunuzu do\u011frulamamak, gizli hatalara ve uyumluluk sorunlar\u0131na yol a\u00e7abilir.<\/p>\n<p><strong>\u00c7\u00f6z\u00fcm:<\/strong> W3C HTML Validator gibi ara\u00e7lar\u0131 d\u00fczenli olarak kullanarak kodunuzu do\u011frulay\u0131n. Bu, yap\u0131sal hatalar\u0131, yanl\u0131\u015f etiketleri ve nitelikleri bulman\u0131za yard\u0131mc\u0131 olur.<\/p>\n<p><strong>En \u0130yi Uygulamalar \u00d6zeti:<\/strong><\/p>\n<p>*   <strong>Semantik HTML Kullan\u0131n:<\/strong> Her zaman i\u00e7eri\u011fin anlam\u0131na uygun en spesifik HTML \u00f6\u011fesini se\u00e7in.<br \/>\n*   <strong>Eri\u015filebilirli\u011fi \u00d6nceliklendirin:<\/strong> <\/code>alt<code> nitelikleri, do\u011fru form etiketleri ve klavye navigasyonu gibi eri\u015filebilirlik prensiplerine uyun.<br \/>\n*   <strong>Do\u011fru \u0130\u00e7 \u0130\u00e7e Ge\u00e7me:<\/strong> \u00d6\u011felerin hiyerar\u015fisini ve kapan\u0131\u015f s\u0131ras\u0131n\u0131 do\u011fru tutun.<br \/>\n*   <strong>CSS ve JavaScript'i Ay\u0131r\u0131n:<\/strong> Stil ve davran\u0131\u015f mant\u0131\u011f\u0131n\u0131 HTML'den ayr\u0131 tutun (harici CSS ve JS dosyalar\u0131).<br \/>\n*   <strong>Anlaml\u0131 <\/code>id<code> ve <\/code>class<code> Adlar\u0131:<\/strong> A\u00e7\u0131klay\u0131c\u0131 ve tutarl\u0131 adland\u0131rma kurallar\u0131 kullan\u0131n.<br \/>\n*   <strong>Kodunuzu Do\u011frulay\u0131n:<\/strong> HTML validator ara\u00e7lar\u0131n\u0131 kullanarak kodunuzun ge\u00e7erlili\u011fini kontrol edin.<br \/>\n*   <strong>Yorumlar\u0131 Kullan\u0131n:<\/strong> Karma\u015f\u0131k b\u00f6l\u00fcmlerde veya mant\u0131ksal gruplamalarda yorumlar (<\/code><!-- yorum --><code>) kullanarak kodu daha anla\u015f\u0131l\u0131r hale getirin.<\/p>\n<p>Bu en iyi uygulamalar\u0131 takip ederek, yaln\u0131zca ge\u00e7erli ve hatas\u0131z de\u011fil, ayn\u0131 zamanda s\u00fcrd\u00fcr\u00fclebilir, eri\u015filebilir ve y\u00fcksek performansl\u0131 web sayfalar\u0131 olu\u015fturabilirsiniz.<\/p>\n<h3>Sonu\u00e7: G\u00fc\u00e7l\u00fc ve Anlaml\u0131 Web Sayfalar\u0131 \u0130n\u015fa Etmek<\/h3>\n<p>HTML \u00f6\u011feleri, web'in temel yap\u0131 ta\u015flar\u0131d\u0131r ve modern web geli\u015ftirmenin merkezinde yer al\u0131r. Bir web sayfas\u0131n\u0131n iskeletini olu\u015fturan bu \u00f6\u011feler, i\u00e7eri\u011fin anlam\u0131n\u0131, yap\u0131s\u0131n\u0131 ve taray\u0131c\u0131lar taraf\u0131ndan nas\u0131l i\u015flenece\u011fini belirler. A\u00e7\u0131l\u0131\u015f ve kapan\u0131\u015f etiketlerinden, i\u00e7eriklerinden ve onlara eklenen niteliklerden olu\u015fan her bir \u00f6\u011fe, web deneyiminin vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r.<\/p>\n<p>Bu makalede, HTML \u00f6\u011felerinin temel tan\u0131m\u0131ndan ba\u015flayarak, bo\u015f \u00f6\u011feler, semantik anlamlar\u0131, niteliklerin detayl\u0131 kullan\u0131m\u0131 (id, class, src, href, alt gibi), \u00f6\u011felerin i\u00e7 i\u00e7e ge\u00e7me kurallar\u0131 ve ebeveyn-\u00e7ocuk ili\u015fkileri gibi konular\u0131 derinlemesine inceledik. Ayr\u0131ca, \u00f6\u011felerin blok seviyesi ve sat\u0131r i\u00e7i davran\u0131\u015flar\u0131n\u0131, HTML5 ile gelen yeni semantik \u00f6\u011felerin \u00f6nemini ve Belge Nesne Modeli (DOM) arac\u0131l\u0131\u011f\u0131yla JavaScript ile nas\u0131l etkile\u015fim kurduklar\u0131n\u0131 ele ald\u0131k.<\/p>\n<p>HTML \u00f6\u011felerinin do\u011fru ve bilin\u00e7li kullan\u0131m\u0131, sadece kodun teknik olarak ge\u00e7erli olmas\u0131n\u0131 sa\u011flamakla kalmaz, ayn\u0131 zamanda web sayfas\u0131n\u0131n eri\u015filebilirli\u011fini, arama motoru optimizasyonunu (SEO), stil uygulama kolayl\u0131\u011f\u0131n\u0131 ve uzun vadeli bak\u0131m\u0131n\u0131 da \u00f6nemli \u00f6l\u00e7\u00fcde etkiler. Eri\u015filebilirlik, engelli kullan\u0131c\u0131lar\u0131n web'e eri\u015fimini sa\u011flarken, SEO web sitenizin ke\u015ffedilebilirli\u011fini art\u0131r\u0131r. Temiz ve semantik HTML, CSS ve JavaScript ile daha etkin bir \u015fekilde \u00e7al\u0131\u015fmay\u0131 m\u00fcmk\u00fcn k\u0131lar ve gelecekteki geli\u015ftirmeler i\u00e7in sa\u011flam bir temel olu\u015fturur.<\/p>\n<p>Gereksiz <\/code>div<code> kullan\u0131m\u0131ndan ka\u00e7\u0131nmak, semantik \u00f6\u011feleri do\u011fru ba\u011flamda kullanmak, <\/code>alt` niteliklerini ihmal etmemek ve kodunuzu d\u00fczenli olarak do\u011frulamak gibi en iyi uygulamalar\u0131 benimsemek, web geli\u015ftiricilerinin daha g\u00fc\u00e7l\u00fc, anlaml\u0131 ve kullan\u0131c\u0131 dostu web sayfalar\u0131 in\u015fa etmelerine yard\u0131mc\u0131 olacakt\u0131r. HTML'in temel prensiplerini anlamak ve do\u011fru uygulamak, sadece bir beceri de\u011fil, ayn\u0131 zamanda web'in a\u00e7\u0131k, eri\u015filebilir ve herkes i\u00e7in faydal\u0131 olma vizyonuna yap\u0131lan bir katk\u0131d\u0131r.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"HTML \u00d6\u011fesi Nedir? Web Sayfalar\u0131n\u0131n Temel Yap\u0131 Ta\u015f\u0131 ve Anatomisi\nGiri\u015f: Web&#8217;in Temel Yap\u0131 Ta\u015f\u0131\n\u0130nternet d\u00fcnyas\u0131n\u0131n temelini olu\u015fturan","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-32566","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HTML \u00d6\u011fesi Nedir? Web Sayfalar\u0131n\u0131n Temel Yap\u0131 Ta\u015f\u0131 ve Anatomisi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/html-ogesi-nedir-web-sayfalarinin-temel-yapi-tasi-ve-anatomisi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML \u00d6\u011fesi Nedir? Web Sayfalar\u0131n\u0131n Temel Yap\u0131 Ta\u015f\u0131 ve Anatomisi\" \/>\n<meta property=\"og:description\" content=\"HTML \u00d6\u011fesi Nedir? Web Sayfalar\u0131n\u0131n Temel Yap\u0131 Ta\u015f\u0131 ve Anatomisi Giri\u015f: Web&#039;in Temel Yap\u0131 Ta\u015f\u0131 \u0130nternet d\u00fcnyas\u0131n\u0131n temelini olu\u015fturan\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/html-ogesi-nedir-web-sayfalarinin-temel-yapi-tasi-ve-anatomisi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-23T06:41:24+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-ogesi-nedir-web-sayfalarinin-temel-yapi-tasi-ve-anatomisi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-ogesi-nedir-web-sayfalarinin-temel-yapi-tasi-ve-anatomisi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"HTML \u00d6\u011fesi Nedir? Web Sayfalar\u0131n\u0131n Temel Yap\u0131 Ta\u015f\u0131 ve Anatomisi\",\"datePublished\":\"2025-10-23T06:41:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-ogesi-nedir-web-sayfalarinin-temel-yapi-tasi-ve-anatomisi\/\"},\"wordCount\":564,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/html-ogesi-nedir-web-sayfalarinin-temel-yapi-tasi-ve-anatomisi\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-ogesi-nedir-web-sayfalarinin-temel-yapi-tasi-ve-anatomisi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/html-ogesi-nedir-web-sayfalarinin-temel-yapi-tasi-ve-anatomisi\/\",\"name\":\"HTML \u00d6\u011fesi Nedir? Web Sayfalar\u0131n\u0131n Temel Yap\u0131 Ta\u015f\u0131 ve Anatomisi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-23T06:41:24+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-ogesi-nedir-web-sayfalarinin-temel-yapi-tasi-ve-anatomisi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/html-ogesi-nedir-web-sayfalarinin-temel-yapi-tasi-ve-anatomisi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-ogesi-nedir-web-sayfalarinin-temel-yapi-tasi-ve-anatomisi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML \u00d6\u011fesi Nedir? Web Sayfalar\u0131n\u0131n Temel Yap\u0131 Ta\u015f\u0131 ve Anatomisi\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"HTML \u00d6\u011fesi Nedir? Web Sayfalar\u0131n\u0131n Temel Yap\u0131 Ta\u015f\u0131 ve Anatomisi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/html-ogesi-nedir-web-sayfalarinin-temel-yapi-tasi-ve-anatomisi\/","og_locale":"tr_TR","og_type":"article","og_title":"HTML \u00d6\u011fesi Nedir? Web Sayfalar\u0131n\u0131n Temel Yap\u0131 Ta\u015f\u0131 ve Anatomisi","og_description":"HTML \u00d6\u011fesi Nedir? Web Sayfalar\u0131n\u0131n Temel Yap\u0131 Ta\u015f\u0131 ve Anatomisi Giri\u015f: Web'in Temel Yap\u0131 Ta\u015f\u0131 \u0130nternet d\u00fcnyas\u0131n\u0131n temelini olu\u015fturan","og_url":"https:\/\/fatihsoysal.com\/blog\/html-ogesi-nedir-web-sayfalarinin-temel-yapi-tasi-ve-anatomisi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-23T06:41:24+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"9 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/html-ogesi-nedir-web-sayfalarinin-temel-yapi-tasi-ve-anatomisi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-ogesi-nedir-web-sayfalarinin-temel-yapi-tasi-ve-anatomisi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"HTML \u00d6\u011fesi Nedir? Web Sayfalar\u0131n\u0131n Temel Yap\u0131 Ta\u015f\u0131 ve Anatomisi","datePublished":"2025-10-23T06:41:24+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-ogesi-nedir-web-sayfalarinin-temel-yapi-tasi-ve-anatomisi\/"},"wordCount":564,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/html-ogesi-nedir-web-sayfalarinin-temel-yapi-tasi-ve-anatomisi\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/html-ogesi-nedir-web-sayfalarinin-temel-yapi-tasi-ve-anatomisi\/","url":"https:\/\/fatihsoysal.com\/blog\/html-ogesi-nedir-web-sayfalarinin-temel-yapi-tasi-ve-anatomisi\/","name":"HTML \u00d6\u011fesi Nedir? Web Sayfalar\u0131n\u0131n Temel Yap\u0131 Ta\u015f\u0131 ve Anatomisi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-23T06:41:24+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-ogesi-nedir-web-sayfalarinin-temel-yapi-tasi-ve-anatomisi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/html-ogesi-nedir-web-sayfalarinin-temel-yapi-tasi-ve-anatomisi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/html-ogesi-nedir-web-sayfalarinin-temel-yapi-tasi-ve-anatomisi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML \u00d6\u011fesi Nedir? Web Sayfalar\u0131n\u0131n Temel Yap\u0131 Ta\u015f\u0131 ve Anatomisi"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32566","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=32566"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32566\/revisions"}],"predecessor-version":[{"id":32567,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32566\/revisions\/32567"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=32566"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=32566"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=32566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}