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ümler halinde düzenlemek için kullanılır.
<section> etiketi, bir belgedeki bölümleri; örneğin bölümleri, üst bilgileri, alt bilgileri veya belgenin diğer bölümlerini tanımlar. İlgili içeriği birlikte gruplandırmanın bir yoludur. Örneğin, bir sayfayı giriş, içerik ve iletişim bilgileri olarak bölmek için <section> kullanabilirsiniz.
<section> etiketini şöyle kullanabilirsin:
<section>
<h2>Section Heading</h2>
<p>Section content goes here.</p>
</section><article> etiketi bağımsız, kendi kendine yeterli içeriği belirtir. Kendi başına anlamlı olmalı ve web sitesinin geri kalanından bağımsız olarak okunabilmelidir. Bir <article> öğesinin kullanılabileceği yerlere örnekler: forum gönderisi, blog yazısı, haber veya yorum.
<article> etiketini nasıl kullanabileceğin aşağıda gösterilmiştir:
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>Görev
KolayBir web sayfasını yapılandırmak için <section> ve <article> etiketlerini kullanan bir HTML belgesi oluştur. Aşağıdaki bölümleri ekle:
- Sayfanın ana içeriğini barındıracak bir
<main>bölümü. <main>içinde, "Upcoming Events" yazan bir başlığa (<h2>) sahip bir<section>oluştur.<section>içinde iki<article>öğesi oluştur.- Her
<article>bir başlığa (<h3>) ve bazı örnek metinler içeren 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..." ifadelerini kullan.
Kendin dene
<!DOCTYPE html>
<html>
<body>
<!-- Kodu buraya yaz -->
</body>
</html>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
1HTML Temelleri
HTML Nedir?HTML'in Temel YapısıEtiketler ve Elementlerİç İçe Geçirme ve Kapatma EtiketleriHTML'de Yorumlar7Kişisel Profil Sayfası
Projeye Genel BakışHeader Bölümü2Metin ve Biçimlendirme
BaşlıklarParagraflarSatır SonlarıKalın ve İtalik MetinYeniden Kalın ve İtalikÖzet - Biçimlendirme8Formlar ve Inputlar Bölüm 1
Form TemelleriMetin InputlarıInput ÖznitelikleriŞifre AlanıInputlar için EtiketlerÖzet - Temel Form11Etkinlik Kayıt Sayfası
Projeye Genel BakışHeader Bölümü9Formlar ve Girdiler Bölüm 2
Radyo DüğmeleriOnay KutularıAçılır MenülerButonlarFormlardaki ButonlarÖzet - Formlar #1Özet - Formlar #212Final Meydan Okumaları
Basit Profil KartıEtkinlik Davetiye KartıBasit Makale SayfasıFavori Kitaplar ListesiKendi başına pratik yap: Web playground