{"id":37585,"date":"2026-01-09T18:40:55","date_gmt":"2026-01-09T15:40:55","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=37585"},"modified":"2026-01-09T18:40:55","modified_gmt":"2026-01-09T15:40:55","slug":"etiketi-html-icerik-bolumleme-elemani-nasil-kullanilir","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/etiketi-html-icerik-bolumleme-elemani-nasil-kullanilir\/","title":{"rendered":"Etiketi: HTML \u0130\u00e7erik B\u00f6l\u00fcmleme Eleman\u0131 Nas\u0131l Kullan\u0131l\u0131r?"},"content":{"rendered":"<p><body><\/p>\n<h2>\n<div> Etiketi: HTML \u0130\u00e7erik B\u00f6l\u00fcmleme Eleman\u0131 Nas\u0131l Kullan\u0131l\u0131r?<\/h2>\n<p>Web d\u00fcnyas\u0131n\u0131n temel yap\u0131 ta\u015flar\u0131ndan biri olan HTML, i\u00e7eri\u011fi d\u00fczenlemek ve yap\u0131land\u0131rmak i\u00e7in \u00e7e\u015fitli etiketler sunar. Bu etiketler aras\u0131nda, belki de en s\u0131k kullan\u0131lan ve en esnek olanlardan biri <code><\/p>\n<div><\/code> etiketidir. &#8220;Division&#8221; kelimesinin k\u0131saltmas\u0131 olan <code><\/p>\n<div><\/code>, bir web sayfas\u0131n\u0131n belirli bir b\u00f6l\u00fcm\u00fcn\u00fc veya i\u00e7eri\u011fini mant\u0131ksal olarak gruplamak i\u00e7in kullan\u0131lan genel ama\u00e7l\u0131 bir kapsay\u0131c\u0131d\u0131r. Kendi ba\u015f\u0131na herhangi bir anlamsal anlam ta\u015f\u0131mamas\u0131na ra\u011fmen, CSS ile stil uygulamak ve JavaScript ile etkile\u015fim kurmak i\u00e7in vazge\u00e7ilmez bir ara\u00e7t\u0131r. Bu makalede, <code><\/p>\n<div><\/code> etiketinin ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131, en iyi uygulamalar\u0131n\u0131, yayg\u0131n hatalar\u0131n\u0131 ve modern web geli\u015ftirmedeki yerini detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n<h3>Giri\u015f: HTML ve Web Geli\u015ftirmede <code><\/p>\n<div><\/code>&#8216;in \u00d6nemi<\/h3>\n<p>HTML (HyperText Markup Language), bir web sayfas\u0131n\u0131n yap\u0131s\u0131n\u0131 tan\u0131mlayan i\u015faretleme dilidir. Metinler, g\u00f6rseller, ba\u011flant\u0131lar ve di\u011fer medya t\u00fcrleri, HTML etiketleri arac\u0131l\u0131\u011f\u0131yla d\u00fczenlenir. HTML etiketleri, taray\u0131c\u0131ya i\u00e7eri\u011fin nas\u0131l g\u00f6r\u00fcnt\u00fclenece\u011fi ve ne anlama geldi\u011fi hakk\u0131nda bilgi verir. Baz\u0131 etiketler, \u00f6rne\u011fin <code><\/p>\n<p><\/code> (paragraf), <code><\/p>\n<nav>...<\/nav>\n<\/div>\n<div class=\"card\">\n<h2>Kart Ba\u015fl\u0131\u011f\u0131<\/h2>\n<p>Kart i\u00e7eri\u011fi burada.<\/p>\n<\/div>\n<p><!-- CSS --><\/p>\n<style>\n    #header {\n        background-color: #f0f0f0;\n        padding: 20px;\n        text-align: center;\n    }\n    .card {\n        border: 1px solid #ccc;\n        padding: 15px;\n        margin: 10px;\n        border-radius: 5px;\n    }\n<\/style>\n<pre><code class=\"language-\"><h4>JavaScript ile Etkile\u015fim<\/h4>\nJavaScript, web sayfalar\u0131na dinamizm katmak i\u00e7in kullan\u0131l\u0131r. <\/code><div><code> elemanlar\u0131, JavaScript'in DOM (Document Object Model) arac\u0131l\u0131\u011f\u0131yla hedefleyebilece\u011fi ve manip\u00fcle edebilece\u011fi temel hedeflerden biridir.\n*   <strong>\u0130\u00e7erik De\u011fi\u015ftirme:<\/strong> Bir <\/code><div><code>'in i\u00e7eri\u011fi (metin, HTML) JavaScript ile dinamik olarak de\u011fi\u015ftirilebilir.\n*   <strong>Stil G\u00fcncelleme:<\/strong> <\/code><div><code>'in CSS stilleri (renk, boyut, g\u00f6r\u00fcn\u00fcrl\u00fck vb.) JavaScript ile de\u011fi\u015ftirilebilir.\n*   <strong>Etkinlik Dinleme:<\/strong> Bir <\/code><div><code>'e t\u0131klama, \u00fczerine gelme gibi olay dinleyicileri eklenebilir.\n*   <strong>G\u00f6r\u00fcn\u00fcrl\u00fck Kontrol\u00fc:<\/strong> JavaScript ile bir <\/code><div><code> gizlenebilir veya g\u00f6sterilebilir.<\/code><\/pre>\n<p>html<br \/>\n<!-- HTML --><\/p>\n<div id=\"messageBox\">\n<p>Merhaba D\u00fcnya!<\/p>\n<\/div>\n<p><button onclick=\"changeMessage()\">Mesaj\u0131 De\u011fi\u015ftir<\/button><\/p>\n<p><!-- JavaScript --><br \/>\n<script>\n    function changeMessage() {\n        document.getElementById('messageBox').innerHTML = '<\/p>\n<p>Yeni Mesaj!<\/p>\n<p>';\n    }\n<\/script><\/p>\n<pre><code class=\"language-\"><h4>D\u00fczen Olu\u015fturma (Layout)<\/h4>\nModern web tasar\u0131m\u0131nda, <\/code><div><code>'ler genellikle Flexbox (Esnek Kutu Modeli) ve CSS Grid (Izgara Modeli) gibi g\u00fc\u00e7l\u00fc CSS d\u00fczenleme teknikleriyle birlikte kullan\u0131l\u0131r. Bu teknikler, duyarl\u0131 (responsive) ve karma\u015f\u0131k sayfa d\u00fczenlerini kolayca olu\u015fturmay\u0131 sa\u011flar.\n\n*   <strong>Flexbox ile:<\/strong> Bir <\/code><div><code>'i esnek bir kapsay\u0131c\u0131 (flex container) yaparak, i\u00e7indeki elemanlar\u0131n (flex items) tek bir y\u00f6nde (yatay veya dikey) nas\u0131l hizalanaca\u011f\u0131n\u0131 ve da\u011f\u0131t\u0131laca\u011f\u0131n\u0131 kontrol edebilirsiniz.\n*   <strong>CSS Grid ile:<\/strong> Bir <\/code><div><code>'i \u0131zgara kapsay\u0131c\u0131s\u0131 (grid container) yaparak, i\u00e7indeki elemanlar\u0131 hem sat\u0131r hem de s\u00fctun baz\u0131nda iki boyutlu bir \u0131zgarada konumland\u0131rabilirsiniz.<\/code><\/pre>\n<p>html<br \/>\n<!-- HTML --><\/p>\n<div class=\"container-flex\">\n<div class=\"item\">1<\/div>\n<div class=\"item\">2<\/div>\n<div class=\"item\">3<\/div>\n<\/div>\n<div class=\"container-grid\">\n<div class=\"item\">A<\/div>\n<div class=\"item\">B<\/div>\n<div class=\"item\">C<\/div>\n<\/div>\n<p><!-- CSS --><\/p>\n<style>\n    .container-flex {\n        display: flex;\n        justify-content: space-around;\n        border: 1px solid blue;\n        margin-bottom: 20px;\n    }\n    .container-grid {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 10px;\n        border: 1px solid green;\n    }\n    .item {\n        padding: 15px;\n        background-color: lightgray;\n        text-align: center;\n    }\n<\/style>\n<pre><code class=\"language-\"><h3><\/code><div><code> Kullan\u0131m\u0131na \u0130li\u015fkin En \u0130yi Uygulamalar ve Yayg\u0131n Hatalar<\/h3>\n<\/code><div><code> etiketi g\u00fc\u00e7l\u00fc ve esnek olsa da, yanl\u0131\u015f kullan\u0131m\u0131 web sitenizin performans\u0131, eri\u015filebilirli\u011fi ve bak\u0131m\u0131 \u00fczerinde olumsuz etkilere yol a\u00e7abilir.\n\n<h4>Semantik HTML \u00d6nceli\u011fi<\/h4>\nHTML5 ile birlikte gelen semantik etiketler, web sayfalar\u0131n\u0131n yap\u0131s\u0131n\u0131 daha anlaml\u0131 hale getirir. Bu etiketler, taray\u0131c\u0131lara, arama motorlar\u0131na ve yard\u0131mc\u0131 teknolojilere i\u00e7eri\u011fin ne anlama geldi\u011fi hakk\u0131nda daha fazla bilgi sa\u011flar. Bu nedenle, m\u00fcmk\u00fcn oldu\u011funca <\/code><div><code> yerine semantik etiketleri tercih etmek en iyi uygulamad\u0131r.\n\n*   <strong><\/code><header><code>:<\/strong> Sayfan\u0131n veya bir b\u00f6l\u00fcm\u00fcn ba\u015fl\u0131k k\u0131sm\u0131n\u0131 i\u00e7erir.\n*   <strong><\/code><nav><code>:<\/strong> Navigasyon ba\u011flant\u0131lar\u0131n\u0131 i\u00e7erir.\n*   <strong><\/code><main><code>:<\/strong> Sayfan\u0131n ana ve benzersiz i\u00e7eri\u011fini i\u00e7erir.\n*   <strong><\/code><article><code>:<\/strong> Ba\u011f\u0131ms\u0131z, kendi kendine yeten bir i\u00e7erik par\u00e7as\u0131n\u0131 (\u00f6rne\u011fin bir blog yaz\u0131s\u0131, haber makalesi) temsil eder.\n*   <strong><\/code><section><code>:<\/strong> Bir belgenin tematik olarak grupland\u0131r\u0131lm\u0131\u015f bir b\u00f6l\u00fcm\u00fcn\u00fc temsil eder.\n*   <strong><\/code><aside><code>:<\/strong> Ana i\u00e7erikten ayr\u0131, ancak onunla ili\u015fkili i\u00e7eri\u011fi (\u00f6rne\u011fin kenar \u00e7ubu\u011fu, reklamlar) temsil eder.\n*   <strong><\/code><footer><code>:<\/strong> Sayfan\u0131n veya bir b\u00f6l\u00fcm\u00fcn alt bilgi k\u0131sm\u0131n\u0131 i\u00e7erir.\n\n<strong>Ne Zaman <\/code><div><code> Kullan\u0131lmal\u0131?<\/strong>\nSemantik etiketlerin uygun olmad\u0131\u011f\u0131 durumlarda <\/code><div><code> kullanmak hala ge\u00e7erlidir:\n*   <strong>Stil Ama\u00e7l\u0131 \u0130\u00e7 Gruplamalar:<\/strong> Bir semantik eleman\u0131n (\u00f6rne\u011fin <\/code><article><code>) i\u00e7inde, sadece stil veya d\u00fczen ama\u00e7l\u0131 olarak birka\u00e7 eleman\u0131 gruplamak i\u00e7in.\n*   <strong>JavaScript Hedefleri:<\/strong> Belirli bir JavaScript i\u015flevi i\u00e7in anlams\u0131z bir kapsay\u0131c\u0131ya ihtiya\u00e7 duyuldu\u011funda.\n*   <strong>Component Wrapper'lar\u0131:<\/strong> Modern framework'lerde (React, Vue) bile\u015fenleri sarmalamak i\u00e7in s\u0131kl\u0131kla <\/code><div><code> kullan\u0131l\u0131r.\n\n<strong>Yanl\u0131\u015f Kullan\u0131m \u00d6rne\u011fi (Semantik Olmayan):<\/strong><\/code><\/pre>\n<p>html<\/p>\n<div id=\"header\">...<\/div>\n<div id=\"navigation\">...<\/div>\n<div id=\"main-content\">...<\/div>\n<div id=\"footer\">...<\/div>\n<pre><code class=\"language-\"><strong>Do\u011fru Kullan\u0131m \u00d6rne\u011fi (Semantik):<\/strong><\/code><\/pre>\n<p>html<\/p>\n<header>...<\/header>\n<nav>...<\/nav>\n<p><main>...<\/main><\/p>\n<footer>...<\/\n\n<footer>\n<pre><code class=\"language-\"><h4><\/code><div><code> Cehennemi (Div Soup) ve \u00d6nlenmesi<\/h4>\n\"Div Soup\" veya \"Div Cehennemi\", a\u015f\u0131r\u0131 ve gereksiz yere i\u00e7 i\u00e7e <\/code><div><code> etiketlerinin kullan\u0131ld\u0131\u011f\u0131, karma\u015f\u0131k ve okunmas\u0131 zor HTML yap\u0131lar\u0131n\u0131 ifade eder. Bu durum, kodun bak\u0131m\u0131n\u0131 zorla\u015ft\u0131r\u0131r, performans\u0131 d\u00fc\u015f\u00fcrebilir ve hata ay\u0131klamay\u0131 karma\u015f\u0131k hale getirir.\n\n<strong>Neden Ka\u00e7\u0131n\u0131lmal\u0131?<\/strong>\n*   <strong>Okunabilirlik ve Bak\u0131m:<\/strong> \u00c7ok fazla i\u00e7 i\u00e7e <\/code><div><code>, kodun okunmas\u0131n\u0131 ve anla\u015f\u0131lmas\u0131n\u0131 zorla\u015ft\u0131r\u0131r.\n*   <strong>Performans:<\/strong> Taray\u0131c\u0131n\u0131n DOM a\u011fac\u0131n\u0131 i\u015flemesi ve stil hesaplamas\u0131 i\u00e7in daha fazla kaynak harcamas\u0131na neden olabilir.\n*   <strong>CSS Karma\u015f\u0131kl\u0131\u011f\u0131:<\/strong> Belirli bir eleman\u0131 hedeflemek i\u00e7in uzun ve karma\u015f\u0131k CSS se\u00e7iciler yazmaya yol a\u00e7abilir.\n\n<strong>\u00d6nleme Yollar\u0131:<\/strong>\n*   <strong>Semantik Etiketleri Kullan\u0131n:<\/strong> Her zaman \u00f6nce semantik bir etiket olup olmad\u0131\u011f\u0131n\u0131 kontrol edin.\n*   <strong>Gereksiz Kapsay\u0131c\u0131lardan Ka\u00e7\u0131n\u0131n:<\/strong> Yaln\u0131zca stil veya yap\u0131land\u0131rma i\u00e7in kesinlikle gerekli oldu\u011funda <\/code><div><code> kullan\u0131n.\n*   <strong>CSS Preprocessor'lar\u0131 (SASS\/LESS):<\/strong> \u0130yi yap\u0131land\u0131r\u0131lm\u0131\u015f CSS ile karma\u015f\u0131kl\u0131\u011f\u0131 azaltmaya yard\u0131mc\u0131 olabilir.\n*   <strong>Bile\u015fen Tabanl\u0131 Yakla\u015f\u0131m:<\/strong> K\u00fc\u00e7\u00fck, yeniden kullan\u0131labilir bile\u015fenler olu\u015fturarak kodu daha mod\u00fcler hale getirin.\n\n<h4>Eri\u015filebilirlik (Accessibility)<\/h4>\n<\/code><div><code> etiketi kendi ba\u015f\u0131na anlams\u0131z oldu\u011fu i\u00e7in, varsay\u0131lan olarak herhangi bir eri\u015filebilirlik bilgisi sa\u011flamaz. Bu, ekran okuyucular gibi yard\u0131mc\u0131 teknolojiler i\u00e7in i\u00e7eri\u011fin anla\u015f\u0131lmas\u0131n\u0131 zorla\u015ft\u0131rabilir.\n\n<strong>Eri\u015filebilirlik \u0130\u00e7in <\/code><div><code> Kullan\u0131m\u0131:<\/strong>\n*   <strong><\/code>role<code> Nitelikleri:<\/strong> <\/code><div><code>'e semantik anlam kazand\u0131rmak i\u00e7in ARIA (Accessible Rich Internet Applications) <\/code>role<code> nitelikleri kullan\u0131labilir. \u00d6rne\u011fin, <\/code>role=\"button\"<code>, <\/code>role=\"tablist\"<code>, <\/code>role=\"dialog\"<code> gibi. Ancak, m\u00fcmk\u00fcnse yerle\u015fik semantik HTML elemanlar\u0131n\u0131 (\u00f6rne\u011fin <\/code><button><code>, <\/code><input><code>) kullanmak her zaman daha iyidir.\n*   <strong>Etkile\u015fimli Elemanlar:<\/strong> Bir <\/code><div><code>'i t\u0131klanabilir bir d\u00fc\u011fme veya bir ba\u011flant\u0131 gibi etkile\u015fimli bir eleman gibi kullanmaktan ka\u00e7\u0131n\u0131n. Bunun yerine <\/code><button><code> veya <\/code><a><code> etiketlerini kullan\u0131n. E\u011fer zorunluysa, <\/code>role=\"button\"<code>, <\/code>tabindex=\"0\"<code> ve klavye etkile\u015fimleri i\u00e7in JavaScript deste\u011fi eklemelisiniz.\n*   <strong>Anlaml\u0131 \u0130\u00e7erik:<\/strong> <\/code><div><code>'in i\u00e7indeki i\u00e7eri\u011fin kendi ba\u015f\u0131na anlaml\u0131 oldu\u011fundan emin olun.<\/code><\/pre>\n<p>html<br \/>\n<!-- Yanl\u0131\u015f: D\u00fc\u011fme gibi davranan div --><\/p>\n<div class=\"my-button\" onclick=\"doSomething()\">T\u0131kla<\/div>\n<p><!-- Do\u011fru: Semantik d\u00fc\u011fme --><br \/>\n<button class=\"my-button\" onclick=\"doSomething()\">T\u0131kla<\/button><\/p>\n<p><!-- Zorunlu durumlarda ARIA ile div --><\/p>\n<div role=\"button\" tabindex=\"0\" class=\"custom-button\" onclick=\"doSomething()\" onkeydown=\"handleKeyDown(event)\">T\u0131kla<\/div>\n<pre><code class=\"language-\"><h3><\/code><div><code> ile CSS \u0130li\u015fkisi: Stil Uygulama Sanat\u0131<\/h3>\n<\/code><div><code> ve CSS, web tasar\u0131m\u0131n\u0131n ayr\u0131lmaz bir par\u00e7as\u0131d\u0131r. <\/code><div><code> bir yap\u0131y\u0131 sa\u011flarken, CSS bu yap\u0131ya g\u00f6r\u00fcn\u00fcm ve estetik kazand\u0131r\u0131r.\n\n<h4><\/code>id<code> ve <\/code>class<code> Nitelikleri<\/h4>\n<\/code>id<code> ve <\/code>class<code> nitelikleri, CSS'in belirli <\/code><div><code> elemanlar\u0131n\u0131 hedeflemesini sa\u011flar.\n*   <strong><\/code>id<code>:<\/strong> Bir HTML belgesinde benzersiz olmal\u0131d\u0131r. <\/code>#<code> i\u015faretiyle CSS'te hedeflenir. Y\u00fcksek \u00f6zg\u00fcll\u00fc\u011fe sahiptir.\n*   <strong><\/code>class<code>:<\/strong> Birden fazla elemana uygulanabilir ve yeniden kullan\u0131labilir. <\/code>.<code> i\u015faretiyle CSS'te hedeflenir.<\/code><\/pre>\n<p>html<\/p>\n<div id=\"main-header\">...<\/div>\n<div class=\"product-item\">...<\/div>\n<div class=\"product-item featured\">...<\/div>\n<pre><code class=\"language-\"><\/code><\/pre>\n<p>css<br \/>\n#main-header {<br \/>\n    background-color: #333;<br \/>\n    color: white;<br \/>\n    padding: 1rem;<br \/>\n}<\/p>\n<p>.product-item {<br \/>\n    border: 1px solid #ddd;<br \/>\n    margin: 10px;<br \/>\n    padding: 15px;<br \/>\n}<\/p>\n<p>.product-item.featured { \/<em> Hem product-item hem de featured s\u0131n\u0131f\u0131na sahip div'leri hedefler <\/em>\/<br \/>\n    background-color: #ffe0b2;<br \/>\n    box-shadow: 0 0 10px rgba(0,0,0,0.1);<br \/>\n}<\/p>\n<pre><code class=\"language-\"><h4>CSS Se\u00e7iciler<\/h4>\n<\/code><div><code> elemanlar\u0131n\u0131 hedeflemek i\u00e7in \u00e7e\u015fitli CSS se\u00e7iciler kullan\u0131labilir:\n*   <\/code>div<code>: T\u00fcm <\/code><div><code> elemanlar\u0131n\u0131 se\u00e7er.\n*   <\/code>#myId<code>: Belirli bir <\/code>id<code>'ye sahip <\/code><div><code>'i se\u00e7er.\n*   <\/code>.myClass<code>: Belirli bir <\/code>class<code>'a sahip t\u00fcm <\/code><div><code>'leri se\u00e7er.\n*   <\/code>div.myClass<code>: Yaln\u0131zca <\/code>myClass<code> s\u0131n\u0131f\u0131na sahip <\/code><div><code> elemanlar\u0131n\u0131 se\u00e7er.\n*   <\/code>div > p<code>: <\/code>div<code>'in do\u011frudan alt eleman\u0131 olan <\/code>p<code> etiketlerini se\u00e7er.\n*   <\/code>div p<code>: <\/code>div<code>'in i\u00e7indeki t\u00fcm <\/code>p<code> etiketlerini (do\u011frudan veya dolayl\u0131) se\u00e7er.\n*   <\/code>div + p<code>: <\/code>div<code>'den hemen sonra gelen <\/code>p<code> etiketini se\u00e7er.\n*   <\/code>div ~ p<code>: <\/code>div<code> ile ayn\u0131 seviyede olan ve ondan sonra gelen t\u00fcm <\/code>p<code> etiketlerini se\u00e7er.\n\n<h4>Box Model<\/h4>\nHer HTML eleman\u0131 (dolay\u0131s\u0131yla <\/code><div><code> de), taray\u0131c\u0131 taraf\u0131ndan bir kutu olarak i\u015flenir. Bu kutu modeli, i\u00e7eri\u011fin (content), dolgunun (padding), kenarl\u0131\u011f\u0131n (border) ve d\u0131\u015f bo\u015flu\u011fun (margin) nas\u0131l d\u00fczenlendi\u011fini tan\u0131mlar. <\/code><div><code>'in boyutunu ve konumunu ayarlarken bu modelin anla\u015f\u0131lmas\u0131 kritik \u00f6neme sahiptir.<\/code><\/pre>\n<p>css<br \/>\n.my-div {<br \/>\n    width: 200px; \/<em> \u0130\u00e7erik geni\u015fli\u011fi <\/em>\/<br \/>\n    height: 100px; \/<em> \u0130\u00e7erik y\u00fcksekli\u011fi <\/em>\/<br \/>\n    padding: 20px; \/<em> \u0130\u00e7erik ile kenarl\u0131k aras\u0131 bo\u015fluk <\/em>\/<br \/>\n    border: 5px solid blue; \/<em> Kenarl\u0131k <\/em>\/<br \/>\n    margin: 15px; \/<em> D\u0131\u015f bo\u015fluk <\/em>\/<br \/>\n    background-color: lightblue;<br \/>\n}<\/p>\n<pre><code class=\"language-\"><h4>Flexbox ve Grid ile <\/code><div><code><\/h4>\nModern CSS d\u00fczenleme teknikleri olan Flexbox ve Grid, <\/code><div><code> elemanlar\u0131n\u0131 kullanarak karma\u015f\u0131k ve duyarl\u0131 d\u00fczenler olu\u015fturman\u0131n en etkili yollar\u0131d\u0131r.\n\n*   <strong>Flexbox:<\/strong> Tek boyutlu (sat\u0131r veya s\u00fctun) d\u00fczenler i\u00e7in idealdir. Bir <\/code><div><code>'i <\/code>display: flex;<code> olarak ayarlad\u0131\u011f\u0131n\u0131zda, i\u00e7indeki do\u011frudan alt elemanlar esnek \u00f6\u011feler (flex items) haline gelir ve <\/code>justify-content<code>, <\/code>align-items<code>, <\/code>flex-direction<code> gibi \u00f6zelliklerle hizalanabilir ve da\u011f\u0131t\u0131labilir.<\/code><\/pre>\n<p>html<\/p>\n<div class=\"flex-container\">\n<div>Item 1<\/div>\n<div>Item 2<\/div>\n<div>Item 3<\/div>\n<\/div>\n<pre><code class=\"language-\"><\/code><\/pre>\n<p>css<br \/>\n.flex-container {<br \/>\n    display: flex;<br \/>\n    justify-content: space-between; \/<em> Elemanlar\u0131 aral\u0131kl\u0131 olarak hizalar <\/em>\/<br \/>\n    align-items: center; \/<em> Elemanlar\u0131 dikeyde ortalar <\/em>\/<br \/>\n    height: 100px;<br \/>\n    border: 1px solid #ccc;<br \/>\n}<\/p>\n<pre><code class=\"language-\">*   <strong>CSS Grid:<\/strong> \u0130ki boyutlu (sat\u0131r ve s\u00fctun) d\u00fczenler i\u00e7in tasarlanm\u0131\u015ft\u0131r. Bir <\/code><div><code>'i <\/code>display: grid;<code> olarak ayarlad\u0131\u011f\u0131n\u0131zda, i\u00e7indeki elemanlar bir \u0131zgara \u00fczerinde konumland\u0131r\u0131l\u0131r. <\/code>grid-template-columns<code>, <\/code>grid-template-rows<code>, <\/code>gap<code> gibi \u00f6zelliklerle \u0131zgara yap\u0131s\u0131 tan\u0131mlan\u0131r.<\/code><\/pre>\n<p>html<\/p>\n<div class=\"grid-container\">\n<div>Header<\/div>\n<div>Sidebar<\/div>\n<div>Main Content<\/div>\n<div>Footer<\/div>\n<\/div>\n<pre><code class=\"language-\"><\/code><\/pre>\n<p>css<br \/>\n.grid-container {<br \/>\n    display: grid;<br \/>\n    grid-template-columns: 1fr 3fr; \/<em> \u0130ki s\u00fctun: biri 1 birim, di\u011feri 3 birim <\/em>\/<br \/>\n    grid-template-rows: auto 1fr auto; \/<em> \u00dc\u00e7 sat\u0131r: otomatik, esnek, otomatik <\/em>\/<br \/>\n    gap: 10px;<br \/>\n    height: 300px;<br \/>\n    border: 1px solid #ccc;<br \/>\n}<br \/>\n.grid-container div:nth-child(1) { grid-column: 1 \/ -1; } \/<em> Header t\u00fcm s\u00fctunlar\u0131 kaplar <\/em>\/<br \/>\n.grid-container div:nth-child(4) { grid-column: 1 \/ -1; } \/<em> Footer t\u00fcm s\u00fctunlar\u0131 kaplar <\/em>\/<\/p>\n<pre><code class=\"language-\"><h3><\/code><div><code> ve JavaScript: Dinamik \u0130\u00e7erik ve Etkile\u015fim<\/h3>\nJavaScript, web sayfalar\u0131n\u0131 etkile\u015fimli hale getirmek i\u00e7in kullan\u0131l\u0131r ve <\/code><div><code> elemanlar\u0131, JavaScript'in en s\u0131k manip\u00fcle etti\u011fi hedeflerden biridir. DOM (Document Object Model) arac\u0131l\u0131\u011f\u0131yla, JavaScript bir <\/code><div><code>'in i\u00e7eri\u011fini, stilini veya niteliklerini de\u011fi\u015ftirebilir, hatta yeni <\/code><div><code>'ler olu\u015fturup mevcut olanlara ekleyebilir.\n\n<h4>DOM Manip\u00fclasyonu<\/h4>\nJavaScript, <\/code><div><code> elemanlar\u0131na eri\u015fmek i\u00e7in \u00e7e\u015fitli DOM metotlar\u0131 sunar:\n*   <\/code>document.getElementById('myId')<code>: Belirli bir <\/code>id<code>'ye sahip eleman\u0131 se\u00e7er.\n*   <\/code>document.getElementsByClassName('myClass')<code>: Belirli bir <\/code>class<code>'a sahip t\u00fcm elemanlar\u0131 bir HTMLCollection olarak d\u00f6nd\u00fcr\u00fcr.\n*   <\/code>document.querySelector('.myClass')<code> veya <\/code>document.querySelector('#myId')<code>: Belirli bir CSS se\u00e7icisine uyan ilk eleman\u0131 se\u00e7er.\n*   <\/code>document.querySelectorAll('.myClass')<code>: Belirli bir CSS se\u00e7icisine uyan t\u00fcm elemanlar\u0131 bir NodeList olarak d\u00f6nd\u00fcr\u00fcr.<\/code><\/pre>\n<p>html<\/p>\n<div id=\"dynamicContent\"><\/div>\n<div class=\"infoBox\">Bilgi 1<\/div>\n<div class=\"infoBox\">Bilgi 2<\/div>\n<pre><code class=\"language-\"><\/code><\/pre>\n<p>javascript<br \/>\nconst dynamicDiv = document.getElementById('dynamicContent');<br \/>\nconst infoBoxes = document.getElementsByClassName('infoBox');<br \/>\nconst firstInfoBox = document.querySelector('.infoBox'); \/\/ Sadece ilkini se\u00e7er<br \/>\nconst allInfoBoxes = document.querySelectorAll('.infoBox'); \/\/ Hepsini se\u00e7er<\/p>\n<pre><code class=\"language-\"><h4>\u0130\u00e7erik Ekleme\/De\u011fi\u015ftirme<\/h4>\nBir <\/code><div><code>'in i\u00e7eri\u011fini de\u011fi\u015ftirmek veya yeni i\u00e7erik eklemek yayg\u0131n bir JavaScript g\u00f6revidir.\n*   <\/code>element.innerHTML<code>: Bir eleman\u0131n HTML i\u00e7eri\u011fini al\u0131r veya ayarlar. Bu, hem metin hem de HTML etiketlerini i\u00e7erir. <strong>Dikkat:<\/strong> G\u00fcvenlik a\u00e7\u0131klar\u0131 (XSS) yaratabilece\u011fi i\u00e7in kullan\u0131c\u0131dan gelen verilerle do\u011frudan kullanmaktan ka\u00e7\u0131n\u0131lmal\u0131d\u0131r.\n*   <\/code>element.textContent<code>: Bir eleman\u0131n sadece metin i\u00e7eri\u011fini al\u0131r veya ayarlar. G\u00fcvenlidir, HTML etiketlerini metin olarak ele al\u0131r.\n*   <\/code>element.appendChild()<code>: Yeni olu\u015fturulan bir eleman\u0131 mevcut bir eleman\u0131n sonuna ekler.<\/code><\/pre>\n<p>javascript<br \/>\ndynamicDiv.innerHTML = '<\/p>\n<h2>JavaScript ile Eklenen Ba\u015fl\u0131k<\/h2>\n<p>Bu i\u00e7erik dinamik olarak eklendi.<\/p>\n<p>';<br \/>\ninfoBoxes[0].textContent = 'G\u00fcncellenmi\u015f Bilgi';<\/p>\n<p>const newParagraph = document.createElement('p');<br \/>\nnewParagraph.textContent = 'Yeni bir paragraf.';<br \/>\ndynamicDiv.appendChild(newParagraph);<\/p>\n<pre><code class=\"language-\"><h4>Stil De\u011fi\u015ftirme<\/h4>\nJavaScript, bir <\/code><div><code>'in CSS stillerini do\u011frudan de\u011fi\u015ftirebilir.\n*   <\/code>element.style.propertyName<code>: CSS \u00f6zelliklerini do\u011frudan JavaScript \u00fczerinden de\u011fi\u015ftirir. \u00d6rn: <\/code>dynamicDiv.style.backgroundColor = 'yellow';<code>\n*   <\/code>element.classList.add()<code>, <\/code>element.classList.remove()<code>, <\/code>element.classList.toggle()<code>: Bir eleman\u0131n <\/code>class<code> listesini y\u00f6netmek i\u00e7in daha iyi bir y\u00f6ntemdir. Bu sayede stil de\u011fi\u015fiklikleri CSS dosyalar\u0131nda tan\u0131ml\u0131 kal\u0131r.<\/code><\/pre>\n<p>javascript<br \/>\ndynamicDiv.style.backgroundColor = 'lightgreen';<br \/>\ndynamicDiv.style.padding = '10px';<\/p>\n<p>\/\/ Class listesi ile stil de\u011fi\u015ftirme (tercih edilen y\u00f6ntem)<br \/>\ndynamicDiv.classList.add('highlight'); \/\/ CSS'te .highlight s\u0131n\u0131f\u0131 tan\u0131ml\u0131 olmal\u0131<br \/>\ndynamicDiv.classList.remove('old-style');<br \/>\ndynamicDiv.classList.toggle('active'); \/\/ E\u011fer active s\u0131n\u0131f\u0131 varsa kald\u0131r\u0131r, yoksa ekler<\/p>\n<pre><code class=\"language-\"><h4>Olay Dinleyicileri<\/h4>\nBir <\/code><div><code>'e t\u0131klama, \u00fczerine gelme gibi kullan\u0131c\u0131 etkile\u015fimlerini dinlemek i\u00e7in olay dinleyicileri eklenebilir.\n*   <\/code>element.addEventListener('event', function)<code>: Belirli bir olay\u0131 dinler ve olay ger\u00e7ekle\u015fti\u011finde bir fonksiyonu \u00e7al\u0131\u015ft\u0131r\u0131r.<\/code><\/pre>\n<p>javascript<br \/>\ndynamicDiv.addEventListener('click', function() {<br \/>\n    alert('Div t\u0131kland\u0131!');<br \/>\n    dynamicDiv.style.backgroundColor = 'orange';<br \/>\n});<\/p>\n<pre><code class=\"language-\"><h3><\/code><span><code> ve Di\u011fer Blok Seviyesi Elemanlarla Farklar\u0131<\/h3>\nHTML'de bir\u00e7ok eleman bulunur ve her birinin belirli bir amac\u0131 vard\u0131r. <\/code><div><code>'in di\u011fer benzer elemanlardan fark\u0131n\u0131 anlamak, do\u011fru eleman\u0131 do\u011fru yerde kullanmak i\u00e7in \u00f6nemlidir.\n\n<h4><\/code><div><code> vs <\/code><span><code><\/h4>\nBu iki eleman da semantik olmayan genel ama\u00e7l\u0131 kapsay\u0131c\u0131lard\u0131r, ancak temel bir farklar\u0131 vard\u0131r:\n*   <strong><\/code><div><code> (Division):<\/strong> <strong>Blok seviyesi<\/strong> bir elemand\u0131r. Kendi ba\u015f\u0131na bir sat\u0131r kaplar ve i\u00e7eri\u011fi yeni bir sat\u0131ra iter. Genellikle daha b\u00fcy\u00fck i\u00e7erik bloklar\u0131n\u0131, sayfa b\u00f6l\u00fcmlerini veya d\u00fczen bile\u015fenlerini gruplamak i\u00e7in kullan\u0131l\u0131r.\n*   <strong><\/code><span><code> (Span):<\/strong> <strong>Sat\u0131r i\u00e7i<\/strong> (inline) bir elemand\u0131r. \u0130\u00e7eri\u011fiyle ayn\u0131 sat\u0131rda kal\u0131r ve kendisinden sonra gelen i\u00e7eri\u011fi yeni bir sat\u0131ra itmez. Genellikle bir metin par\u00e7as\u0131n\u0131n veya sat\u0131r i\u00e7i i\u00e7eri\u011fin k\u00fc\u00e7\u00fck bir b\u00f6l\u00fcm\u00fcne stil uygulamak i\u00e7in kullan\u0131l\u0131r.<\/code><\/pre>\n<p>html<br \/>\n<!-- div kullan\u0131m\u0131 --><\/p>\n<div style=\"background-color: lightblue;\">Bu bir blok div'dir.<\/div>\n<div style=\"background-color: lightcoral;\">Bu da ba\u015fka bir blok div'dir.<\/div>\n<p><!-- span kullan\u0131m\u0131 --><\/p>\n<p>Bu bir paragraft\u0131r ve i\u00e7inde <span style=\"color: red; font-weight: bold;\">k\u0131rm\u0131z\u0131 ve kal\u0131n<\/span> bir metin var.<\/p>\n<pre><code class=\"language-\">G\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, <\/code><div><code>'ler alt alta s\u0131ralan\u0131rken, <\/code><span><code> ayn\u0131 sat\u0131rda kal\u0131r ve sadece belirli bir metin par\u00e7as\u0131n\u0131 etkiler.\n\n<h4><\/code><div><code> vs Semantik Elemanlar (header, nav, main, article, section, aside, footer)<\/h4>\nDaha \u00f6nce de belirtildi\u011fi gibi, HTML5 ile gelen semantik etiketler, <\/code><div><code>'e g\u00f6re daha spesifik ve anlaml\u0131 bir yap\u0131 sunar.\n*   <strong>Anlamsal Fark:<\/strong> Semantik etiketler, i\u00e7eri\u011fin t\u00fcr\u00fc ve amac\u0131 hakk\u0131nda bilgi verirken, <\/code><div><code> sadece bir kapsay\u0131c\u0131 oldu\u011funu belirtir.\n*   <strong>Eri\u015filebilirlik ve SEO:<\/strong> Semantik etiketler, arama motorlar\u0131 ve yard\u0131mc\u0131 teknolojiler i\u00e7in web sayfas\u0131n\u0131n yap\u0131s\u0131n\u0131 daha iyi anlamalar\u0131na yard\u0131mc\u0131 olur, bu da daha iyi SEO ve eri\u015filebilirlik sa\u011flar.\n*   <strong>Kod Okunabilirli\u011fi:<\/strong> Semantik etiketler, kodun amac\u0131n\u0131 daha net bir \u015fekilde ifade etti\u011fi i\u00e7in okunabilirli\u011fi art\u0131r\u0131r.\n\n<strong>Ne Zaman <\/code><div><code> Tercih Edilmez?<\/strong>\n*   Sayfan\u0131n ana ba\u015fl\u0131k veya alt bilgi b\u00f6l\u00fcmlerini olu\u015ftururken (<\/code><header><code> ve <\/code><footer><code> yerine).\n*   Navigasyon men\u00fclerini olu\u015ftururken (<\/code><nav><code> yerine).\n*   Ana i\u00e7eri\u011fi tan\u0131mlarken (<\/code><main><code> yerine).\n*   Ba\u011f\u0131ms\u0131z bir i\u00e7erik par\u00e7as\u0131n\u0131 (blog yaz\u0131s\u0131 gibi) gruplarken (<\/code><article><code> yerine).\n*   Tematik bir b\u00f6l\u00fcm\u00fc tan\u0131mlarken (<\/code><section><code> yerine).\n*   Kenar \u00e7ubu\u011fu veya reklam gibi ilgili ancak ana i\u00e7erikten ayr\u0131 b\u00f6l\u00fcmleri olu\u015ftururken (<\/code><aside><code> yerine).\n\n<strong>Ne Zaman <\/code><div><code> Kullan\u0131l\u0131r?<\/strong>\n*   Semantik bir eleman\u0131n i\u00e7inde, yaln\u0131zca stil veya d\u00fczen ama\u00e7l\u0131 olarak elemanlar\u0131 gruplamak.\n*   JavaScript ile dinamik olarak olu\u015fturulan veya manip\u00fcle edilen anlams\u0131z kapsay\u0131c\u0131lar.\n*   Belirli bir semantik anlam\u0131 olmayan, ancak g\u00f6rsel gruplama gerektiren durumlar.\n\n\u00d6zetle, <\/code><div><code> genel bir ara\u00e7t\u0131r, semantik elemanlar ise \u00f6zel ara\u00e7lard\u0131r. M\u00fcmk\u00fcn oldu\u011funda \u00f6zel arac\u0131 kullan\u0131n, genel arac\u0131 ise \u00f6zel arac\u0131n yetersiz kald\u0131\u011f\u0131 veya uygun olmad\u0131\u011f\u0131 durumlarda devreye sokun.\n\n<h3>Geli\u015fmi\u015f Kullan\u0131m Senaryolar\u0131 ve \u0130pu\u00e7lar\u0131<\/h3>\n<\/code><div><code> etiketi, basit bir kapsay\u0131c\u0131 olmaktan \u00f6te, modern web geli\u015ftirme yakla\u015f\u0131mlar\u0131nda da merkezi bir rol oynar.\n\n<h4>Component Tabanl\u0131 Geli\u015ftirme<\/h4>\nReact, Vue, Angular gibi modern JavaScript framework'leri, web sayfalar\u0131n\u0131 k\u00fc\u00e7\u00fck, ba\u011f\u0131ms\u0131z ve yeniden kullan\u0131labilir bile\u015fenlere ay\u0131rma fikrine dayan\u0131r. Bu bile\u015fenlerin \u00e7o\u011fu zaman tek bir k\u00f6k eleman\u0131 olmas\u0131 gerekir ve bu k\u00f6k eleman genellikle bir <\/code><div><code>'dir. Bir bile\u015fenin i\u00e7indeki farkl\u0131 par\u00e7alar\u0131 gruplamak ve stil uygulamak i\u00e7in de <\/code><div><code>'ler yayg\u0131n olarak kullan\u0131l\u0131r.<\/code><\/pre>\n<p>jsx<br \/>\n\/\/ React \u00f6rne\u011fi<br \/>\nfunction ProductCard({ product }) {<br \/>\n  return (<\/p>\n<div className=\"product-card\">\n      <img src={product.image} alt={product.name} \/><\/p>\n<h3>{product.name}<\/h3>\n<p>{product.description}<\/p>\n<p>      <button>Add to Cart<\/button>\n    <\/div>\n<p>  );<br \/>\n}<\/p>\n<pre><code class=\"language-\">Burada <\/code><ProductCard><code> bile\u015feni, t\u00fcm i\u00e7eri\u011fini bir <\/code><div><code> i\u00e7inde sarmalar.\n\n<h4>CSS \u00d6zel Nitelikler (Custom Properties \/ CSS Variables)<\/h4>\n<\/code><div><code> elemanlar\u0131 \u00fczerinde CSS \u00f6zel niteliklerini (de\u011fi\u015fkenlerini) tan\u0131mlamak ve kullanmak, stil y\u00f6netimini daha esnek hale getirir. Bu de\u011fi\u015fkenler, bir <\/code><div><code>'in belirli bir b\u00f6l\u00fcm\u00fc i\u00e7in tema renkleri, boyutlar veya di\u011fer stil de\u011ferlerini depolamak i\u00e7in kullan\u0131labilir.<\/code><\/pre>\n<p>html<\/p>\n<div class=\"themed-section\" style=\"--primary-color: #007bff; --text-color: #333;\">\n<p style=\"color: var(--primary-color);\">Bu birincil renkte bir metin.<\/p>\n<p>    <button style=\"background-color: var(--primary-color); color: white;\">D\u00fc\u011fme<\/button>\n<\/div>\n<pre><code class=\"language-\"><h4><\/code>data-*<code> Nitelikleri<\/h4>\nHTML5 ile birlikte gelen <\/code>data-*<code> nitelikleri, geli\u015ftiricilerin HTML elemanlar\u0131na \u00f6zel, anlamsal olmayan veri depolamas\u0131na olanak tan\u0131r. Bu veriler, JavaScript taraf\u0131ndan kolayca eri\u015filebilir ve kullan\u0131labilir. <\/code><div><code>'ler, bu t\u00fcr verileri depolamak i\u00e7in s\u0131k\u00e7a kullan\u0131l\u0131r.<\/code><\/pre>\n<p>html<\/p>\n<div class=\"user-profile\" data-user-id=\"12345\" data-status=\"active\">\n<h2>Kullan\u0131c\u0131 Ad\u0131<\/h2>\n<p>Profil Bilgileri<\/p>\n<\/div>\n<pre><code class=\"language-\"><\/code><\/pre>\n<p>javascript<br \/>\nconst userProfileDiv = document.querySelector('.user-profile');<br \/>\nconst userId = userProfileDiv.dataset.userId; \/\/ \"12345\"<br \/>\nconst userStatus = userProfileDiv.dataset.status; \/\/ \"active\"<br \/>\nconsole.log(<\/code>Kullan\u0131c\u0131 ID: ${userId}, Durum: ${userStatus}<code>);<br \/>\n<\/code>`<code><br \/>\nBu, \u00f6zellikle JavaScript ile etkile\u015fim kuran dinamik i\u00e7eriklerde veya bile\u015fenlerde \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n<h3>Sonu\u00e7: <\/code><\/p>\n<div><code>'in G\u00fcc\u00fc ve Sorumlulu\u011fu<\/h3>\n<p><\/code><\/p>\n<div><code> etiketi, HTML'in en temel ve en \u00e7ok y\u00f6nl\u00fc elemanlar\u0131ndan biridir. Semantik bir anlam ta\u015f\u0131mamas\u0131na ra\u011fmen, web sayfalar\u0131n\u0131n yap\u0131land\u0131r\u0131lmas\u0131nda, stil uygulamas\u0131nda ve dinamik etkile\u015fimlerin olu\u015fturulmas\u0131nda merkezi bir rol oynar. CSS ile birle\u015fti\u011finde, karma\u015f\u0131k d\u00fczenlerin ve g\u00f6rsel tasar\u0131mlar\u0131n temelini olu\u015fturur; JavaScript ile birle\u015fti\u011finde ise web sayfalar\u0131na hayat verir.<\/p>\n<p>Ancak, <\/code><\/p>\n<div><code>'in g\u00fcc\u00fc ayn\u0131 zamanda bir sorumluluk da getirir. A\u015f\u0131r\u0131 ve gereksiz kullan\u0131m\u0131, \"Div Cehennemi\"ne yol a\u00e7arak kodun okunabilirli\u011fini, bak\u0131m\u0131n\u0131 ve performans\u0131n\u0131 olumsuz etkileyebilir. Modern web geli\u015ftirme pratikleri, HTML5'in semantik etiketlerini m\u00fcmk\u00fcn oldu\u011funca kullanmay\u0131 ve <\/code><\/p>\n<div><code>'i yaln\u0131zca ger\u00e7ekten gerekli oldu\u011funda, yani belirli bir anlamsal kar\u015f\u0131l\u0131\u011f\u0131 olmayan g\u00f6rsel veya yap\u0131sal gruplamalar i\u00e7in kullanmay\u0131 te\u015fvik eder.<\/p>\n<p>Do\u011fru kullan\u0131ld\u0131\u011f\u0131nda, <\/code><\/p>\n<div><code> temiz, bak\u0131m\u0131 kolay ve eri\u015filebilir web sayfalar\u0131 olu\u015fturmak i\u00e7in vazge\u00e7ilmez bir ara\u00e7t\u0131r. Geli\u015ftiricilerin, <\/code><\/p>\n<div><code>'in ne zaman kullan\u0131laca\u011f\u0131n\u0131 ve ne zaman semantik alternatiflere ba\u015fvurulaca\u011f\u0131n\u0131 iyi anlamas\u0131, daha sa\u011flam ve s\u00fcrd\u00fcr\u00fclebilir web projeleri in\u015fa etmelerini sa\u011flayacakt\u0131r. Web'in geli\u015fimi devam ettik\u00e7e, <\/code><\/p>\n<div>`&#8217;in rol\u00fc evrimle\u015fmeye devam edecek, ancak temel i\u015flevi olan i\u00e7erik b\u00f6l\u00fcmleme eleman\u0131 olarak yeri hep baki kalacakt\u0131r.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Etiketi: HTML \u0130\u00e7erik B\u00f6l\u00fcmleme Eleman\u0131 Nas\u0131l Kullan\u0131l\u0131r?\nWeb d\u00fcnyas\u0131n\u0131n temel yap\u0131 ta\u015flar\u0131ndan biri olan HTML, i\u00e7eri\u011fi d\u00fczenlemek v","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-37585","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>Etiketi: HTML \u0130\u00e7erik B\u00f6l\u00fcmleme Eleman\u0131 Nas\u0131l Kullan\u0131l\u0131r? - 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\/etiketi-html-icerik-bolumleme-elemani-nasil-kullanilir\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Etiketi: HTML \u0130\u00e7erik B\u00f6l\u00fcmleme Eleman\u0131 Nas\u0131l Kullan\u0131l\u0131r?\" \/>\n<meta property=\"og:description\" content=\"Etiketi: HTML \u0130\u00e7erik B\u00f6l\u00fcmleme Eleman\u0131 Nas\u0131l Kullan\u0131l\u0131r? Web d\u00fcnyas\u0131n\u0131n temel yap\u0131 ta\u015flar\u0131ndan biri olan HTML, i\u00e7eri\u011fi d\u00fczenlemek v\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/etiketi-html-icerik-bolumleme-elemani-nasil-kullanilir\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-09T15:40:55+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=\"13 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/etiketi-html-icerik-bolumleme-elemani-nasil-kullanilir\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/etiketi-html-icerik-bolumleme-elemani-nasil-kullanilir\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Etiketi: HTML \u0130\u00e7erik B\u00f6l\u00fcmleme Eleman\u0131 Nas\u0131l Kullan\u0131l\u0131r?\",\"datePublished\":\"2026-01-09T15:40:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/etiketi-html-icerik-bolumleme-elemani-nasil-kullanilir\/\"},\"wordCount\":252,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/etiketi-html-icerik-bolumleme-elemani-nasil-kullanilir\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/etiketi-html-icerik-bolumleme-elemani-nasil-kullanilir\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/etiketi-html-icerik-bolumleme-elemani-nasil-kullanilir\/\",\"name\":\"Etiketi: HTML \u0130\u00e7erik B\u00f6l\u00fcmleme Eleman\u0131 Nas\u0131l Kullan\u0131l\u0131r? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-09T15:40:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/etiketi-html-icerik-bolumleme-elemani-nasil-kullanilir\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/etiketi-html-icerik-bolumleme-elemani-nasil-kullanilir\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/etiketi-html-icerik-bolumleme-elemani-nasil-kullanilir\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Etiketi: HTML \u0130\u00e7erik B\u00f6l\u00fcmleme Eleman\u0131 Nas\u0131l Kullan\u0131l\u0131r?\"}]},{\"@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":"Etiketi: HTML \u0130\u00e7erik B\u00f6l\u00fcmleme Eleman\u0131 Nas\u0131l Kullan\u0131l\u0131r? - 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\/etiketi-html-icerik-bolumleme-elemani-nasil-kullanilir\/","og_locale":"tr_TR","og_type":"article","og_title":"Etiketi: HTML \u0130\u00e7erik B\u00f6l\u00fcmleme Eleman\u0131 Nas\u0131l Kullan\u0131l\u0131r?","og_description":"Etiketi: HTML \u0130\u00e7erik B\u00f6l\u00fcmleme Eleman\u0131 Nas\u0131l Kullan\u0131l\u0131r? Web d\u00fcnyas\u0131n\u0131n temel yap\u0131 ta\u015flar\u0131ndan biri olan HTML, i\u00e7eri\u011fi d\u00fczenlemek v","og_url":"https:\/\/fatihsoysal.com\/blog\/etiketi-html-icerik-bolumleme-elemani-nasil-kullanilir\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-09T15:40:55+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"13 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/etiketi-html-icerik-bolumleme-elemani-nasil-kullanilir\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/etiketi-html-icerik-bolumleme-elemani-nasil-kullanilir\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Etiketi: HTML \u0130\u00e7erik B\u00f6l\u00fcmleme Eleman\u0131 Nas\u0131l Kullan\u0131l\u0131r?","datePublished":"2026-01-09T15:40:55+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/etiketi-html-icerik-bolumleme-elemani-nasil-kullanilir\/"},"wordCount":252,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/etiketi-html-icerik-bolumleme-elemani-nasil-kullanilir\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/etiketi-html-icerik-bolumleme-elemani-nasil-kullanilir\/","url":"https:\/\/fatihsoysal.com\/blog\/etiketi-html-icerik-bolumleme-elemani-nasil-kullanilir\/","name":"Etiketi: HTML \u0130\u00e7erik B\u00f6l\u00fcmleme Eleman\u0131 Nas\u0131l Kullan\u0131l\u0131r? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-09T15:40:55+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/etiketi-html-icerik-bolumleme-elemani-nasil-kullanilir\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/etiketi-html-icerik-bolumleme-elemani-nasil-kullanilir\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/etiketi-html-icerik-bolumleme-elemani-nasil-kullanilir\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Etiketi: HTML \u0130\u00e7erik B\u00f6l\u00fcmleme Eleman\u0131 Nas\u0131l Kullan\u0131l\u0131r?"}]},{"@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\/37585","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=37585"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37585\/revisions"}],"predecessor-version":[{"id":37586,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37585\/revisions\/37586"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=37585"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=37585"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=37585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}