HTML (HyperText Markup Language), web sitelerinin temel yapı taşı olan bir işaretleme dilidir. HTML, bir web sayfasındaki metinleri, görselleri, videoları ve diğer içerikleri yapılandırmaya yarar. Web tarayıcıları, HTML kodlarını okuyarak sayfanın nasıl görüneceğini belirler.
Bir web sitesi inşa etmeye başlamadan önce HTML’in nasıl çalıştığını anlamak önemlidir. Bunu anlamanın en kolay yolu, HTML’i bir bina inşa etmek gibi düşünmektir. HTML, bu binanın iskeleti gibidir. Üzerine CSS ile boya ve dekor ekler, JavaScript ile interaktif özellikler kazandırırsınız.
HTML ile sayfa düzeninizi oluştururken, çeşitli etiketler kullanarak farklı içeriklerin nasıl yerleştirileceğini belirlersiniz. Bu etiketler, sayfanın yapısını ve düzenini kurmanızı sağlar. Ancak, HTML’in gücü yalnızca etiketlerin çokluğunda değil, doğru yapılandırılmış bir sayfa ile içeriklerin anlamlı bir şekilde sunulmasında yatmaktadır.
Yapısal etiketler, web sayfanızın temel iskeletini oluşturur. Bu yazımızda, HTML’in temel yapı taşlarını keşfederek, bir web sayfasının düzenini oluşturan yapısal etiketlere daha yakından bakacağız. Hazır olun, çünkü HTML’in derinliklerine inmeye başlıyoruz!
HTML'in Temel Yapısı
HTML, "etiket" (İngilizce “tag”) adı verilen özel işaretlemelerle oluşturulur. HTML kodları her zaman <html> etiketi ile başlar ve </html> etiketi ile biter. Basit bir HTML sayfası şu şekildedir:
<!DOCTYPE html>
<html>
<head>
<title>Benim İlk Web Sayfam</title>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu benim ilk HTML sayfam.</p>
</body>
</html>Bu kodu bir metin editörüne (örneğin Notepad veya Visual Studio Code) yapıştırıp .html uzantısıyla kaydederseniz ve bir tarayıcıda açarsanız, "Merhaba Dünya!" yazısını görebilirsiniz.
1.<html>Etiketi Nedir ?
<html> etiketi, bir HTML belgesinin temel taşıdır. Web tarayıcıları, sayfanın HTML yapısını anlamak için mutlaka bu etiketi arar. Şimdi bu etiketin önemini ve nasıl kullanıldığını daha detaylı inceleyelim.
a) <html> Etiketinin Görevi
HTML belgesinin başlangıcını ve sonunu belirler.
Web tarayıcısına içeriğin HTML formatında olduğunu bildirir.
Tüm diğer HTML etiketleri <html> etiketinin içinde yer alır.
b) <html> Etiketinin Yapısı
Bir HTML sayfasının temel iskeleti şu şekildedir:
<!DOCTYPE html>
<html lang="tr">
<head>
<title>Örnek Sayfa</title>
</head>
<body>
<h1>Merhaba Dünya!</h1>
</body>
</html>Burada <html> etiketi, <head> ve <body> bölümlerini içine alarak sayfanın tüm yapısını kapsar.
c) <html> Etiketinde Kullanılabilen Öznitelikler (Attributes)
Öznitelik | Açıklama | Örnek |
|---|---|---|
lang | Sayfanın dilini belirtir, SEO ve erişilebilirlik açısından önemlidir. | <html lang="tr"> |
xmlns | XML ad alanını tanımlar. (Genellikle XML tabanlı belgelerde kullanılır.) | <html xmlns="http://www.w3.org/1999/xhtml"> |
Neden lang Özniteliği Kullanılmalı?
Arama motorları (Google, Bing) sayfanın hangi dilde olduğunu anlar.
Ekran okuyucular (görme engelli kullanıcılar için) doğru dilde okuma yapar.
Tarayıcılar, bazı otomatik düzeltmeler için dili referans alır.
Örneğin, sayfanın İngilizce olduğunu belirten bir <html> etiketi şöyle olur:
<html lang="en">Türkçe için ise:
<html lang="tr">d) <html> Etiketinin Doğru Kullanımı
Doğru Kullanım:
✔️ <html> etiketi, <head> ve <body> bölümlerini kapsamalıdır.
✔️ <!DOCTYPE html> bildirimi her zaman en üstte olmalıdır.
Yanlış Kullanım:
❌ <html> etiketinin içine <title> veya <meta> gibi etiketler direkt yazılmamalıdır.
❌ <html> etiketi eksik veya yanlış kapatılmamalıdır.
Örneğin, şu kullanım yanlıştır:
<html>
<title>Yanlış Kullanım</title>
<h1>Merhaba</h1>
</html>Bunun yerine <title> etiketi <head> içinde olmalıdır:
<html>
<head>
<title>Doğru Kullanım</title>
</head>
<body>
<h1>Merhaba</h1>
</body>
</html>e) <html> Etiketi Olmadan Sayfa Çalışır mı?
Modern tarayıcılar, <html> etiketi eksik olsa bile bazı durumlarda sayfayı göstermeye çalışır. Ancak standartlara uygun bir yapı olmaz ve beklenmedik hatalar oluşabilir.
Örneğin, aşağıdaki kod çalışabilir ama önerilmez:
<head>
<title>Eksik HTML</title>
</head>
<body>
<h1>Bu sayfa hatalı olabilir!</h1>
</body>Bu yüzden her zaman <html> etiketini kullanmalıyız.
<html> etiketi her HTML belgesinde olmalıdır.
Tüm içeriği kapsar ve web tarayıcıları için kritik bir rol oynar.
lang gibi öznitelikler, SEO ve erişilebilirlik için önemlidir.
HTML belgesinin doğru yapılandırılması için <html>, <head> ve <body> hiyerarşisi korunmalıdır.
2. <head> Etiketi
<head> etiketi, bir HTML belgesinin başlık (head) bölümünü tanımlar ve sayfanın tarayıcı tarafından görünen içeriğinden farklı olarak sayfanın ayarlarını ve bilgilerini içerir. Kullanıcılar bu bölümdeki içerikleri doğrudan görmezler, ancak tarayıcılar ve arama motorları buradaki bilgileri kullanarak sayfanın nasıl çalışacağını belirler.
a)<head> Etiketinin Görevi
Sayfanın meta bilgilerini içerir (örneğin, karakter seti, açıklama, anahtar kelimeler vb.).
Sayfanın başlığını (<title>) belirler.
Harici CSS dosyalarını ve stil ayarlarını içe aktarır.
Harici JavaScript dosyalarını ve kodlarını içe aktarır.
Tarayıcının ve arama motorlarının sayfayı daha iyi anlamasını sağlar.
Bir HTML belgesi içinde <head> etiketi şu şekilde kullanılır:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="description" content="Bu sayfa HTML eğitimi içindir.">
<meta name="keywords" content="HTML, öğrenme, web geliştirme">
<meta name="author" content="Web Geliştirici">
<title>HTML Eğitimi</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<h1>Merhaba Dünya!</h1>
</body>
</html>b) <head> İçinde Kullanılan Önemli Etiketler
Etiket | Görevi | Örnek |
|---|---|---|
<title> | Sayfanın başlığını belirler (tarayıcı sekmesinde görünür). | <title>Benim Web Sayfam</title> |
<meta> | Sayfanın açıklamasını, yazarını, karakter setini vb. belirler. | <meta charset="UTF-8"> |
<link> | Harici CSS dosyalarını veya favicon’u bağlar. | <link rel="stylesheet" href="styles.css"> |
<style> | Sayfaya özel CSS kuralları tanımlar. | <style> body {background-color: lightgray;} </style> |
<script> | Harici veya dahili JavaScript kodlarını içerir. | <script src="app.js"></script> |
c) <head> İçindeki Etiketlerin Detaylı Açıklaması
1) <title> Etiketi (Sayfa Başlığı)
<title>, web tarayıcısının sekmesinde görünen metni belirler ve sayfanın başlığı olarak kullanılır.
Örnek Kullanım:
<head>
<title>HTML Başlık Örneği</title>
</head>SEO açısından önemli: Google, sayfa başlıklarını indeksler ve arama sonuçlarında gösterir.
2) <meta> Etiketi (Meta Bilgileri)
<meta> etiketi, sayfanın açıklaması, dili, karakter seti ve yazar bilgileri gibi önemli meta verileri içerir.
Öznitelik | Açıklama | Örnek |
|---|---|---|
charset | Karakter setini belirler. (Türkçe için UTF-8 önerilir.) | <meta charset="UTF-8"> |
name="description" | Sayfanın açıklamasını belirler. (SEO için önemlidir.) | <meta name="description" content="HTML eğitimi hakkında bilgiler."> |
name="author" | Sayfanın yazarını belirtir. | <meta name="author" content="Tyler Durden"> |
name="viewport" | Sayfanın mobil uyumluluğunu ayarlar. | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
SEO açısından önemli:
Google gibi arama motorları, description meta etiketini kullanarak sayfanın ne hakkında olduğunu anlar.
viewport etiketi, mobil uyumluluk için çok kritiktir.
<meta charset="UTF-8">
<meta name="description" content="Bu sayfa HTML eğitimi içindir.">
<meta name="author" content="Web Geliştirici">
<meta name="viewport" content="width=device-width, initial-scale=1.0">3) <link> Etiketi (Harici Kaynak Bağlantıları)
Harici CSS dosyalarını, favicon’u veya başka dosyaları bağlamak için kullanılır.
Örnek Kullanım:
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">Neden Kullanılır?
<link> etiketi sayesinde CSS dosyaları HTML’den ayrılarak düzenli bir yapı oluşturulur.
rel="icon" ile tarayıcı sekmesinde görünen favicon belirlenebilir.
4) <style> Etiketi (Dahili CSS)
Harici CSS yerine HTML içinde stiller tanımlamak için kullanılır. Genellikle <link> etiketi ile harici CSS kullanmak önerilir.
<style>
body {
background-color: lightgray;
}
h1 {
color: blue;
}
</style>Dikkat:
Büyük projelerde önerilmez, çünkü CSS kodlarını HTML içinde saklamak kodun düzenini bozar.
Bunun yerine harici CSS dosyaları kullanmak daha iyi bir yöntemdir.
5) <script> Etiketi (JavaScript Kodları)
JavaScript kodlarını dahili veya harici olarak eklemek için kullanılır.
Harici Kullanım:
<script src="app.js"></script>Dahili Kullanım:
<script>
alert("Merhaba, dünya!");
</script>Dikkat:
JavaScript dosyalarını <body> sonunda eklemek önerilir, böylece sayfa içeriği daha hızlı yüklenir.
<script> etiketi <head> içinde de kullanılabilir, ancak defer veya async eklenmelidir.
Örneğin, defer kullanımı:
<script src="app.js" defer></script>d) <head> Bölümü Olmazsa Ne Olur?
Eğer <head> etiketi kullanılmazsa:
Sayfanın başlığı "Untitled Document" (İsimsiz Sayfa) olarak görünür.
Meta bilgiler eksik olur, bu da SEO açısından büyük bir eksikliktir.
CSS ve JavaScript dosyaları düzgün çalışmayabilir.
Örneğin, <head> etiketi eksik olan bir sayfa şu şekilde olabilir:
<html>
<title>Eksik Head</title>
<body>
<h1>Bu sayfa hatalı olabilir!</h1>
</body>
</html>Bu şekilde kullanmak yanlıştır. <title> etiketi her zaman <head> içinde olmalıdır.
<head> etiketi, tarayıcı ve arama motorları için kritik bilgiler içerir.
<title>, <meta>, <link>, <style> ve <script> gibi önemli etiketler burada yer alır.
SEO, erişilebilirlik ve mobil uyumluluk açısından büyük bir öneme sahiptir.
Sayfanın düzgün çalışması için eksiksiz bir <head> bölümü kullanılmalıdır.
3. <body> Etiketi
<body> etiketi, bir HTML belgesinin görünür içeriğini barındıran ana etikettir. Kullanıcıların tarayıcıda gördüğü tüm içerikler—metinler, görseller, videolar, bağlantılar, tablolar, butonlar ve formlar—bu etiketin içinde bulunur.
a) <body> Etiketinin Görevi
Sayfanın ana içeriğini tutar.
Kullanıcının doğrudan görebildiği ve etkileşime geçebildiği her şeyi içerir.
<head> etiketi sayfanın arka plan bilgilerini barındırırken, <body> etiketi asıl içeriği oluşturur.
Önemli Not:
Bir HTML belgesinde yalnızca bir adet <body> etiketi bulunmalıdır. Aksi takdirde tarayıcılar sayfayı düzgün bir şekilde görüntüleyemez.
b) <body> Etiketinin Genel Kullanımı
Bir HTML belgesi içinde <body> etiketi şu şekilde kullanılır:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>HTML Body Etiketi</title>
</head>
<body>
<h1>Merhaba, Dünya!</h1>
<p>Bu, HTML’de bir paragraf etiketidir.</p>
<img src="gorsel.jpg" alt="Bir resim">
<a href="https://www.example.com">Buraya tıklayın</a>
</body>
</html>Yukarıdaki kodda <body> etiketinin içinde bulunanlar:
Başlık (<h1>) → Sayfa başlığını belirler.
Paragraf (<p>) → Metin eklemek için kullanılır.
Görsel (<img>) → Sayfaya resim ekler.
Bağlantı (<a>) → Başka bir sayfaya yönlendiren bağlantı oluşturur.
c) <body> İçinde Kullanılan Temel HTML Etiketleri
Etiket | Kullanım | Örnek |
|---|---|---|
<h1> - <h6> | Başlık ekler (h1 en büyük, h6 en küçük) | <h1>Başlık</h1> |
<p> | Paragraf oluşturur | <p>Bu bir paragraftır.</p> |
<img> | Sayfaya görsel ekler | <img src="resim.jpg" alt="Açıklama"> |
<a> | Bağlantı (link) oluşturur | <a href="https://www.example.com">Siteye Git</a> |
<ul>, <ol>, <li> | Liste oluşturur | <ul><li>Madde 1</li></ul> |
<table> | Tablo ekler | <table><tr><td>Veri</td></tr></table> |
<button> | Buton ekler | <button>Tıkla</button> |
<form> | Form alanları ekler | <form><input type="text"></form> |
<video> | Video ekler | <video controls><source src="video.mp4"></video> |
Not: <body> etiketinin içinde herhangi bir HTML etiketini kullanabilirsiniz, ancak yapıyı düzenli tutmak için içerikleri anlamlı bir şekilde yerleştirmek önemlidir.
d)<body> Etiketinin Özellikleri (Attributes)
<body> etiketi, bazı ek özellikler (attributes) ile özelleştirilebilir. Ancak günümüzde CSS kullanımı önerildiği için HTML’deki eski özellikler (örneğin, bgcolor, text, link) artık tercih edilmez.
Örneğin, eski HTML’de arka plan rengini belirlemek için şu kod kullanılırdı:
<body bgcolor="lightblue">Bu yöntem eski HTML sürümlerinde kullanılıyordu, ancak günümüzde CSS kullanılarak daha esnek bir şekilde uygulanır:
<body style="background-color: lightblue;">Bazı Yaygın <body> Özellikleri:
Özellik | Görevi | Günümüzde Kullanımı |
|---|---|---|
background | Arka plan resmi ekler (eski yöntem) | CSS ile: background-image: url('resim.jpg'); |
bgcolor | Arka plan rengini belirler (eski yöntem) | CSS ile: background-color: red; |
text | Tüm metin rengini belirler (eski yöntem) | CSS ile: color: black; |
link | Bağlantı rengini belirler (eski yöntem) | CSS ile: a { color: blue; } |
Modern web tasarımında CSS kullanıldığı için yukarıdaki özellikler artık kullanılmamalıdır.
e) <body> İçinde Sayfa Düzeni Nasıl Oluşturulur?
Web sayfasının düzenini belirlemek için <div> ve <section> gibi yapısal etiketler kullanılır:
<body>
<header>
<h1>Başlık</h1>
</header>
<nav>
<a href="index.html">Anasayfa</a>
<a href="hakkimizda.html">Hakkımızda</a>
</nav>
<section>
<h2>Hakkımızda</h2>
<p>Biz bir web geliştirme şirketiyiz.</p>
</section>
<footer>
<p>Telif Hakkı © 2025</p>
</footer>
</body>Buradaki önemli yapılar:
<header> → Sayfanın üst kısmında başlık ve logo gibi bilgileri içerir.
<nav> → Navigasyon menüsü için kullanılır.
<section> → Sayfa içeriğini bölümlere ayırmak için kullanılır.
<footer> → Sayfanın alt kısmında iletişim bilgileri veya telif hakkı gibi bilgiler bulunur.
Modern HTML’de <table> ile sayfa düzeni oluşturmak yerine bu semantik etiketleri kullanmak daha doğrudur.
f) <body> Olmazsa Ne Olur?
Eğer <body> etiketi kullanılmazsa, HTML belgesi geçersiz olur.
Tarayıcı içeriği rastgele şekilde gösterebilir ve bazı öğeleri düzgün görüntüleyemeyebilir.
Arama motorları ve ekran okuyucular sayfanın içeriğini anlamakta zorlanır.
Örneğin, aşağıdaki kod hatalı bir HTML yapısıdır:
<html>
<h1>Başlık</h1>
<p>Bu bir paragraf.</p>
</html>Doğru kullanım: <h1> ve <p> etiketleri mutlaka <body> içinde olmalıdır:
<html>
<head>
<title>Doğru Kullanım</title>
</head>
<body>
<h1>Başlık</h1>
<p>Bu bir paragraf.</p>
</body>
</html><body> etiketi sayfanın görünen içeriğini içerir.
Başlıklar, metinler, görseller, videolar, bağlantılar ve formlar gibi tüm öğeler bu etiketin içinde olmalıdır.
Sayfa düzeni için <div>, <section>, <header>, <footer> gibi semantik HTML etiketleri kullanılmalıdır.
CSS kullanılarak <body> etiketi özelleştirilebilir.
4. Başlık Etiketleri (<h1> - <h6>)
Başlık etiketleri (<h1> - <h6>) bir HTML belgesinde metinleri hiyerarşik olarak yapılandırmak için kullanılır. Başlıklar, sayfa içeriğini bölümlere ayırarak okunabilirliği artırır ve SEO (Arama Motoru Optimizasyonu) açısından büyük önem taşır.
a) Başlık Etiketlerinin Genel Özellikleri
Altı farklı başlık seviyesi vardır:
<h1> → En büyük ve en önemli başlıktır.
<h6> → En küçük başlıktır.
Başlıklar sayfa düzenini belirlemeye yardımcı olur:
Kullanıcılar için okunabilirliği artırır.
Arama motorları başlıkları tarayarak sayfanın ana konusunu belirler.
Başlıklar otomatik olarak kalın ve büyük yazı tipine sahiptir:
<h1> etiketi en büyük yazı boyutuna sahiptir.
<h6> etiketi en küçük başlık olarak görünür.
Önemli Not: HTML’de <h1> etiketi genellikle yalnızca bir kez kullanılmalıdır, çünkü bu etiket sayfanın ana başlığını temsil eder. Ancak <h2>, <h3>, <h4>, <h5> ve <h6> başlıkları gerektiği kadar kullanılabilir.
b) Başlık Etiketlerinin Kullanımı
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Başlık Etiketleri</title>
</head>
<body>
<h1>Bu bir H1 başlığıdır</h1>
<h2>Bu bir H2 başlığıdır</h2>
<h3>Bu bir H3 başlığıdır</h3>
<h4>Bu bir H4 başlığıdır</h4>
<h5>Bu bir H5 başlığıdır</h5>
<h6>Bu bir H6 başlığıdır</h6>
</body>
</html>Çıktıdaki Görünüm:
<h1> en büyük ve en belirgin başlıktır.
<h2> biraz daha küçüktür, ancak hala önemlidir.
<h3>, <h4>, <h5> ve <h6> giderek küçülür ve daha az vurgulu hale gelir.
c) <h1> - <h6> Etiketlerinin Kullanım Alanları
Başlık Seviyesi | Kullanım Amacı | |
|---|---|---|
<h1> | Sayfanın ana başlığı (Genellikle sadece bir kez kullanılır) | |
<h2> | Sayfanın ana bölümlerinin başlığı | |
<h3> | Alt bölümler veya önemli içerik başlıkları | |
<h4> | Daha küçük alt başlıklar | |
<h5> | Daha detaylı veya küçük bölümler için | |
<h6> | En küçük ve en az önemli başlık |
SEO İpucu:
<h1> etiketi sayfanın ana konusunu belirttiği için anahtar kelimeler içermelidir.
Başlıklar sıralı kullanılmalıdır, yani <h1>'den sonra doğrudan <h3> kullanmak yerine <h2> eklemek daha iyidir.
Kullanıcı deneyimi açısından okunaklı ve anlamlı başlıklar tercih edilmelidir.
d) <h1> - <h6> İçinde HTML Öğeleri Kullanılabilir mi?
Evet! Başlık etiketleri içinde farklı HTML öğeleri kullanılabilir. Örneğin, <strong>, <em>, <span> veya <a> etiketlerini ekleyebilirsiniz:
<h1><strong>Önemli:</strong> Başlık Kullanımı</h1>
<h2>Bu başlık içinde <em>italik</em> bir kelime var</h2>
<h3>Burada bir <a href="#">bağlantı</a> bulunuyor</h3>
e) <h1> - <h6> Olmazsa Ne Olur?
Eğer HTML belgesinde başlık etiketleri kullanılmazsa:
Sayfa düzensiz ve okunaksız olur.
Arama motorları sayfanın konusunu anlamakta zorlanır.
Kullanıcılar bilgiyi hızlıca tarayamaz ve içerikte kaybolabilir.
İyi bir HTML yapısı için başlıklar mutlaka kullanılmalıdır!
<h1> en büyük, <h6> en küçük başlıktır.
Sayfa düzenini oluşturmak ve SEO için başlıklar önemlidir.
Başlıklar sıralı ve anlamlı bir şekilde kullanılmalıdır.
CSS ile başlıkların görünümü özelleştirilebilir.
5. Paragraf ve Metin Etiketleri (<p>, <br>, <hr>)
HTML’de metinleri düzenlemek ve sayfa içinde okunaklı bir yapı oluşturmak için kullanılan temel etiketler <p>, <br>, ve <hr> etiketleridir.
Bu etiketler, metinleri paragraflara ayırmak, satır atlamak ve görsel olarak içeriği bölmek için kullanılır.
a) Paragraf (<p>) Etiketi
<p> etiketi, HTML'de metinleri paragraflar halinde düzenlemek için kullanılır.
Her <p> etiketi, kendi içinde bir blok oluşturur ve diğer öğelerden otomatik olarak boşluk (margin) ile ayrılır.
Tarayıcılar, <p> etiketini kullanarak metinlerin arasına otomatik olarak boşluk ekler, böylece okunabilirliği artırır.
<p>Bu bir paragraf etiketidir ve uzun metinleri düzenlemek için kullanılır.</p>
<p>İkinci bir paragraf oluşturduğumuzda, tarayıcı bunu otomatik olarak bir alt satıra alır.</p>Çıktı:
Paragraf etiketleri içerisine metin, bağlantı ve diğer satır içi (inline) öğeler eklenebilir.
<p>Bu paragrafın içinde bir <strong>kalın metin</strong> ve bir <a href="#">bağlantı</a> var.</p>b) Satır Başı (<br>) Etiketi
<br> etiketi, metin içinde manuel olarak satır atlamak için kullanılır.
Tek başına bir etiket olduğu için kapanış etiketi yoktur.
Paragraf içinde veya herhangi bir metin bloğunda kullanılabilir.
<p>Bu birinci satırdır.<br>Bu ikinci satırdır.<br>Bu üçüncü satırdır.</p>Çıktı:
Ne zaman <br> kullanılır?
Adres yazarken:
<p>Örnek Adres:<br>İstiklal Caddesi No:5<br>İstanbul, Türkiye</p>Şiir gibi özel formatlanmış metinlerde:
<p>Yaşamak şakaya gelmez,<br>büyük bir ciddiyetle yaşayacaksın<br>bir sincap gibi mesela,</p>Önemli Not: <br> etiketi sadece gerektiğinde kullanılmalıdır. Normal paragraflar arasında satır boşluğu oluşturmak için <p> etiketi kullanmak daha iyidir.
c) Yatay Çizgi (<hr>) Etiketi
<hr> etiketi, sayfa içinde görsel bir ayrım oluşturmak için kullanılan yatay bir çizgidir.
Tek başına bir etiket olduğu için kapanış etiketi yoktur.
Genellikle içerik bölümlerini ayırmak için kullanılır.
<p>Bu birinci paragraftır.</p>
<hr>
<p>Bu ikinci paragraftır ve bir yatay çizgiyle ayrılmıştır.</p>Çıktı:
Ne zaman <hr> kullanılır?
Konular arasında ayırıcı çizgi oluşturmak için
Bir bölümün başlangıcı veya sonunu belirtmek için
SEO Açısından Öneriler:
Paragraflar çok uzun olmamalıdır, okunabilirlik için bölümlere ayrılmalıdır.
<br> gereksiz yere fazla kullanılmamalıdır, bunun yerine CSS ile boşluklar verilmelidir.
<hr> kullanırken çok sık kullanmamaya dikkat edin, sayfanın aşırı bölünmemesi için.
6. Bölüm Etiketleri (<header>, <nav>, <section>, <article>, <aside>, <footer>)
HTML'de bölüm etiketleri (semantic tags), sayfanın düzenli ve anlaşılır olmasını sağlamak için kullanılır. Bu etiketler, içeriğin anlamını ve yapısını belirleyerek hem tarayıcıların hem de arama motorlarının sayfayı daha iyi anlamasına yardımcı olur.
Neden Bölüm Etiketleri Kullanmalıyız?
Kodun daha okunaklı olmasını sağlar.
SEO (Arama Motoru Optimizasyonu) açısından avantajlıdır.
Erişilebilirliği artırır (örneğin ekran okuyucular için).
CSS ile düzenlemeyi kolaylaştırır.
a) <header> – Başlık Bölümü
Sayfanın veya bir bölümün başlık kısmını tanımlar.
Genellikle logo, başlık, menü ve giriş bilgileri içerir.
Sayfanın tamamı için veya her bölümün kendi başlığı olacak şekilde kullanılabilir.
<header>
<h1>Web Sitemin Başlığı</h1>
<p>Hoş geldiniz! En iyi içerikler burada.</p>
</header>b) <nav> – Navigasyon Menüsü
Gezinme (navigasyon) bağlantılarını içerir.
Genellikle menüler ve site içi bağlantılar için kullanılır.
<nav>
<ul>
<li><a href="index.html">Ana Sayfa</a></li>
<li><a href="hakkimizda.html">Hakkımızda</a></li>
<li><a href="iletisim.html">İletişim</a></li>
</ul>
</nav>Ne zaman <nav> kullanılır?
Ana menü ve alt menüler için
Sayfa içi bağlantılar için (örneğin, içindekiler kısmı)
c) <section> – İçerik Bölümü
Bir içeriği mantıklı bölümlere ayırmak için kullanılır.
Ana konular veya bölümler halinde gruplandırılan içerikler için uygundur.
Genellikle bir başlık (<h2>, <h3>, vb.) ile kullanılır.
<section>
<h2>Hizmetlerimiz</h2>
<p>Web tasarım, SEO ve dijital pazarlama hizmetleri sunuyoruz.</p>
</section>Ne zaman <section> kullanılır?
Ana içerik bölümlerini ayırmak için
Blog yazılarında farklı konular arasında ayrım yapmak için
d) <article> – Bağımsız İçerik
Kendi başına anlamlı olan içerikler için kullanılır.
Genellikle blog yazıları, haber makaleleri veya ürün tanıtımları gibi bağımsız içerikleri kapsar.
<article>
<h2>HTML Nedir?</h2>
<p>HTML, web sayfalarını oluşturmak için kullanılan bir işaretleme dilidir.</p>
</article>Ne zaman <article> kullanılır?
Blog yazıları, haberler, makaleler
Bir ürün tanıtım sayfasında her ürün için ayrı bir alan oluşturmak için
e) <aside> – Yan İçerik Bölümü
Ana içeriğe ek bilgiler sağlamak için kullanılır.
Genellikle reklamlar, yazar hakkında bilgiler, ilgili içerikler veya ek açıklamalar içerir.
<aside>
<h3>Yazar Hakkında</h3>
<p>Bu makale, Ahmet Yılmaz tarafından yazılmıştır.</p>
</aside>Ne zaman <aside> kullanılır?
Yan menüler ve reklam alanları için
Ana içerikle bağlantılı ek bilgiler göstermek için
f) <footer> – Sayfa Altbilgisi
Sayfanın veya bir bölümün alt kısmını tanımlar.
Genellikle iletişim bilgileri, telif hakkı bilgileri ve sosyal medya bağlantıları içerir.
<footer>
<p>© 2025 Tüm Hakları Saklıdır.</p>
<p><a href="iletisim.html">İletişim</a></p>
</footer>Ne zaman <footer> kullanılır?
Sayfanın en altında iletişim ve telif hakkı bilgileri için
Makale veya blog yazılarının altında yazar bilgisi eklemek için
g) Bölüm Etiketlerini Kullanarak Tam Sayfa Örneği
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Sitem</title>
</head>
<body>
<header>
<h1>Benim Web Sitem</h1>
<p>Hoş geldiniz! En güncel içerikler burada.</p>
</header>
<nav>
<ul>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>
<section>
<h2>Son Blog Yazılarımız</h2>
<article>
<h3>HTML Nedir?</h3>
<p>HTML, web sayfalarını oluşturan temel işaretleme dilidir.</p>
</article>
<article>
<h3>CSS Nedir?</h3>
<p>CSS, web sayfalarını stilize etmek için kullanılır.</p>
</article>
</section>
<aside>
<h3>Popüler Yazılar</h3>
<ul>
<li><a href="#">HTML Temelleri</a></li>
<li><a href="#">CSS ile Tasarım</a></li>
</ul>
</aside>
<footer>
<p>© 2025 Benim Web Sitem - Tüm Hakları Saklıdır.</p>
</footer>
</body>
</html>
Bu yapıda:
<header> → Sayfanın başlığı
<nav> → Ana menü
<section> → İçerik bölümü
<article> → Her blog yazısı
<aside> → Yan içerikler (örneğin popüler yazılar)
<footer> → Altbilgi kullanıldı.
Bölüm etiketleri, sayfanın mantıklı ve düzenli olmasını sağlar.
SEO ve erişilebilirlik açısından büyük avantajlar sunar.
CSS ile kolayca şekillendirilebilir.
Sonuç
HTML’in yapısal etiketleri, bir web sayfasının temel iskeletini oluşturur ve sayfanın düzenli, anlaşılır ve erişilebilir olmasını sağlar. Başlangıçta HTML yalnızca içerikleri sunmak için kullanılan basit bir işaretleme dili olarak görülse de, zamanla semantik ve yapısal özellikleriyle gelişmiş, modern web standartlarının temelini atmıştır.
Bu yazıda, HTML’in temel yapısal etiketlerine odaklandık ve bir web sayfasını mantıklı bir şekilde bölümlere ayırmanın önemini vurguladık. <header>, <nav>, <section>, <article>, <aside>, <footer> gibi semantik etiketler sayesinde web sayfalarımız yalnızca görsel olarak değil, aynı zamanda arama motorları ve erişilebilirlik araçları tarafından daha iyi anlaşılır hale gelir.
Peki, HTML’de yapısal etiketleri doğru kullanmanın avantajları nelerdir?
Anlamlı ve Düzenli Kod: Sayfanın içeriği, geliştiriciler ve arama motorları tarafından daha iyi analiz edilir.
SEO Optimizasyonu: Semantik HTML kullanımı, arama motorlarının sayfanın içeriğini doğru bir şekilde indekslemesini sağlar ve sıralamaya olumlu katkıda bulunur.
Erişilebilirlik (Accessibility - A11Y): Engelli kullanıcılar için ekran okuyucular ve diğer yardımcı teknolojiler, içeriği daha doğru yorumlar.
Kolay Bakım ve Güncelleme: Web sitesi büyüdükçe düzenli bir yapı korunur ve içerik yönetimi daha kolay hale gelir.
Tarayıcı Uyumluluğu: Tüm modern tarayıcılar, semantik HTML etiketlerini destekler ve sayfaları daha uyumlu hale getirir.
Web geliştiriciliğine yeni başlayanlar için HTML’in yalnızca görsel bir düzenleme aracı olmadığını, aynı zamanda web standartlarını ve kullanıcı deneyimini geliştiren güçlü bir yapı olduğunu unutmamak gerekir. HTML, CSS ve JavaScript ile birleştiğinde, hem görsel olarak etkileyici hem de işlevsel web siteleri oluşturmak mümkündür.
Bu noktada, öğrendiğimiz yapısal HTML etiketlerini kendi projelerimizde uygulamak önemlidir. HTML’i daha etkili kullanabilmek için şunları yapabilirsiniz:
Kod pratiği yapın: Örnek sayfalar oluşturup yapısal etiketleri deneyerek öğrendiklerinizi pekiştirin.
Semantik HTML’i öğrenmeye devam edin: <header>, <footer> gibi etiketlerin yanı sıra <figure>, <figcaption>, <time> gibi daha az bilinen semantik etiketleri de keşfedin.
Erişilebilirlik (A11Y) kurallarına dikkat edin: Sayfanızın herkes için erişilebilir olmasını sağlamak için HTML’in sunduğu avantajlardan yararlanın.
Modern web teknolojileriyle birlikte kullanın: HTML’i CSS Grid, Flexbox ve JavaScript ile birleştirerek güçlü ve kullanıcı dostu arayüzler geliştirin.
Son olarak, HTML öğrenmek bir başlangıçtır; ancak sürekli gelişen web dünyasında en iyi uygulamaları takip etmek ve güncel teknolojileri öğrenmek büyük önem taşır. Web geliştirme yolculuğunuzda sağlam bir temel oluşturmak için yapısal HTML etiketlerini doğru şekilde kullanmayı alışkanlık haline getirin. Böylece, hem kendi projelerinizde temiz ve düzenli bir kod yapısı oluşturabilir hem de profesyonel bir web geliştirici olma yolunda önemli bir adım atabilirsiniz.
Etiketler:html