{"id":31750,"date":"2025-10-13T15:41:11","date_gmt":"2025-10-13T12:41:11","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=31750"},"modified":"2025-10-13T15:41:11","modified_gmt":"2025-10-13T12:41:11","slug":"html-nitelikleri-attributes-nasil-kullanilir-kapsamli-bir-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/html-nitelikleri-attributes-nasil-kullanilir-kapsamli-bir-rehber\/","title":{"rendered":"HTML Nitelikleri (Attributes) Nas\u0131l Kullan\u0131l\u0131r: Kapsaml\u0131 Bir Rehber"},"content":{"rendered":"<p><body><\/p>\n<h2>HTML Nitelikleri (Attributes) Nas\u0131l Kullan\u0131l\u0131r: Kapsaml\u0131 Bir Rehber<\/h2>\n<p>HTML, web sayfalar\u0131n\u0131n yap\u0131 ta\u015f\u0131n\u0131 olu\u015fturan bir i\u015faretleme dilidir. Bir web sayfas\u0131ndaki ba\u015fl\u0131klar\u0131, paragraflar\u0131, resimleri, ba\u011flant\u0131lar\u0131 ve di\u011fer t\u00fcm i\u00e7erikleri tan\u0131mlamak i\u00e7in HTML etiketlerini kullan\u0131r\u0131z. Ancak bu etiketler, \u00e7o\u011fu zaman tek ba\u015flar\u0131na yeterli de\u011fildir. \u0130\u015fte bu noktada HTML nitelikleri (attributes) devreye girer. Nitelikler, HTML \u00f6\u011felerine ek bilgi sa\u011flamak, davran\u0131\u015flar\u0131n\u0131 de\u011fi\u015ftirmek veya g\u00f6r\u00fcn\u00fcmlerini \u00f6zelle\u015ftirmek i\u00e7in kullan\u0131l\u0131r. Bu makale, HTML niteliklerinin ne oldu\u011funu, neden \u00f6nemli olduklar\u0131n\u0131 ve web geli\u015ftirme projelerinizde nas\u0131l etkin bir \u015fekilde kullan\u0131labileceklerini kapsaml\u0131 bir \u015fekilde ele alacakt\u0131r.<\/p>\n<h3>Giri\u015f: HTML Nitelikleri Nedir ve Neden \u00d6nemlidir?<\/h3>\n<p>HTML nitelikleri, bir HTML etiketinin ba\u015flang\u0131\u00e7 etiketinde yer alan ad-de\u011fer \u00e7iftleridir ve \u00f6\u011fenin belirli bir \u00f6zelli\u011fini tan\u0131mlar. \u00d6rne\u011fin, bir resim etiketinin (<code><img><\/code>) kayna\u011f\u0131n\u0131 (<code>src<\/code>) veya bir ba\u011flant\u0131 etiketinin (<code><a><\/code>) hedefini (<code>href<\/code>) belirtmek i\u00e7in nitelikler kullan\u0131l\u0131r. Genel s\u00f6zdizimi \u015f\u00f6yledir: <code><etiket nitelik=\"de\u011fer\">\u0130\u00e7erik<\/etiket><\/code>. Nitelik adlar\u0131 genellikle k\u00fc\u00e7\u00fck harfle yaz\u0131l\u0131r ve de\u011ferler \u00e7ift t\u0131rnak (&#8220;) veya tek t\u0131rnak (&#8216;) i\u00e7ine al\u0131n\u0131r.<\/p>\n<p>Nitelikler, HTML belgelerine sadece yap\u0131sal bilgi eklemekle kalmaz, ayn\u0131 zamanda:<br \/>\n*   <strong>\u0130\u015flevsellik Sa\u011flar:<\/strong> Ba\u011flant\u0131lar\u0131n nereye gidece\u011fini, form alanlar\u0131n\u0131n t\u00fcr\u00fcn\u00fc belirler.<br \/>\n*   <strong>G\u00f6rsel Sunumu Etkiler:<\/strong> CSS ile birlikte kullan\u0131larak \u00f6\u011felerin stilini \u015fekillendirir.<br \/>\n*   <strong>Eri\u015filebilirli\u011fi Art\u0131r\u0131r:<\/strong> Ekran okuyucular gibi yard\u0131mc\u0131 teknolojilere anlaml\u0131 bilgiler sunar.<br \/>\n*   <strong>JavaScript Etkile\u015fimini M\u00fcmk\u00fcn K\u0131lar:<\/strong> JavaScript ile \u00f6\u011feleri se\u00e7mek ve manip\u00fcle etmek i\u00e7in hedefler sa\u011flar.<br \/>\n*   <strong>SEO&#8217;ya Katk\u0131da Bulunur:<\/strong> Arama motorlar\u0131n\u0131n i\u00e7eri\u011fi daha iyi anlamas\u0131na yard\u0131mc\u0131 olur.<\/p>\n<p>Bu makale boyunca, en yayg\u0131n kullan\u0131lan niteliklerden \u00f6zel ama\u00e7l\u0131 niteliklere, eri\u015filebilirlik niteliklerinden en iyi uygulama y\u00f6ntemlerine kadar bir\u00e7ok konuyu detayl\u0131 \u00f6rneklerle inceleyece\u011fiz.<\/p>\n<h3>Temel HTML Nitelikleri ve Kullan\u0131m Alanlar\u0131<\/h3>\n<p>Web geli\u015ftiricilerin g\u00fcnl\u00fck olarak en s\u0131k kulland\u0131\u011f\u0131 ve bilmesi gereken temel HTML nitelikleri \u015funlard\u0131r:<\/p>\n<h4><code>id<\/code> Nitelikleri<\/h4>\n<p><code>id<\/code> niteli\u011fi, bir HTML belgesindeki herhangi bir \u00f6\u011feye benzersiz bir tan\u0131mlay\u0131c\u0131 atamak i\u00e7in kullan\u0131l\u0131r. Bir sayfada ayn\u0131 <code>id<\/code> de\u011ferine sahip birden fazla \u00f6\u011fe bulunmamal\u0131d\u0131r.<br \/>\n*   <strong>Kullan\u0131m Alanlar\u0131:<\/strong><br \/>\n    *   <strong>CSS Hedefleme:<\/strong> Belirli bir \u00f6\u011feye \u00f6zel stil uygulamak i\u00e7in kullan\u0131l\u0131r.<br \/>\n    *   <strong>JavaScript Manip\u00fclasyonu:<\/strong> JavaScript ile belirli bir \u00f6\u011feyi se\u00e7mek ve \u00fczerinde i\u015flem yapmak i\u00e7in en yayg\u0131n y\u00f6ntemdir (<code>document.getElementById()<\/code>).<br \/>\n    *   <strong>Ba\u011flant\u0131 Hedefleri (Anchor Links):<\/strong> Sayfa i\u00e7i navigasyon i\u00e7in kullan\u0131l\u0131r; bir ba\u011flant\u0131n\u0131n <code>href<\/code> de\u011feri <code>#id_ad\u0131<\/code> \u015feklinde ayarlanarak belirli bir \u00f6\u011feye atlama sa\u011flan\u0131r.<br \/>\n*   <strong>Kurallar:<\/strong><br \/>\n    *   De\u011fer benzersiz olmal\u0131d\u0131r.<br \/>\n    *   Harf ile ba\u015flamal\u0131d\u0131r.<br \/>\n    *   Bo\u015fluk veya \u00f6zel karakterler (tire ve alt \u00e7izgi hari\u00e7) i\u00e7ermemelidir.<br \/>\n*   <strong>\u00d6rnek:<\/strong><\/p>\n<pre><code class=\"language-html\"><div id=\"ana-icerik\">\n        \n        <p>Bu, ana i\u00e7erik blo\u011fudur.<\/p>\n    <\/div>\n\n    <a href=\"#ana-icerik\">Ana \u0130\u00e7eri\u011fe Git<\/a>\n\n    <style>\n        #ana-icerik {\n            background-color: #f0f0f0;\n            padding: 20px;\n            border-radius: 5px;\n        }\n    <\/style>\n    <script>\n        const anaIcerik = document.getElementById('ana-icerik');\n        console.log(anaIcerik.innerHTML);\n    <\/script><\/code><\/pre>\n<h4><code>class<\/code> Nitelikleri<\/h4>\n<p><code>class<\/code> niteli\u011fi, birden fazla HTML \u00f6\u011fesini gruplamak ve onlara ayn\u0131 stil veya davran\u0131\u015f kurallar\u0131n\u0131 uygulamak i\u00e7in kullan\u0131l\u0131r. Bir \u00f6\u011feye birden fazla s\u0131n\u0131f atanabilir ve bu s\u0131n\u0131flar bo\u015fluklarla ayr\u0131l\u0131r.<br \/>\n*   <strong>Kullan\u0131m Alanlar\u0131:<\/strong><br \/>\n    *   <strong>CSS Stil Uygulamas\u0131:<\/strong> Birden fazla \u00f6\u011feye ayn\u0131 CSS kurallar\u0131n\u0131 uygulamak i\u00e7in idealdir.<br \/>\n    *   <strong>JavaScript Se\u00e7imi:<\/strong> JavaScript ile belirli bir s\u0131n\u0131fa sahip t\u00fcm \u00f6\u011feleri se\u00e7mek (<code>document.getElementsByClassName()<\/code> veya <code>document.querySelectorAll()<\/code>) ve manip\u00fcle etmek i\u00e7in kullan\u0131l\u0131r.<br \/>\n*   <strong>Kurallar:<\/strong><br \/>\n    *   Bir \u00f6\u011feye birden fazla s\u0131n\u0131f atanabilir.<br \/>\n    *   S\u0131n\u0131f adlar\u0131 harf ile ba\u015flamal\u0131d\u0131r, ancak say\u0131, tire ve alt \u00e7izgi de i\u00e7erebilir.<br \/>\n*   <strong>\u00d6rnek:<\/strong><\/p>\n<pre><code class=\"language-html\"><p class=\"metin vurgulu\">Bu bir vurgulu paragraft\u0131r.<\/p>\n    <div class=\"kutu vurgulu\">Bu da vurgulu bir kutu.<\/div>\n\n    <style>\n        .metin {\n            font-family: Arial, sans-serif;\n            font-size: 16px;\n        }\n        .vurgulu {\n            color: blue;\n            font-weight: bold;\n        }\n        .kutu {\n            border: 1px solid #ccc;\n            padding: 10px;\n            margin-top: 10px;\n        }\n    <\/style>\n    <script>\n        const vurguluOgeler = document.querySelectorAll('.vurgulu');\n        vurguluOgeler.forEach(oge => {\n            oge.style.backgroundColor = 'yellow';\n        });\n    <\/script><\/code><\/pre>\n<h4><code>src<\/code> Nitelikleri<\/h4>\n<p><code>src<\/code> (source) niteli\u011fi, harici bir kayna\u011f\u0131n URL&#8217;sini belirtmek i\u00e7in kullan\u0131l\u0131r. Genellikle resimler, videolar, ses dosyalar\u0131, komut dosyalar\u0131 ve iframe&#8217;ler i\u00e7in kullan\u0131l\u0131r.<br \/>\n*   <strong>Kullan\u0131m Alanlar\u0131:<\/strong><br \/>\n    *   <code><img><\/code>: Resim dosyas\u0131n\u0131n yolunu belirtir.<br \/>\n    *   <code><script><\/code>: Harici JavaScript dosyas\u0131n\u0131n yolunu belirtir.<br \/>\n    *   <code><audio><\/code>, <code><video><\/code>: Ses veya video dosyas\u0131n\u0131n yolunu belirtir.<br \/>\n    *   <code><iframe><\/code>: Ba\u015fka bir web sayfas\u0131n\u0131n URL'sini belirtir.<br \/>\n*   <strong>\u00d6rnek:<\/strong><\/p>\n<pre><code class=\"language-html\"><img decoding=\"async\" src=\"resimler\/ornek-resim.jpg\" alt=\"\u00d6rnek Resim\">\n    <script src=\"js\/main.js\"><\/script>\n    <audio controls>\n        <source src=\"sesler\/muzik.mp3\" type=\"audio\/mpeg\">\n        Taray\u0131c\u0131n\u0131z ses etiketini desteklemiyor.\n    <\/audio><\/code><\/pre>\n<h4><code>href<\/code> Nitelikleri<\/h4>\n<p><code>href<\/code> (hyperlink reference) niteli\u011fi, bir k\u00f6pr\u00fcn\u00fcn hedef URL'sini veya bir harici kayna\u011f\u0131n (\u00f6rne\u011fin bir CSS dosyas\u0131) konumunu belirtir.<br \/>\n*   <strong>Kullan\u0131m Alanlar\u0131:<\/strong><br \/>\n    *   <code><a><\/code>: T\u0131kland\u0131\u011f\u0131nda kullan\u0131c\u0131y\u0131 ba\u015fka bir sayfaya veya sayfa i\u00e7i bir konuma y\u00f6nlendiren ba\u011flant\u0131n\u0131n hedefini belirtir.<br \/>\n    *   <code><link><\/code>: Harici bir stil sayfas\u0131n\u0131n veya di\u011fer ili\u015fkili belgelerin konumunu belirtir.<br \/>\n*   <strong>\u00d6rnek:<\/strong><\/p>\n<pre><code class=\"language-html\"><a href=\"https:\/\/www.example.com\">\u00d6rnek Web Sitesi<\/a>\n    <a href=\"\/hakkimizda.html\">Hakk\u0131m\u0131zda<\/a>\n    <a href=\"#bolum3\">\u00dc\u00e7\u00fcnc\u00fc B\u00f6l\u00fcme Git<\/a>\n\n    <link rel=\"stylesheet\" href=\"css\/style.css\"><\/code><\/pre>\n<h4><code>alt<\/code> Nitelikleri<\/h4>\n<p><code>alt<\/code> (alternative text) niteli\u011fi, bir resim y\u00fcklenemedi\u011finde veya ekran okuyucular taraf\u0131ndan kullan\u0131ld\u0131\u011f\u0131nda resmin yerine ge\u00e7ecek metni sa\u011flar. Eri\u015filebilirlik ve SEO i\u00e7in kritik \u00f6neme sahiptir.<br \/>\n*   <strong>Kullan\u0131m Alanlar\u0131:<\/strong><br \/>\n    *   <code><img><\/code>: Resmin i\u00e7eri\u011fini veya amac\u0131n\u0131 a\u00e7\u0131klayan k\u0131sa bir metin sa\u011flar.<br \/>\n*   <strong>\u00d6nemi:<\/strong><br \/>\n    *   G\u00f6rme engelli kullan\u0131c\u0131lar i\u00e7in resmin ne hakk\u0131nda oldu\u011funu a\u00e7\u0131klar.<br \/>\n    *   Resim y\u00fcklenemedi\u011finde kullan\u0131c\u0131ya bilgi verir.<br \/>\n    *   Arama motorlar\u0131n\u0131n resim i\u00e7eri\u011fini anlamas\u0131na yard\u0131mc\u0131 olur, bu da SEO'yu iyile\u015ftirir.<br \/>\n*   <strong>\u00d6rnek:<\/strong><\/p>\n<pre><code class=\"language-html\"><img decoding=\"async\" src=\"resimler\/gun-batimi.jpg\" alt=\"Deniz kenar\u0131nda muhte\u015fem bir g\u00fcn bat\u0131m\u0131 manzaras\u0131\"><\/code><\/pre>\n<h4><code>title<\/code> Nitelikleri<\/h4>\n<p><code>title<\/code> niteli\u011fi, bir \u00f6\u011fe hakk\u0131nda ek bilgi sa\u011flamak i\u00e7in kullan\u0131l\u0131r. Fare imleci \u00f6\u011fenin \u00fczerine geldi\u011finde bir ipucu (tooltip) olarak g\u00f6sterilir.<br \/>\n*   <strong>Kullan\u0131m Alanlar\u0131:<\/strong><br \/>\n    *   Hemen hemen t\u00fcm HTML \u00f6\u011feleriyle kullan\u0131labilir.<br \/>\n    *   Kullan\u0131c\u0131ya ek ba\u011flamsal bilgi sunmak i\u00e7in.<br \/>\n*   <strong>\u00d6rnek:<\/strong><\/p>\n<pre><code class=\"language-html\"><p title=\"Bu paragraf \u00f6nemli bilgiler i\u00e7erir.\">Bu bir paragraft\u0131r.<\/p>\n    <a href=\"https:\/\/www.example.com\" title=\"\u00d6rnek web sitesine gitmek i\u00e7in t\u0131klay\u0131n\">Ziyaret Et<\/a><\/code><\/pre>\n<h4><code>style<\/code> Nitelikleri<\/h4>\n<p><code>style<\/code> niteli\u011fi, belirli bir HTML \u00f6\u011fesine do\u011frudan sat\u0131r i\u00e7i CSS stilleri uygulamak i\u00e7in kullan\u0131l\u0131r. Genellikle k\u00fc\u00e7\u00fck, \u00f6zel durumlar veya h\u0131zl\u0131 testler i\u00e7in kullan\u0131l\u0131r, ancak b\u00fcy\u00fck projelerde harici CSS dosyalar\u0131 tercih edilir.<br \/>\n*   <strong>Kullan\u0131m Alanlar\u0131:<\/strong><br \/>\n    *   Tek bir \u00f6\u011feye an\u0131nda stil uygulamak.<br \/>\n*   <strong>Dezavantajlar\u0131:<\/strong><br \/>\n    *   Kodu okumay\u0131 ve bak\u0131m\u0131 zorla\u015ft\u0131r\u0131r.<br \/>\n    *   Stil tekrar\u0131na yol a\u00e7ar.<br \/>\n    *   CSS \u00f6nceli\u011fi nedeniyle di\u011fer stil kurallar\u0131n\u0131 ge\u00e7ersiz k\u0131labilir.<br \/>\n*   <strong>\u00d6rnek:<\/strong><\/p>\n<pre><code class=\"language-html\"><p style=\"color: red; font-size: 18px; background-color: lightyellow;\">Bu metin sat\u0131r i\u00e7i stil ile bi\u00e7imlendirilmi\u015ftir.<\/p><\/code><\/pre>\n<h4><code>lang<\/code> Nitelikleri<\/h4>\n<p><code>lang<\/code> niteli\u011fi, bir \u00f6\u011fenin veya t\u00fcm belgenin i\u00e7eri\u011finin dilini belirtmek i\u00e7in kullan\u0131l\u0131r. Genellikle <code><html><\/code> etiketinde t\u00fcm sayfan\u0131n dilini belirtmek i\u00e7in kullan\u0131l\u0131r.<br \/>\n*   <strong>Kullan\u0131m Alanlar\u0131:<\/strong><br \/>\n    *   <code><html><\/code>: Sayfan\u0131n ana dilini belirtir (\u00f6rn. <code>lang=\"tr\"<\/code>).<br \/>\n    *   Belirli bir \u00f6\u011fe: E\u011fer bir paragraf veya b\u00f6l\u00fcm farkl\u0131 bir dildeyse, o \u00f6\u011feye \u00f6zel olarak <code>lang<\/code> niteli\u011fi atanabilir.<br \/>\n*   <strong>\u00d6nemi:<\/strong><br \/>\n    *   Arama motorlar\u0131n\u0131n i\u00e7eri\u011fin dilini anlamas\u0131na yard\u0131mc\u0131 olur.<br \/>\n    *   Ekran okuyucular\u0131n do\u011fru telaffuz ve aksanla metni okumas\u0131n\u0131 sa\u011flar.<br \/>\n    *   Taray\u0131c\u0131lar\u0131n dil ile ilgili \u00f6zelliklerini (\u00f6rn. yaz\u0131m denetimi) optimize etmesine yard\u0131mc\u0131 olur.<br \/>\n*   <strong>\u00d6rnek:<\/strong><\/p>\n<pre><code class=\"language-html\"><html lang=\"tr\">\n    <head>\n        <meta charset=\"UTF-8\">\n        <title>T\u00fcrk\u00e7e Sayfa<\/title>\n    <\/head>\n    <body>\n        \n        <p>Bu bir T\u00fcrk\u00e7e paragraft\u0131r.<\/p>\n        <p><span lang=\"en\">Hello World!<\/span> Bu ise \u0130ngilizce bir kelime \u00f6be\u011fidir.<\/p>\n    <\/body>\n    <\/html><\/code><\/pre>\n<h3>Global Nitelikler<\/h3>\n<p>Global nitelikler, neredeyse t\u00fcm HTML etiketlerinde kullan\u0131labilen niteliklerdir. Bu nitelikler, \u00f6\u011felerin temel davran\u0131\u015flar\u0131n\u0131 ve eri\u015filebilirli\u011fini etkileyen genel \u00f6zellikler sunar.<\/p>\n<h4><code>data-*<\/code> Nitelikleri<\/h4>\n<p><code>data-*<\/code> nitelikleri, \u00f6zel verileri HTML \u00f6\u011felerinde depolamak i\u00e7in kullan\u0131l\u0131r. Bu veriler genellikle JavaScript taraf\u0131ndan okunur ve manip\u00fcle edilir, b\u00f6ylece HTML ve JavaScript aras\u0131nda \u00f6zel, gizli veri al\u0131\u015fveri\u015fi sa\u011flan\u0131r.<br \/>\n*   <strong>Kullan\u0131m Alanlar\u0131:<\/strong><br \/>\n    *   Kullan\u0131c\u0131 aray\u00fcz\u00fc bile\u015fenlerinin durumunu depolamak (\u00f6rn. bir modal pencerenin a\u00e7\u0131k\/kapal\u0131 durumu).<br \/>\n    *   API'lerden gelen verileri do\u011frudan HTML'e g\u00f6mmek.<br \/>\n    *   JavaScript ile etkile\u015fimli \u00f6\u011feler olu\u015fturmak.<br \/>\n*   <strong>Kurallar:<\/strong><br \/>\n    *   Nitelik ad\u0131 <code>data-<\/code> ile ba\u015flamal\u0131d\u0131r, ard\u0131ndan k\u00fc\u00e7\u00fck harfler, say\u0131lar, tireler ve alt \u00e7izgilerle devam edebilir.<br \/>\n*   <strong>\u00d6rnek:<\/strong><\/p>\n<pre><code class=\"language-html\"><button data-urun-id=\"12345\" data-kategori=\"elektronik\">Sepete Ekle<\/button>\n\n    <script>\n        const sepetButonu = document.querySelector('button');\n        sepetButonu.addEventListener('click', () => {\n            const urunId = sepetButonu.dataset.urunId; \/\/ data-urun-id -> dataset.urunId\n            const kategori = sepetButonu.dataset.kategori;\n            console.log(<code>\u00dcr\u00fcn ID: ${urunId}, Kategori: ${kategori} sepete eklendi.<\/code>);\n            \/\/ JavaScript ile bu verileri kullanarak ba\u015fka i\u015flemler yapabilirsiniz.\n        });\n    <\/script><\/code><\/pre>\n<h4><code>tabindex<\/code> Nitelikleri<\/h4>\n<p><code>tabindex<\/code> niteli\u011fi, bir \u00f6\u011fenin klavye navigasyonu (Tab tu\u015fu) s\u0131ras\u0131ndaki konumunu belirler. Eri\u015filebilirlik i\u00e7in \u00e7ok \u00f6nemlidir, \u00e7\u00fcnk\u00fc kullan\u0131c\u0131lar\u0131n klavye ile etkile\u015fimli \u00f6\u011feler aras\u0131nda gezinmesini sa\u011flar.<br \/>\n*   <strong>De\u011ferler:<\/strong><br \/>\n    *   <strong>Pozitif bir say\u0131 (\u00f6rn. <code>tabindex=\"1\"<\/code>):<\/strong> \u00d6\u011fenin sekme s\u0131ras\u0131n\u0131 belirler. Daha k\u00fc\u00e7\u00fck say\u0131lar daha \u00f6nce gelir.<br \/>\n    *   <strong><code>tabindex=\"0\"<\/code>:<\/strong> \u00d6\u011feyi do\u011fal sekme s\u0131ras\u0131na dahil eder ve belge ak\u0131\u015f\u0131na g\u00f6re s\u0131ralar.<br \/>\n    *   <strong><code>tabindex=\"-1\"<\/code>:<\/strong> \u00d6\u011feyi sekme s\u0131ras\u0131ndan \u00e7\u0131kar\u0131r, ancak JavaScript ile odaklan\u0131labilir olmas\u0131n\u0131 sa\u011flar.<br \/>\n*   <strong>\u00d6rnek:<\/strong><\/p>\n<pre><code class=\"language-html\"><button tabindex=\"2\">\u0130kinci Buton<\/button>\n    <a href=\"#\" tabindex=\"1\">Birinci Ba\u011flant\u0131<\/a>\n    <input type=\"text\" tabindex=\"0\" placeholder=\"Normal S\u0131ra\">\n    <div tabindex=\"-1\">Bu div'e klavye ile do\u011frudan ula\u015f\u0131lamaz, ancak JS ile odaklanabilir.<\/div><\/code><\/pre>\n<h4><code>contenteditable<\/code> Nitelikleri<\/h4>\n<p><code>contenteditable<\/code> niteli\u011fi, bir \u00f6\u011fenin i\u00e7eri\u011finin kullan\u0131c\u0131 taraf\u0131ndan do\u011frudan web sayfas\u0131nda d\u00fczenlenebilir olup olmad\u0131\u011f\u0131n\u0131 belirtir.<br \/>\n*   <strong>Kullan\u0131m Alanlar\u0131:<\/strong><br \/>\n    *   Basit WYSIWYG (What You See Is What You Get) edit\u00f6rleri olu\u015fturmak.<br \/>\n    *   Kullan\u0131c\u0131lar\u0131n belirli metin alanlar\u0131n\u0131 an\u0131nda d\u00fczenlemesine izin vermek.<br \/>\n*   <strong>De\u011ferler:<\/strong> <code>true<\/code> (veya bo\u015f), <code>false<\/code>.<br \/>\n*   <strong>\u00d6rnek:<\/strong><\/p>\n<pre><code class=\"language-html\"><div contenteditable=\"true\" style=\"border: 1px solid #ccc; padding: 10px; min-height: 50px;\">\n        Bu metni d\u00fczenleyebilirsiniz. Deneyin!\n    <\/div>\n    <p>Bu metin d\u00fczenlenemez.<\/p><\/code><\/pre>\n<h4><code>hidden<\/code> Nitelikleri<\/h4>\n<p><code>hidden<\/code> niteli\u011fi, bir \u00f6\u011feyi tamamen gizlemek i\u00e7in kullan\u0131l\u0131r. Bu niteli\u011fe sahip \u00f6\u011feler g\u00f6rsel olarak g\u00f6r\u00fcnmezdir ve ekran okuyucular taraf\u0131ndan da genellikle yok say\u0131l\u0131r.<br \/>\n*   <strong>Kullan\u0131m Alanlar\u0131:<\/strong><br \/>\n    *   Ge\u00e7ici olarak bir \u00f6\u011feyi sayfadan kald\u0131rmak.<br \/>\n    *   JavaScript ile dinamik olarak g\u00f6sterilip gizlenecek \u00f6\u011feler.<br \/>\n*   <strong>\u00d6rnek:<\/strong><\/p>\n<pre><code class=\"language-html\"><p>Bu paragraf normalde g\u00f6r\u00fcn\u00fcr.<\/p>\n    <p hidden>Bu paragraf gizlidir ve g\u00f6r\u00fcnmez.<\/p><\/code><\/pre>\n<h4><code>dir<\/code> Nitelikleri<\/h4>\n<p><code>dir<\/code> niteli\u011fi, bir \u00f6\u011fenin veya t\u00fcm belgenin metin y\u00f6n\u00fcn\u00fc belirtir. \u00d6zellikle sa\u011fdan sola yaz\u0131lan diller (Arap\u00e7a, \u0130branice vb.) i\u00e7in \u00f6nemlidir.<br \/>\n*   <strong>De\u011ferler:<\/strong><br \/>\n    *   <code>ltr<\/code> (left-to-right): Soldan sa\u011fa (varsay\u0131lan).<br \/>\n    *   <code>rtl<\/code> (right-to-left): Sa\u011fdan sola.<br \/>\n    *   <code>auto<\/code>: Taray\u0131c\u0131n\u0131n i\u00e7eri\u011fe g\u00f6re otomatik olarak y\u00f6n\u00fc belirlemesini sa\u011flar.<br \/>\n*   <strong>\u00d6rnek:<\/strong><\/p>\n<pre><code class=\"language-html\"><html lang=\"ar\" dir=\"rtl\">\n    <head>\n        <meta charset=\"UTF-8\">\n        <title>\u0627\u0644\u0639\u0631\u0628\u064a\u0629<\/title>\n    <\/head>\n    <body>\n        <p>\u0645\u0631\u062d\u0628\u0627\u064b \u0628\u0627\u0644\u0639\u0627\u0644\u0645!<\/p>\n        <p dir=\"ltr\">This is a left-to-right paragraph.<\/p>\n    <\/body>\n    <\/html><\/code><\/pre>\n<h3>Form Nitelikleri<\/h3>\n<p>HTML formlar\u0131, kullan\u0131c\u0131 girdisi almak i\u00e7in hayati \u00f6neme sahiptir. Form \u00f6\u011feleri, davran\u0131\u015flar\u0131n\u0131 ve etkile\u015fimlerini kontrol etmek i\u00e7in zengin bir nitelik setine sahiptir.<\/p>\n<h4><code><input><\/code> ve Di\u011fer Form \u00d6\u011feleri \u0130\u00e7in Nitelikler<\/h4>\n<p>*   <strong><code>type<\/code>:<\/strong> Giri\u015f alan\u0131n\u0131n t\u00fcr\u00fcn\u00fc belirtir (\u00f6rn. <code>text<\/code>, <code>password<\/code>, <code>number<\/code>, <code>email<\/code>, <code>checkbox<\/code>, <code>radio<\/code>, <code>file<\/code>, <code>submit<\/code>).<\/p>\n<pre><code class=\"language-html\"><input type=\"text\" placeholder=\"Ad\u0131n\u0131z\">\n    <input type=\"password\" placeholder=\"\u015eifreniz\">\n    <input type=\"email\" placeholder=\"E-posta adresiniz\"><\/code><\/pre>\n<p>*   <strong><code>name<\/code>:<\/strong> Form verileri sunucuya g\u00f6nderildi\u011finde, bu nitelik alan\u0131n ad\u0131n\u0131 temsil eder. Her form \u00f6\u011fesi i\u00e7in benzersiz olmal\u0131d\u0131r (ayn\u0131 grup i\u00e7indeki radyo d\u00fc\u011fmeleri hari\u00e7).<\/p>\n<pre><code class=\"language-html\"><input type=\"text\" name=\"kullanici_adi\">\n    <input type=\"radio\" name=\"cinsiyet\" value=\"erkek\"> Erkek\n    <input type=\"radio\" name=\"cinsiyet\" value=\"kadin\"> Kad\u0131n<\/code><\/pre>\n<p>*   <strong><code>value<\/code>:<\/strong> Bir giri\u015f alan\u0131n\u0131n varsay\u0131lan de\u011ferini veya bir d\u00fc\u011fmenin g\u00f6nderilecek de\u011ferini belirtir.<\/p>\n<pre><code class=\"language-html\"><input type=\"text\" name=\"sehir\" value=\"Ankara\">\n    <button type=\"submit\" value=\"gonder\">G\u00f6nder<\/button><\/code><\/pre>\n<p>*   <strong><code>placeholder<\/code>:<\/strong> Giri\u015f alan\u0131 bo\u015fken g\u00f6r\u00fcnen, kullan\u0131c\u0131ya ne girmesi gerekti\u011fini s\u00f6yleyen ipucu metni.<\/p>\n<pre><code class=\"language-html\"><input type=\"text\" placeholder=\"Arama yap\u0131n...\"><\/code><\/pre>\n<p>*   <strong><code>required<\/code>:<\/strong> Bu nitelik, form g\u00f6nderilmeden \u00f6nce alan\u0131n doldurulmas\u0131 gerekti\u011fini belirtir. Boole niteli\u011fidir (de\u011fer gerekmez, sadece varl\u0131\u011f\u0131 yeterlidir).<\/p>\n<pre><code class=\"language-html\"><input type=\"text\" name=\"ad\" required><\/code><\/pre>\n<p>*   <strong><code>disabled<\/code>:<\/strong> Bu nitelik, bir form \u00f6\u011fesini etkisizle\u015ftirir, b\u00f6ylece kullan\u0131c\u0131 onunla etkile\u015fim kuramaz ve de\u011feri form g\u00f6nderimine dahil edilmez.<\/p>\n<pre><code class=\"language-html\"><input type=\"text\" name=\"adres\" disabled><\/code><\/pre>\n<p>*   <strong><code>readonly<\/code>:<\/strong> Bu nitelik, bir giri\u015f alan\u0131n\u0131n de\u011ferinin de\u011fi\u015ftirilemeyece\u011fini belirtir, ancak de\u011feri form g\u00f6nderimine dahil edilir.<\/p>\n<pre><code class=\"language-html\"><input type=\"text\" name=\"kimlik_no\" value=\"123456789\" readonly><\/code><\/pre>\n<p>*   <strong><code>min<\/code>, <code>max<\/code>, <code>step<\/code>:<\/strong> Say\u0131sal (<code>number<\/code>, <code>range<\/code>) veya tarih\/saat (<code>date<\/code>, <code>time<\/code>) giri\u015fleri i\u00e7in minimum, maksimum ve ad\u0131m de\u011ferlerini belirler.<\/p>\n<pre><code class=\"language-html\"><input type=\"number\" min=\"1\" max=\"10\" step=\"1\" value=\"5\"><\/code><\/pre>\n<p>*   <strong><code>checked<\/code>:<\/strong> <code>radio<\/code> ve <code>checkbox<\/code> t\u00fcr\u00fcndeki giri\u015f alanlar\u0131n\u0131n varsay\u0131lan olarak i\u015faretli olmas\u0131n\u0131 sa\u011flar.<\/p>\n<pre><code class=\"language-html\"><input type=\"checkbox\" name=\"abone_ol\" checked> B\u00fcltene abone ol<\/code><\/pre>\n<p>*   <strong><code>selected<\/code>:<\/strong> <code><option><\/code> etiketi i\u00e7in kullan\u0131l\u0131r ve bir a\u00e7\u0131l\u0131r listede varsay\u0131lan olarak se\u00e7ili \u00f6\u011feyi belirtir.<\/p>\n<pre><code class=\"language-html\"><select name=\"ulke\">\n        <option value=\"tr\">T\u00fcrkiye<\/option>\n        <option value=\"us\" selected>Amerika Birle\u015fik Devletleri<\/option>\n    <\/select><\/code><\/pre>\n<p>*   <strong><code>autocomplete<\/code>:<\/strong> Taray\u0131c\u0131n\u0131n otomatik tamamlama \u00f6zelli\u011fini kontrol eder. <code>on<\/code> veya <code>off<\/code> olarak ayarlanabilir, veya belirli bir veri t\u00fcr\u00fc i\u00e7in ipucu sa\u011flayabilir (\u00f6rn. <code>name<\/code>, <code>email<\/code>).<\/p>\n<pre><code class=\"language-html\"><input type=\"text\" name=\"ad_soyad\" autocomplete=\"name\">\n    <input type=\"email\" name=\"eposta\" autocomplete=\"email\"><\/code><\/pre>\n<p>Bu nitelikler, kullan\u0131c\u0131 dostu ve i\u015flevsel formlar olu\u015fturmak i\u00e7in temel ara\u00e7lard\u0131r.<\/p>\n<h3>Eri\u015filebilirlik (ARIA) Nitelikleri<\/h3>\n<p>WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) nitelikleri, \u00f6zellikle dinamik i\u00e7erik ve geli\u015fmi\u015f kullan\u0131c\u0131 aray\u00fcz\u00fc bile\u015fenleri i\u00e7in HTML'in eri\u015filebilirli\u011fini art\u0131rmak amac\u0131yla tasarlanm\u0131\u015ft\u0131r. Bu nitelikler, ekran okuyucular gibi yard\u0131mc\u0131 teknolojilere, bir \u00f6\u011fenin rol\u00fc, durumu ve \u00f6zellikleri hakk\u0131nda ek anlamsal bilgi sa\u011flar.<\/p>\n<p>*   <strong>Neden \u00d6nemli?<\/strong><br \/>\n    *   HTML'de do\u011fal olarak anlamsal kar\u015f\u0131l\u0131\u011f\u0131 olmayan karma\u015f\u0131k UI bile\u015fenleri (\u00f6rn. sekmeli aray\u00fczler, a\u00e7\u0131l\u0131r men\u00fcler, ilerleme \u00e7ubuklar\u0131) i\u00e7in anlam katarlar.<br \/>\n    *   G\u00f6rme engelli veya motor engelli kullan\u0131c\u0131lar\u0131n web sayfalar\u0131yla daha etkili bir \u015fekilde etkile\u015fim kurmas\u0131n\u0131 sa\u011flarlar.<\/p>\n<p>*   <strong>Yayg\u0131n ARIA Nitelikleri:<\/strong><br \/>\n    *   <strong><code>role<\/code>:<\/strong> Bir \u00f6\u011fenin anlamsal rol\u00fcn\u00fc tan\u0131mlar (\u00f6rn. <code>role=\"button\"<\/code>, <code>role=\"navigation\"<\/code>, <code>role=\"dialog\"<\/code>).<\/p>\n<pre><code class=\"language-html\"><div role=\"button\" tabindex=\"0\" aria-label=\"Kapat\">X<\/div>\n        <ul role=\"navigation\">\n            <li role=\"menuitem\"><a href=\"#\">Anasayfa<\/a><\/li>\n        <\/ul><\/code><\/pre>\n<p>    *   <strong><code>aria-label<\/code>:<\/strong> Bir \u00f6\u011fe i\u00e7in g\u00f6r\u00fcn\u00fcr bir etiket olmad\u0131\u011f\u0131nda, ekran okuyuculara okunacak a\u00e7\u0131klay\u0131c\u0131 bir metin sa\u011flar.<\/p>\n<pre><code class=\"language-html\"><button aria-label=\"Sepete Ekle\">\n            <img decoding=\"async\" src=\"icons\/cart.png\" alt=\"\">\n        <\/button><\/code><\/pre>\n<p>    *   <strong><code>aria-labelledby<\/code>:<\/strong> Bir \u00f6\u011fenin etiketini ba\u015fka bir \u00f6\u011fenin <code>id<\/code>'sine ba\u011flar.<\/p>\n<pre><code class=\"language-html\"><h2 id=\"modal-baslik\">Modal Ba\u015fl\u0131\u011f\u0131<\/h2>\n        <div role=\"dialog\" aria-labelledby=\"modal-baslik\">\n            <!-- Modal i\u00e7eri\u011fi -->\n        <\/div><\/code><\/pre>\n<p>    *   <strong><code>aria-describedby<\/code>:<\/strong> Bir \u00f6\u011fe hakk\u0131nda ek a\u00e7\u0131klama sa\u011flayan ba\u015fka bir \u00f6\u011fenin <code>id<\/code>'sine ba\u011flar.<\/p>\n<pre><code class=\"language-html\"><input type=\"text\" aria-describedby=\"email-yardim\">\n        <p id=\"email-yardim\">E-posta adresiniz kimseyle payla\u015f\u0131lmayacakt\u0131r.<\/p><\/code><\/pre>\n<p>    *   <strong><code>aria-expanded<\/code>:<\/strong> Bir \u00f6\u011fenin (\u00f6rn. bir men\u00fc veya akordeon ba\u015fl\u0131\u011f\u0131) geni\u015fletilmi\u015f mi yoksa daralt\u0131lm\u0131\u015f m\u0131 oldu\u011funu belirtir (<code>true<\/code>\/<code>false<\/code>).<\/p>\n<pre><code class=\"language-html\"><button aria-expanded=\"false\" aria-controls=\"menu-icerik\">Men\u00fc<\/button>\n        <div id=\"menu-icerik\" hidden>\n            <!-- Men\u00fc \u00f6\u011feleri -->\n        <\/div><\/code><\/pre>\n<p>    *   <strong><code>aria-hidden<\/code>:<\/strong> Bir \u00f6\u011fenin yard\u0131mc\u0131 teknolojiler taraf\u0131ndan yok say\u0131lmas\u0131 gerekti\u011fini belirtir (<code>true<\/code>\/<code>false<\/code>). Genellikle sadece dekoratif \u00f6\u011feler veya ekranda zaten g\u00f6r\u00fcnen bilgilerin tekrar\u0131 i\u00e7in kullan\u0131l\u0131r.<\/p>\n<pre><code class=\"language-html\"><span aria-hidden=\"true\">X<\/span> <button>Kapat<\/button><\/code><\/pre>\n<p>    *   <strong><code>aria-live<\/code>:<\/strong> Dinamik olarak g\u00fcncellenen i\u00e7erik alanlar\u0131n\u0131 i\u015faretler, b\u00f6ylece ekran okuyucular bu de\u011fi\u015fiklikleri otomatik olarak duyurabilir (<code>polite<\/code>, <code>assertive<\/code>).<\/p>\n<pre><code class=\"language-html\"><div aria-live=\"polite\">\n            <!-- Dinamik olarak g\u00fcncellenen bildirimler buraya gelir -->\n        <\/div><\/code><\/pre>\n<p>ARIA nitelikleri g\u00fc\u00e7l\u00fc ara\u00e7lard\u0131r ancak dikkatli kullan\u0131lmal\u0131d\u0131r. \"No ARIA is better than bad ARIA\" (K\u00f6t\u00fc ARIA'dan hi\u00e7 ARIA olmamas\u0131 daha iyidir) prensibi unutulmamal\u0131d\u0131r. M\u00fcmk\u00fcn oldu\u011funca anlamsal HTML etiketleri (<code><button><\/code>, <code><\/p>\n<nav><\/code>, <code><input><\/code>) tercih edilmeli, ARIA sadece HTML'in yetersiz kald\u0131\u011f\u0131 durumlarda kullan\u0131lmal\u0131d\u0131r.<\/p>\n<h3>Niteliklerin Do\u011fru Kullan\u0131m\u0131 ve En \u0130yi Uygulamalar<\/h3>\n<p>HTML niteliklerini etkili ve s\u00fcrd\u00fcr\u00fclebilir bir \u015fekilde kullanmak i\u00e7in baz\u0131 en iyi uygulamalar\u0131 takip etmek \u00f6nemlidir.<\/p>\n<h4>Anlamsal Do\u011fruluk<\/h4>\n<p>*   <strong>Do\u011fru Etikete Do\u011fru Nitelik:<\/strong> Nitelikleri, ama\u00e7lar\u0131na uygun etiketlerle kullan\u0131n. \u00d6rne\u011fin, bir ba\u011flant\u0131 i\u00e7in <code>href<\/code> yerine <code>src<\/code> kullanmak anlams\u0131zd\u0131r.<br \/>\n*   <strong>Anlamsal Etiketleri Tercih Edin:<\/strong> <code><\/p>\n<div><\/code> ve <code><span><\/code> gibi genel etiketler yerine <code><\/p>\n<nav><\/code>, <code><main><\/code>, <code><\/p>\n<article><\/code>, <code><\/p>\n<section><\/code>, <code><\/p>\n<aside><\/code>, <code><\/p>\n<header><\/code>, <code><\/p>\n<footer><\/code>, <code><button><\/code> gibi anlamsal HTML5 etiketlerini kullan\u0131n. Bu, hem eri\u015filebilirli\u011fi hem de SEO'yu art\u0131r\u0131r ve kodunuzu daha okunur k\u0131lar. Nitelikler, bu anlamsal etiketlere ek bilgi sa\u011flamak i\u00e7in kullan\u0131l\u0131r.<\/p>\n<h4>Eri\u015filebilirlik Odakl\u0131l\u0131k<\/h4>\n<p>*   <strong><code>alt<\/code> Metinlerini Asla Atlamay\u0131n:<\/strong> T\u00fcm <code><img><\/code> etiketleri i\u00e7in a\u00e7\u0131klay\u0131c\u0131 <code>alt<\/code> metinleri sa\u011flay\u0131n. Dekoratif resimler i\u00e7in <code>alt=\"\"<\/code> (bo\u015f <code>alt<\/code>) kullan\u0131n, b\u00f6ylece ekran okuyucular taraf\u0131ndan yok say\u0131l\u0131rlar.<br \/>\n*   <strong><code>lang<\/code> Niteliklerini Kullan\u0131n:<\/strong> Belgenin ana dilini <code><html><\/code> etiketinde belirtin (<code><html lang=\"tr\"><\/code>) ve farkl\u0131 dildeki i\u00e7erikler i\u00e7in ilgili \u00f6\u011felerde <code>lang<\/code> niteli\u011fini kullan\u0131n.<br \/>\n*   <strong>Form Etiketlerini Kullan\u0131n:<\/strong> T\u00fcm form giri\u015f alanlar\u0131n\u0131 <code><label><\/code> etiketiyle ili\u015fkilendirin (<code><label for=\"input_id\"><\/code>). Bu, kullan\u0131c\u0131lar\u0131n giri\u015f alanlar\u0131na t\u0131klamak yerine etikete t\u0131klayarak da odaklanmas\u0131n\u0131 sa\u011flar ve eri\u015filebilirli\u011fi art\u0131r\u0131r.<br \/>\n*   <strong>ARIA'y\u0131 Ak\u0131ll\u0131ca Kullan\u0131n:<\/strong> HTML'in do\u011fal semanti\u011fi yetersiz kald\u0131\u011f\u0131nda ARIA niteliklerini kullan\u0131n. Ancak, mevcut bir HTML \u00f6\u011fesinin zaten bir ARIA niteli\u011fi ile ayn\u0131 semanti\u011fi sa\u011flad\u0131\u011f\u0131 durumlarda (\u00f6rn. <code><button><\/code> zaten <code>role=\"button\"<\/code> anlam\u0131na gelir), ARIA niteli\u011fini tekrarlamaktan ka\u00e7\u0131n\u0131n.<\/p>\n<h4>Performans ve Bak\u0131m Kolayl\u0131\u011f\u0131<\/h4>\n<p>*   <strong>Sat\u0131r \u0130\u00e7i Stilden Ka\u00e7\u0131n\u0131n (<code>style<\/code> niteli\u011fi):<\/strong> M\u00fcmk\u00fcn oldu\u011funca harici CSS dosyalar\u0131n\u0131 veya <code><\/p>\n<style><\/code> etiketini kullan\u0131n. Sat\u0131r i\u00e7i stiller, \u00f6nceli\u011fi y\u00fcksek oldu\u011fu i\u00e7in di\u011fer stilleri ge\u00e7ersiz k\u0131labilir, kod tekrar\u0131na yol a\u00e7abilir ve bak\u0131m\u0131 zorla\u015ft\u0131r\u0131r.<br \/>\n*   <strong>Anlaml\u0131 <code>id<\/code> ve <code>class<\/code> Adlar\u0131:<\/strong> Nitelik de\u011ferlerini (<code>id<\/code>, <code>class<\/code>) a\u00e7\u0131klay\u0131c\u0131 ve tutarl\u0131 bir \u015fekilde adland\u0131r\u0131n (\u00f6rn. <code>main-navigation<\/code>, <code>product-card<\/code>, <code>btn-primary<\/code>). Bu, kodunuzu daha okunur ve y\u00f6netilebilir hale getirir.<br \/>\n*   <strong>Gereksiz Niteliklerden Ka\u00e7\u0131n\u0131n:<\/strong> Yaln\u0131zca ger\u00e7ekten ihtiya\u00e7 duydu\u011funuz nitelikleri kullan\u0131n. Fazla ve gereksiz nitelikler, HTML boyutunu art\u0131rabilir ve kodun karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 art\u0131rabilir.<\/p>\n<h4>Do\u011frulama<\/h4>\n<p>*   <strong>HTML Standartlar\u0131na Uyun:<\/strong> Niteliklerin do\u011fru etiketlerle ve do\u011fru de\u011ferlerle kullan\u0131ld\u0131\u011f\u0131ndan emin olun. W3C HTML Do\u011frulay\u0131c\u0131s\u0131 gibi ara\u00e7lar, kodunuzdaki hatalar\u0131 tespit etmenize yard\u0131mc\u0131 olabilir. Bu, taray\u0131c\u0131lar aras\u0131 uyumlulu\u011fu ve sayfan\u0131z\u0131n gelecekteki s\u00fcrd\u00fcr\u00fclebilirli\u011fini sa\u011flar.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>HTML nitelikleri, statik bir yap\u0131 iskeletinden \u00e7ok daha fazlas\u0131n\u0131 sunar. Web sayfalar\u0131n\u0131za i\u015flevsellik, stil, eri\u015filebilirlik ve anlamsal derinlik katan g\u00fc\u00e7l\u00fc ara\u00e7lard\u0131r. <code>id<\/code> ve <code>class<\/code> gibi temel niteliklerden, form etkile\u015fimlerini sa\u011flayan niteliklere, eri\u015filebilirli\u011fi art\u0131ran ARIA niteliklerine kadar geni\u015f bir yelpazede nitelikler mevcuttur.<\/p>\n<p>Bu makalede ele al\u0131nan nitelikleri anlayarak ve en iyi uygulama y\u00f6ntemlerini benimseyerek, daha sa\u011flam, eri\u015filebilir, s\u00fcrd\u00fcr\u00fclebilir ve kullan\u0131c\u0131 dostu web siteleri geli\u015ftirebilirsiniz. HTML niteliklerinin do\u011fru ve bilin\u00e7li kullan\u0131m\u0131, modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biridir ve bu beceriyi ustaca kullanmak, bir web geli\u015ftiricinin yetkinli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131racakt\u0131r. Unutmay\u0131n, iyi bir web sitesi sadece iyi g\u00f6r\u00fcnmekle kalmaz, ayn\u0131 zamanda herkes i\u00e7in iyi \u00e7al\u0131\u015f\u0131r.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"HTML Nitelikleri (Attributes) Nas\u0131l Kullan\u0131l\u0131r: Kapsaml\u0131 Bir Rehber\nHTML, web sayfalar\u0131n\u0131n yap\u0131 ta\u015f\u0131n\u0131 olu\u015fturan bir i\u015faretleme dilidir.","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-31750","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 Nitelikleri (Attributes) Nas\u0131l Kullan\u0131l\u0131r: Kapsaml\u0131 Bir Rehber - 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-nitelikleri-attributes-nasil-kullanilir-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Nitelikleri (Attributes) Nas\u0131l Kullan\u0131l\u0131r: Kapsaml\u0131 Bir Rehber\" \/>\n<meta property=\"og:description\" content=\"HTML Nitelikleri (Attributes) Nas\u0131l Kullan\u0131l\u0131r: Kapsaml\u0131 Bir Rehber HTML, web sayfalar\u0131n\u0131n yap\u0131 ta\u015f\u0131n\u0131 olu\u015fturan bir i\u015faretleme dilidir.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/html-nitelikleri-attributes-nasil-kullanilir-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-13T12:41:11+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=\"14 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-nitelikleri-attributes-nasil-kullanilir-kapsamli-bir-rehber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-nitelikleri-attributes-nasil-kullanilir-kapsamli-bir-rehber\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"HTML Nitelikleri (Attributes) Nas\u0131l Kullan\u0131l\u0131r: Kapsaml\u0131 Bir Rehber\",\"datePublished\":\"2025-10-13T12:41:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-nitelikleri-attributes-nasil-kullanilir-kapsamli-bir-rehber\/\"},\"wordCount\":2597,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/html-nitelikleri-attributes-nasil-kullanilir-kapsamli-bir-rehber\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-nitelikleri-attributes-nasil-kullanilir-kapsamli-bir-rehber\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/html-nitelikleri-attributes-nasil-kullanilir-kapsamli-bir-rehber\/\",\"name\":\"HTML Nitelikleri (Attributes) Nas\u0131l Kullan\u0131l\u0131r: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-13T12:41:11+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-nitelikleri-attributes-nasil-kullanilir-kapsamli-bir-rehber\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/html-nitelikleri-attributes-nasil-kullanilir-kapsamli-bir-rehber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-nitelikleri-attributes-nasil-kullanilir-kapsamli-bir-rehber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML Nitelikleri (Attributes) Nas\u0131l Kullan\u0131l\u0131r: Kapsaml\u0131 Bir Rehber\"}]},{\"@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 Nitelikleri (Attributes) Nas\u0131l Kullan\u0131l\u0131r: Kapsaml\u0131 Bir Rehber - 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-nitelikleri-attributes-nasil-kullanilir-kapsamli-bir-rehber\/","og_locale":"tr_TR","og_type":"article","og_title":"HTML Nitelikleri (Attributes) Nas\u0131l Kullan\u0131l\u0131r: Kapsaml\u0131 Bir Rehber","og_description":"HTML Nitelikleri (Attributes) Nas\u0131l Kullan\u0131l\u0131r: Kapsaml\u0131 Bir Rehber HTML, web sayfalar\u0131n\u0131n yap\u0131 ta\u015f\u0131n\u0131 olu\u015fturan bir i\u015faretleme dilidir.","og_url":"https:\/\/fatihsoysal.com\/blog\/html-nitelikleri-attributes-nasil-kullanilir-kapsamli-bir-rehber\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-13T12:41:11+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"14 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/html-nitelikleri-attributes-nasil-kullanilir-kapsamli-bir-rehber\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-nitelikleri-attributes-nasil-kullanilir-kapsamli-bir-rehber\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"HTML Nitelikleri (Attributes) Nas\u0131l Kullan\u0131l\u0131r: Kapsaml\u0131 Bir Rehber","datePublished":"2025-10-13T12:41:11+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-nitelikleri-attributes-nasil-kullanilir-kapsamli-bir-rehber\/"},"wordCount":2597,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/html-nitelikleri-attributes-nasil-kullanilir-kapsamli-bir-rehber\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/html-nitelikleri-attributes-nasil-kullanilir-kapsamli-bir-rehber\/","url":"https:\/\/fatihsoysal.com\/blog\/html-nitelikleri-attributes-nasil-kullanilir-kapsamli-bir-rehber\/","name":"HTML Nitelikleri (Attributes) Nas\u0131l Kullan\u0131l\u0131r: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-13T12:41:11+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-nitelikleri-attributes-nasil-kullanilir-kapsamli-bir-rehber\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/html-nitelikleri-attributes-nasil-kullanilir-kapsamli-bir-rehber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/html-nitelikleri-attributes-nasil-kullanilir-kapsamli-bir-rehber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML Nitelikleri (Attributes) Nas\u0131l Kullan\u0131l\u0131r: Kapsaml\u0131 Bir Rehber"}]},{"@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\/31750","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=31750"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31750\/revisions"}],"predecessor-version":[{"id":31751,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31750\/revisions\/31751"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=31750"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=31750"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=31750"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}