{"id":34906,"date":"2025-11-23T13:40:46","date_gmt":"2025-11-23T10:40:46","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=34906"},"modified":"2025-11-23T13:40:46","modified_gmt":"2025-11-23T10:40:46","slug":"html-etiketleri-nedir-web-iceriginin-yapi-taslari","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-nedir-web-iceriginin-yapi-taslari\/","title":{"rendered":"HTML Etiketleri Nedir? Web \u0130\u00e7eri\u011finin Yap\u0131 Ta\u015flar\u0131"},"content":{"rendered":"<h2>HTML Etiketleri Nedir? Web \u0130\u00e7eri\u011finin Yap\u0131 Ta\u015flar\u0131<\/h2>\n<p>\u0130nternet d\u00fcnyas\u0131n\u0131n temelini olu\u015fturan web sayfalar\u0131, milyonlarca kullan\u0131c\u0131ya bilgi, e\u011flence ve hizmet sunar. Bu sayfalar\u0131n arkas\u0131ndaki g\u00f6r\u00fcnmez mimari, HyperText Markup Language (HTML) ad\u0131 verilen bir i\u015faretleme diliyle in\u015fa edilmi\u015ftir. HTML, web taray\u0131c\u0131lar\u0131na bir sayfan\u0131n i\u00e7eri\u011fini nas\u0131l yap\u0131land\u0131racaklar\u0131n\u0131 ve sunacaklar\u0131n\u0131 bildiren bir dizi talimat setidir. Bu talimatlar\u0131n her biri, &#8220;HTML Etiketi&#8221; olarak adland\u0131r\u0131l\u0131r. Bir web sayfas\u0131n\u0131n omurgas\u0131n\u0131 olu\u015fturan HTML etiketleri, metinleri ba\u015fl\u0131klar, paragraflar, listeler haline getirir; g\u00f6rselleri, videolar\u0131 ve ba\u011flant\u0131lar\u0131 sayfaya entegre eder ve genel olarak i\u00e7eri\u011fin anlam\u0131n\u0131 ve yap\u0131s\u0131n\u0131 tan\u0131mlar.<\/p>\n<p>Bu makalede, HTML etiketlerinin ne oldu\u011funu, nas\u0131l \u00e7al\u0131\u015ft\u0131klar\u0131n\u0131, farkl\u0131 t\u00fcrlerini, \u00f6zelliklerini ve modern web geli\u015ftirmedeki \u00f6nemini derinlemesine inceleyece\u011fiz. HTML etiketlerinin basit bir metin i\u015faretleme arac\u0131ndan \u00e7ok daha fazlas\u0131 oldu\u011funu, web&#8217;in eri\u015filebilirli\u011fi, arama motoru optimizasyonu (SEO) ve kullan\u0131c\u0131 deneyimi i\u00e7in kritik bir rol oynad\u0131\u011f\u0131n\u0131 g\u00f6rece\u011fiz.<\/p>\n<h3>HTML Etiketlerinin Temel Tan\u0131m\u0131 ve Yap\u0131s\u0131<\/h3>\n<p>HTML etiketi, bir web sayfas\u0131ndaki i\u00e7eri\u011fin t\u00fcr\u00fcn\u00fc veya amac\u0131n\u0131 tan\u0131mlayan, a\u00e7\u0131l\u0131 parantezler (<code><<\/code> ve <code>><\/code>) aras\u0131na yaz\u0131lm\u0131\u015f bir anahtar kelimedir. \u00d6rne\u011fin, bir metin par\u00e7as\u0131n\u0131n bir paragraf oldu\u011funu belirtmek i\u00e7in <code><\/p>\n<p><\/code> etiketi kullan\u0131l\u0131rken, bir ba\u015fl\u0131k i\u00e7in <code><\/p>\n<h1><\/code> etiketi tercih edilir.<\/p>\n<p>HTML etiketlerinin \u00e7o\u011funlu\u011fu, bir \"a\u00e7\u0131l\u0131\u015f etiketi\" ve bir \"kapan\u0131\u015f etiketi\"nden olu\u015fur. A\u00e7\u0131l\u0131\u015f etiketi, i\u00e7eri\u011fin ba\u015flang\u0131c\u0131n\u0131 i\u015faret ederken, kapan\u0131\u015f etiketi i\u00e7eri\u011fin sonunu belirtir ve a\u00e7\u0131l\u0131\u015f etiketine ek olarak bir e\u011fik \u00e7izgi (<code>\/<\/code>) i\u00e7erir.<\/p>\n<p><strong>\u00d6rnek:<\/strong><\/p>\n<pre><code class=\"language-html\"><p>Bu bir paragraf metnidir.<\/p><\/code><\/pre>\n<p>Bu \u00f6rnekte, <code><\/p>\n<p><\/code> a\u00e7\u0131l\u0131\u015f etiketi, <code><\/p>\n<p><\/code> ise kapan\u0131\u015f etiketidir. Bu iki etiket aras\u0131ndaki \"Bu bir paragraf metnidir.\" ifadesi ise etiketin i\u015faretledi\u011fi i\u00e7eriktir. A\u00e7\u0131l\u0131\u015f etiketi, i\u00e7erik ve kapan\u0131\u015f etiketinin tamam\u0131 birlikte bir \"HTML \u00f6\u011fesi\"ni olu\u015fturur. Yani, etiketler \u00f6\u011felerin i\u015faretleyicileridir.<\/p>\n<p>Baz\u0131 HTML etiketleri ise \"bo\u015f etiketler\" veya \"kendili\u011finden kapanan etiketler\" olarak adland\u0131r\u0131l\u0131r. Bu etiketlerin kapan\u0131\u015f etiketine ihtiyac\u0131 yoktur \u00e7\u00fcnk\u00fc herhangi bir i\u00e7erik bar\u0131nd\u0131rmazlar. Genellikle tek bir i\u015flevi yerine getirirler.<\/p>\n<p><strong>\u00d6rnek:<\/strong><\/p>\n<pre><code class=\"language-html\"><img decoding=\"async\" src=\"resim.jpg\" alt=\"A\u00e7\u0131klama\">\n<br><\/code><\/pre>\n<p>Bu \u00f6rnekte, <code><img \/><\/code> (resim eklemek i\u00e7in) ve <code><br \/><\/code> (sat\u0131r sonu olu\u015fturmak i\u00e7in) kendili\u011finden kapanan etiketlerdir. HTML5 ile birlikte, bu etiketlerin sonuna e\u011fik \u00e7izgi eklemek iste\u011fe ba\u011fl\u0131 hale gelmi\u015ftir, ancak XHTML uyumlulu\u011fu i\u00e7in baz\u0131 geli\u015ftiriciler hala kullan\u0131r.<\/p>\n<h3>HTML Etiketlerinin \u00d6zellikleri (Attributes)<\/h3>\n<p>HTML etiketleri, i\u00e7erikleri hakk\u0131nda ek bilgi sa\u011flamak veya davran\u0131\u015flar\u0131n\u0131 de\u011fi\u015ftirmek i\u00e7in \"\u00f6zellikler\" (attributes) ad\u0131 verilen \u00f6zel nitelikler alabilir. \u00d6zellikler her zaman a\u00e7\u0131l\u0131\u015f etiketinin i\u00e7ine yaz\u0131l\u0131r ve <code>isim=\"de\u011fer\"<\/code> \u00e7iftleri \u015feklinde tan\u0131mlan\u0131r.<\/p>\n<p><strong>\u00d6zelliklerin Yap\u0131s\u0131:<\/strong><\/p>\n<pre><code class=\"language-html\"><etiketad\u0131 \u00f6zellikad\u0131=\"\u00f6zellikde\u011feri\">\u0130\u00e7erik<\/etiketad\u0131><\/code><\/pre>\n<p><strong>\u00d6rnekler:<\/strong><\/p>\n<p>*   <strong><code><a><\/code> (Ba\u011flant\u0131) Etiketi \u0130\u00e7in <code>href<\/code> \u00d6zelli\u011fi:<\/strong><\/p>\n<pre><code class=\"language-html\"><a href=\"https:\/\/www.ornek.com\">\u00d6rnek Ba\u011flant\u0131<\/a><\/code><\/pre>\n<p>    Burada <code>href<\/code> \u00f6zelli\u011fi, ba\u011flant\u0131n\u0131n gidece\u011fi URL'yi belirtir.<\/p>\n<p>*   <strong><code><img><\/code> (Resim) Etiketi \u0130\u00e7in <code>src<\/code> ve <code>alt<\/code> \u00d6zellikleri:<\/strong><\/p>\n<pre><code class=\"language-html\"><img decoding=\"async\" src=\"profil.jpg\" alt=\"Profil Resmi\"><\/code><\/pre>\n<p>    <code>src<\/code> \u00f6zelli\u011fi resmin dosya yolunu, <code>alt<\/code> \u00f6zelli\u011fi ise resmin ne oldu\u011funu a\u00e7\u0131klayan alternatif metni belirtir (eri\u015filebilirlik ve SEO i\u00e7in \u00f6nemlidir).<\/p>\n<p>*   <strong><code>id<\/code> ve <code>class<\/code> (Global \u00d6zellikler):<\/strong><br \/>\n    Bu \u00f6zellikler hemen hemen her HTML etiketinde kullan\u0131labilir ve bir \u00f6\u011feyi benzersiz bir \u015fekilde tan\u0131mlamak (<code>id<\/code>) veya bir grup \u00f6\u011feyi s\u0131n\u0131fland\u0131rmak (<code>class<\/code>) i\u00e7in kullan\u0131l\u0131r. Genellikle CSS ile stil vermek veya JavaScript ile etkile\u015fim sa\u011flamak i\u00e7in kullan\u0131l\u0131rlar.<\/p>\n<pre><code class=\"language-html\"><p id=\"girisParagrafi\" class=\"metin-blog\">Bu, \u00f6zel bir paragraft\u0131r.<\/p><\/code><\/pre>\n<p>\u00d6zellikler, HTML etiketlerinin g\u00fcc\u00fcn\u00fc ve esnekli\u011fini art\u0131ran temel unsurlard\u0131r. Bir etiketin temel i\u015flevini yerine getirmesinin yan\u0131 s\u0131ra, \u00f6zellikler sayesinde \u00e7ok daha spesifik ve dinamik davran\u0131\u015flar sergilemesi sa\u011flan\u0131r.<\/p>\n<h3>HTML Etiketlerinin T\u00fcrleri ve Kullan\u0131m Alanlar\u0131<\/h3>\n<p>HTML etiketleri, farkl\u0131 ama\u00e7lar i\u00e7in tasarlanm\u0131\u015f \u00e7ok \u00e7e\u015fitli kategorilere ayr\u0131l\u0131r. \u0130\u015fte en yayg\u0131n etiket t\u00fcrleri ve bunlar\u0131n ne i\u015fe yarad\u0131klar\u0131:<\/p>\n<h4>Yap\u0131sal ve Anlamsal Etiketler<\/h4>\n<p>Bu etiketler, bir HTML belgesinin genel yap\u0131s\u0131n\u0131 ve i\u00e7eri\u011fin anlamsal anlam\u0131n\u0131 tan\u0131mlar. Modern web geli\u015ftirmede, i\u00e7eri\u011fin ne anlama geldi\u011fini taray\u0131c\u0131lara, arama motorlar\u0131na ve yard\u0131mc\u0131 teknolojilere (ekran okuyucular gibi) bildirmek i\u00e7in anlamsal etiketlerin kullan\u0131lmas\u0131 b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r.<\/p>\n<p>*   <strong><code><html><\/code>:<\/strong> Bir HTML belgesinin k\u00f6k \u00f6\u011fesidir. T\u00fcm di\u011fer HTML \u00f6\u011felerini i\u00e7erir.<br \/>\n*   <strong><code><head><\/code>:<\/strong> Belge meta verilerini (sayfa ba\u015fl\u0131\u011f\u0131, karakter kodlamas\u0131, stil sayfalar\u0131, betikler vb.) i\u00e7erir. Taray\u0131c\u0131da g\u00f6r\u00fcnmez.<br \/>\n*   <strong><code><body><\/code>:<\/strong> Bir web sayfas\u0131n\u0131n t\u00fcm g\u00f6r\u00fcn\u00fcr i\u00e7eri\u011fini (metin, resimler, ba\u011flant\u0131lar, videolar vb.) i\u00e7erir.<br \/>\n*   <strong><code><\/p>\n<header><\/code>:<\/strong> Bir belgenin veya b\u00f6l\u00fcm\u00fcn tan\u0131t\u0131c\u0131 i\u00e7eri\u011fini veya gezinme ba\u011flant\u0131lar\u0131n\u0131 i\u00e7erir. Genellikle ba\u015fl\u0131klar, logolar ve navigasyon men\u00fcleri i\u00e7in kullan\u0131l\u0131r.<br \/>\n*   <strong><code><\/p>\n<nav><\/code>:<\/strong> Gezinme ba\u011flant\u0131lar\u0131 i\u00e7eren bir b\u00f6l\u00fcm\u00fc tan\u0131mlar. Ana navigasyon men\u00fcleri i\u00e7in idealdir.<br \/>\n*   <strong><code><main><\/code>:<\/strong> Belgenin ana i\u00e7eri\u011fini temsil eder. Bir belgede yaln\u0131zca bir <code><main><\/code> \u00f6\u011fesi olmal\u0131d\u0131r.<br \/>\n*   <strong><code><\/p>\n<article><\/code>:<\/strong> Ba\u011f\u0131ms\u0131z, kendi kendine yeten bir i\u00e7eri\u011fi (\u00f6rne\u011fin, bir blog yaz\u0131s\u0131, haber makalesi, forum g\u00f6nderisi) temsil eder.<br \/>\n*   <strong><code><\/p>\n<section><\/code>:<\/strong> Belgenin tematik olarak grupland\u0131r\u0131lm\u0131\u015f bir b\u00f6l\u00fcm\u00fcn\u00fc tan\u0131mlar. <code><\/p>\n<article><\/code>'dan daha genel bir gruplamad\u0131r.<br \/>\n*   <strong><code><\/p>\n<aside><\/code>:<\/strong> Ana i\u00e7eri\u011fe dolayl\u0131 olarak ba\u011fl\u0131 olan i\u00e7eri\u011fi (\u00f6rne\u011fin, kenar \u00e7ubu\u011fu, reklamlar, ilgili ba\u011flant\u0131lar) temsil eder.<br \/>\n*   <strong><code><\/p>\n<footer><\/code>:<\/strong> Bir belgenin veya b\u00f6l\u00fcm\u00fcn altbilgisini tan\u0131mlar. Genellikle telif hakk\u0131 bilgileri, ileti\u015fim bilgileri veya ilgili ba\u011flant\u0131lar i\u00e7erir.<br \/>\n*   <strong><code><\/p>\n<div><\/code>:<\/strong> \"Division\" kelimesinin k\u0131saltmas\u0131d\u0131r. Anlamsal bir anlam\u0131 olmayan, jenerik bir blok seviyesi kapsay\u0131c\u0131d\u0131r. Genellikle CSS ile stil vermek veya JavaScript ile i\u015flemek i\u00e7in kullan\u0131l\u0131r. Anlamsal etiketlerin uygun olmad\u0131\u011f\u0131 durumlarda tercih edilir.<br \/>\n*   <strong><code><span><\/code>:<\/strong> Anlamsal bir anlam\u0131 olmayan, jenerik bir sat\u0131r i\u00e7i kapsay\u0131c\u0131d\u0131r. <code><\/p>\n<div><\/code>'un sat\u0131r i\u00e7i versiyonudur ve genellikle metin par\u00e7alar\u0131na stil vermek i\u00e7in kullan\u0131l\u0131r.<\/p>\n<h4>Metin Bi\u00e7imlendirme Etiketleri<\/h4>\n<p>Bu etiketler, metnin g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve anlamsal \u00f6nemini belirlemek i\u00e7in kullan\u0131l\u0131r.<\/p>\n<p>*   <strong><code><\/p>\n<h1><\/code> - <code><\/p>\n<h6><\/code>:<\/strong> Ba\u015fl\u0131k etiketleridir. <code><\/p>\n<h1><\/code> en \u00f6nemli ba\u015fl\u0131\u011f\u0131, <code><\/p>\n<h6><\/code> ise en az \u00f6nemli ba\u015fl\u0131\u011f\u0131 temsil eder. Sayfa yap\u0131s\u0131 ve SEO i\u00e7in do\u011fru hiyerar\u015fi \u00e7ok \u00f6nemlidir.<br \/>\n*   <strong><code><\/p>\n<p><\/code>:<\/strong> Bir paragraf\u0131 tan\u0131mlar. Web sayfalar\u0131ndaki ana metin bloklar\u0131 i\u00e7in kullan\u0131l\u0131r.<br \/>\n*   <strong><code><strong><\/code>:<\/strong> Metnin \u00f6nemli oldu\u011funu belirtir (varsay\u0131lan olarak kal\u0131n g\u00f6r\u00fcn\u00fcr).<br \/>\n*   <strong><code><b><\/code>:<\/strong> Metni kal\u0131n yapar ancak anlamsal olarak \u00f6nemli oldu\u011funu belirtmez.<br \/>\n*   <strong><code><em><\/code>:<\/strong> Metnin vurguland\u0131\u011f\u0131n\u0131 belirtir (varsay\u0131lan olarak italik g\u00f6r\u00fcn\u00fcr).<br \/>\n*   <strong><code><i><\/code>:<\/strong> Metni italik yapar ancak anlamsal olarak vurguland\u0131\u011f\u0131n\u0131 belirtmez.<br \/>\n*   <strong><code><br \/><\/code>:<\/strong> Bir sat\u0131r sonu olu\u015fturur (kendili\u011finden kapanan etiket).<br \/>\n*   <strong><code><\/p>\n<hr>\n<p><\/code>:<\/strong> Yatay bir \u00e7izgi (b\u00f6l\u00fcc\u00fc) olu\u015fturur (kendili\u011finden kapanan etiket).<br \/>\n*   <strong><code><\/p>\n<blockquote><p><\/code>:<\/strong> Uzun al\u0131nt\u0131lar\u0131 belirtir. Genellikle i\u00e7eri\u011fi girintili g\u00f6sterir.<br \/>\n*   <strong><code><\/p>\n<pre><\/code>:<\/strong> \u00d6nceden bi\u00e7imlendirilmi\u015f metni g\u00f6r\u00fcnt\u00fcler. Metin, yaz\u0131ld\u0131\u011f\u0131 gibi (bo\u015fluklar ve sat\u0131r sonlar\u0131 korunarak) taray\u0131c\u0131da g\u00f6sterilir. Genellikle kod bloklar\u0131 i\u00e7in kullan\u0131l\u0131r.\n*   <strong><code><code><\/code>:<\/strong> Bir kod par\u00e7as\u0131n\u0131 belirtir. Genellikle <code><pre><\/code> etiketi i\u00e7inde kullan\u0131l\u0131r.\n\n<h4>Liste Etiketleri<\/h4>\n\nWeb sayfalar\u0131nda bilgileri d\u00fczenli bir \u015fekilde sunmak i\u00e7in kullan\u0131l\u0131rlar.\n\n*   <strong><code><ul><\/code>:<\/strong> S\u0131ras\u0131z bir liste (madde i\u015faretli liste) olu\u015fturur.\n*   <strong><code><ol><\/code>:<\/strong> S\u0131ral\u0131 bir liste (numaraland\u0131r\u0131lm\u0131\u015f liste) olu\u015fturur.\n*   <strong><code><li><\/code>:<\/strong> Liste \u00f6\u011fesini tan\u0131mlar. Hem <code><ul><\/code> hem de <code><ol><\/code> i\u00e7inde kullan\u0131l\u0131r.\n*   <strong><code><dl><\/code>:<\/strong> Tan\u0131m listesi olu\u015fturur.\n*   <strong><code><dt><\/code>:<\/strong> Tan\u0131m listesindeki terimi (term) tan\u0131mlar.\n*   <strong><code><dd><\/code>:<\/strong> Tan\u0131m listesindeki terimin tan\u0131m\u0131n\u0131 (description) tan\u0131mlar.\n\n<h4>Ba\u011flant\u0131 ve Medya Etiketleri<\/h4>\n\nWeb sayfalar\u0131n\u0131 birbirine ba\u011flamak ve g\u00f6rsel\/i\u015fitsel i\u00e7erik eklemek i\u00e7in kullan\u0131l\u0131rlar.\n\n*   <strong><code><a><\/code>:<\/strong> Bir k\u00f6pr\u00fc (hyperlink) olu\u015fturur. <code>href<\/code> \u00f6zelli\u011fi ile hedeflenen URL'yi belirtir.\n    <pre><code class=\"language-html\"><a href=\"hakkimizda.html\" target=\"_blank\">Hakk\u0131m\u0131zda<\/a><\/code><\/pre>\n<p>    <code>target=\"_blank\"<\/code> \u00f6zelli\u011fi ba\u011flant\u0131n\u0131n yeni bir sekmede a\u00e7\u0131lmas\u0131n\u0131 sa\u011flar.<br \/>\n*   <strong><code><img><\/code>:<\/strong> Bir resim ekler (kendili\u011finden kapanan etiket). <code>src<\/code> (kaynak) ve <code>alt<\/code> (alternatif metin) \u00f6zellikleri zorunludur.<\/p>\n<pre><code class=\"language-html\"><img decoding=\"async\" src=\"logo.png\" alt=\"\u015eirket Logosu\" width=\"100\" height=\"50\"><\/code><\/pre>\n<p>*   <strong><code><audio><\/code>:<\/strong> Ses i\u00e7eri\u011fi ekler.<br \/>\n*   <strong><code><video><\/code>:<\/strong> Video i\u00e7eri\u011fi ekler.<\/p>\n<h4>Tablo Etiketleri<\/h4>\n<p>Verileri sat\u0131rlar ve s\u00fctunlar halinde d\u00fczenlemek i\u00e7in kullan\u0131l\u0131rlar.<\/p>\n<p>*   <strong><code><\/p>\n<table><\/code>:<\/strong> Bir tablo olu\u015fturur.<br \/>\n*   <strong><code><\/p>\n<thead><\/code>:<\/strong> Tablonun ba\u015fl\u0131k b\u00f6l\u00fcm\u00fcn\u00fc (header) tan\u0131mlar.<br \/>\n*   <strong><code><\/p>\n<tbody><\/code>:<\/strong> Tablonun g\u00f6vde b\u00f6l\u00fcm\u00fcn\u00fc (body) tan\u0131mlar.<br \/>\n*   <strong><code><\/p>\n<tfoot><\/code>:<\/strong> Tablonun altbilgi b\u00f6l\u00fcm\u00fcn\u00fc (footer) tan\u0131mlar.<br \/>\n*   <strong><code><\/p>\n<tr><\/code>:<\/strong> Bir tablo sat\u0131r\u0131 (table row) tan\u0131mlar.<br \/>\n*   <strong><code><\/p>\n<th><\/code>:<\/strong> Bir tablo ba\u015fl\u0131k h\u00fccresi (table header) tan\u0131mlar.<br \/>\n*   <strong><code><\/p>\n<td><\/code>:<\/strong> Bir tablo veri h\u00fccresi (table data) tan\u0131mlar.<\/p>\n<h4>Form Etiketleri<\/h4>\n<p>Kullan\u0131c\u0131dan veri almak i\u00e7in etkile\u015fimli formlar olu\u015fturmak i\u00e7in kullan\u0131l\u0131rlar.<\/p>\n<p>*   <strong><code><\/p>\n<form><\/code>:<\/strong> Bir HTML formu olu\u015fturur. <code>action<\/code> ve <code>method<\/code> gibi \u00f6nemli \u00f6zelliklere sahiptir.<br \/>\n*   <strong><code><input><\/code>:<\/strong> Kullan\u0131c\u0131dan farkl\u0131 t\u00fcrlerde veri almak i\u00e7in kullan\u0131l\u0131r (kendili\u011finden kapanan etiket). <code>type<\/code> \u00f6zelli\u011fi (text, password, submit, radio, checkbox vb.) ile davran\u0131\u015f\u0131n\u0131 belirlenir.<\/p>\n<pre><code class=\"language-html\"><input type=\"text\" name=\"kullaniciAdi\" placeholder=\"Kullan\u0131c\u0131 Ad\u0131\">\n    <input type=\"password\" name=\"sifre\">\n    <input type=\"submit\" value=\"G\u00f6nder\"><\/code><\/pre>\n<p>*   <strong><code><textarea><\/code>:<\/strong> \u00c7ok sat\u0131rl\u0131 metin giri\u015fi alan\u0131 olu\u015fturur.<br \/>\n*   <strong><code><select><\/code>:<\/strong> A\u00e7\u0131l\u0131r liste (dropdown) olu\u015fturur.<br \/>\n*   <strong><code><option><\/code>:<\/strong> <code><select><\/code> i\u00e7indeki bir se\u00e7ene\u011fi tan\u0131mlar.<br \/>\n*   <strong><code><label><\/code>:<\/strong> Form \u00f6\u011feleri i\u00e7in bir etiket tan\u0131mlar. Eri\u015filebilirlik i\u00e7in \u00e7ok \u00f6nemlidir.<\/p>\n<pre><code class=\"language-html\"><label for=\"email\">E-posta:<\/label>\n    <input type=\"email\" id=\"email\" name=\"email\"><\/code><\/pre>\n<p>*   <strong><code><button><\/code>:<\/strong> T\u0131klanabilir bir d\u00fc\u011fme olu\u015fturur.<\/p>\n<h4>Meta Etiketler (Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcnde Yer Al\u0131r)<\/h4>\n<p>Bu etiketler, genellikle <code><head><\/code> b\u00f6l\u00fcm\u00fcnde yer al\u0131r ve taray\u0131c\u0131lara veya arama motorlar\u0131na sayfa hakk\u0131nda bilgi verir.<\/p>\n<p>*   <strong><code><meta><\/code>:<\/strong> Belgenin meta verilerini (karakter kodlamas\u0131, sayfa a\u00e7\u0131klamas\u0131, anahtar kelimeler, viewport ayarlar\u0131 vb.) tan\u0131mlar (kendili\u011finden kapanan etiket).<\/p>\n<pre><code class=\"language-html\"><meta charset=\"UTF-8\">\n    <meta name=\"description\" content=\"Bu bir HTML etiketleri makalesidir.\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/code><\/pre>\n<p>*   <strong><code><title><\/code>:<\/strong> Taray\u0131c\u0131 sekmesinde veya pencere ba\u015fl\u0131\u011f\u0131nda g\u00f6r\u00fcnen sayfa ba\u015fl\u0131\u011f\u0131n\u0131 belirler. SEO i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n<h3>HTML Etiketlerinin \u0130\u00e7 \u0130\u00e7e Kullan\u0131m\u0131 (Nesting)<\/h3>\n<p>HTML etiketleri, bir web sayfas\u0131n\u0131n hiyerar\u015fik yap\u0131s\u0131n\u0131 olu\u015fturmak i\u00e7in i\u00e7 i\u00e7e kullan\u0131labilir. Bu, bir etiketin ba\u015fka bir etiketin i\u00e7eri\u011fi olarak kullan\u0131lmas\u0131 anlam\u0131na gelir. Ancak, i\u00e7 i\u00e7e kullan\u0131mda do\u011fru s\u0131ralamaya uymak \u00e7ok \u00f6nemlidir. Bir etiketi a\u00e7t\u0131\u011f\u0131n\u0131z s\u0131ran\u0131n tersiyle kapatman\u0131z gerekir.<\/p>\n<p><strong>Do\u011fru Kullan\u0131m:<\/strong><\/p>\n<pre><code class=\"language-html\"><p>Bu bir <strong>\u00f6nemli<\/strong> metindir.<\/p><\/code><\/pre>\n<p>Burada, <code><strong><\/code> etiketi <code><\/p>\n<p><\/code> etiketi i\u00e7inde d\u00fczg\u00fcn bir \u015fekilde a\u00e7\u0131l\u0131p kapat\u0131lm\u0131\u015ft\u0131r.<\/p>\n<p><strong>Yanl\u0131\u015f Kullan\u0131m:<\/strong><\/p>\n<pre><code class=\"language-html\"><p>Bu bir <strong>\u00f6nemli<\/p> metindir.<\/strong><\/code><\/pre>\n<p>Bu \u00f6rnekte, <code><strong><\/code> etiketi a\u00e7\u0131ld\u0131ktan sonra <code><\/p>\n<p><\/code> etiketi kapat\u0131lm\u0131\u015f ve bu durum taray\u0131c\u0131lar\u0131n sayfay\u0131 do\u011fru bir \u015fekilde yorumlamas\u0131na engel olabilir, beklenmedik g\u00f6rsel veya i\u015flevsel hatalara yol a\u00e7abilir. D\u00fczg\u00fcn i\u00e7 i\u00e7e kullan\u0131m, hem sayfan\u0131n do\u011fru g\u00f6r\u00fcnt\u00fclenmesini hem de eri\u015filebilirlik ve SEO uyumlulu\u011funu sa\u011flar.<\/p>\n<h3>Blok Seviyesi ve Sat\u0131r \u0130\u00e7i (Inline) Etiketler<\/h3>\n<p>HTML etiketleri, taray\u0131c\u0131 taraf\u0131ndan nas\u0131l g\u00f6r\u00fcnt\u00fclendiklerine g\u00f6re iki ana kategoriye ayr\u0131l\u0131r: blok seviyesi (block-level) ve sat\u0131r i\u00e7i (inline) etiketler. Bu ayr\u0131m, CSS ile sayfa d\u00fczeni olu\u015ftururken temel bir anlay\u0131\u015f sa\u011flar.<\/p>\n<h4>Blok Seviyesi Etiketler<\/h4>\n<p>*   Her zaman yeni bir sat\u0131rdan ba\u015flar ve mevcut sat\u0131r\u0131n tamam\u0131n\u0131 kaplar (yani, sol ve sa\u011f kenarlara kadar uzan\u0131r).<br \/>\n*   \u0130\u00e7eriklerinin etraf\u0131nda bir \"kutu\" olu\u015ftururlar ve di\u011fer blok seviyesi veya sat\u0131r i\u00e7i \u00f6\u011feleri i\u00e7erebilirler.<br \/>\n*   \u00d6rnekler: <code><\/p>\n<p><\/code>, <code><\/p>\n<h1><\/code> - <code><\/p>\n<h6><\/code>, <code><\/p>\n<div><\/code>, <code><\/p>\n<ul><\/code>, <code><\/p>\n<ol><\/code>, <code><\/p>\n<li><\/code>, <code><br \/>\n<form><\/code>, <code><\/p>\n<table><\/code>, <code><\/p>\n<header><\/code>, <code><\/p>\n<footer><\/code>, <code><\/p>\n<section><\/code>, <code><\/p>\n<article><\/code>, <code><main><\/code>, <code><\/p>\n<nav><\/code>, <code><\/p>\n<aside><\/code>.<\/p>\n<h4>Sat\u0131r \u0130\u00e7i Etiketler<\/h4>\n<p>*   Yeni bir sat\u0131rdan ba\u015flamazlar.<br \/>\n*   Yaln\u0131zca i\u00e7eriklerinin kaplad\u0131\u011f\u0131 kadar geni\u015flikte yer kaplarlar.<br \/>\n*   Genellikle metin i\u00e7inde belirli b\u00f6l\u00fcmleri bi\u00e7imlendirmek veya i\u015faretlemek i\u00e7in kullan\u0131l\u0131rlar.<br \/>\n*   \u00d6rnekler: <code><a><\/code>, <code><span><\/code>, <code><strong><\/code>, <code><em><\/code>, <code><b><\/code>, <code><i><\/code>, <code><img><\/code>, <code><input><\/code>, <code><label><\/code>, <code><select><\/code>, <code><textarea><\/code>, <code><button><\/code>.<\/p>\n<p>Bu ayr\u0131m\u0131 anlamak, CSS kullanarak \u00f6\u011feleri konumland\u0131rma ve stil verme konusunda kritik \u00f6neme sahiptir. \u00d6rne\u011fin, bir <code><\/p>\n<div><\/code> \u00f6\u011fesinin varsay\u0131lan olarak t\u00fcm geni\u015fli\u011fi kaplad\u0131\u011f\u0131n\u0131 bilmek, onu yan yana yerle\u015ftirmek i\u00e7in <code>display<\/code> \u00f6zelli\u011fini de\u011fi\u015ftirmeniz gerekti\u011fini anlaman\u0131za yard\u0131mc\u0131 olur.<\/p>\n<h3>HTML Etiketlerini Kullanmak \u0130\u00e7in En \u0130yi Uygulamalar<\/h3>\n<p>Modern web geli\u015ftirme, yaln\u0131zca i\u015flevsel de\u011fil, ayn\u0131 zamanda eri\u015filebilir, s\u00fcrd\u00fcr\u00fclebilir ve arama motoru dostu web sayfalar\u0131 olu\u015fturmay\u0131 gerektirir. Bu hedeflere ula\u015fmak i\u00e7in HTML etiketlerini kullan\u0131rken baz\u0131 en iyi uygulamalara uymak \u00f6nemlidir:<\/p>\n<p>1.  <strong>Anlamsal HTML Kullan\u0131n:<\/strong> Her zaman i\u00e7eri\u011fin anlam\u0131n\u0131 en iyi yans\u0131tan etiketi kullan\u0131n. \u00d6rne\u011fin, bir ba\u015fl\u0131k i\u00e7in <code><\/p>\n<h1><\/code> yerine <code><strong><\/code> kullanmaktan ka\u00e7\u0131n\u0131n. <code><\/p>\n<article><\/code>, <code><\/p>\n<section><\/code>, <code><\/p>\n<nav><\/code>, <code><\/p>\n<aside><\/code>, <code><\/p>\n<footer><\/code> gibi HTML5 anlamsal etiketleri, sayfan\u0131n yap\u0131s\u0131n\u0131 taray\u0131c\u0131lara ve arama motorlar\u0131na daha net bir \u015fekilde a\u00e7\u0131klar, bu da SEO ve eri\u015filebilirlik i\u00e7in faydal\u0131d\u0131r.<br \/>\n2.  <strong>Eri\u015filebilirli\u011fi \u00d6nceliklendirin:<\/strong><br \/>\n    *   T\u00fcm <code><img><\/code> etiketleri i\u00e7in anlaml\u0131 <code>alt<\/code> \u00f6zellikleri sa\u011flay\u0131n. Bu, g\u00f6rme engelli kullan\u0131c\u0131lar i\u00e7in ekran okuyucular\u0131n resmi tan\u0131mlamas\u0131n\u0131 sa\u011flar ve resim y\u00fcklenemedi\u011finde metin alternatifi sunar.<br \/>\n    *   Form \u00f6\u011feleri i\u00e7in <code><label><\/code> etiketlerini <code>for<\/code> \u00f6zelli\u011fiyle birlikte kullan\u0131n. Bu, kullan\u0131c\u0131lar\u0131n form alanlar\u0131na t\u0131klamadan etiketlerine t\u0131klayarak da odaklanabilmesini sa\u011flar.<br \/>\n    *   Ba\u015fl\u0131k hiyerar\u015fisini (<code><\/p>\n<h1><\/code>'dan <code><\/p>\n<h6><\/code>'ya) do\u011fru bir \u015fekilde kullan\u0131n. Yaln\u0131zca g\u00f6rsel bir etki yaratmak i\u00e7in ba\u015fl\u0131k etiketlerini atlamay\u0131n veya yanl\u0131\u015f s\u0131rayla kullanmay\u0131n.<br \/>\n    *   ARIA (Accessible Rich Internet Applications) niteliklerini, \u00f6zellikle dinamik ve karma\u015f\u0131k aray\u00fcz \u00f6\u011feleri i\u00e7in gerekti\u011finde kullan\u0131n.<br \/>\n3.  <strong>D\u00fczg\u00fcn \u0130\u00e7 \u0130\u00e7e Kullan\u0131m ve Kapan\u0131\u015f Etiketleri:<\/strong> T\u00fcm a\u00e7\u0131l\u0131\u015f etiketlerinin d\u00fczg\u00fcn bir \u015fekilde kapat\u0131ld\u0131\u011f\u0131ndan ve etiketlerin do\u011fru hiyerar\u015fide i\u00e7 i\u00e7e yerle\u015ftirildi\u011finden emin olun. Yanl\u0131\u015f i\u00e7 i\u00e7e kullan\u0131m, sayfan\u0131n bozuk g\u00f6r\u00fcnmesine veya beklenmedik davran\u0131\u015flar sergilemesine neden olabilir.<br \/>\n4.  <strong>K\u00fc\u00e7\u00fck Harf Kullan\u0131m\u0131:<\/strong> HTML5'te b\u00fcy\u00fck\/k\u00fc\u00e7\u00fck harf duyarl\u0131l\u0131\u011f\u0131 olmasa da, etiket ve \u00f6zellik adlar\u0131n\u0131 k\u00fc\u00e7\u00fck harfle yazmak genel bir en iyi uygulama ve okunabilirlik standard\u0131d\u0131r.<br \/>\n5.  <strong>Kodu Do\u011frulay\u0131n:<\/strong> W3C Markup Validation Service gibi ara\u00e7lar kullanarak HTML kodunuzu d\u00fczenli olarak do\u011frulay\u0131n. Bu, potansiyel hatalar\u0131 ve uyumluluk sorunlar\u0131n\u0131 tespit etmenize yard\u0131mc\u0131 olur.<br \/>\n6.  <strong>Okunabilirlik ve Girintileme:<\/strong> Kodunuzu d\u00fczenli ve okunabilir tutmak i\u00e7in tutarl\u0131 bir girintileme stili kullan\u0131n. Bu, hem sizin hem de di\u011fer geli\u015ftiricilerin kodu anlamas\u0131n\u0131 ve s\u00fcrd\u00fcrmesini kolayla\u015ft\u0131r\u0131r.<br \/>\n7.  <strong>Stil \u0130\u00e7in CSS Kullan\u0131n:<\/strong> HTML, i\u00e7eri\u011fin yap\u0131s\u0131n\u0131 tan\u0131mlamak i\u00e7indir, g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc de\u011fil. G\u00f6rsel stil ve d\u00fczen i\u00e7in her zaman CSS kullan\u0131n. <code><font><\/code>, <code><center><\/code> gibi eski, sunum odakl\u0131 etiketlerden ka\u00e7\u0131n\u0131n; bunlar HTML5'te kullan\u0131mdan kald\u0131r\u0131lm\u0131\u015ft\u0131r.<\/p>\n<h3>HTML Etiketlerinin Evrimi: HTML5 ve Sonras\u0131<\/h3>\n<p>HTML, web'in ilk g\u00fcnlerinden bu yana s\u00fcrekli olarak geli\u015fmi\u015ftir. \u0130lk versiyonlar basit metin belgeleri i\u00e7in tasarlanm\u0131\u015fken, web'in artan karma\u015f\u0131kl\u0131\u011f\u0131 ve interaktifli\u011fi, HTML'in de yeni yetenekler kazanmas\u0131n\u0131 gerektirmi\u015ftir.<\/p>\n<p>*   <strong>HTML 1.0 - 4.01:<\/strong> Web'in ilk d\u00f6nemlerinde temel yap\u0131land\u0131rma ve metin bi\u00e7imlendirme yetenekleri sunuyordu. Ancak, tasar\u0131m ve yap\u0131sal \u00f6\u011feler aras\u0131nda net bir ayr\u0131m yoktu, bu da karma\u015f\u0131k ve bak\u0131m\u0131 zor kodlara yol a\u00e7abiliyordu.<br \/>\n*   <strong>XHTML:<\/strong> HTML'in XML tabanl\u0131 bir yeniden form\u00fclasyonuydu. Daha kat\u0131 kurallara (t\u00fcm etiketlerin k\u00fc\u00e7\u00fck harf olmas\u0131, t\u00fcm etiketlerin kapanmas\u0131 vb.) sahipti ve daha \"temiz\" bir kodlama prati\u011fini te\u015fvik etti. Ancak, esnekli\u011fi azd\u0131 ve HTML5'in y\u00fckseli\u015fiyle pop\u00fclaritesini kaybetti.<br \/>\n*   <strong>HTML5:<\/strong> Web'in en \u00f6nemli evrimlerinden biridir. 2014 y\u0131l\u0131nda W3C taraf\u0131ndan \u00f6neri olarak yay\u0131mland\u0131 ve web geli\u015ftirme i\u00e7in devrim niteli\u011finde yenilikler getirdi. HTML5 ile birlikte:<br \/>\n    *   <strong>Yeni Anlamsal Etiketler:<\/strong> <code><\/p>\n<header><\/code>, <code><\/p>\n<nav><\/code>, <code><\/p>\n<section><\/code>, <code><\/p>\n<article><\/code>, <code><\/p>\n<aside><\/code>, <code><\/p>\n<footer><\/code>, <code><main><\/code>, <code><\/p>\n<figure><\/code>, <code><figcaption><\/code>, <code><mark><\/code>, <code><time><\/code> gibi etiketler, i\u00e7eri\u011fin anlam\u0131n\u0131 daha iyi ifade etmek ve arama motorlar\u0131 ile yard\u0131mc\u0131 teknolojiler i\u00e7in daha zengin bir ba\u011flam sa\u011flamak amac\u0131yla tan\u0131t\u0131ld\u0131.<br \/>\n    *   <strong>Multimedya Deste\u011fi:<\/strong> <code><audio><\/code> ve <code><video><\/code> etiketleri sayesinde, harici eklentilere (Flash gibi) ihtiya\u00e7 duymadan ses ve video i\u00e7eri\u011fi do\u011frudan web sayfalar\u0131na g\u00f6m\u00fclebilir hale geldi.<br \/>\n    *   <strong>Form \u0130yile\u015ftirmeleri:<\/strong> <code>email<\/code>, <code>url<\/code>, <code>number<\/code>, <code>date<\/code>, <code>range<\/code> gibi yeni <code><input><\/code> t\u00fcrleri ve <code>placeholder<\/code>, <code>required<\/code> gibi yeni \u00f6zellikler, formlar\u0131n daha i\u015flevsel ve kullan\u0131c\u0131 dostu olmas\u0131n\u0131 sa\u011flad\u0131.<br \/>\n    *   <strong>Grafik ve Etkile\u015fim:<\/strong> <code><canvas><\/code> ve <code><svg><\/code> etiketleri, web tabanl\u0131 grafikler ve animasyonlar olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lar sundu.<br \/>\n    *   <strong>API'ler:<\/strong> Co\u011frafi konumland\u0131rma, web depolama, \u00e7evrimd\u0131\u015f\u0131 uygulamalar gibi bir\u00e7ok yeni JavaScript API'si ile web sayfalar\u0131 daha dinamik ve etkile\u015fimli hale geldi.<\/p>\n<p>HTML5, web geli\u015ftirme standartlar\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde y\u00fckseltti ve modern, duyarl\u0131, eri\u015filebilir ve zengin web deneyimleri olu\u015fturman\u0131n temelini att\u0131. Gelecekte de HTML'in, web teknolojilerinin geli\u015fimiyle birlikte evrilmeye devam edece\u011fi a\u00e7\u0131kt\u0131r.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>HTML etiketleri, web'in temel dilidir ve web sayfalar\u0131n\u0131n yap\u0131 ta\u015flar\u0131n\u0131 olu\u015fturur. Bir web sayfas\u0131n\u0131n i\u00e7eri\u011fini d\u00fczenlemek, anlamland\u0131rmak ve taray\u0131c\u0131lara nas\u0131l sunulaca\u011f\u0131n\u0131 bildirmek i\u00e7in kullan\u0131l\u0131rlar. <code><\/p>\n<p><\/code> gibi basit metin etiketlerinden, <code><\/p>\n<form><\/code> gibi etkile\u015fimli form etiketlerine, <code><video><\/code> gibi multimedya etiketlerine kadar geni\u015f bir yelpazeye sahiptirler.<\/p>\n<p>Bu makalede, HTML etiketlerinin temel tan\u0131m\u0131n\u0131, a\u00e7\u0131l\u0131\u015f ve kapan\u0131\u015f etiketleri aras\u0131ndaki fark\u0131, kendili\u011finden kapanan etiketleri ve etiketlere ek bilgi sa\u011flayan \u00f6zellikleri inceledik. Ayr\u0131ca, yap\u0131sal, metin bi\u00e7imlendirme, liste, ba\u011flant\u0131, medya, tablo ve form etiketleri gibi \u00e7e\u015fitli etiket t\u00fcrlerini detayland\u0131rd\u0131k. Blok seviyesi ve sat\u0131r i\u00e7i etiketler aras\u0131ndaki fark\u0131n, sayfa d\u00fczeni ve stil olu\u015fturma a\u00e7\u0131s\u0131ndan \u00f6nemini vurgulad\u0131k.<\/p>\n<p>HTML etiketlerini kullan\u0131rken anlamsall\u0131\u011fa, eri\u015filebilirli\u011fe ve temiz kodlama prensiplerine uymak, yaln\u0131zca taray\u0131c\u0131lar\u0131n i\u00e7eri\u011fi do\u011fru bir \u015fekilde yorumlamas\u0131n\u0131 sa\u011flamakla kalmaz, ayn\u0131 zamanda arama motorlar\u0131 i\u00e7in optimize edilmi\u015f, yard\u0131mc\u0131 teknolojilerle uyumlu ve t\u00fcm kullan\u0131c\u0131lar i\u00e7in eri\u015filebilir web sayfalar\u0131 olu\u015fturman\u0131n anahtar\u0131d\u0131r. HTML5'in getirdi\u011fi yenilikler, web'i daha zengin, dinamik ve kullan\u0131c\u0131 dostu hale getirmi\u015ftir ve HTML'in bu evrimi, web'in gelece\u011finde de temel bir rol oynamaya devam edecektir. Her web geli\u015ftiricisinin, bu temel yap\u0131 ta\u015flar\u0131n\u0131 derinlemesine anlamas\u0131, ba\u015far\u0131l\u0131 ve s\u00fcrd\u00fcr\u00fclebilir web projeleri i\u00e7in vazge\u00e7ilmezdir.<\/p>\n","protected":false},"excerpt":{"rendered":"HTML Etiketleri Nedir? Web \u0130\u00e7eri\u011finin Yap\u0131 Ta\u015flar\u0131\n\u0130nternet d\u00fcnyas\u0131n\u0131n temelini olu\u015fturan web sayfalar\u0131, milyonlarca kullan\u0131c\u0131ya bilgi,","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-34906","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 Etiketleri Nedir? Web \u0130\u00e7eri\u011finin Yap\u0131 Ta\u015flar\u0131 - 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-etiketleri-nedir-web-iceriginin-yapi-taslari\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Etiketleri Nedir? Web \u0130\u00e7eri\u011finin Yap\u0131 Ta\u015flar\u0131\" \/>\n<meta property=\"og:description\" content=\"HTML Etiketleri Nedir? Web \u0130\u00e7eri\u011finin Yap\u0131 Ta\u015flar\u0131 \u0130nternet d\u00fcnyas\u0131n\u0131n temelini olu\u015fturan web sayfalar\u0131, milyonlarca kullan\u0131c\u0131ya bilgi,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-nedir-web-iceriginin-yapi-taslari\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-23T10:40:46+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=\"15 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-nedir-web-iceriginin-yapi-taslari\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-nedir-web-iceriginin-yapi-taslari\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"HTML Etiketleri Nedir? Web \u0130\u00e7eri\u011finin Yap\u0131 Ta\u015flar\u0131\",\"datePublished\":\"2025-11-23T10:40:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-nedir-web-iceriginin-yapi-taslari\/\"},\"wordCount\":3015,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-nedir-web-iceriginin-yapi-taslari\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-nedir-web-iceriginin-yapi-taslari\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-nedir-web-iceriginin-yapi-taslari\/\",\"name\":\"HTML Etiketleri Nedir? Web \u0130\u00e7eri\u011finin Yap\u0131 Ta\u015flar\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-23T10:40:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-nedir-web-iceriginin-yapi-taslari\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-nedir-web-iceriginin-yapi-taslari\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-nedir-web-iceriginin-yapi-taslari\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML Etiketleri Nedir? Web \u0130\u00e7eri\u011finin Yap\u0131 Ta\u015flar\u0131\"}]},{\"@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 Etiketleri Nedir? Web \u0130\u00e7eri\u011finin Yap\u0131 Ta\u015flar\u0131 - 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-etiketleri-nedir-web-iceriginin-yapi-taslari\/","og_locale":"tr_TR","og_type":"article","og_title":"HTML Etiketleri Nedir? Web \u0130\u00e7eri\u011finin Yap\u0131 Ta\u015flar\u0131","og_description":"HTML Etiketleri Nedir? Web \u0130\u00e7eri\u011finin Yap\u0131 Ta\u015flar\u0131 \u0130nternet d\u00fcnyas\u0131n\u0131n temelini olu\u015fturan web sayfalar\u0131, milyonlarca kullan\u0131c\u0131ya bilgi,","og_url":"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-nedir-web-iceriginin-yapi-taslari\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-23T10:40:46+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"15 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-nedir-web-iceriginin-yapi-taslari\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-nedir-web-iceriginin-yapi-taslari\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"HTML Etiketleri Nedir? Web \u0130\u00e7eri\u011finin Yap\u0131 Ta\u015flar\u0131","datePublished":"2025-11-23T10:40:46+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-nedir-web-iceriginin-yapi-taslari\/"},"wordCount":3015,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/html-etiketleri-nedir-web-iceriginin-yapi-taslari\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-nedir-web-iceriginin-yapi-taslari\/","url":"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-nedir-web-iceriginin-yapi-taslari\/","name":"HTML Etiketleri Nedir? Web \u0130\u00e7eri\u011finin Yap\u0131 Ta\u015flar\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-23T10:40:46+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-nedir-web-iceriginin-yapi-taslari\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/html-etiketleri-nedir-web-iceriginin-yapi-taslari\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-nedir-web-iceriginin-yapi-taslari\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML Etiketleri Nedir? Web \u0130\u00e7eri\u011finin Yap\u0131 Ta\u015flar\u0131"}]},{"@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\/34906","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=34906"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34906\/revisions"}],"predecessor-version":[{"id":34907,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34906\/revisions\/34907"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=34906"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=34906"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=34906"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}