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.
Görev
KolaySemantik 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>
- film adını içeren
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>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 Listesi