Web Geliştirme
85 ~25 dk
Semantik HTML ve Sayfa Yapısı
Semantik HTML Nedir?
Semantik etiketler, içeriğin anlamını belirtir. Tarayıcılar, arama motorları ve ekran okuyucular sayfa yapısını daha iyi anlar.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Okul Web Sitesi</title>
</head>
<body>
<header>
<nav>
<a href="/">Ana Sayfa</a>
<a href="/hakkimizda">Hakkımızda</a>
<a href="/iletisim">İletişim</a>
</nav>
</header>
<main>
<section>
<h1>Okulumuz</h1>
<p>Okulumuz 2005 yılında kurulmuştur.</p>
</section>
<section>
<h2>Son Haberler</h2>
<article>
<h3>Bilişim Olimpiyatı Başarısı</h3>
<time datetime="2026-04-15">15 Nisan 2026</time>
<p>Öğrencilerimiz yarışmada birincilik elde etti.</p>
</article>
</section>
<aside>
<h3>Duyurular</h3>
<p>Yaz okulu kayıtları başladı.</p>
</aside>
</main>
<footer>
<p>© 2026 Okul Adı. Tüm hakları saklıdır.</p>
</footer>
</body>
</html>Semantik Etiketlerin Görevleri
| Etiket | Görevi |
|---|---|
<header> | Sayfa veya bölüm üst bilgisi |
<nav> | Navigasyon bağlantıları |
<main> | Ana içerik alanı (sayfa başına 1 tane) |
<section> | Tematik içerik bölümü |
<article> | Bağımsız içerik (haber, blog yazısı) |
<aside> | Yan içerik (duyurular, reklamlar) |
<footer> | Sayfa veya bölüm alt bilgisi |
🎯 Uygulama
- Okulunuzun web sitesini semantik etiketler kullanarak yapılandırın
- Kişisel blog sayfası oluşturun (header, nav, main içinde article'lar, aside, footer)