{"id":38352,"date":"2026-01-29T15:30:37","date_gmt":"2026-01-29T12:30:37","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-ve-elementlerini-anlamak-webin-temel-yapi-taslari\/"},"modified":"2026-01-29T15:30:37","modified_gmt":"2026-01-29T12:30:37","slug":"html-etiketleri-ve-elementlerini-anlamak-webin-temel-yapi-taslari","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-ve-elementlerini-anlamak-webin-temel-yapi-taslari\/","title":{"rendered":"HTML Etiketleri ve Elementlerini Anlamak: Web&#8217;in Temel Yap\u0131 Ta\u015flar\u0131"},"content":{"rendered":"<h2>HTML Etiketleri ve Elementlerini Anlamak: Web&#8217;in Temel Yap\u0131 Ta\u015flar\u0131<\/h2>\n<p>Web sitelerinin iskeletini olu\u015fturan HTML (HyperText Markup Language), internetin g\u00f6rsel d\u00fcnyas\u0131n\u0131n temelidir. Bir web sayfas\u0131ndaki t\u00fcm i\u00e7erik; metinler, g\u00f6rseller, ba\u011flant\u0131lar ve d\u00fczenler, HTML etiketleri ve elementleri arac\u0131l\u0131\u011f\u0131yla yap\u0131land\u0131r\u0131l\u0131r. Bu makalede, HTML&#8217;in bu iki temel bile\u015fenini derinlemesine inceleyecek, aralar\u0131ndaki farklar\u0131 anlayacak ve web geli\u015ftirme yolculu\u011funuzda sa\u011flam bir temel olu\u015fturman\u0131za yard\u0131mc\u0131 olaca\u011f\u0131z. HTML&#8217;in g\u00fcc\u00fcn\u00fc kavrayarak, etkile\u015fimli ve eri\u015filebilir web sayfalar\u0131 olu\u015fturman\u0131n ilk ad\u0131m\u0131n\u0131 atm\u0131\u015f olacaks\u0131n\u0131z.<\/p>\n<h3>HTML Nedir ve Neden \u00d6nemlidir?<\/h3>\n<p>HTML, web sayfalar\u0131 olu\u015fturmak i\u00e7in kullan\u0131lan standart i\u015faretleme dilidir. \u0130nternet taray\u0131c\u0131lar\u0131n\u0131n bir web sayfas\u0131n\u0131n i\u00e7eri\u011fini ve yap\u0131s\u0131n\u0131 nas\u0131l g\u00f6r\u00fcnt\u00fcleyece\u011fini belirler. HTML olmadan, web sayfalar\u0131 sadece d\u00fcz metin y\u0131\u011f\u0131nlar\u0131 olurdu. Web&#8217;in g\u00f6rsel ve etkile\u015fimli yap\u0131s\u0131, tamamen HTML&#8217;in sundu\u011fu yap\u0131land\u0131rma yeteneklerine dayan\u0131r.<\/p>\n<h3>HTML Etiketleri: Yap\u0131 Ta\u015flar\u0131n\u0131n Temeli<\/h3>\n<p>HTML etiketleri, bir web sayfas\u0131ndaki i\u00e7eri\u011fin t\u00fcr\u00fcn\u00fc ve taray\u0131c\u0131ya nas\u0131l i\u015flenece\u011fini bildiren \u00f6zel anahtar kelimelerdir. Her etiket, k\u00fc\u00e7\u00fckt\u00fcr (<code><<\/code>) ve b\u00fcy\u00fckt\u00fcr (<code>><\/code>) i\u015faretleri aras\u0131na yaz\u0131l\u0131r.<\/p>\n<ul>\n<li>\n<h3>A\u00e7\u0131l\u0131\u015f ve Kapan\u0131\u015f Etiketleri<\/h3>\n<p>\u00c7o\u011fu HTML etiketi, bir i\u00e7eri\u011fi kapsayacak \u015fekilde a\u00e7\u0131l\u0131\u015f (\u00f6rne\u011fin, <code><\/p>\n<p><\/code>) ve kapan\u0131\u015f (\u00f6rne\u011fin, <code><\/p>\n<p><\/code>) etiketleri \u015feklinde \u00e7iftler halinde kullan\u0131l\u0131r. A\u00e7\u0131l\u0131\u015f etiketi, bir elementin ba\u015flad\u0131\u011f\u0131 yeri, kapan\u0131\u015f etiketi ise bitti\u011fi yeri i\u015faret eder. Kapan\u0131\u015f etiketi, a\u00e7\u0131l\u0131\u015f etiketinin \u00f6n\u00fcne bir e\u011fik \u00e7izgi (<code>\/<\/code>) eklenerek belirtilir.<\/p>\n<pre><code><p>Bu bir paragraf metnidir.<\/p><\/pre>\n<p><\/code>\n    <\/li>\n<li>\n<h3>Bo\u015f Etiketler (Self-Closing Tags)<\/h3>\n<p>Baz\u0131 HTML etiketleri, herhangi bir i\u00e7eri\u011fi kapsamaz ve bu nedenle kapan\u0131\u015f etiketine ihtiya\u00e7 duymazlar. Bunlara bo\u015f etiketler veya kendili\u011finden kapanan etiketler denir. En yayg\u0131n \u00f6rnekleri aras\u0131nda g\u00f6rsel eklemek i\u00e7in kullan\u0131lan <code><img><\/code>, \u00e7izgi \u00e7ekmek i\u00e7in kullan\u0131lan <code><\/p>\n<hr>\n<p><\/code> ve sat\u0131r sonu eklemek i\u00e7in kullan\u0131lan <code><br \/><\/code> etiketleri bulunur.<\/p>\n<pre><code><img decoding=\"async\" src=\"resim.jpg\" alt=\"A\u00e7\u0131klama\">\n<br>\n<hr><\/pre>\n<p><\/code>\n    <\/li>\n<li>\n<h3>Etiketlerin Amac\u0131<\/h3>\n<p>Etiketler, taray\u0131c\u0131ya i\u00e7eri\u011fin ne anlama geldi\u011fini s\u00f6yler. \u00d6rne\u011fin, <code><\/p>\n<h1><\/code> etiketi bir ba\u015fl\u0131k oldu\u011funu, <code><\/p>\n<p><\/code> etiketi bir paragraf oldu\u011funu, <code><a><\/code> etiketi ise bir k\u00f6pr\u00fc (link) oldu\u011funu belirtir. Bu semantik anlam, arama motorlar\u0131 ve ekran okuyucular i\u00e7in de b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r.<\/p>\n<\/li>\n<\/ul>\n<h3>HTML Elementleri: Anlaml\u0131 \u0130\u00e7erik Birimleri<\/h3>\n<p>Bir HTML elementi, a\u00e7\u0131l\u0131\u015f etiketi, kapan\u0131\u015f etiketi ve bu iki etiket aras\u0131ndaki i\u00e7erikten olu\u015fur. Basit\u00e7e ifade etmek gerekirse, etiketler bir elementin ba\u015flang\u0131c\u0131n\u0131 ve sonunu i\u015faret ederken, elementin kendisi bu i\u015faretler aras\u0131ndaki her \u015feyi kapsar.<\/p>\n<ul>\n<li>\n<h3>Elementin Tan\u0131m\u0131<\/h3>\n<p>Bir element, bir web sayfas\u0131ndaki tek bir yap\u0131sal bile\u015feni temsil eder. \u00d6rne\u011fin, bir paragraf elementi, <code><\/p>\n<p><\/code> a\u00e7\u0131l\u0131\u015f etiketi, paragraf\u0131n metni ve <code><\/p>\n<p><\/code> kapan\u0131\u015f etiketinden olu\u015fur. Bu b\u00fct\u00fcn, taray\u0131c\u0131 taraf\u0131ndan tek bir paragraf olarak yorumlan\u0131r ve g\u00f6r\u00fcnt\u00fclenir.<\/p>\n<pre><code><p>Bu, bir paragraf elementinin tamam\u0131d\u0131r.<\/p><\/pre>\n<p><\/code>\n    <\/li>\n<li>\n<h3>\u0130\u00e7erik ve Elementler<\/h3>\n<p>Elementin i\u00e7eri\u011fi, metin, ba\u015fka HTML etiketleri veya her ikisi birden olabilir. \u00d6rne\u011fin, bir paragraf elementi i\u00e7inde kal\u0131n metin i\u00e7in <code><strong><\/code> etiketi kullan\u0131labilir.<\/p>\n<pre><code><p>Bu paragraf\u0131n i\u00e7inde <strong>kal\u0131n<\/strong> bir kelime var.<\/p><\/pre>\n<p><\/code>\n    <\/li>\n<li>\n<h3>\u0130\u00e7 \u0130\u00e7e Elementler<\/h3>\n<p>HTML elementleri, birbirlerinin i\u00e7ine yerle\u015ftirilebilir. Bu, i\u00e7 i\u00e7e ge\u00e7mi\u015f elementler olarak adland\u0131r\u0131l\u0131r ve web sayfalar\u0131n\u0131n karma\u015f\u0131k yap\u0131lar\u0131n\u0131 olu\u015fturman\u0131n temel yoludur. Ancak, elementlerin do\u011fru bir \u015fekilde i\u00e7 i\u00e7e yerle\u015ftirilmesi \u00f6nemlidir; a\u00e7\u0131lan bir elementin, onu kapsayan element kapanmadan \u00f6nce kapat\u0131lmas\u0131 gerekir. Yanl\u0131\u015f i\u00e7 i\u00e7e yerle\u015ftirme, taray\u0131c\u0131da beklenmedik sonu\u00e7lara yol a\u00e7abilir.<\/p>\n<pre><code><div>\n    <p>Bu bir <strong>i\u00e7 i\u00e7e<\/strong> ge\u00e7mi\u015f element \u00f6rne\u011fidir.<\/p>\n<\/div><\/pre>\n<p><\/code>\n    <\/li>\n<\/ul>\n<h3>Etiketler ve Elementler Aras\u0131ndaki Kritik Fark<\/h3>\n<p>Etiketler ve elementler genellikle birbirinin yerine kullan\u0131lan terimler olsa da, teknik olarak farkl\u0131 kavramlard\u0131r. Bu fark\u0131 anlamak, HTML'i do\u011fru bir \u015fekilde kavramak i\u00e7in \u00f6nemlidir.<\/p>\n<ul>\n<li>\n<h3>Kavramsal Ayr\u0131m<\/h3>\n<p><strong>Etiketler<\/strong>, bir elementin ba\u015flang\u0131c\u0131n\u0131 ve sonunu i\u015faret eden anahtar kelimelerdir (\u00f6rne\u011fin, <code><\/p>\n<p><\/code>, <code><\/p>\n<p><\/code>). Tek ba\u015flar\u0131na bir anlam ifade etmezler, sadece bir i\u015faretleyicidirler. <strong>Elementler<\/strong> ise, a\u00e7\u0131l\u0131\u015f etiketi, kapan\u0131\u015f etiketi (e\u011fer varsa) ve aralar\u0131ndaki i\u00e7eri\u011fin tamam\u0131n\u0131 kapsayan anlaml\u0131 bir birimdir. Bir element, bir web sayfas\u0131n\u0131n ger\u00e7ek bir yap\u0131sal bile\u015fenidir.<\/p>\n<\/li>\n<li>\n<h3>\u00d6rneklerle Fark<\/h3>\n<p><code><\/p>\n<p><\/code> ve <code><\/p>\n<p><\/code> sadece etiketlerdir. Ancak, <code><\/p>\n<p>Merhaba D\u00fcnya!<\/p>\n<p><\/code> ifadesinin tamam\u0131 bir paragraf elementidir. <code><img decoding=\"async\" src=\"resim.jpg\"><\/code> ise hem bir etiket hem de bo\u015f bir elementtir, \u00e7\u00fcnk\u00fc kapan\u0131\u015f etiketi gerektirmez ve i\u00e7eri\u011fi nitelikleri arac\u0131l\u0131\u011f\u0131yla tan\u0131mlan\u0131r.<\/p>\n<\/li>\n<\/ul>\n<h3>Yayg\u0131n Kullan\u0131lan HTML Etiketleri ve Kullan\u0131m Alanlar\u0131<\/h3>\n<p>HTML'de say\u0131s\u0131z etiket bulunur, ancak baz\u0131lar\u0131 web geli\u015ftirme s\u00fcrecinde \u00e7ok daha s\u0131k kullan\u0131l\u0131r. \u0130\u015fte en temel ve yayg\u0131n olanlardan baz\u0131lar\u0131:<\/p>\n<ul>\n<li>\n<h3>Metin Bi\u00e7imlendirme Etiketleri<\/h3>\n<ul>\n<li><code><br \/>\n<h1><\/code> - <code><\/p>\n<h6><\/code>: Ba\u015fl\u0131k etiketleri. <code><\/p>\n<h1><\/code> en b\u00fcy\u00fck, <code><\/p>\n<h6><\/code> en k\u00fc\u00e7\u00fck ba\u015fl\u0131\u011f\u0131 temsil eder. Sayfa yap\u0131s\u0131 ve SEO i\u00e7in \u00f6nemlidirler.<\/li>\n<li><code>\n<p><\/code>: Paragraf metinleri i\u00e7in kullan\u0131l\u0131r.<\/li>\n<li><code><strong><\/code>: Metni \u00f6nemli veya kal\u0131n g\u00f6stermek i\u00e7in kullan\u0131l\u0131r (semantik olarak \u00f6nemlidir).<\/li>\n<li><code><em><\/code>: Metni vurgulu veya italik g\u00f6stermek i\u00e7in kullan\u0131l\u0131r (semantik olarak \u00f6nemlidir).<\/li>\n<\/ul>\n<\/li>\n<li>\n<h3>Ba\u011flant\u0131 ve G\u00f6rsel Etiketleri<\/h3>\n<ul>\n<li><code><a><\/code>: K\u00f6pr\u00fc (link) olu\u015fturmak i\u00e7in kullan\u0131l\u0131r. <code>href<\/code> niteli\u011fi ile hedeflenen URL belirtilir.<\/li>\n<li><code><img><\/code>: G\u00f6rsel eklemek i\u00e7in kullan\u0131l\u0131r. <code>src<\/code> niteli\u011fi ile g\u00f6rselin yolu, <code>alt<\/code> niteli\u011fi ile alternatif metin belirtilir.<\/li>\n<\/ul>\n<\/li>\n<li>\n<h3>Liste Etiketleri<\/h3>\n<ul>\n<li><code>\n<ul><\/code>: S\u0131ras\u0131z liste (madde i\u015faretli liste) olu\u015fturur.<\/li>\n<li><code>\n<ol><\/code>: S\u0131ral\u0131 liste (numaral\u0131 liste) olu\u015fturur.<\/li>\n<li><code>\n<li><\/code>: Liste \u00f6\u011fesi. Hem <code>\n<ul><\/code> hem de <code><\/p>\n<ol><\/code> i\u00e7inde kullan\u0131l\u0131r.<\/li>\n<\/ul>\n<pre><code><ul>\n    <li>Elma<\/li>\n    <li>Armut<\/li>\n<\/ul><\/pre>\n<p><\/code>\n    <\/li>\n<li>\n<h3>Tablo Etiketleri<\/h3>\n<ul>\n<li><code><br \/>\n<table><\/code>: Bir tablo tan\u0131mlar.<\/li>\n<li><code><br \/>\n<tr><\/code>: Tablo sat\u0131r\u0131 tan\u0131mlar.<\/li>\n<li><code>\n<th><\/code>: Tablo ba\u015fl\u0131\u011f\u0131 h\u00fccresi tan\u0131mlar.<\/li>\n<li><code>\n<td><\/code>: Tablo veri h\u00fccresi tan\u0131mlar.<\/li>\n<\/ul>\n<pre><code><table>\n    <tr>\n        <th>Ba\u015fl\u0131k 1<\/th>\n        <th>Ba\u015fl\u0131k 2<\/th>\n    <\/tr>\n    <tr>\n        <td>Veri 1<\/td>\n        <td>Veri 2<\/td>\n    <\/tr>\n<\/table><\/pre>\n<p><\/code>\n    <\/li>\n<\/ul>\n<h3>HTML Nitelikleri (Attributes): Elementlere Anlam Katmak<\/h3>\n<p>Nitelikler, HTML elementlerine ek bilgi sa\u011flayan anahtar\/de\u011fer \u00e7iftleridir. Her zaman a\u00e7\u0131l\u0131\u015f etiketinin i\u00e7inde yer al\u0131rlar ve elementin davran\u0131\u015f\u0131n\u0131 veya g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc de\u011fi\u015ftirebilirler.<\/p>\n<ul>\n<li>\n<h3>Niteliklerin Amac\u0131<\/h3>\n<p>Nitelikler, elementlerin varsay\u0131lan davran\u0131\u015flar\u0131n\u0131 \u00f6zelle\u015ftirmek veya onlara ekstra \u00f6zellikler eklemek i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, bir ba\u011flant\u0131n\u0131n nereye gidece\u011fini (<code>href<\/code>), bir g\u00f6rselin kayna\u011f\u0131n\u0131 (<code>src<\/code>) veya bir elementin kimli\u011fini (<code>id<\/code>) belirlemek i\u00e7in nitelikler kullan\u0131l\u0131r.<\/p>\n<\/li>\n<li>\n<h3>Yayg\u0131n Nitelikler<\/h3>\n<p>Baz\u0131 nitelikler belirli etiketlere \u00f6zg\u00fcd\u00fcr (\u00f6rne\u011fin, <code>href<\/code> sadece <code><a><\/code> etiketi i\u00e7in), baz\u0131lar\u0131 ise hemen hemen t\u00fcm etiketlerde kullan\u0131labilir (global nitelikler).<\/p>\n<ul>\n<li><code>href<\/code>: Ba\u011flant\u0131 hedefini belirtir (<code><a><\/code> etiketi i\u00e7in).<\/li>\n<li><code>src<\/code>: G\u00f6rsel veya medya dosyas\u0131n\u0131n kayna\u011f\u0131n\u0131 belirtir (<code><img><\/code>, <code><script><\/code> etiketleri i\u00e7in).<\/li>\n<li><code>alt<\/code>: G\u00f6rsel y\u00fcklenemedi\u011finde veya ekran okuyucular taraf\u0131ndan kullan\u0131lan alternatif metni belirtir (<code><img><\/code> etiketi i\u00e7in).<\/li>\n<li><code>class<\/code>: Bir veya daha fazla CSS s\u0131n\u0131f\u0131 ad\u0131 atar. Styling ve JavaScript ile etkile\u015fim i\u00e7in kullan\u0131l\u0131r.<\/li>\n<li><code>id<\/code>: Bir elemente benzersiz bir kimlik atar. JavaScript ile belirli bir elementi hedeflemek veya CSS ile stil vermek i\u00e7in kullan\u0131l\u0131r.<\/li>\n<\/ul>\n<pre><code><a href=\"https:\/\/www.example.com\" target=\"_blank\" class=\"harici-link\">\u00d6rnek Site<\/a><\/pre>\n<p><\/code>\n    <\/li>\n<li>\n<h3>Global Nitelikler<\/h3>\n<p><code>class<\/code>, <code>id<\/code>, <code>style<\/code>, <code>title<\/code>, <code>lang<\/code> gibi nitelikler, hemen hemen t\u00fcm HTML elementlerinde kullan\u0131labilen global niteliklerdir. Bu nitelikler, elementlere genel davran\u0131\u015flar veya bilgiler eklemek i\u00e7in faydal\u0131d\u0131r.<\/p>\n<\/li>\n<\/ul>\n<h3>HTML Yap\u0131s\u0131 ve Semantik Etiketler: Eri\u015filebilir ve Anla\u015f\u0131l\u0131r Web<\/h3>\n<p>Modern HTML (HTML5), web sayfalar\u0131n\u0131n yap\u0131s\u0131n\u0131 daha anlaml\u0131 hale getirmek i\u00e7in semantik etiketler sunar. Bu etiketler, i\u00e7eri\u011fin ne oldu\u011funu taray\u0131c\u0131ya, arama motorlar\u0131na ve geli\u015ftiricilere daha net bir \u015fekilde anlat\u0131r.<\/p>\n<ul>\n<li>\n<h3>Belge Yap\u0131s\u0131<\/h3>\n<p>Bir HTML sayfas\u0131 genellikle bir ba\u015fl\u0131k (header), navigasyon (nav), ana i\u00e7erik (main), b\u00f6l\u00fcmler (section), makaleler (article) ve bir alt bilgi (footer) gibi yap\u0131sal elementlerden olu\u015fur. Bu yap\u0131, sayfan\u0131n okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n<\/li>\n<li>\n<h3>Semantik Etiketler<\/h3>\n<p>HTML5 ile gelen semantik etiketler, <code><\/p>\n<div><\/code> gibi genel kapsay\u0131c\u0131lar yerine i\u00e7eri\u011fin amac\u0131n\u0131 do\u011frudan belirtir:<\/p>\n<ul>\n<li><code><br \/>\n<header><\/code>: Sayfan\u0131n veya bir b\u00f6l\u00fcm\u00fcn ba\u015fl\u0131\u011f\u0131n\u0131, logosunu, navigasyonunu i\u00e7erir.<\/li>\n<li><code><br \/>\n<nav><\/code>: Navigasyon ba\u011flant\u0131lar\u0131n\u0131 i\u00e7erir.<\/li>\n<li><code><main><\/code>: Belgenin ana i\u00e7eri\u011fini i\u00e7erir. Bir sayfada yaln\u0131zca bir <code><main><\/code> elementi olmal\u0131d\u0131r.<\/li>\n<li><code><br \/>\n<article><\/code>: Ba\u011f\u0131ms\u0131z, kendi kendine yeten bir i\u00e7erik par\u00e7as\u0131n\u0131 (blog yaz\u0131s\u0131, haber makalesi vb.) temsil eder.<\/li>\n<li><code><br \/>\n<section><\/code>: Belgenin ba\u011f\u0131ms\u0131z bir b\u00f6l\u00fcm\u00fcn\u00fc temsil eder.<\/li>\n<li><code><br \/>\n<aside><\/code>: Ana i\u00e7erikten ayr\u0131, ancak onunla ili\u015fkili i\u00e7eri\u011fi (kenar \u00e7ubu\u011fu, reklam vb.) temsil eder.<\/li>\n<li><code><br \/>\n<footer><\/code>: Sayfan\u0131n veya bir b\u00f6l\u00fcm\u00fcn alt bilgisini, telif hakk\u0131 bilgilerini, ileti\u015fim detaylar\u0131n\u0131 i\u00e7erir.<\/li>\n<\/ul>\n<pre><code><header>\n    <h2>Sitemizin Ba\u015fl\u0131\u011f\u0131<\/h2>\n    <nav>\n        <ul>\n            <li><a href=\"#\">Ana Sayfa<\/a><\/li>\n            <li><a href=\"#\">Hakk\u0131m\u0131zda<\/a><\/li>\n        <\/ul>\n    <\/nav>\n<\/header>\n<main>\n    <article>\n        <h3>Makale Ba\u015fl\u0131\u011f\u0131<\/h3>\n        <p>Bu bir makale i\u00e7eri\u011fidir.<\/p>\n    <\/article>\n<\/main>\n<footer>\n    <p>&copy; 2023 T\u00fcm Haklar\u0131 Sakl\u0131d\u0131r.<\/p>\n<\/footer><\/pre>\n<p><\/code>\n    <\/li>\n<li>\n<h3>Neden Semantik \u00d6nemlidir?<\/h3>\n<p>Semantik HTML kullanmak, sadece kodunuzu daha okunabilir hale getirmekle kalmaz, ayn\u0131 zamanda eri\u015filebilirlik ve SEO (Arama Motoru Optimizasyonu) i\u00e7in de kritik \u00f6neme sahiptir. Arama motorlar\u0131, semantik etiketleri kullanarak sayfan\u0131z\u0131n i\u00e7eri\u011fini daha iyi anlar ve s\u0131ralamada size avantaj sa\u011flayabilir. Ekran okuyucular, g\u00f6rme engelli kullan\u0131c\u0131lar i\u00e7in sayfa yap\u0131s\u0131n\u0131 daha anlaml\u0131 bir \u015fekilde yorumlayabilir, bu da web sitenizin daha eri\u015filebilir olmas\u0131n\u0131 sa\u011flar.<\/p>\n<\/li>\n<\/ul>\n<h3>Sonu\u00e7<\/h3>\n<p>HTML etiketleri ve elementleri, modern web'in temelini olu\u015fturan yap\u0131 ta\u015flar\u0131d\u0131r. Etiketler, i\u00e7eri\u011fe anlam katan i\u015faretleyicilerken, elementler bu etiketler ve i\u00e7erik aras\u0131ndaki b\u00fct\u00fcnsel birimlerdir. Nitelikler, elementlere ek i\u015flevsellik ve bilgi katarken, semantik etiketler web sayfalar\u0131m\u0131z\u0131n daha anlaml\u0131, eri\u015filebilir ve arama motoru dostu olmas\u0131n\u0131 sa\u011flar. Bu temel kavramlar\u0131 sa\u011flam bir \u015fekilde anlamak, web geli\u015ftirme yolculu\u011funuzda size g\u00fc\u00e7l\u00fc bir ba\u015flang\u0131\u00e7 noktas\u0131 sunacakt\u0131r. Art\u0131k web sayfalar\u0131n\u0131n nas\u0131l in\u015fa edildi\u011fine dair derinlemesine bir anlay\u0131\u015fa sahipsiniz.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<ul>\n<li>\n<h3>HTML etiketleri ve elementleri aras\u0131ndaki temel fark nedir?<\/h3>\n<p>Etiketler (\u00f6rne\u011fin, <code><\/p>\n<p><\/code>), bir elementin ba\u015flang\u0131c\u0131n\u0131 veya sonunu i\u015faret eden anahtar kelimelerdir. Elementler ise a\u00e7\u0131l\u0131\u015f etiketi, kapan\u0131\u015f etiketi (varsa) ve aralar\u0131ndaki i\u00e7eri\u011fin tamam\u0131n\u0131 kapsayan anlaml\u0131 bir birimdir.<\/p>\n<\/li>\n<li>\n<h3>Bo\u015f etiket (self-closing tag) nedir ve neden kullan\u0131l\u0131r?<\/h3>\n<p>Bo\u015f etiketler, herhangi bir i\u00e7eri\u011fi kapsamad\u0131klar\u0131 i\u00e7in kapan\u0131\u015f etiketine ihtiya\u00e7 duymayan etiketlerdir (\u00f6rne\u011fin, <code><img><\/code>, <code><br \/><\/code>). Genellikle tek bir i\u015flevi yerine getirirler ve i\u00e7erik yerine nitelikler arac\u0131l\u0131\u011f\u0131yla bilgi al\u0131rlar.<\/p>\n<\/li>\n<li>\n<h3>HTML nitelikleri (attributes) ne i\u015fe yarar?<\/h3>\n<p>Nitelikler, HTML elementlerine ek bilgi veya \u00f6zellikler sa\u011flamak i\u00e7in kullan\u0131l\u0131r. Elementin davran\u0131\u015f\u0131n\u0131, g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc veya di\u011fer \u00f6zelliklerini \u00f6zelle\u015ftirmeye yararlar (\u00f6rne\u011fin, <code>src<\/code> ile g\u00f6rselin kayna\u011f\u0131n\u0131, <code>href<\/code> ile ba\u011flant\u0131n\u0131n hedefini belirtmek).<\/p>\n<\/li>\n<li>\n<h3>Semantik HTML kullanman\u0131n avantajlar\u0131 nelerdir?<\/h3>\n<p>Semantik HTML, i\u00e7eri\u011fin amac\u0131n\u0131 taray\u0131c\u0131lara, arama motorlar\u0131na ve geli\u015ftiricilere daha net bir \u015fekilde anlat\u0131r. Bu, web sitelerinin eri\u015filebilirli\u011fini art\u0131r\u0131r, arama motoru optimizasyonuna (SEO) katk\u0131da bulunur ve kodun okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n<\/li>\n<li>\n<h3><code><\/p>\n<div><\/code> ve <code><\/p>\n<section><\/code> etiketleri aras\u0131ndaki fark nedir?<\/h3>\n<p><code><\/p>\n<div><\/code>, genel ama\u00e7l\u0131 bir kapsay\u0131c\u0131d\u0131r ve semantik bir anlam ta\u015f\u0131maz; genellikle CSS ile stil vermek veya JavaScript ile manip\u00fcle etmek i\u00e7in kullan\u0131l\u0131r. <code><\/p>\n<section><\/code> ise semantik bir etikettir ve belgenin tematik olarak ili\u015fkili bir b\u00f6l\u00fcm\u00fcn\u00fc temsil eder. Bir <code><\/p>\n<section><\/code> genellikle bir ba\u015fl\u0131k (<code><\/p>\n<h2><\/code>, <code><\/p>\n<h3><\/code> vb.) i\u00e7ermelidir.<\/p>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"Web sitelerinin iskeletini olu\u015fturan HTML (HyperText Markup Language), internetin g\u00f6rsel d\u00fcnyas\u0131n\u0131n temelidir. Bir web sayfas\u0131ndaki t\u00fcm i\u00e7erik; metin&#8230;","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-38352","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 ve Elementlerini Anlamak: Web&#039;in Temel 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-ve-elementlerini-anlamak-webin-temel-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 ve Elementlerini Anlamak: Web&#039;in Temel Yap\u0131 Ta\u015flar\u0131\" \/>\n<meta property=\"og:description\" content=\"Web sitelerinin iskeletini olu\u015fturan HTML (HyperText Markup Language), internetin g\u00f6rsel d\u00fcnyas\u0131n\u0131n temelidir. Bir web sayfas\u0131ndaki t\u00fcm i\u00e7erik; metin...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-ve-elementlerini-anlamak-webin-temel-yapi-taslari\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-29T12:30:37+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=\"10 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-ve-elementlerini-anlamak-webin-temel-yapi-taslari\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-ve-elementlerini-anlamak-webin-temel-yapi-taslari\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"HTML Etiketleri ve Elementlerini Anlamak: Web&#8217;in Temel Yap\u0131 Ta\u015flar\u0131\",\"datePublished\":\"2026-01-29T12:30:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-ve-elementlerini-anlamak-webin-temel-yapi-taslari\/\"},\"wordCount\":1873,\"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-ve-elementlerini-anlamak-webin-temel-yapi-taslari\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-ve-elementlerini-anlamak-webin-temel-yapi-taslari\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-ve-elementlerini-anlamak-webin-temel-yapi-taslari\/\",\"name\":\"HTML Etiketleri ve Elementlerini Anlamak: Web'in Temel Yap\u0131 Ta\u015flar\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-29T12:30:37+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-ve-elementlerini-anlamak-webin-temel-yapi-taslari\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-ve-elementlerini-anlamak-webin-temel-yapi-taslari\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-ve-elementlerini-anlamak-webin-temel-yapi-taslari\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML Etiketleri ve Elementlerini Anlamak: Web&#8217;in Temel 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 ve Elementlerini Anlamak: Web'in Temel 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-ve-elementlerini-anlamak-webin-temel-yapi-taslari\/","og_locale":"tr_TR","og_type":"article","og_title":"HTML Etiketleri ve Elementlerini Anlamak: Web'in Temel Yap\u0131 Ta\u015flar\u0131","og_description":"Web sitelerinin iskeletini olu\u015fturan HTML (HyperText Markup Language), internetin g\u00f6rsel d\u00fcnyas\u0131n\u0131n temelidir. Bir web sayfas\u0131ndaki t\u00fcm i\u00e7erik; metin...","og_url":"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-ve-elementlerini-anlamak-webin-temel-yapi-taslari\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-29T12:30:37+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"10 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-ve-elementlerini-anlamak-webin-temel-yapi-taslari\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-ve-elementlerini-anlamak-webin-temel-yapi-taslari\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"HTML Etiketleri ve Elementlerini Anlamak: Web&#8217;in Temel Yap\u0131 Ta\u015flar\u0131","datePublished":"2026-01-29T12:30:37+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-ve-elementlerini-anlamak-webin-temel-yapi-taslari\/"},"wordCount":1873,"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-ve-elementlerini-anlamak-webin-temel-yapi-taslari\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-ve-elementlerini-anlamak-webin-temel-yapi-taslari\/","url":"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-ve-elementlerini-anlamak-webin-temel-yapi-taslari\/","name":"HTML Etiketleri ve Elementlerini Anlamak: Web'in Temel Yap\u0131 Ta\u015flar\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-29T12:30:37+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-ve-elementlerini-anlamak-webin-temel-yapi-taslari\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/html-etiketleri-ve-elementlerini-anlamak-webin-temel-yapi-taslari\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/html-etiketleri-ve-elementlerini-anlamak-webin-temel-yapi-taslari\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML Etiketleri ve Elementlerini Anlamak: Web&#8217;in Temel 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\/38352","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=38352"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/38352\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=38352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=38352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=38352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}