Menu
Coddy logo textTech

Semantik Etiketler

Coddy'nin HTML Journey'sinin Fundamentals bölümünün bir parçası — ders 27 / 60.

HTML'deki semantik etiketler, içeriğin anlamını tanımlamaya yardımcı olarak kodu hem geliştiriciler hem de tarayıcılar için daha net hale getirir. <div> ve <span> etiketlerinin aksine, çevreledikleri içeriğe bağlam kazandırırlar.

Yaygın Semantik Etiketler:

  • <header> – Giriş içeriği, genellikle en üstte bulunur.
  • <nav> – Navigasyon bağlantılarını içerir.
  • <main> – Sayfanın ana içeriği.
  • <article> – Blog yazısı gibi bağımsız bir parça.
  • <section> – İlişkili içeriği gruplandırır, genellikle bir başlık içerir.
  • <footer> – Telif hakkı veya iletişim bilgileri gibi bilgilerin bulunduğu alt bölümdür.
<header>
	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</nav>
</header>
<main>
	<article>
		<h2>Article Title</h2>
		<p>Article content goes here.</p>
	</article>
</main>
<footer>
	<p>Copyright 2023</p>
</footer>

Bu yapı, içerik için net ve anlamlı bir düzen sağlar.

challenge icon

Görev

Kolay

Semantik HTML kullanarak bir film inceleme sayfası oluşturun. Şunları içermelidir:

1. Şunları içeren <header>:

  • <h1> "Movie Reviews"
  • <nav> şu bağlantıları içeren: "Home", "Reviews", “Top Picks”

2. Şunları içeren <main>:

  • şunları içeren bir inceleme için <article>:
    • film adını içeren <h2>
    • kısa bir inceleme içeren <p>

3. Şunları içeren <footer>:

  • <p> "Copyright 2023 Movie Reviews"

Kopya kağıdı

HTML'deki semantik etiketler, içeriğin anlamını tanımlamaya yardımcı olarak kodu hem geliştiriciler hem de tarayıcılar için daha net hale getirir. <div> ve <span> etiketlerinin aksine, kapsanan içeriğe bağlam kazandırırlar.

Yaygın Semantik Etiketler:

  • <header> – Genellikle en üstte yer alan tanıtıcı içerik.
  • <nav> – Gezinme bağlantılarını içerir.
  • <main> – Sayfanın ana içeriği.
  • <article> – Blog yazısı gibi kendi başına anlamlı bir parça.
  • <section> – Genellikle bir başlığı olan, ilgili içerikleri gruplandırır.
  • <footer> – Telif hakkı veya iletişim bilgileri gibi bilgilerin bulunduğu alt bölüm.
<header>
	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</nav>
</header>
<main>
	<article>
		<h2>Article Title</h2>
		<p>Article content goes here.</p>
	</article>
</main>
<footer>
	<p>Copyright 2023</p>
</footer>

Kendin dene

<!DOCTYPE html>
<html>
    <body>
        <!-- Kodunuzu buraya yazın -->
    </body>
</html>
quiz iconKendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

Fundamentals bölümündeki tüm dersler