Menu
Coddy logo textTech

Section ve Article Etiketleri

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

HTML'de, <section> ve <article> etiketleri içeriği mantıksal bölümlere ayırmak için kullanılır.

<section> etiketi; bölümler, üst bilgiler, alt bilgiler veya belgenin diğer bölümleri gibi bir belgedeki bir bölümü tanımlar. İlgili içeriği bir araya getirmenin bir yoludur. Örneğin, bir sayfayı giriş, içerik ve iletişim bilgileri olarak ayırmak için <section> etiketini kullanabilirsiniz.

İşte <section> etiketini şu şekilde kullanabilirsiniz:

<section>
	<h2>Section Heading</h2>
	<p>Section content goes here.</p>
</section>

<article> etiketi bağımsız, kendi kendine yeten içeriği belirtir. Kendi başına bir anlam ifade etmeli ve web sitesinin geri kalanından bağımsız olarak okunabilmelidir. Bir <article> öğesinin kullanılabileceği yerlere örnekler: bir forum gönderisi, bir blog girişi, bir haber hikayesi veya bir yorum.

İşte <article> etiketini şu şekilde kullanabilirsiniz:

<article>
	<h2>Article Title</h2>
	<p>Article content goes here.</p>
</article>
challenge icon

Görev

Kolay

Bir web sayfasını yapılandırmak için <section> ve <article> etiketlerini kullanan bir HTML belgesi oluşturun. Aşağıdaki bölümleri ekleyin:

  1. Sayfanın ana içeriğini tutmak için bir <main> bölümü.
  2. <main> içinde, "Upcoming Events" diyen bir başlığa (<h2>) sahip bir <section> oluşturun.
  3. <section> içinde, iki adet <article> öğesi oluşturun.
  4. Her bir <article> bir başlığa (<h3>) ve bir paragrafa (<p>) sahip olmalıdır. Başlıklar için "Event 1" ve "Event 2", paragraflar için ise "Event 1 details..." ve "Event 2 details..." kullanın.

Kopya kağıdı

<section> etiketi, ilgili içeriği bir araya getirmek için bir belgedeki bir bölümü tanımlar:

<section>
	<h2>Section Heading</h2>
	<p>Section content goes here.</p>
</section>

<article> etiketi, kendi başına anlam ifade etmesi gereken bağımsız, kendi kendine yeten içeriği belirtir:

<article>
	<h2>Article Title</h2>
	<p>Article content goes here.</p>
</article>

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