HTML 5 İle Web Geliştirme #1
Html5 İle Web Geliştirme konuma hoşgeldiniz bu konumda html5'e temel bir giriş yapacağız. Hadi Başlıyalım.
HTML Nedir?
HTML, Hyper Text Markup Language demektir Türkçesi Hiper Metin İşaretleme Dili anlamına gelmektedir.
Web sayfalarını oluşturmak için kullanılır, mesela web sitesine girdiğinizde gördüğünüz metinler, başlıklar, resimler, sesler, videolar ve bağlantılar hepsi HTML sayesinde yapılandırılır.
Html dosya uzantısı adı gibidir örneğin index.html gibi.
HTML tag yani etiketlerden oluşur.
Örneğin
Aşağıdaki sadece açılan bir etiket örneği.
<br>
Aşağıdaki açılıp kapanan bir etiket örneği.
<p>paragraf</p>
Html5 İle Web Geliştirme konuma hoşgeldiniz bu konumda html5'e temel bir giriş yapacağız. Hadi Başlıyalım.HTML Nedir?
HTML, Hyper Text Markup Language demektir Türkçesi Hiper Metin İşaretleme Dili anlamına gelmektedir.
Web sayfalarını oluşturmak için kullanılır, mesela web sitesine girdiğinizde gördüğünüz metinler, başlıklar, resimler, sesler, videolar ve bağlantılar hepsi HTML sayesinde yapılandırılır.
Html dosya uzantısı adı gibidir örneğin index.html gibi.
HTML tag yani etiketlerden oluşur.
Örneğin
Aşağıdaki sadece açılan bir etiket örneği.
<br>
Aşağıdaki açılıp kapanan bir etiket örneği.
<p>paragraf</p>
Code Editor (Kod Editör) Nedir?
Code Editör kod yazmamıza yarayan html, css, js, c++, java ve python gibi etiket ve programlama dillerini yazabildiğimiz yazılımlardır.
Visual Studio Code (VS Code)
Günümüz dünyasının en popüler ve en çok kullanılan editörüdür. Microsoft tarafından geliştirilmiştir. Çok hızlıdır ve binlerce eklenti (extension) desteği sayesinde her dilde (HTML, Python, C++, JavaScript vb.) kod yazmanıza olanak tanır.
Sublime Text
Çok hafif ve hızlı bir editördür. Büyük dosyaları bile saniyeler içinde açabilir. Sade ve şık bir arayüz isteyenler için idealdir.
Atom
GitHub tarafından geliştirilmiş (artık yerini büyük oranda VS Code'a bırakmış olsa da hala kullanılan) açık kaynaklı bir editördür. Tamamen kişiselleştirilebilir olmasıyla tanınır.
Notepad++
En hafif kod editörüdür. Bütün bilgisayarlar kaldırır. Çok az kaynak tüketir.
Code Editör kod yazmamıza yarayan html, css, js, c++, java ve python gibi etiket ve programlama dillerini yazabildiğimiz yazılımlardır.
Visual Studio Code (VS Code)
Günümüz dünyasının en popüler ve en çok kullanılan editörüdür. Microsoft tarafından geliştirilmiştir. Çok hızlıdır ve binlerce eklenti (extension) desteği sayesinde her dilde (HTML, Python, C++, JavaScript vb.) kod yazmanıza olanak tanır.
Sublime Text
Çok hafif ve hızlı bir editördür. Büyük dosyaları bile saniyeler içinde açabilir. Sade ve şık bir arayüz isteyenler için idealdir.
Atom
GitHub tarafından geliştirilmiş (artık yerini büyük oranda VS Code'a bırakmış olsa da hala kullanılan) açık kaynaklı bir editördür. Tamamen kişiselleştirilebilir olmasıyla tanınır.
Notepad++
En hafif kod editörüdür. Bütün bilgisayarlar kaldırır. Çok az kaynak tüketir.
Tarayıcı (Browser) Nedir?
Tarayıcılar sayfayı html kodlarına göre yapılandırıp düzenleyerek kullanıcıya gösterir.
Tarayıcılara örnek verecek olursak Chrome, Edge, Safari, Mozilla Firefox ve Opera'dır.
Tarayıcılar sayfayı html kodlarına göre yapılandırıp düzenleyerek kullanıcıya gösterir.
Tarayıcılara örnek verecek olursak Chrome, Edge, Safari, Mozilla Firefox ve Opera'dır.
Ağ (Network) Nedir?
Evdeki veya iş yerindeki cihazların birbirlerine bağlanması ile ağ oluşur, bu ağlara LAN (Local Area Network = Yerel Alan Ağı) denir.
Yerel ağlar ise birbirine bağlanarak WAN (Wide Area Network = Geniş Alan Ağı) oluşturur.
Bu ağlarda birleşip WWW (World Wide Web) oluşturur.
Evdeki veya iş yerindeki cihazların birbirlerine bağlanması ile ağ oluşur, bu ağlara LAN (Local Area Network = Yerel Alan Ağı) denir.
Yerel ağlar ise birbirine bağlanarak WAN (Wide Area Network = Geniş Alan Ağı) oluşturur.
Bu ağlarda birleşip WWW (World Wide Web) oluşturur.
Sunucu (Server) Nedir?
Sunucular, evimizdeki bilgisayarlardan farklı olarak sürekli olarak çalışabilecek donanımda olan bilgisayarlardır.
Web sitelerini depolamak için sunuculara ihtiyacımız vardır.
Şimdi sunucuların mantığını özet geçelim.
İstek (Request)
Bir web sitesine girmek için adres yazdığımızda ilgili olan sunucuya istek (request) gönderir.
Daha sonra Sunucu (Server) bu İsteği (request) alır, Veri Tabanından(Database) gerekli dosyaları hazırlar.
Yanıt (Response)
Sunucu hazırladığı bu verileri bizim bilgisayarınıza gönderir ve sayfa açılır.
Sunucular, evimizdeki bilgisayarlardan farklı olarak sürekli olarak çalışabilecek donanımda olan bilgisayarlardır.
Web sitelerini depolamak için sunuculara ihtiyacımız vardır.
Şimdi sunucuların mantığını özet geçelim.
İstek (Request)
Bir web sitesine girmek için adres yazdığımızda ilgili olan sunucuya istek (request) gönderir.
Daha sonra Sunucu (Server) bu İsteği (request) alır, Veri Tabanından(Database) gerekli dosyaları hazırlar.
Yanıt (Response)
Sunucu hazırladığı bu verileri bizim bilgisayarınıza gönderir ve sayfa açılır.
Hosting (Site Barındırma) Nedir?
Sitemizi internette yayınlamak için kiralanan Sunuculara hosting denir.
Bir web sitesi oluşturduğumuzda ; kodlar, resimler, videolar ve metinler ve bunlar gibi dosyaları saklamak için Hosting kiralarız.
Bu hosting'ler sitemizi 7/24 erişilebilir yapar.
Sitemizi internette yayınlamak için kiralanan Sunuculara hosting denir.
Bir web sitesi oluşturduğumuzda ; kodlar, resimler, videolar ve metinler ve bunlar gibi dosyaları saklamak için Hosting kiralarız.
Bu hosting'ler sitemizi 7/24 erişilebilir yapar.
Alan Adı (Domain) Nedir?
Alan Adı (Domain) sitemizin IP adresini bir ad ile ilişkilendirir.
Mantığı bizim bir evimiz var bu evimizin bir konumu var 40.009694, 32.820389 gibi ama biz buraya bir adres veriyoruz Ovacık, 06280 Keçiören/Ankara gibi domainlerde web sitelerinin IP'lerine verilen adreslerdir.
Alan adları(Domain) sitemizin adını, türünü ve ülke kodunu belirtir.
Bu alan adlarının yani domainlerin uzantıları vardır bunlar:
Ticari kurumlarda .com
Kamu kurumlarında, Derneklerde, Vakıflarda .org
İnternet servis sağlayıcısında ise .net
Bağlantıların uzantıların peşinede ülke kodları gelir:
Türkiye .tr
Azerbaycan .az
Kazakistan .kz
Özbekistan .uz
Kırgızistan .kg
Türkmenistan .tg
Kuzey Kıbrıs Türk Cumhuriyeti .cy
Alan Adı (Domain) sitemizin IP adresini bir ad ile ilişkilendirir.
Mantığı bizim bir evimiz var bu evimizin bir konumu var 40.009694, 32.820389 gibi ama biz buraya bir adres veriyoruz Ovacık, 06280 Keçiören/Ankara gibi domainlerde web sitelerinin IP'lerine verilen adreslerdir.
Alan adları(Domain) sitemizin adını, türünü ve ülke kodunu belirtir.
Bu alan adlarının yani domainlerin uzantıları vardır bunlar:
Ticari kurumlarda .com
Kamu kurumlarında, Derneklerde, Vakıflarda .org
İnternet servis sağlayıcısında ise .net
Bağlantıların uzantıların peşinede ülke kodları gelir:
Türkiye .tr
Azerbaycan .az
Kazakistan .kz
Özbekistan .uz
Kırgızistan .kg
Türkmenistan .tg
Kuzey Kıbrıs Türk Cumhuriyeti .cy
HTML Taglarının Özellikleri
Her HTML tag'ının özellikleri vardır.
HTML taglarının temel yapısı şu şekildir:
<p özellik="değer">Tag İçeriği</p>
HTML Basic Tags (HTML Temel Etiketler):
HTML Temel tagları aşağıdaki gibidir:
Her HTML tag'ının özellikleri vardır.
HTML taglarının temel yapısı şu şekildir:
<p özellik="değer">Tag İçeriği</p>
HTML Basic Tags (HTML Temel Etiketler):
HTML Temel tagları aşağıdaki gibidir:
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Tarayıcı Sekmesi Başlığı</title>
</head>
<body>
<h3>Başlık</h3>
<p>Paragraf Paragraf Paragraf</p>
</body>
</html><!DOCTYPE html>
Tarayıcıya bu etiket dizilerinin html5 standartları ile yazıldığını tanımlar.
<html lang="tr"></html>
Sayfanın en kök etiketidir sayfanın başlangıcını ve bitişini belirtir. Lang="tr" ise sayfa içeriğinin Türkçe olduğunu belirtir.
<head></head>
Sayfanın meta bilgilerinin saklandığı kısımdır. Başlıkları, Karakter Setini, Stil Dosyasını ve Meta bilgilerini saklayan bir etikettir.
<body></body>
Web sayfasında kullanıcının gördüğü tüm içeriklerin tutulduğu etikettir. Burada Metinler, Resimler, Videolar ve Müzikler yer alır. Web sayfasını ana gövde kısmıdır.
<title></title>
Tarayıcının sekme kısmında görünen başlığı tanımlar. Arama Motoru Sonuçlarında (SEO) görünen başlık budur. head etiketinin içinde yer alır.
<meta charset="UTF-8">
Sayfanın karakter setini belirtir. UTF-8, Türkçe karakterlerin ç, ş, ı, ğ, ü ve ö harflerinin sorunsuz doğru bir şekilde gözükmesini sağlar.
<h1></h1>
<h6></h6>
H1 en büyük başlığı, h6 en küçük başlığı belirtir. SEO açısından önemlidir.
<p></p>
Paragraf etiketidir. Metinleri paragraflara bölmek için kullanılır.
<br>
Satır sonu oluşturmak için kullanılır. Bir paragrafı bölmeden sadece alt satıra geçmek için bu etiketi kullanırız.
<hr>
Web sayfamızda yatay bir çizgi oluşturur. İçeriği birbirinden ayırmak için bir ayraç görevi kazanmıştır.
<!--Bu bir Yorum Satırıdır-->
HTML'de kod yazarken bazen kodların yanına veya altına Yorum olarak yazılır ve web sayfasını hiçbir şekilde etkilemez.
Yorum satırının kullanıldığı başka bir alanda html'de kod bloğunu devre dışı bırakmak istediğimizde yorum içine alabiliriz.
Bu öğrendiklerimizle bir örnek bir sayfa yapalım:
Tarayıcıya bu etiket dizilerinin html5 standartları ile yazıldığını tanımlar.
<html lang="tr"></html>
Sayfanın en kök etiketidir sayfanın başlangıcını ve bitişini belirtir. Lang="tr" ise sayfa içeriğinin Türkçe olduğunu belirtir.
<head></head>
Sayfanın meta bilgilerinin saklandığı kısımdır. Başlıkları, Karakter Setini, Stil Dosyasını ve Meta bilgilerini saklayan bir etikettir.
<body></body>
Web sayfasında kullanıcının gördüğü tüm içeriklerin tutulduğu etikettir. Burada Metinler, Resimler, Videolar ve Müzikler yer alır. Web sayfasını ana gövde kısmıdır.
<title></title>
Tarayıcının sekme kısmında görünen başlığı tanımlar. Arama Motoru Sonuçlarında (SEO) görünen başlık budur. head etiketinin içinde yer alır.
<meta charset="UTF-8">
Sayfanın karakter setini belirtir. UTF-8, Türkçe karakterlerin ç, ş, ı, ğ, ü ve ö harflerinin sorunsuz doğru bir şekilde gözükmesini sağlar.
<h1></h1>
<h6></h6>
H1 en büyük başlığı, h6 en küçük başlığı belirtir. SEO açısından önemlidir.
<p></p>
Paragraf etiketidir. Metinleri paragraflara bölmek için kullanılır.
<br>
Satır sonu oluşturmak için kullanılır. Bir paragrafı bölmeden sadece alt satıra geçmek için bu etiketi kullanırız.
<hr>
Web sayfamızda yatay bir çizgi oluşturur. İçeriği birbirinden ayırmak için bir ayraç görevi kazanmıştır.
<!--Bu bir Yorum Satırıdır-->
HTML'de kod yazarken bazen kodların yanına veya altına Yorum olarak yazılır ve web sayfasını hiçbir şekilde etkilemez.
Yorum satırının kullanıldığı başka bir alanda html'de kod bloğunu devre dışı bırakmak istediğimizde yorum içine alabiliriz.
Bu öğrendiklerimizle bir örnek bir sayfa yapalım:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3>I. Devletin şekli:</h3>
<p>MADDE 1- Türkiye Devleti bir cumhuriyettir.</p>
<hr>
<h3>II. Cumhuriyetin nitelikleri:</h3>
<p>MADDE 2- Türkiye Cumhuriyeti, toplumun huzuru, millî dayanışma ve adalet anlayışı içinde, insan haklarına saygılı,<br> Atatürk milliyetçiliğine bağlı, başlangıçta belirtilen temel ilkelere dayanan,<br> demokratik, lâik ve sosyal bir hukuk devletidir.</p>
<hr>
<h3>III. Devletin bütünlüğü, resmî dili, bayrağı, millî marşı ve başkenti:</h3>
<p>MADDE 3- Türkiye Devleti, ülkesi ve milletiyle bölünmez bir bütündür. Dili Türkçedir. Bayrağı, şekli kanununda belirtilen,<br> beyaz ay yıldızlı al bayraktır. Millî marşı “İstiklal Marşı”dır. Başkenti Ankara’dır.</p>
<hr>
<h3>IV. Değiştirilemeyecek hükümler:</h3>
<p>MADDE 4- Anayasanın 1. maddesindeki Devletin şeklinin Cumhuriyet olduğu hakkındaki hüküm ile,<br> 2. maddesindeki Cumhuriyetin nitelikleri ve 3. maddesi hükümleri değiştirilemez ve değiştirilmesi teklif edilemez.</p>
</body>
</html>
HTML Attributes (HTML Nitelikleri):
HTML dilinde bazı özellikler vardır, bunlar:
Id Attributes (Niteliği)
Bir öğeye benzersiz bir kimlik verir. Web sayfasında aynı id'den sadece 1 tane bulunur 2.ncisi olmaz. Belirli bir öğeye, diğerlerinden farklı ve özel bir tasarım uygulamak istediğimizde id niteliğini kullanırız.
<h1 id="baslik1">Başlık</h1>
Class Attributes (Sınıf Niteliği)
HTML'de class niteliği, aynı özelliklere sahip birden fazla öğeyi gruplandırmak için kullanılan bir etikettir. Class ortak bir stil katagorisi oluşturmamıza olanak verir.
<p class="paragraphs">paragraf</p>
Style CSS Attributes (Stil Nitelikleri)
Style niteliği Web sayfasının nasıl görüneceğini ayarlamak için kullanılır.
<p style="color: red; font-size: 32px;">Bu kırmızı renkte, 32 pixel büyüklüğünde bir paragraftır</p>
Title Attributes
HTML etiketinin üzerine gelince bir kutu
içinde açıklama metni görünmesini sağlar.
<h2 title="bu başlık">Titleli Başlık</h2>
HTML dilinde bazı özellikler vardır, bunlar:
Id Attributes (Niteliği)
Bir öğeye benzersiz bir kimlik verir. Web sayfasında aynı id'den sadece 1 tane bulunur 2.ncisi olmaz. Belirli bir öğeye, diğerlerinden farklı ve özel bir tasarım uygulamak istediğimizde id niteliğini kullanırız.
<h1 id="baslik1">Başlık</h1>
Class Attributes (Sınıf Niteliği)
HTML'de class niteliği, aynı özelliklere sahip birden fazla öğeyi gruplandırmak için kullanılan bir etikettir. Class ortak bir stil katagorisi oluşturmamıza olanak verir.
<p class="paragraphs">paragraf</p>
Style CSS Attributes (Stil Nitelikleri)
Style niteliği Web sayfasının nasıl görüneceğini ayarlamak için kullanılır.
<p style="color: red; font-size: 32px;">Bu kırmızı renkte, 32 pixel büyüklüğünde bir paragraftır</p>
Title Attributes
HTML etiketinin üzerine gelince bir kutu
içinde açıklama metni görünmesini sağlar.
<h2 title="bu başlık">Titleli Başlık</h2>
SEO Nedir?
Search Engine Optimization Kelimelerinin kısaltılmışıdır Türkçe anlamı Arama Motoru Optimizasyonudur. Web sitenizin google gibi arama motorlarında daha görünür olabilmesi için yapılan tüm iyileştirme çalışmalarına SEO denir. Basitçe anlatmak gerekirse; bir kullanıcı Google'da en iyi bilgisayar diye arama yaptığında bizim sitemizin ilk sıralara çıkması SEO'nun başarısıdır.
SEO Title
SEO açısından bilinmesi gereken en önemli konulardan biride title etiketidir. Eğerki aranan kelimlerde sizin title'ınız varsa arama sonuçlarında gözükebilir.
Örneğin sizin bir Gaming Laptoplar satan bir web siteniz var doğal olarak oyuncu Laptopları arayan insanların en çok aradığı kelime Gaming Laptop'lardır o durumda title şunun gibi olmalıdır:
Search Engine Optimization Kelimelerinin kısaltılmışıdır Türkçe anlamı Arama Motoru Optimizasyonudur. Web sitenizin google gibi arama motorlarında daha görünür olabilmesi için yapılan tüm iyileştirme çalışmalarına SEO denir. Basitçe anlatmak gerekirse; bir kullanıcı Google'da en iyi bilgisayar diye arama yaptığında bizim sitemizin ilk sıralara çıkması SEO'nun başarısıdır.
SEO Title
SEO açısından bilinmesi gereken en önemli konulardan biride title etiketidir. Eğerki aranan kelimlerde sizin title'ınız varsa arama sonuçlarında gözükebilir.
Örneğin sizin bir Gaming Laptoplar satan bir web siteniz var doğal olarak oyuncu Laptopları arayan insanların en çok aradığı kelime Gaming Laptop'lardır o durumda title şunun gibi olmalıdır:
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gaming Laptop Modelleri ve Fiyatları</title>
</head>
<body>
</body>
</html>SEO Meta Etiketleri
SEO açısından önemli etiketlerden biride "meta" etiketidir, bu etikete name özelliği verip description niteliği yüklediğinizde content kısmına yazdığınız yazı da SEO açısından önemlidir. Bunun örneği aşağıdaki gibidir.
SEO açısından önemli etiketlerden biride "meta" etiketidir, bu etikete name özelliği verip description niteliği yüklediğinizde content kısmına yazdığınız yazı da SEO açısından önemlidir. Bunun örneği aşağıdaki gibidir.
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="En güçlü gaming laptop modellerini ve oyuncu ekipmanlarını keşfedin. Ücretsiz kargo, taksit seçenekleri ve en iyi fiyatlarla performans canavarı bilgisayarını hemen seç!">
<title>Gaming Laptop Modelleri Ve Fiyatları</title>
</head>
<body>
</body>
</html>Başka bir SEO için önemli olan meta özelliği ise "keywords" yani adındanda anlaşılacağı gibi anahtar kelimelerdir. Anahtar kelimelerde max 60 karakter kullanılabilir. Keywords ile yazılan kelimeler arama sonuçlarında sitemizi daha üste çıkarır. Kodlar aşağıdaki gibi.
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="laptop, bilgisayar, gaming bilgisayar, gaming laptop, oyuncu bilgisayar, oyuncu laptop, gaming laptop modelleri, oyuncu bilgisayarı fiyatları, RTX 5070 laptop, Asus ROG, MSI, Monster, ucuz oyun bilgisayarı, en iyi gaming laptop 2026">
<title>Gaming Laptop Modelleri Ve Fiyatları</title>
</head>
<body>
</body>
</html>Şimdide meta etiketlerimizi toparlayalım.
Aşağıya Seo ile ilgili description ve keywords meta kodlarımızı yazmış olduk.
Aşağıya Seo ile ilgili description ve keywords meta kodlarımızı yazmış olduk.
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="En güçlü gaming laptop modellerini ve oyuncu ekipmanlarını keşfedin. Ücretsiz kargo, taksit seçenekleri ve en iyi fiyatlarla performans canavarı bilgisayarını hemen seç!">
<meta name="keywords" content="gaming laptop modelleri, oyuncu bilgisayarı fiyatları, RTX 5070 laptop, Asus ROG, MSI, Monster, ucuz oyun bilgisayarı, en iyi gaming laptop 2026">
<title>Gaming Laptop Modelleri Ve Fiyatları</title>
</head>
<body>
</body>
</html>SEO Konu Başlıkları (h1-h6)
h1 ve h2 gibi başlık etiketleride SEO açısından önemlidir arama motorları arama yaparken bu başlıklarıda tarayarak arama yapar. Örneğin aşağıda gaming bilgisayarlar ile ilgili başlıklar vardır işte bunlar Arama Motorları web sitelerini tararken bu başlıklarıda tarar.
h1 ve h2 gibi başlık etiketleride SEO açısından önemlidir arama motorları arama yaparken bu başlıklarıda tarayarak arama yapar. Örneğin aşağıda gaming bilgisayarlar ile ilgili başlıklar vardır işte bunlar Arama Motorları web sitelerini tararken bu başlıklarıda tarar.
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="En güçlü gaming laptop modellerini ve oyuncu ekipmanlarını keşfedin. Ücretsiz kargo, taksit seçenekleri ve en iyi fiyatlarla performans canavarı bilgisayarını hemen seç!">
<meta name="keywords" content="gaming laptop modelleri, oyuncu bilgisayarı fiyatları, RTX 5070 laptop, Asus ROG, MSI, Monster, ucuz oyun bilgisayarı, en iyi gaming laptop 2026">
<title>Gaming Laptop Modelleri Ve Fiyatları</title>
</head>
<body>
<h2>Asus Gaming Laptoplar</h2>
<h2>MSI Gaming Laptoplar</h2>
<h2>Lenovo Gaming Laptoplar</h2>
<h2>Hp Gaming Laptoplar</h2>
<h2>Monster Gaming Laptoplar</h2>
<h2>Casper Excalibur Gaming Laptoplar</h2>
</body>
</html>Semantik (Anlamsal) Web Nedir?
semantik kelimelerin ve cümlelerin anlamlarını inceleyen bilim dalıdır.
HTML'de semantik web, içeriğin nasıl göründüğü değil, aynı zamanda ne anlama geldiğini hem tarayıcılara hem de arama motorlarına açıkça belirten bir kodlama yaklaşımıdır.
Eskiden herşey için <div> veya <span> etiketleri kullanılırdı. Ancak bu etiketler tarayıcıya içeriğin bir başlık mı, menü mü veya makale mi olduğu konusunda hiç bir bilgi vermezdi. İşte burada Semantik etiketler devreye girdi.
Üst Ve Navigasyon Bölümleri:
<header>: (Başlık Grubu): Sayfanın veya bir bölümün giriş kısmıdır. Genellikle logo, site adı, arama çubuğu ve ana navigasyonu barındırır. Sadece sayfa başında değil, bir <article> içinde de kullanılabilir.
<nav>: (Gezinti Menüsü): Sayfalar arası geçişi sağlayan ana link grupları için ayrılmıştır. Genellikle <ul> ve <li> etiketleriyle birlikte kullanılır.
Ana İçerik Alanı:
<main> (Birincil İçerik): Sayfanın benzersiz ve ana konusunu temsil eder. Bir belgede sadece bir tane bulunmalı ve yan çubuk (sidebar) gibi tekrarlanan öğeleri içermemelidir.
<article> (Bağımsız Makale): Kendi başına bir anlam ifade eden, başka bir yere taşındığında hala okunabilir olan içeriklerdir. Örn: Blog yazıları, forum mesajları veya ürün kartları.
<section> (Tematik Bölüm): Belgeyi mantıksal parçalara ayırır. Bir <section> etiketi genellikle kendine ait bir başlığa (<h2>-<h6>) sahip olmalıdır.
Destekleyici Ve Alt Bölümler:
<aside> (Kenar İçeriği): Ana içerikle dolaylı yoldan ilişkili ek bilgilerdir. Yan menüler, reklam alanları, "Benzer Yazılar" kutuları veya terim sözlükleri için idealdir.
<footer> (Sayfa Sonu / İmza): Bölümün veya sayfanın bitişini temsil eder. Telif hakları, iletişim bilgileri ve sitenin haritası gibi "dipnot" niteliğindeki bilgiler burada yer alır.
Şimdi yukarıdaki etiketler ile html kodları yazalım.
semantik kelimelerin ve cümlelerin anlamlarını inceleyen bilim dalıdır.
HTML'de semantik web, içeriğin nasıl göründüğü değil, aynı zamanda ne anlama geldiğini hem tarayıcılara hem de arama motorlarına açıkça belirten bir kodlama yaklaşımıdır.
Eskiden herşey için <div> veya <span> etiketleri kullanılırdı. Ancak bu etiketler tarayıcıya içeriğin bir başlık mı, menü mü veya makale mi olduğu konusunda hiç bir bilgi vermezdi. İşte burada Semantik etiketler devreye girdi.
Üst Ve Navigasyon Bölümleri:
<header>: (Başlık Grubu): Sayfanın veya bir bölümün giriş kısmıdır. Genellikle logo, site adı, arama çubuğu ve ana navigasyonu barındırır. Sadece sayfa başında değil, bir <article> içinde de kullanılabilir.
<nav>: (Gezinti Menüsü): Sayfalar arası geçişi sağlayan ana link grupları için ayrılmıştır. Genellikle <ul> ve <li> etiketleriyle birlikte kullanılır.
Ana İçerik Alanı:
<main> (Birincil İçerik): Sayfanın benzersiz ve ana konusunu temsil eder. Bir belgede sadece bir tane bulunmalı ve yan çubuk (sidebar) gibi tekrarlanan öğeleri içermemelidir.
<article> (Bağımsız Makale): Kendi başına bir anlam ifade eden, başka bir yere taşındığında hala okunabilir olan içeriklerdir. Örn: Blog yazıları, forum mesajları veya ürün kartları.
<section> (Tematik Bölüm): Belgeyi mantıksal parçalara ayırır. Bir <section> etiketi genellikle kendine ait bir başlığa (<h2>-<h6>) sahip olmalıdır.
Destekleyici Ve Alt Bölümler:
<aside> (Kenar İçeriği): Ana içerikle dolaylı yoldan ilişkili ek bilgilerdir. Yan menüler, reklam alanları, "Benzer Yazılar" kutuları veya terim sözlükleri için idealdir.
<footer> (Sayfa Sonu / İmza): Bölümün veya sayfanın bitişini temsil eder. Telif hakları, iletişim bilgileri ve sitenin haritası gibi "dipnot" niteliğindeki bilgiler burada yer alır.
Şimdi yukarıdaki etiketler ile html kodları yazalım.
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantik HTML5 Taslağı</title>
</head>
<body>
<header>
<h1>Web Sitemin Başlığı</h1>
<p>Slogan veya kısa açıklama buraya gelir.</p>
<nav>
<ul>
<li><a href="#anasayfa">Anasayfa</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#hakkimizda">Hakkımızda</a></li>
<li><a href="#iletisim">İletişim</a></li>
</ul>
</nav>
</header>
<hr>
<main>
<section id="blog">
<h2>Son Blog Yazıları</h2>
<article>
<h3>HTML5 Semantik Etiketler Nedir?</h3>
<p>Semantik etiketler, içeriğin ne olduğunu hem tarayıcıya hem de geliştiriciye açıkça belirtir...</p>
<a href="#">Devamını oku...</a>
</article>
<br>
<article>
<h3>CSS Flexbox Rehberi</h3>
<p>Esnek kutu yerleşimi ile modern tasarımlar oluşturmak artık çok daha kolay...</p>
<a href="#">Devamını oku...</a>
</article>
</section>
<aside>
<h4>Kategoriler</h4>
<ul>
<li>Web Tasarım</li>
<li>Programlama</li>
<li>Teknoloji Haberleri</li>
</ul>
</aside>
</main>
<hr>
<footer>
<p>© 2026 Tüm Hakları Saklıdır. | <a href="mailto:[email protected]">İletişime Geç</a></p>
<address>
Erzurum, Türkiye
</address>
</footer>
</body>
</html>
