{"id":31708,"date":"2025-10-13T03:41:07","date_gmt":"2025-10-13T00:41:07","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=31708"},"modified":"2025-10-13T03:41:07","modified_gmt":"2025-10-13T00:41:07","slug":"html-nitelikleri-attributes-nedir","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/html-nitelikleri-attributes-nedir\/","title":{"rendered":"HTML Nitelikleri (Attributes) Nedir?"},"content":{"rendered":"

<\/p>\n

HTML Nitelikleri (Attributes) Nedir?<\/h2>\n
Modern web’in temelini olu\u015fturan HTML (HyperText Markup Language), web sayfalar\u0131n\u0131n yap\u0131s\u0131n\u0131 tan\u0131mlamak i\u00e7in kullan\u0131lan standart bir i\u015faretleme dilidir. HTML, i\u00e7eri\u011fi d\u00fczenlemek, bi\u00e7imlendirmek ve anlamland\u0131rmak i\u00e7in \u00e7e\u015fitli elementler (etiketler) kullan\u0131r. Ancak bu elementler, tek ba\u015flar\u0131na her zaman yeterli de\u011fildir. \u0130\u015fte tam bu noktada HTML nitelikleri (attributes) devreye girer. Nitelikler, HTML elementlerine ek bilgi sa\u011flamak, davran\u0131\u015flar\u0131n\u0131 de\u011fi\u015ftirmek veya onlara \u00f6zel \u00f6zellikler atamak i\u00e7in kullan\u0131lan anahtar-de\u011fer \u00e7iftleridir. Bir HTML elementinin g\u00fcc\u00fcn\u00fc ve esnekli\u011fini art\u0131ran bu nitelikler, web geli\u015ftiricilerin daha zengin, daha dinamik ve daha eri\u015filebilir web deneyimleri olu\u015fturmas\u0131n\u0131 sa\u011flar.<\/p>\n
Bu makalede, HTML niteliklerinin ne oldu\u011funu, neden \u00f6nemli olduklar\u0131n\u0131, yayg\u0131n olarak kullan\u0131lan nitelik t\u00fcrlerini ve en iyi kullan\u0131m pratiklerini derinlemesine inceleyece\u011fiz. Niteliklerin web sayfalar\u0131n\u0131n g\u00f6rsel tasar\u0131m\u0131ndan i\u015flevselli\u011fine, eri\u015filebilirli\u011finden arama motoru optimizasyonuna (SEO) kadar geni\u015f bir yelpazede nas\u0131l kritik bir rol oynad\u0131\u011f\u0131n\u0131 ke\u015ffedece\u011fiz.<\/p>\n

HTML Niteliklerinin Temel Tan\u0131m\u0131 ve S\u00f6z Dizimi<\/h2>\n

HTML nitelikleri, bir HTML elementinin a\u00e7\u0131l\u0131\u015f etiketinin i\u00e7ine yerle\u015ftirilen ve element hakk\u0131nda ek bilgi ta\u015f\u0131yan isim-de\u011fer \u00e7iftleridir. Her nitelik, bir isim ve bu isme kar\u015f\u0131l\u0131k gelen bir de\u011ferden olu\u015fur. S\u00f6z dizimi genellikle \u015fu \u015fekildedir: isim=\"de\u011fer\"<\/code>.<\/p>\n

\u00d6rne\u011fin, bir <\/code> (ba\u011flant\u0131) elementi d\u00fc\u015f\u00fcnelim. Bu elementin temel amac\u0131 bir ba\u011flant\u0131 olu\u015fturmakt\u0131r. Ancak bu ba\u011flant\u0131n\u0131n nereye gidece\u011fini belirtmek i\u00e7in href<\/code> niteli\u011fine ihtiyac\u0131m\u0131z vard\u0131r:<\/p>\n

\u00d6rnek Siteye Git<\/a><\/code><\/pre>\nBurada:
\n*   a<\/code> bir HTML elementidir.
\n*   href<\/code> bir nitelik ismidir.
\n*   \"https:\/\/www.example.com\"<\/code> ise href<\/code> niteli\u011finin de\u011feridir.<\/p>\n
Nitelik de\u011ferleri genellikle \u00e7ift t\u0131rnak (“) veya tek t\u0131rnak (‘) i\u00e7ine al\u0131n\u0131r. Her ne kadar baz\u0131 durumlarda t\u0131rnaks\u0131z de\u011ferler de ge\u00e7erli olsa da, tutarl\u0131l\u0131k ve olas\u0131 hatalar\u0131 \u00f6nlemek ad\u0131na t\u0131rnak kullanmak en iyi pratiktir.<\/p>\n
Bir element birden fazla niteli\u011fe sahip olabilir. Bu nitelikler, a\u00e7\u0131l\u0131\u015f etiketi i\u00e7inde bo\u015fluklarla ayr\u0131larak s\u0131ralan\u0131r:<\/p>\n
<\/code><\/pre>\nBu \u00f6rnekte, <\/code> elementi src<\/code>, alt<\/code>, width<\/code> ve height<\/code> olmak \u00fczere d\u00f6rt farkl\u0131 niteli\u011fe sahiptir. Her nitelik, resmin kayna\u011f\u0131, alternatif metni, geni\u015fli\u011fi ve y\u00fcksekli\u011fi gibi farkl\u0131 \u00f6zelliklerini tan\u0131mlar.<\/p>\n
Nitelikler, HTML elementlerinin davran\u0131\u015f\u0131n\u0131 ve g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc \u00f6zelle\u015ftirmenin yan\u0131 s\u0131ra, JavaScript ile etkile\u015fim kurmalar\u0131n\u0131 ve CSS ile stilize edilmelerini de m\u00fcmk\u00fcn k\u0131lar. K\u0131sacas\u0131, nitelikler olmadan, HTML elementleri \u00e7ok daha s\u0131n\u0131rl\u0131 ve statik kal\u0131rd\u0131.<\/p>\n
HTML Nitelikleri Neden \u00d6nemlidir?<\/h2>\nHTML nitelikleri, web sayfalar\u0131na i\u015flevsellik, stil ve anlamsal anlam katman\u0131n temel yollar\u0131ndan biridir. \u00d6nemi, bir\u00e7ok farkl\u0131 alanda kendini g\u00f6sterir:<\/p>\n
Fonksiyonellik ve Etkile\u015fim<\/h3>\nNitelikler, web sayfalar\u0131n\u0131n sadece statik i\u00e7erik g\u00f6stermesinin \u00f6tesine ge\u00e7mesini sa\u011flar. \u00d6rne\u011fin, <\/code> elementinin type<\/code> niteli\u011fi, bir giri\u015f alan\u0131n\u0131n metin, say\u0131, e-posta veya parola gibi farkl\u0131 t\u00fcrlerde veri almas\u0131n\u0131 sa\u011flar. disabled<\/code> niteli\u011fi bir eleman\u0131 devre d\u0131\u015f\u0131 b\u0131rak\u0131rken, checked<\/code> niteli\u011fi bir onay kutusunun veya radyo d\u00fc\u011fmesinin varsay\u0131lan olarak se\u00e7ili gelmesini sa\u011flar. Bu nitelikler, kullan\u0131c\u0131 etkile\u015fimini do\u011frudan etkileyen ve formlar gibi dinamik bile\u015fenlerin olu\u015fturulmas\u0131nda vazge\u00e7ilmez olan \u00f6zelliklerdir.<\/p>\n
G\u00f6rsel Tasar\u0131m ve Stil<\/h3>\nHer ne kadar modern web geli\u015ftirmede stil tan\u0131mlamalar\u0131 genellikle CSS (Cascading Style Sheets) ile yap\u0131lsa da, nitelikler dolayl\u0131 yoldan veya do\u011frudan stil \u00fczerinde etkilidir. class<\/code> ve id<\/code> nitelikleri, CSS kurallar\u0131n\u0131 belirli elementlere uygulamak i\u00e7in se\u00e7ici (selector) olarak kullan\u0131l\u0131r. style<\/code> niteli\u011fi ise do\u011frudan HTML etiketi i\u00e7inde sat\u0131r i\u00e7i stil tan\u0131mlamas\u0131na olanak tan\u0131r (ancak bu, genellikle daha az tercih edilen bir y\u00f6ntemdir). Bu nitelikler, bir web sayfas\u0131n\u0131n g\u00f6rsel tutarl\u0131l\u0131\u011f\u0131n\u0131 ve esteti\u011fini sa\u011flamak i\u00e7in CSS ile birlikte \u00e7al\u0131\u015f\u0131r.<\/p>\n
Eri\u015filebilirlik (Accessibility)<\/h3>\nWeb’in herkes i\u00e7in eri\u015filebilir olmas\u0131, modern geli\u015ftirmenin temel ilkelerinden biridir. Nitelikler, bu hedefe ula\u015fmada kritik bir rol oynar. \u00d6rne\u011fin, <\/code> elementinin alt<\/code> niteli\u011fi, resmin i\u00e7eri\u011fini metin olarak tan\u0131mlar. Bu, g\u00f6rme engelli kullan\u0131c\u0131lar\u0131n ekran okuyucular arac\u0131l\u0131\u011f\u0131yla resmin ne hakk\u0131nda oldu\u011funu anlamalar\u0131na yard\u0131mc\u0131 olur. lang<\/code> niteli\u011fi sayfan\u0131n veya bir b\u00f6l\u00fcm\u00fcn dilini belirtirken, aria-*<\/code> nitelikleri (WAI-ARIA standard\u0131) \u00f6zellikle engelli kullan\u0131c\u0131lar i\u00e7in daha zengin ve anlaml\u0131 deneyimler sunmak \u00fczere tasarlanm\u0131\u015ft\u0131r. Bu nitelikler olmadan, web siteleri belirli kullan\u0131c\u0131 gruplar\u0131 i\u00e7in kullan\u0131lamaz hale gelebilir.<\/p>\n
Arama Motoru Optimizasyonu (SEO)<\/h3>\nArama motorlar\u0131, web sayfalar\u0131n\u0131 dizine eklerken ve s\u0131ralarken HTML yap\u0131s\u0131n\u0131 ve niteliklerini dikkate al\u0131r. alt<\/code> niteli\u011fi, resimlerin arama motorlar\u0131 taraf\u0131ndan anla\u015f\u0131lmas\u0131na yard\u0131mc\u0131 olur ve g\u00f6rsel aramalarda g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fc art\u0131rabilir. title<\/code> niteli\u011fi, ba\u011flant\u0131lar\u0131n veya elementlerin \u00fczerine gelindi\u011finde \u00e7\u0131kan ipucu metinleri ile kullan\u0131c\u0131 deneyimini iyile\u015ftirirken, arama motorlar\u0131na da ek ba\u011flam sa\u011flar. rel<\/code> niteli\u011fi (rel=\"nofollow\"<\/code> gibi) ba\u011flant\u0131lar\u0131n arama motorlar\u0131 taraf\u0131ndan nas\u0131l i\u015flenece\u011fini kontrol edebilir. Do\u011fru ve anlamsal nitelik kullan\u0131m\u0131, bir web sayfas\u0131n\u0131n arama motoru s\u0131ralamalar\u0131n\u0131 olumlu y\u00f6nde etkileyebilir.<\/p>\n
Anlamsal Yap\u0131 (Semantic Structure)<\/h3>\nHTML5 ile birlikte anlamsal elementlerin \u00f6nemi daha da artm\u0131\u015ft\u0131r. Ancak nitelikler, bu anlamsal yap\u0131y\u0131 daha da zenginle\u015ftirir. lang<\/code> niteli\u011fi belgenin dilini belirtirken, dir<\/code> niteli\u011fi metin y\u00f6n\u00fcn\u00fc (soldan sa\u011fa veya sa\u011fdan sola) tan\u0131mlar. Bu t\u00fcr nitelikler, taray\u0131c\u0131lar\u0131n, arama motorlar\u0131n\u0131n ve di\u011fer ara\u00e7lar\u0131n i\u00e7eri\u011fi daha do\u011fru bir \u015fekilde yorumlamas\u0131na yard\u0131mc\u0131 olur, bu da daha iyi bir kullan\u0131c\u0131 deneyimi ve daha etkin veri i\u015fleme anlam\u0131na gelir.<\/p>\n
Kaynak Y\u00f6netimi<\/h3>\nWeb sayfalar\u0131 genellikle harici kaynaklara (resimler, videolar, CSS dosyalar\u0131, JavaScript dosyalar\u0131) ihtiya\u00e7 duyar. src<\/code> niteli\u011fi (\u00f6rne\u011fin <\/code>,